코린이의 개발 일지

구현 목표 모헤윰 에디터는 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 세션간 지속적이지 않은 데이터 ..

문제 상황 뉴스피드 무한스크롤이 게시물 페이지 들어갔다가 router.back으로 돌아오면 맨 위로 스크롤이 원상 복구되는 문제 사용자 경험 측면에서 상당히 불편한 문제라서 꼭 고치고 싶었다. 해결 방안 같은 팀원분이 이런식으로 해보는것이 어떻냐는 방법을 제시해 주셔서 그걸로 시도해봤다. 스크롤 y 위치와 , 불러온 전체 뉴스피드 목록 전역상태로 관리 뒤로가기 버튼 누를시, 전역 상태 불러와서 렌더링 뉴스피드는 현재 페이지네이션으로 동작한다 (usePaginator 훅이 pages(불러온 뉴스피드 목록)을 반환한다.) 처음 코드 export default function MainSection() { const scrollRef = useRef(); const [scroll, setScroll] = use..