루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

코드의 문맥은 렉시컬 환경으로 이뤄진다. 렉시컬 환경이란 코드가 어디서 실행되며 주변에 어떤 코드가 있는지를 뜻하며 이를 구현한 것이 실행컨텍스트이다. 모든 코드는 실행컨텍스트에서 평가되고 실시된다. 스코프는 실행 컨텍스트와 깊은 관련이 있다. 스코프? 실행컨텍스트? 렉시컬 환경? 모두 어려운 개념이지만 너무나 중요한 개념이다. 우선 이 개념들을 짚고 가기 전에 스코프에 대한 개념을 설명해보고자 한다. 스코프의 종류 전역/지역 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 이 때 변수는 자신이 선언된 위치(전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정된다. 즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고..

자바스크립트의 함수는 "일급 객체"이다. 함수가 일급객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다. 함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징이다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다. // 무명 함수 표현식 var add = function(x, y) { return x + y; }; console.log(add(2, 5)); //7 // 기명 함수 표현식 var add = function foo (x, y) { return x + y; }; console.log(add(2, 5)); // 7 console.log(foo(2, 5)); // Refere..

React 앱의 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다. (useMemo, useCallback등을 활용한 케이스) cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅 3. return 실행 - 렌더링 단 4. 렌더 단계 (렌더 트리 구축) - 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다. - DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있..

React Virtual Dom 과거에 React는 Virtual Dom을 사용하여 브라우저가 렌더링할 때, 이전 Dom과 현재의 Dom에서 변경내역을확인하여 실제 Dom에 반영할 부분을 결정한다. 이 때, 여기에서 궁금증이 들었다. 가상돔은 새로운 돔의 커밋 내역을 어떤 기준으로 확인하여 변경 내역을 비교하는 것일까? 정답은 얕은 비교이다. React는 노드를 비교할 때 얕은 비교를 한다. React의 얕은 비교는 같은 레벨에서만 일어난다. 숫자, 문자열, boolean과 같은 원시 자료형은 값 비교를 수행한다. 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다. 실제로 React는 상태 값을 업데이트할 때에도 얕은 비교를 수..

동기와 비동기 개념 차이 동기와 비동기 개념의 차이에 대해서는 이전에 포스팅한 적이 있다. 가볍게 정리하면 동기는 A, B, C의 호출이 순차적으로 있었을 때 A가 마무리 되고 나서야 B가 실행되고 B가 실행된 이후에야 C가 실행될 수 있다. 즉 순서가 순차적이다. 반면에 비동기함수는 A, B, C 호출이 동시에 일어난다. 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행한다. A, B, C를 동시에 실행했을 때 B와 C의 결과가 먼저 발생될 수도 있다. 반면 웹개발을 하다보면 비동기 함수를 동기처럼 쓰고싶을 때가 있다. 함수를 호출하자마자 즉각적으로 실행되길 원하지만, 호출 후 데이터를 받고나서 이후의 작업이 필요할 때 주로 그러한 일들이 많았다. 주로 API를 호출하..

1. Web Storage 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. Key-Value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 데이터를 조회할 수 있다. Web Storage에는 영구저장소인 Local Storage와 임시저장소인 Session Storage가 있다. Web Storage는 기존 웹 환경의 Cookie와 개념이 매우 유사하다. 클라이언트에 데이터를 저장한다는 관점에서 쿠키와 매우 비슷하다. 또한 사이트의 도메인 단위로 접근이 제한된다는 점도 공통적이다. 즉, A 도메인에서 클라이언트에 저장한 데이터는 B 도메인에서도 조회할 수 없다. 차이점은 아래와 같다. - 쿠키 정보는 서버로 전송될 때마다 함께 전송된다. - 또한 쿠키는 용량과..

1. 컴파일 에러 - 컴파일 시 발생하는 에러 - 대체로 문법상의 오류 - 보통 IDE에서 에러가 발생한 부분을 알려준다. - ex) syntax error ':', ';'등 누락 2. 런타임 에러 - 실행시 발생하는 에러 - 프로그램이 컴파일된 후 실행하면서 생긴 에러 - 대체로 논리적 오류로 인한 에러 - ex) list out of range, NullPointerException, 무한루프 등

useState를 사용하여 정의할 때를 생각해보면, 주로 DB를 통해서 데이터가 바뀌는 값이나 혹은 이벤트 핸들링을 통해 UI 바뀌는 값등 "변하는"값에 한정해 useState를 작성하게 된다. 이 중, useState의 초기값에 따른 렌더링 이슈를 한번 쯤은 경험해 볼 수 있다. 가령 const [age, setAge] = useState(3); 으로 정의되어 있는 useState가 있고, 해당되는 useState가 렌더 되어야 하는 컴포넌트에 useEffect(() => { setAge(20); }, []) 을 넣어 컴포넌트를 렌더하면 age가 0이었다가 20으로 바뀌는 걸 볼 수 있다. 이런 현상은 주로, useState에 데이터 초기값을 넣어줄 때 종종 생기는 이슈이다. 이때, useEffect가..