Connecting the dots

React를 사용하면서 다양한 hooks api들을 사용하게 되는데 그 중에 최적화를 위해 사용하는 useMemo, useCallback에 대해서 정리해보려고 한다. Memoization이란? 먼저, useMemo 함수에 대해서 알아보기 전에 메모이제이션(memoization) 개념에 대해서 알고 가야한다. memoization이란 기존에 수행한 연산이 결과값을 어딘가에 저장해두고 동일한 입력들이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. useMemo와 useCallback은 각각 메모이제이션된 값, 함수를 반환한다. + React가 리렌더링 하는 조건 3가..

오늘은 React가 무엇인지, React를 왜 사용하는지에 대해 정리해보려고 한다. 현재 React로 개발을 하고 있음에도 글로 정리한 적이 없기 때문에 이를 통해 다시 한 번 공부가 될 것 같다. 이전에 Next.js에 관한 글을 썼는데 생각해보니까 React를 먼저 정리했어야 하는게 아니였나 싶다. 1. 과거의 정적인 웹, 그리고 프레임워크 결론부터 말하자면, 요즘의 웹이 정적이고 단순한 페이지를 넘어서 규모도 커지고 복잡하며 동적으로 바뀌었기 때문이다. React나 Vue를 사용하지 않더라도 모두 바닐라 JS로 구현 가능하다. 정적인 웹페이지를 만드는 것만이 목적이라면 굳이 프레임워크의 도움을 받지 않아도 된다. 성능적인 측면에서도 바닐라 JS가 더 나을 수도 있다. 하지만, 최근에 웹은 단순한 페..

React, DOM 그리고 Virtual DOM? React의 장점 중에는 Virtual DOM이 있다. 근데 대체 Virtual DOM이 무엇일까? Virtual은 말 그대로 가상이라는 뜻이고 DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미한다. 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미한다. 개발을 하면서 자주보게 되는 , , 등이 DOM에 해당한다. DOM이 존재하기 때문에 Javascript는 HTML 태그들을 수정할 수 있는 것이다. 그렇다면 가상 돔(Virtual DOM)이 나오게 된 이유는 무엇일까? React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어진다. ..

저번에 SSR(서버 사이드 렌더링)에 관한 글을 썼었는데 이번에는 SSR을 쉽게 구현하도록 도와주는 프레임워크인 Next.JS에 대해서 알아보려고 한다. https://nomadcoders.co/nextjs-fundamentals/lobby https://github.com/ctdlog/nextjs-intro GitHub - ctdlog/nextjs-intro: Next.JS Introduction Next.JS Introduction. Contribute to ctdlog/nextjs-intro development by creating an account on GitHub. github.com 노마드코더님의 Next.JS 강의를 들으면서 간단한 무비 앱을 구현해봤고 소스코드는 깃허브에 올려두었다. 그..

https://youtu.be/7mkQi0TlJQo [React] 서버 사이드 렌더링(SSR) / 클라이언트 사이드 렌더링(CSR)이란? 노마드코더님의 해당 영상을 보다가 '서버 사이드 렌더링(SSR)'이란 말이 계속해서 나와서 한 번 제대로 정리해보고자 글을 작성해보려고 한다. 영상에는 서버 사이드 렌더링(SSR, Server Side Rendering)과 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이라는 2가지 렌더링 방식을 언급한다. 대충 단어만 보면 서버에서 렌더링 하는지, 클라이언트에서 렌더링 하는지의 차이 같은데 정확하게 무슨 차이가 있을까? 일단 공통적으로 들어가는 렌더링이라는 단어부터 정리해보자면 렌더링이란 대체 무엇일까? 한 줄로 말하면, 서버로부터 요청해서..