min

나는 context api를 왜 사용하는지 구지 redux라는 것이 있는데 context api를 이용하는 이유를 몰랐다. 그래서 나는 리엑트를 다루는 기술과 리엑트 공식 문서를 보면서 그 이유를 찾을 수 있었다. 나는 오늘 그 이유에 대해서 설명하고 얼마나 그 이유가 강력한지에 대하여 설명해보겠다. 1. 이유 context api를 쓰는 가장 간단한 이유는 사용방법이 간단해서 이다. 우리가 redux를 사용할려면 알아야 할것들이 정말 많다.(액션,액션 생성함수, 리듀서, 스토어) 그리고 이뿐만아니라 이들 사이에 관계에 대해서도 알고 있어야 한다. 하지만 context api는 정말 그 관계가 간단하다. 그 관계에 대해서 조금 설명을 해보겠다. 2. context api, redux의 사용이유 우리가 c..

오늘 나는 다른 분에게 실행 컨택스트와 이벤트 루프가 어떤 관련성이 있는지 실행 컨택스트는 어떤 내용인지 궁금해하셔서 나에게 찾아왔는데 나도 정확한 개념을 생각하지 못해서 한번 이 글을 통해 정리를 해볼려고 한다. 1. 실행 컨택스트 컨택스트는 영어로 context 즉 문맥을 의미한다. 즉 실행 컨택스트는 말 그대로 실행 문맥으로 볼 수 있다. 하지만 이렇게 집고 넘어가면 머리속에서는 구체화 되지 않는 문제가 발생한다. 그래서 이 개념을 구체화 한다면 실행 컨택스트는 자바스크립트 코드 실행과 관련된 정보들을 담고 있는 객체라고 볼 수 있다. 즉 실행 컨택스트란 객체를 의미하며 이때 실행과 관련된 정보란 1. 렉시컬 환경 2. 변수 환경 3. this 바인딩 등이 있다. 즉 실행 컨택스트란 이런 정보들이 ..

1. 얕은 복사 얕은 복사는 말 그대로 얕게 비교하는 것을 말한다. 이대 "얕게"라는 말이 추상적으로 들릴 수 있다. 이를 구체화 하자면 뎁스의 차이다. 즉 내가 복사 할려고 하는 깊이가 어디까지 되는 지에 따라서 얕은 복사와 깊은 복사로 나뉜다. 얕은 복사는 1depth까지만 완전히 복사가 가능하다는 뜻으로 대표적인 예시로는 스프레드 연산자, 대입 연산자가 있다. arr = [1,2,3,4] // 얕은 복사 arr2 = [...arr] console.log(arr2) 이때 많은 사람들이 착각하는 경우가 스프레드 연산자는 깊은 복사라고 생각하는 경우다. (작성자도 그랬다... ㅠㅠ) 하지만 스프레드 연산자는 얕은 복사다. 그 이유를 설명하는 코드를 보여주겠다. arr = [[1], 2, 3, 4, 5];..

나는 오늘 컴포넌트 성능 최적화를 배우면서 이걸 어떻게 구현하는지 , 성능이 비효율적이다 라는 것을 어떻게 아는 지가 궁금했다. 그래서 나는 오늘 그것에 대해서 말해볼까 한다. 성능을 최적화 시킬 수 있는 방법으로는 크게 3가지가 있다. 첫번째는 React.memo다. React.memo를 사용하는 경우는 props가 바뀌지 않았을때 강제 리렌더링을 막는 경우이다. 그럼 여기서 props가 바뀌지 않았는데 렌더링이 일어나는 경우는 어떤 것이 있을까? 지금 생각나는 예시로는 부모 state가 변경되었을 때 자동적으로 자식 props가 업데이트가 되고 결국에는 리렌더링이 발생한다. 정리하면 React.memo는 어떤 컴포넌트가 강제로 리렌더링이 일어나는 것을 막을 때 사용한다. 두번째는 useCallback..

오늘 나는 컴포넌트를 공부하면서 왜 함수형 컴포넌트를 클래스형 컴포넌트보다 많이 사용하는지가 궁금하여 한번 살펴보려고 한다. 먼저 클래스형 컴포넌트의 장단점을 살펴보자(리엑트를 다루는 기술을 참고해서 만듦) 1. 클래스형 컴포넌트의 장단점 1-1) 장점 클래스형 컴포넌트의 장점은 개발자가 설정할 수 있는 것들이 굉장히 많다. 이게 무슨 말이냐면 풀 옵션이 장착된 자동차라고 생각하면 편하다. 우리가 풀 옵션이 장착된 자동차를 보면 내가 할 수 있는 작업들이 많으며 내가 직접 세팅할 수 있는 것들이 많다. 1-2)단점 하지만 이렇게 풀 옵션이 많은 자동차에는 치명적인 단점이 있다. 바로 자동차에 풀 옵션을 관리하기가 힘들다는 점과 초보자가 사용하기에는 많이 어렵다는 것이다. 이를 클래스형 컴포넌트에 매칭을 ..

1. RESTful api를 사용하는 이유 1-1) RESTful api는 한 눈에 통신할 리소스를 확인할 수 있다. 1-2) RESTful api는 http에 기반한 통신 규약이기에 따로 인프라를 구축할 필요가 없다. 1-3) 클라이언트와 서버가 독립적으로 운영이 가능하다. 2. RESTful api가 사용된 예시 3. RESTful api의 정의와 역사 3-1) 분산된 시스템을 위한 아키텍처 스타일 or 자원의 표현을 가지고 상태를 전달하기 위한 통신 규약 3-2) http 개념을 소통하기 위해서 사용된 통신 규약 -> 결국 http와의 상호작용이 클 수 밖에 없음 4. RESTful api의 동작 원리 위에 RESTful api의 정의를 보면 "자원의 표현을 가지고 상태를 전달하기 위한 통신 규약"..

오늘은 리엑트를 다루는 기술 1강을 보면서 가장 몰랐던 내용은 리엑트가 왜 빠른지 였다. 책에서 나온 설명으로는 리엑트가 빠른 이유가 virtual dom이라고 하는데 도대체 virtural dom은 뭐고 dom도 뭔지 잘 몰라서 그거에 대해서 조사를 해본 결과를 한번 말해보겠다. 브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다. 이때 브라우저는 새로운 DOM을 만든다. (참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.) 두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다. 브라우저는 업데이트된 DOM을 만들고 기존에 있던 ..

1. DP의 탄생 배경 : DP는 완전탐색의 단점을 보안하기 위해서 생겼다. 그럼 여기서 완전탐색은 무엇일까? 완전 탐색이란 말 그대로 처음부터 끝까지 다 돌면서 조건에 부합하는 경우를 고르는 탐색 알고리즘이다. 따라서 완전 탐색을 쓰게 되면 데이터가 많아질 수록 시간이 오래 걸린다. 그래서 나온 알고리즘이 DP이다. 즉 DP는 완전 탐색 보다 빠르며 정확한 알고리즘이다. 하지만 DP는 구현하는데에서 굉장한 어려움이 발생한다. 우리가 완전탐색을 구현하는 것도 힘든데 완전탐색을 효율적으로 처리하기 위해서는 당연히 더 힘들 수 밖에 없다. 그래서 나는 백준의 피보나치 함수를 통해서 한번 DP를 구체적으로 살펴볼까 한다. 2. DP의 구현방법 문제 다음 소스는 N번째 피보나치 수를 구하는 C++ 함수이다. i..