코린이의 개발 일지

Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고자 React로 직접 구현해보기로 했다. 프로젝트 목표 기존에 구현했던 CSR 프로젝트를 SSR로 바꿀 것이다. 구현이 완료된 이후에는 기존 CSR 프로젝트와 SSR 프로젝트의 성능을 비교해볼 예정이다. 순전히 궁금증과 학습을 위해서 시작한 프로젝트이기 때문에 SSR을 처음 접하는 분이라면 Next.js를 사용하는걸 추천한다. Next.js가 리액트 라우터와 호환이 안되는게 불만이라면 Remix라는 프레임워크를 추천한다. 우선 서버 사이드 렌더링의 기본 동작 과정부터 살펴보..

구현 목표 모헤윰 에디터는 div 태그에 contenteditable 속성을 true로 설정해서 구현했다. 이 에디터에 오른쪽 그림과 같이 커서 오른쪽으로 사용자 멘션 추천 드롭 다운을 띄워줄 계획이다. 사용자 매 입력마다 입력된 글자로 시작하는 멘션 추천 목록을 갱신해준다. 매 입력마다 api요청을 보내는 방식보다 처음에 멘션 대상이 되는 사용자 목록(현재 로그인한 사용자가 팔로잉 하는 유저, 혹은 사용자를 팔로우하는 유저) 전체를 클리아언트에서 저장해두고 멘션 입력시 클라이언트에서 필터링해주는 방식을 택했다. const fetchMentionList = async () => { const response = await httpGet('/user/mentionlist'); allMentionList =..

이벤트 루프란? 자바스크립트 자체는 싱글 스레드로 동작한다. 하지만 브라우저가 동작하는 것을 살펴보면 여러 태스크가 동시에 처리된다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프이다. 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나이다. (Node.js도 이벤트 루프 기반으로 동작한다) 브라우저 환경에서 동작 과정 그림을 보면 자바스크립트 엔진은 크게 두개로 나뉘어져 있다. 콜스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 힙: 객체가 저장되는 메모리 공간. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다. 자바스크립트 엔진은 단순하게 태스크가 요청되면 콜스택을 통해 요청 받은 작업을 순차적으로 실행한다. 즉, 비동기 처리에서 소스코드 평..

설치 yarn add react-query React-Query가 주장하는 Global State 개념 Global State라는 말을 쓰지 말자: 전역 state는 Client와 Server로 분류할 수 있고, 이 두 State는 다른 방식으로 다뤄져야 효율적인 앱을 만들 수 있다. Server State 세션간 지속되는 데이터 비동기적 세션을 진행하는 클라이언트만 소유하는게 아니고 공유되는 데이터도 존재하며 여러 클라이언트에 의해 수정될 수 있음. 클라이언트에서는 서버 데이터의 스냅샷만을 사용하기 때문에 클라이언트에서 보이는 서버 데이터는 항상 최신임을 보장할 수 없다. ex) 비동기 요청으로 받아올 수 있는, 백엔드 DB에 저장되어 있는 데이터 Client State 세션간 지속적이지 않은 데이터 ..