yunkogong

React를 사용한 지 3년 정도 됐다.그동안 컴포넌트를 만들고, state를 관리하고, 커스텀 훅을 작성하는 일은 익숙해졌다.그런데 문득 이런 질문을 받는다면 어떻게 답해야 할지 생각해봤다.왜 Vue가 아니라 React를 사용하나요?처음에는 간단하게 답할 수 있을 줄 알았다.React는 단방향 데이터 바인딩이고, Vue는 양방향 데이터 바인딩이라고 설명하면 된다고 생각했다.그런데 조금만 더 물어보면 막혔다.Vue는 양방향이라면 부모와 자식 사이에서도 데이터가 자유롭게 오가는 걸까? React는 state를 직접 변경할 수 없는데 Vue는 왜 가능한 걸까?그리고 React는 라이브러리, Vue는 프레임워크라고 하는데 실제 개발에서는 무엇이 다른 걸까?알고 있다고 생각했던 내용인데 막상 설명하려니 정확하지..

지난번에는 CSR, SSR, SSG, ISR의 차이를 정리했다.페이지의 HTML을 어디에서, 언제 생성하느냐에 따라 렌더링 방식이 달라지고, 서비스의 요구사항에 맞게 선택해야 한다는 얘기였다.그런데 이번에는 조금 다른 렌더링 문제가 궁금해졌다.이미 브라우저에 표시된 화면에서도 렌더링 때문에 사용자 경험이 나빠질 수 있을까?예를 들어 검색창에 글자를 입력한다고 생각해봤다.사용자가 문자를 입력하면 input에 글자가 표시되고, 동시에 검색어에 맞는 목록이 갱신되어야 한다.목록이 몇 개 없다면 문제가 없다.하지만 수천 개의 데이터를 필터링하고 복잡한 컴포넌트를 다시 렌더링해야 한다면 어떨까?검색 결과를 갱신하는 작업 때문에 input에 글자가 늦게 표시될 수도 있다.사용자 입장에서는 검색창이 버벅이는 것처럼 ..

React로 개발할 때는 주로 컴포넌트를 어떻게 만들고, state를 어떻게 관리할지 고민했다.그런데 Next.js를 공부하면서 조금 다른 질문을 만나게 됐다.이 페이지는 CSR로 만들어야 할까, SSR로 만들어야 할까?처음에는 CSR, SSR, SSG, ISR이라는 용어부터 헷갈렸다.이름도 비슷하고, 어떤 방식이 성능에 좋다거나 SEO에 유리하다는 설명은 많이 봤지만 정확히 무엇이 다른지는 이해하지 못했다.그러다 네 가지 방식을 비교하면서 공통된 질문을 발견했다.화면에 필요한 HTML을 누가, 언제 만드는가?이 기준으로 생각하니 복잡하게 느껴졌던 렌더링 방식이 조금씩 구분되기 시작했다.이번에는 CSR부터 ISR까지 각각 어떤 방식으로 동작하고, Next.js에서는 어떻게 사용하는지 정리해봤다.첫 번째 ..

프론트엔드 개발을 하면서 자료구조가 중요하다는 이야기는 여러 번 들었다.그런데 막상 자료구조라고 하면 코딩 테스트나 알고리즘 문제부터 떠올랐다.배열, 연결 리스트, 스택, 큐 같은 이름은 익숙하지만 실제 개발에서 어디에 사용되는지 물으면 바로 답하기 어려웠다.그러다 React의 state 업데이트를 공부하면서 큐라는 개념을 다시 만나게 됐다.지난번에 정리했던 batching에서도 React가 여러 state 업데이트를 큐에 넣고 처리한다는 이야기가 나왔다.생각해보니 브라우저의 뒤로가기나 JavaScript의 함수 실행에도 비슷한 개념이 있었다.알고 보니 자료구조를 사용하지 않았던 게 아니라, 이미 사용하고 있으면서 이름만 정확히 연결하지 못했던 것이다.이번에는 그중에서도 가장 기본적인 스택(Stack)과..