왜 그러는거야? 직장에서 친해진 개발자 분들과 이런 저런 이야기를 나누는 디스코드 방이 있습니다. 항상 요상한 문제를 내서 시험에 들게 하는 분이 계신데 오늘은 이런 문제를 가지고 오셨습니다. 싸늘하다.. 비수가 날아와 App이라는 ‘함수’가 실행되면서 0이 가장 먼저 찍힐 것이고, layout이 페인트 되기 전에 useLayoutEffect가 실행되니까 4가 찍힐거라 생각했습니다. 그 다음에 useEffect가 돌면서 1이 찍힐 것 같습니다. Promise then의 콜백은 브라우저 이벤트 루프의 마이크로 태스크 큐로, setTimeout의 콜백은 태스크 큐로 들어갑니다. 마이크로 태스크 큐의 우선순위가 태스크 큐보다 높기 때문에 2, 3의 순서로 찍힐 것이라 예상했습니다. 결론은 0 4 1 2 3. 앗 근데 useLayoutEffect안에 있는 setState를 까먹었습니다. setState까지 고려해야할까요? 설마 그런 문제가 어딨냐며 말도 안된다면서 위의 답을 보냈습니다. …

나의 작고 소중한 사이드 프로젝트 회사 출근했을 당시 점심을 배달로 시켜먹곤 했습니다. 여러명이 같이 주문을 하기 위해 배달의 민족 가게 링크를 슬랙으로 공유했습니다. 회사이다 보니 다들 PC로 먼저 확인했고 짧은 탄식과 함께 핸드폰을 주섬주섬 꺼내 앱으로 타고 타고 들어가 메뉴를 확인했습니다. (지금은 ‘함께 주문하기’ 기능이 나와서 탄식은 잘 안들리는 것 같습니다.) 어느 날 동료 앱 개발자 분이 배민 웹을 만들고 싶은데 도와줄 사람을 찾고 있었습니다. 재빨리 손을 들었습니다. 이후 빠르게 만들어 동료분들과 소소하게 사용했습니다. 괜히 배민께 피해갈라 앱으로 가는 딥링크도 연결해놨습니다. 당시 사내 라이브러리인 디자인 시스템을 사용했는데, 퇴사 이후 배포하려고 보니, 토큰이 만료돼서 배포가 불가했습니다. 그렇게 해당 라이브러리를 걷어내지 않으면 배포할 수 없는 상황이 생겼고, 영원히 제 기억 속에서 잊혀… 져 가지 않고 다시 살려내보았습니다. 아래 내용은 그 삽질을 담은 내용입…

패키지 분리를 이렇게 저렇게 ‘패키지 분리를 바운디드 컨텍스트 기준으로 한다’는 무슨 뜻일까요. 전 회사 테크 리드님이 ‘저희는 바운디드 컨텍스트 기준으로 패키지를 분리하고 있습니다’ 라고 말씀해주실 때마다 ‘오 그렇구나.. 근데 그게 뭐죠..?’ 싶은 순간이 있었습니다. 현생에 치여 제대로 알아보지 못한 내용을 이제 한번 알아보려고 합니다. 바운디드 컨텍스트여 내게로 오라 DDD 였구나 DDD(Domain Driven Design)은 도메인 모델을 기반으로 소프트웨어를 설계하는 것입니다. 규모가 큰 시스템의 도메인일수록 하나의 모델로 만드는 것은 어려워집니다. 그래서 이 큰 도메인의 모델을 나누고 바운디드 컨텍스트로 감싸는 방식의 소프트웨어를 설계합니다. 바운디드 컨텍스트는 모델이 적용되는 범위라고 생각하면 됩니다. 도메인의 특정 부분을 떼어낸 모델은 유비쿼터스 언어로도 사용될 수 있어야 하는데 이때 사용되는 용어들의 의미를 구분하고 한정하는 역할을 합니다. 도메인은 무엇인가요?…

작년에 회사에서 리뉴얼 프로젝트가 있었다. 기존 서비스에서 UI, 기능을 개선해 유저에게 새롭게 선보이는 것이었다. 프레임워크부터 다 새로 정할 수 있는 상황이었는데 팀장님께서 Vite를 써보자고 하셨다. 당시에 Vite가 뭐지..? 하면서도 깊이 있게 찾아보지 않고 열심히 React 코드만 쳤던 기억이 있다. 지금이라도 Vite가 어떤 문제를 해결하기 위해 나왔고, 그 문제를 해결하기 위해 어떻게 했는지 알아보려고 한다. (공식 문서 가이드 중 Why Vite 챕터를 참고해 작성되었습니다.) 해결하고자 한 문제점 ES modules를 브라우저에서 사용하지 못하던 시절에 모듈화된 방식으로 자바스크립트를 작성하기 위한 기본(=native) 메카니즘이 없었다. 그래서 어느 브라우저에서나 돌아가는 모듈화된 앱을 만들기 위해 번들링을 하게 되었다. webpack, Rollup, Parcel과 같은 다양한 번들링 툴이 나왔고 프론트엔드 개발자들의 DX를 크게 향상시켜주었다. 그러나, 우리…

웹에서 채팅 기능을 구현할 기회가 있었다. 소켓을 활용해 실시간 채팅을 구현하는 것 외에도 애를 먹었던 작업f이 있었는데, 바로 스크롤이었다. 이전 채팅 목록을 확인하기 위해 스크롤을 위로 올리면 유저가 보고 있는 스크롤은 그대로 유지한 채, 위에만 내용을 불러와 붙여야 했다. 이 작업을 React 프로젝트에서 어떻게 접근했는지 적어보려고 한다. 박스 나누기 아래 이미지처럼 채팅창이 있다고 가정해보자. 채팅창을 감싸는 컨테이너(= chatContainer)를 만들었다. 이 컨테이너는 유저가 채팅을 보는 가시 영역이 된다. 그리고 채팅 리스트를 감싸는 컨테이너(= chatListContainer)를 만들었다. 채팅 리스트 컨테이너 최상단에는 채팅 목록을 추가로 불러올 트리거 역할을 하는 요소(= loadMoreTrigger)를 두었다. 아래 그림은 유저가 스크롤을 올려 chatListContainer 끝의 loadMoreTrigger가 가시 영역에 포함되는 상황이다. Infi…

Remix Quickstart 들어가기 전에 리믹스에서 제공하는 Quickstart의 주제는 Blog 만들기이다. 풀스택 프레임워크이지만 본 예제에서 DB를 다루지는 않는다. 대신 파일 시스템 읽고 쓰는 것을 사용한다. 원문에서는 JS를 먼저 사용하고 나중에 type을 추가해 TS로 구성하는 방식이지만 본 포스팅에서는 TS코드를 바로 사용했다. 1. 시작 전 세팅 Node.js 14 이상 npm 7 버전 이상 2. shell 로 리믹스 프로젝트 만들기 이미 작업 폴더를 만들었다면 1-option1 을 사용하고 그렇지 않다면 1-option2를 사용한다. 앱 실행 시 http://localhost:3000 에서 제대로 실행되지 않는다면 이 실행되었는지 확인해본다. 만약 실행되지 않았다면 로 직접 실행해준다. npm config 파일에 가 추가되어있거나 pnpm 또는 다른 패키지 매니저를 사용하고 있다면 자동으로 postinstall 이 실행되지 않을 수 있다. 3. routes …