분류 전체보기 (32) 썸네일형 리스트형 [새싹 프론트엔드] 인터페이스 interface 인터페이스는 자바스크립트 코드로 컴파일되지않는다. user: object; 를 사용하여 우리가 객체안에 key값을 찾는것처럼 user.name을 console.log에 찍어보면 user.name은 없는 속성이라고 나온다. object에는 name이 없기때문이다. interface를 사용하여 중복된값 타입지정하기 인터페이스 선택속성 ? interface를 사용할땐 interface안에 있는 모든 key값을 사용하여 작성해야한다. 이때 일부객체는 몇몇개의 프로퍼티를 작성하지않아도 될때 선택속성 ? 물음표를 사용한다. readonly const와 비슷하게 한번 초기화된 값은 바꿀 수 없게 지정한다. 여러개의 KEY값을 주고 싶을떄 [ ] 대괄호 아래코드에서 필요한 모든 key값을 대괄호 없이 입력하게되면 1?.. [새싹 프론트엔드] 동기 비동기 자바스크립트는 싱글쓰레드로 작동하는 언어이다. 하나의 작업이 완료되야 다음작업을 실행하는 것이 싱글쓰레드방식이며 동기방식이다. 싱글쓰레드,동기방식의 단점을 극복하고자하는것이 비동기 방식이다. 동기방식처럼 하나의 작업이 끝난 후 다음작업이 시작되는것이 아니라 , 동시에 다른작업을 실행시키는것이 비동기 방식이다. 학습리스트 동기방식 비동기방식 async await 동기방식 비동기방식 비동기 동기의 실행순서 console.log 내용 async부모, await자식 두개의 키워드는 부모자식 관계이며 반드시 같이 작성해야한다.(ul>li 와 같다.) await은 앞에 있는 값을 기다렸다가 값이 리턴되면 일을 시작하는 키워드가 비동기식 코드를사용하면 실행함수가 값을 리턴하기 전에 다음 코드가 실행이 되서 undef.. [새싹 프론트엔드]Typescript 기본문법 매개변수 자리에선 에러가 나진않지만 함수구현부에 값이 이상해질 수 있다. 예) "1" + "1" = 2가아닌 11 타입스크립트를 사용하면 글자와 넘버를 설정할 수 있다. number자리에 string이 오면 에러를 발생시켜준다. TS는 컴파일 과정이 필요하다. TS-> JS로 컴파일 과정을 거친후 브라우저가 이해할 수 있다. 설정한 type과 다른 type값을 넣을 경우 에러발생 튜플 (Tuple) 배열안에 서로 다른 type을 지정할 수 있다. number,string에 사용하는 메소드()들도 해당 type에서만 사용할 수 있다. 타입추론은 파일 명이 tsx일때만 발생한다. 타입추론이 발생한 경우 변수의 타입은 타입추론이 발생한 값으로 고정이 된다. 자주사용하게 되면 TS를 사용하는 의미가 희미해짐으로.. 2022-12-07 [새싹 프론트엔드] useState 객체로 값 받아오기 input, textarea의 자료형이같고 onChange,e.target.value 를 가지고 있다. 이렇게 동작이 비슷한 useState는 하나의 useState로 묶을수 있으며 이럴땐 값을 객체형식으로 받아오면 된다. 아래코드는 두개의 user입력값을 받고 두개의 useState를 사용했을때의 코드이다. import React from "react"; import { useState } from "react"; const DiaryEditor = () => { const [author, setAuthor] = useState(""); const [content, setContent] = useState(""); // input, textarea의 자료형이같고 onChange,e.target.valu.. 2022-12-05 [새싹 프론트엔드] 리액트 라우터 router https://reactrouter.com/en/main Home v6.4.4 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com Router는 설치가 필요하다! $ npm install react-router-dom import React from "react"; import { createBrowserRouter, RouterProvider } from.. 2022-12-03 [새싹 프론트엔드]useState 무한루프방지 state 자식이 부모로부터 받은 값을 변경할 수 있다. -값을 저장하거나 변경할 수 있는 객체 -자식컴포넌트 내부에서 값을 바꿀 때 사용한다. 주로 버튼 click과 같은 event와 함께 사용한다. props 자식이 부모로부터 받은 값을 변경할 수 없다. -props는 부모 컴포넌트가 설정한 값을 전달받아서 자식 컴포넌트가 "읽기"만 가능하다. (변경안됨) -props는 컴포넌트 내부에서는(자식) 값을 직접 변경할 수 없음 상단에 import { useState } 를 꼭 꼭 사용해줘야한다. 1. const [값변수, 값변경함수] = useState(초기값) 2. 값 변경 => 값변수 = 변경할값 => 값 변경 o, 화면 갱신 x => 값변경함수(변경할값) => 값 변경 o, 화면 갱신 o 3. 값 .. 2022-12-02 [새싹 프론트엔드] 끌어올리기 키 값 addDate ={addDateaction}키에 값을 넣어서 넘겨야한다. 새싹 DT 기업연계형 프론트엔드 실무 프로젝트 7주차 블로그 포스팅 2022-12-01 [새싹 프론트엔드] 디폴트값 디폴트값은 함수의 인수나 객체를 분할 대입할 경우 설정해 사용한다. 값이 존재라지않을떄 초기값 설정을 할 수 있어서 더욱 안전하게 사용할 수 있다. 디폴트값은 아무값이 없을때 설정되어지는 값이기 때문에 만약 해당 객체에 설정된 값이 있다면 해당값 우선으로 할당된다. 객체분할대입의 디폴트값 인수의 디폴트값 설정 객체분할대입의 디폴트값 설정 객체분할대입때 디폴트값을 설정할 수 있다. 디폴트값을 설정하지않을경우 const를 사용하여 name이라는 key값이 object안에 담겼지만 아무런 값이 없기떄문에 undefined가 출력된다. 이떄 디폴트값을 넣어주면 undefined 대신 "기본으로 설정된 값이" 출력된다. 인수의 디폴트값을 주지않을경우 name이라는 매개변수 자리는 만들어줬기때문에 undefined.. 2022-11-23 [새싹 프론트엔드] 객체분할대입 { } , 배열분할대입 [ ] 객체나 배열로부터 값을 추출하기 위한 방법 객체와 배열의 분할대입 할 수 있는 방법은 다르다. 객체분할대입과 배열분할대입을 알아보자 객체분할대입 해당객체의 key값에 접근하여 해당 key: 값 을 가져온다. 배열분할대입 배열의 index에 접근하여 해당값을 가져온다 디폴트값을 줄 수 있다 차이점 객체분할대입은 key값이 다르면 안되지만 배열분할대입은 key값을 임의대로 지정해줘야한다 객체분할대입의 key값을 임의대로 주고싶다면 : 콜론을 사용하자 객체분할대입은 key값만 동일하다면 const { } 중괄호안에 값은 순서상관없이 변수화 시킬 수 있지만 배열분할대입은 순서가 달라지면 배열안에 있는 index값이 엉뚱한게 들어오므로 순서에 주의해야한다. 객체분할대입을 사용하지않을경우 변수안에 있는 값 이라는 .. 2022-11-22 [새싹 프론엔드]고차함수,콜백함수,익명함수 콜백함수란? 1. 함수안에 매개변수로 들어가는 함수 2. 순차적으로 실행하고 싶을 때 사용한다. 3. 다른 줄에서 만든 함수도 콜백함수로 사용할 수 있다. (()안에 바로 함수명쓰고 사용해도된다) 4. 아무대서나 쓰이는것이 아니라 콜백함수가 필요한 함수들한테만 사용할 수 있다. setTimeout, addEventListener 예 )EventListener 같은 버튼을 "누르면 " 실행해주세요~ 와 같이 나중에 처리하고 싶을 때 콜백함수 만드는 법 콜백함수를 굳이 쓰는이유는 코드는 길어지는데 정확하게 함수명1 뒤에 함수명5가 오게하고싶을떄 안정적으로 매개변수로 값을줘서 편리하게 가져다 쓰면된다. 익명함수 사용법 대표적인 예시로 JS내부에 이미 만들어져있는 setTimeout함수로 예시를 들자면 해당함수.. 이전 1 2 3 4 다음
