https://medium.com/creatrip/%EC%82%AC%EB%82%B4-ai-%EC%B1%97%EB%B4%87-%EC%84%9C%EB%B9%84%EC%8A%A4-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-a4fab54f898d 사내 AI 챗봇 서비스 구축하기안녕하세요. 크리에이트립(Creatrip) FE 개발자 서종학입니다.medium.com

2023년 회고를 작성했던 기억이 엊그제 같은데 벌써 2025년의 첫 달도 훌쩍 지나갔다.2023년에는 내가 스스로 어떤 사람인지 좀 더 깊이 이해하고 내면의 성장을 이뤘다면 2024년에는 내면의 성장을 바탕으로 보다 즐겁고 의미 있게 한 해를 보냈다. 파트 리더재작년 말, 프론트엔드 파트 리드를 맡게 되었다. 한 해를 돌아보며 나름대로 성공적인 파트 리더 업무 수행이었다고 자평하지만 그 과정에서의 고민과 갈등도 참 많았다. 구성원들의 동기부여를 위해 꾸준히 1:1 면담을 진행하며 이런저런 팀 단합 시간을 만들었고, 소통에서의 오해를 줄이고 합리적으로 커뮤니케이션을 하기 위해 신경을 많이 기울였다. 6개월 간격으로 리더십에 대한 익명 설문을 통해 내가 잘못된 방향으로 가고 있지는 않은지 돌아보았고, 나태..

지난 2편의 글에 이어서 웹 바이탈 개선을 위해 했던 세 번째 작업에 대해 이야기해보려고 한다. https://nookpi.tistory.com/209 지난 1년간의 웹 바이탈 개선기 1편 - 다국어 동적 로드올해 회고를 쓰기 앞서 지난 1년간, 정확히는 지난 약 8개월간의 웹 바이탈 개선을 위한 작업들을 기록해보려고 한다.  먼저 결과부터 보자면 많은 개선이 있었다.  5월 초, 5%까지 내려갔던 Goodnookpi.tistory.comhttps://nookpi.tistory.com/210 지난 1년간의 웹 바이탈 개선기 2편 - SSG 제거, SSR 전환지난 1편에 이어 웹 바이탈 개선을 위해 했던 작업에 대해 이야기해보려고 한다. 2. SSG 제거, SSR 전환두 번째 작업은 Nextjs 환경에서의..

지난 1편에 이어 웹 바이탈 개선을 위해 했던 작업에 대해 이야기해보려고 한다. 2. SSG 제거, SSR 전환두 번째 작업은 Next.js 환경에서의 기존의 SSG(ISR)를 모두 제거하고 SSR로 전환한 것이다.언뜻 생각하면 SSG는 빌드 시점에 생성된 HTML이고, SSR은 유저의 요청이 있을 때 렌더링을 해서 제공하기 때문에 SSG가 SSR보다 더 빠를 수 없는데 무슨 소리지? 라는 생각이 든다. 이 작업의 배경에 대해 설명하자면 프로덕트의 배포 환경에 대한 부연 설명이 좀 필요한데, 간단하게 말해 프론트엔드 서버는 esc에 로드밸런싱이 되는 컨테이너들로 떠 있는 상황이었다. 이러한 환경에서의 SSG는 치명적인 문제가 있었으니... 유저의 매 요청이 ELB를 거쳐 각 인스턴스에 배분되다보니 우리가..

올해 회고를 쓰기 앞서 지난 1년간, 정확히는 지난 약 8개월간의 웹 바이탈 개선을 위한 작업들을 기록해보려고 한다. 먼저 결과부터 보자면 코어 웹 바이탈 기준으로도 많은 개선이 있었다.  5월 초, 5%까지 내려갔던 Good 비율은 11월인 현재 80~90%를 넘나들며 준수한 수준으로 유지되고 있다.위 지표는 모바일 기준인데, 모바일 서비스 사용자가 많은 우리 서비스의 특성과 모바일의 점수 기준이 더 짜다는 점을 고려하여 모바일 지표만 고려하여 대응하고 있다. 물론 당연히 데스크탑 지표는 더 잘 나온다. (Good 비중이 95% 수준) 그렇다면 이런 지표 향상을 위해 기울인 나름의 노력들은 무엇이 있을까? 1. i18n 데이터 동적 로드코어 웹 바이탈 개선을 위해 했던 작업 중에서도 TBT(INP)를 ..

우리 회사의 프론트엔드 레포는 모노레포 환경으로 동작하고 있다. 작년 9월쯤 터보레포 기반의 모노레포로 전환했고, 올해 3월에 pnpm을 적용했다. 모노레포를 적용하면서 패키지로 추출한 ui, animation 의 경우 해당 패키지의 진입점이 빌드 후 결과물로 명시되어 HMR 동작에 어려움을 겪게 되었다. 사실 일반적인 개발 환경에서는 문제가 없지만, ui 패키지 등을 수정하면서 작업해야 하는 Storybook과 같은 환경에서는 치명적이다. 예를 들어 다음과 같은 경우를 생각해보자. 1. Storybook - dev 실행2. ui 패키지의 Button 스타일 변경3. ui 패키지 re-build4. Storybook 에서 ui 패키지의 변경사항 감지5. Full Reload vite의 react plug..