우당탕탕 개발일지

Recoil이란? Recoil은 React 프로젝트를 위한 많은 전역 상태관리 라이브러리들 중 하나로, 2020년 5월 Facebook에서 출시하였다. 그렇기에, 다른 라이브러리(Redux, Mobx)와는 달리 React 전용이며 React에 최적화되어 있다고 할 수 있다. - 이전 전역 상태관리 라이브러리들의 문제로 출시 되었나? 대표적으로 사용됬던 Redux, Mobx들의 성능 자체에 문제가 있었던 것은 아니다. 오히려, 페이스북에서 고안한 Flux 패턴을 기반으로 설계되면서 안정적인 전역상태 관리가 가능하였다. 그럼에도 불구하고, Redux의 사용도와 만족도가 감소하게 된 데에는 아래와 같은 문제들이 잔존하였다. React 전용 라이브러리가 아니다! React 관점에선 외부요인으로 Store가 취급..

1. Virtual DOM의 사용 실제로 DOM을 제어하지 않고, 중간에 Virtual DOM이라는 가상의 DOM을 두어 Virtual DOM이 변경될 때, 실제 DOM이 변경되도록 설계되어 있다. 이러한 작업을 Reconciliation이라고 합니다. Virtual DOM은 불필요한 렌더링 과정의 비효율성을 최소화 하기 위해 탄성하게 되었다. 하지만 이렇게 Virtual DOM을 사용한다고 해서 빠르고 좋다는 것은 아니다. *Virtual DOM의 내부 작동원리 Virtual DOM의 값을 직접 변경하면 안되는데 그 이유는 간단합니다. React의 state는 불변성을 유지해야하기 때문이다. 컴포넌트는 setState를 비교해 업데이트가 필요한 경우에만 render() 함수를 호출하는데 state를 직..

HTTP(Hypertext Transfer Protocol) 프로토콜이란? 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의한 것이다. 통신 프로토콜을 쉽게 풀어보면 "내가 이렇게 보낼게 너는 이렇게 받아" 라고 이해하면 된다. 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있다. HTTP 프로토콜은 상태가 없는(stateless) 프로토콜이다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말이다. 좀 더 쉽게 말해서 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없는 것이다. 이러한 특징 덕에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요..

export const addDictionaryFB = (list) =>{ return function (dispatch){ const docRef= addDoc(collection(db,"dictionary"),list); console.log(( getDoc(docRef)).data()); } } 이렇게 코드를 작성하면 서버에 db의 dictionary에 있는 데이터를 가져오는 것을 요청하고 바로 그 다음줄로 넘어가서 진행되어 콘솔에 getDoc(docRef)).data() 가 비어있는 것으로 찍히게 된다. export const addDictionaryFB = (list) =>{ return async function (dispatch){ const docRef= await addDoc(collec..

forEach는 배열의 각 요소마다 한번씩 콜백함수를 실행한다. map은 배열 내 각 요소에 대해 콜백함수를 실행하고 결과를 모아 새로운 배열을 반환한다. //forEach() 작성 예시 const arr = [1,2,3,4,5]; const mulArr =[]; arr.forEach(num => { mulArr.push(num * 3); }); console.log(mulArr); //[3,6,9,12,15] //map() 작성 예시 const arr =[1,2,3,4,5]; const mulArr =arr.map(num => num *3); console.log(mulArr); //[3,6,9,2,15] forEach는 문밖으로 리턴값을 받지 못한다. let arr = [1,2,3,4,5]; let ..

TDZ TDZ은 일시적인 사각 지대라는 뜻으로, 스코프 시작지점부터 초기화 시작지점 사이의 구간을 의미한다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있다. 자바스크립트에서 변수는 선언 - 초기화 - 할당 의 단계를 거쳐서 생성된다. - 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다. - 초기화 단계(Initialization phase) 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다. - 할당 단계(Assignment phase) 사용자가 u..

'?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 1. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 ..

React 버전 점검하기 ✔️ React Router v6는 Reack hook를 많이 사용하므로 v6를 사용하기 위해 React 16.8 이상이 요구된다. switch -> Routes Switch는 기본적으로 동시에 여러개의 route들이 렌더 되지 않도록 막는 역할을 해준다. v6 부터 switch는 routes로 네이밍이 변경된다. //v5 //v6 exact 옵션 삭제 기존의 라우트 경우 경로의 앞부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact옵션을 사용하였다. 하지만 v6부터 exact가 기본으로 적용이 되었고, 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 * 을 사용하면 된다. //v6 Route children, component -..

실습 과제 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); //1 } //console.log(a); console.log(b); //1 101 hi(); console.log(b); //1 주석을 풀은 것 //수정 전 let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } console.log(a); consol..

스코프, 호이스팅, TDZ 스코프 스코프란 사전적으로 '영역','범위' 라는 뜻을 가지고 있다. 자바스크립트에서는 이를 변수에 영향을 미칠 수 있는 범위 혹은 변수에 접근할 수 있는 범위이다. 이러한 관점에서 스코프는 전역(global) 스코프와 지역(local) 스코프로 분류할 수 있다. 전역 스코프란 변수가 함수 바깥에 선언되어 있거나, 변수 선언 시 var 키워드를 사용하지 않으면 변수는 전역 스코프에 포함된다. 호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. TDZ TDZ은 일시..