코린이의 개발 일지

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

가비지 컬렉션 자바스크립트 엔진 내에서는 가비지 컬렉터가 끊임없이 동작한다. 가비지 컬렉션은 자바스크립트 엔진이 자동으로 수행하므로 개발자는 이를 억지로 실행하거나 막을 수 없다. 가비지 컬렉션 기준 도달 가능성(reachability) 도달 가능한 값은 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 참조 된다고 해서 도달 가능한 것은 아니다. 서로 연결된 객체들도 도달 불가능할 수 있다. ⇒ 루트에서 체이닝으로 도달 가능해야 한다. 도달 가능한 값 루트(root) 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 루트가 참조하는 값, 혹은 체이닝으로 루트에서 참조할 수 있는 값 이때 외부로 나가는 참조는 도달 가능한 상태에 영향을 주..

자바스크립트에서 객체를 복사하면 원시타입을 복사했을 때와는 다르게 값이 복사 되지 않는다. 자바스크립트에서 객체 복사 자바스크립트에서 객체가 할당된 변수를 복사하면 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: "John" }; let admin = user; // 참조값을 복사함 admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨 alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함 참조에 의한 비교 객체 비교시 동등 연산자(==)와 일치 연산자(===)는 동일하게 동작 비교시 변수가 가리키는 객체가 동일한 경우에 참을 반환 let a = {}; let b = a; // 참조에 의..

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