Web
[BB] React Life Cycle와 useEffect
#back_to_basic 다시 처음부터!라는 마음으로 공부해보자! 아자아자! 공부하다가 계속 나오는 '라이프 사이클', '마운트', '렌더링'....다시 개념을 잡아보자! 1. 리액트의 라이프사이클 React 컴포넌트는 생명주기(라이프사이클 또는 생애주기)이 있다. 생성(mounting) => 업데이트(updating) => 제거(unmounting)의 주기를 갖는다. 리액트 Class Component는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 1) Class Component 생명주기 Functional Component에 대해 자세히 알아보기 위해, 의미가 좀 더 잘 전달되는 메소드를 통해 이해하기 위해 Class Component에서 사용되는 생명주기 라이프 사이..
[BB] useRef가 사용되는 경우
#back_to_basic 다시 처음부터!라는 마음으로 공부해보자! 아자아자! 1. 문제의 발단 프로젝트에서 useRef를 사용하여 input에 focus를 잡아야하는데, 이게 자꾸 inputRef.current = null로 잡혀 에러가 나는 것이다.... 오늘은 이 에러도 해결해 볼 겸, 다시 useRef를 살펴보자. const inputRef = useRef(null); const handleTriggerClick = (_e: React.ClickEvent) => { inputRef.current?.focus();// null로 잡혀서 안됨 } (위 코드는 null로 잡혀서 돌아가지 않는 코드의 일부분) (위 코드는 기본적으로 맞으나, 응용 방법이 잘못되었음) 2. useRef란 useRef() H..
[BB] Javascript: 불변성(immutability)
#back_to_basic 다시 처음부터!라는 마음으로 공부해보자! 아자아자! 1. 얕은 복사와 깊은 복사 미리 결론을 정리해보면, 얕은 복사는 객체의 참조값을 복사하고, 깊은 복사는 객체의 실제 값을 복사하는 것이다. 자바스크립트에서 값은 원시값과 참조값 두가지 데이터 타입의 값이 존재하는데, 원시값 기본 자료형을 의미(number, string, boolean, null, undefined 등) 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되고, 할당된 변수를 조작하려고 하면 실제 값이 조작된다. 참조값 여러 자료형으로 구성되는 메모리에 저장된 객체 object, symbol 등 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고 변수에 저장된 메모리 공간의 참조를 저..
[BB] 브라우저의 렌더링과 Virtual DOM
#back_to_basic 다시 처음부터!라는 마음으로 공부해보자! 아자아자! 1. 브라우저의 작동방식 우리의 브라우저는 아래와 같은 순서로 동작한다. HTML을 파싱하여 DOM Tree를 만드는 데, 파싱을 하는 과정에서 임베디드된 이미지, 비디오, 스타일 시트가 있다면 이 자원들도 같이 로드하여 파싱한다. 스타일 시트를 파싱하면서 스타일 규칙을 만들어 attachment라는 과정을 거쳐 Render Tree를 만들어낸다. *이 때 script를 만나면 파싱을 중단하게 되는데, 이때문에 제일 하단에 script를 선언해야한다는 이야기가 나온다. ❓DOM Tree와 Render Tree 둘은 같은 것이 아니다. Render Tree는 문서의 시각적 측면에서 올바른 순서대로 내용을 그리도록 하기 위한 목적..
[BB] Javascript: 비동기 프로그래밍
#back_to_basic 다시 처음부터!라는 마음으로 공부해보자! 아자아자! 1. 비동기 프로그래밍의 개념을 비유적으로 알아보자 (feat. 얄팍한 코딩사전) 일단 비교를 해보자. '동기적으로 실행된다' == '작성된 코드 순서로 코드가 실행된다' 그렇다면, 비동기는? '비동기적으로 실행된다' == '순서대로 실행되는 코드는 아니다' 즉, 멀티태스킹이 구현되는 것이다. (여러 스레드나 여러 프로세스에서 이루어진다는 의미이다) 동기적인 처리의 단점은, 앞의 일처리가 느려진다면 기다려야하는 것이다. callback function(할 일)을 미리 맡겨두고, 다른 일을 먼저 처리한다고 생각하면 된다. ❓ 자바스크립트는 싱글 스레드로 실행되는데, 어떻게 비동기 작업이 가능한가 위 코드와 실행결과를 보면, 서버..
