리엑트/컴퓨터 과학11 state에 대하여... 오늘은 항해 99에서 WIL로 state에 대해서 조사하라는 숙제가 있었다. 그래서 오늘은 내가 공부하면서 정리한 state라는 개념에 대해 설명하고자 한다. 1. state 도대체 뭐야? state를 한국말로 하면 "상태"를 의미한다. 이때 "상태"는 react에서는 간단하게 데이터라고 보면 된다. 즉 "state를 관리한다.", "state를 변경한다"라는 말은 "데이터를 관리한다", "데이터를 변경시킨다"라는 말로 재해석 할 수 있다. 그럼 state의 정의에 대해서도 살펴보았으니 state의 종류에 대해서 살펴보자 state는 크게 2가지 종류가 있다. 첫번째는 지역상태로 한 컴포넌트내에서의 데이터를 의미한다. 두번째는 전역 상태로 여러 컴포넌트에서 참조할 수 있는 데이터를 의미한다. 2. sta.. 2023. 6. 26. CSR vs SSR에 대하여... 나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다. 1. CSR CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다. CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다. 이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다. 위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다. 하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다. 2... 2023. 6. 23. MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다. 내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다. 1. 면접에 자주 나오는 질문이라서 2. MVC는 들어봤어도 MVVM에 대해서는 들어본 적이 없어서 그래서 나는 오늘 저 2가지의 질문에 대해서 답해볼려고 한다. 1. MVC? MVVM??, FLUX ???? 도대체 뭐지??? MVC,MVVM,FLUX는 대표적인 디자인 패턴들의 예시다. 여기서 디자인 패턴은 우리가 만들려고 하는 서비스의 동작 원리를 설계한 설계도라고 한다. 즉 MVC,MVVM,FLUX는 설계도를 의미한다. 그럼 여기서는 MVC에 대해서는 추가적인 설명없이 MVVM,FLUX에 대해서 살펴보겠다. 1-1) MVVM MVVM은 모델과 뷰, 뷰모델로 이.. 2023. 6. 20. 클래스 컴포넌트와 함수형 컴포넌트의 차이점 오늘 나는 컴포넌트를 공부하면서 왜 함수형 컴포넌트를 클래스형 컴포넌트보다 많이 사용하는지가 궁금하여 한번 살펴보려고 한다. 먼저 클래스형 컴포넌트의 장단점을 살펴보자(리엑트를 다루는 기술을 참고해서 만듦) 1. 클래스형 컴포넌트의 장단점 1-1) 장점 클래스형 컴포넌트의 장점은 개발자가 설정할 수 있는 것들이 굉장히 많다. 이게 무슨 말이냐면 풀 옵션이 장착된 자동차라고 생각하면 편하다. 우리가 풀 옵션이 장착된 자동차를 보면 내가 할 수 있는 작업들이 많으며 내가 직접 세팅할 수 있는 것들이 많다. 1-2)단점 하지만 이렇게 풀 옵션이 많은 자동차에는 치명적인 단점이 있다. 바로 자동차에 풀 옵션을 관리하기가 힘들다는 점과 초보자가 사용하기에는 많이 어렵다는 것이다. 이를 클래스형 컴포넌트에 매칭을 .. 2023. 6. 15. 리엑트 렌더링 과정에 대하여... 오늘은 리엑트를 다루는 기술 1강을 보면서 가장 몰랐던 내용은 리엑트가 왜 빠른지 였다. 책에서 나온 설명으로는 리엑트가 빠른 이유가 virtual dom이라고 하는데 도대체 virtural dom은 뭐고 dom도 뭔지 잘 몰라서 그거에 대해서 조사를 해본 결과를 한번 말해보겠다. 브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다. 이때 브라우저는 새로운 DOM을 만든다. (참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.) 두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다. 브라우저는 업데이트된 DOM을 만들고 기존에 있던 .. 2023. 6. 15. 이전 1 2 다음
