팀빌딩이 어느 정도 완성되고 팀이 안정화가 되면서 제일 좋은 점이 있다.코드에 대한 생산적인 얘기를 많이 나눌 수 있는 동료들이 생겼다는 것... 그러면서 나도 점점 코드를 보는 눈이 생기게 되었고, 뭣도 모르고 짠 냄새나는 나의 코드들이 눈에 띄기 시작했다.그 중 하나가 관심사 분리가 되지 않은 채 복잡하게 얽혀있는 컴포넌트였다. 예시를 하나 들어보자.발단// 완전 초기function Button({ variant = 'solid', children, color, size, type = 'button', ...props}: Props) { return ( {children} );} 위와 같이 기존에 Button 이라..

이슈 복기를 위한 정리... 현재 서비스 중인 사이트는 Next.js + Nuxt + asp 로 구성되어있다.그러다보니 인터넷이 빠른 환경에선 티가 나지 않았지만, 새롭게 Next.js 페이지로 들어오면 폰트에서 Layout Shift가 발생 중이었다.기존엔 @font-face로 public에 있는 폰트 파일을 로드하고 있었고, 이를 Next.js의 Local Fonts의 preload, fallback을 사용해서 개선하고자 하였다.그렇게 수정 후 라이브 배포하였는데...! Next.js 서버 트래픽이 튀는데요..? Local Fontshttps://nextjs.org/docs/app/getting-started/fonts#local-fonts Getting Started: Fonts | Next.jsL..

태초마을로 오기 전까지의 우리 팀 프로젝트 구조는아마 AI도 이해를 포기할법한 아키텍쳐였을 것이다.2023년 11월, 약 4년만에 재입성하는 프론트엔드 바닥 최근 4년동안은 개발자라기 보단 직장인에 가까웠다.개발 공부보다 재테크 공부가 재밌기도 했고(크흠), 안정형을 추구했다.적당히 잘 나오는 매출, 문제없이 잘 돌아가고 있는 서비스... 그러다 '나는 무엇을 할 줄 아는가?'에 대한 고민이 빠진다.점점 기술적인 부분에 갈증을 느끼게 되면서, 어쩌면 화초처럼 자라고 있을지도 모른다는 생각이 들었다.그래서 나와 쿵짝이 잘 맞는 동료들, 딱히 불만없던 회사를 뒤로하고 지금 팀(파트)에 합류하였다. 하지만 나의 수습 기간이 끝나기도 전에 파트장님과 (사수가 될 뻔한)파트원 1명이 퇴사해버렸다.그렇게 우리 파..

현생이 바쁘고... 문서는 회사 위키에 남기다보니오랜만에 내 블로그에 남겨보는 이슈 흔적... 너무 소홀했다cms에 컨텐츠를 등록했는데, 새로고침을 해도 리스트에 바로 반영되지 않는 이슈가 발생하였다.백엔드에서 캐싱한 데이터를 내려줄거라 생각하고 문의드렸더니, 캐싱하지 않는다는 답변이 돌아옴    Next.js 14와 React Query를 사용하고 있어서, 분명 둘 중 한 곳의 캐싱 문제일거라 생각하였다.나는 React Query에 꽂혀서 이것저것 시도해보며 열심히 삽질하고 있었는데,저쪽 어깨너머 희미하게 들려오는 "서버 컴포넌트 캐싱 문제같아요. 해결했어요"export const dynamic = 'force-dynamic'올라온 MR을 확인해보니 요 한줄이 추가되었다.    https://nex..

next.js + recoil + typescript + SCSS(or stylex) 조합으로 사용할 예정. 1. Next.js 설치npx create-next-app@latestWhat is your project named? -> 프로젝트 이름Would you like to use TypeScript? -> 타입스크립트 사용할건지?Would you like to use ESLint? -> ESLint 쓸건지? 아마 airbnb로 쓸거같은데.. 일단 yesWould you like to use Tailwind CSS? -> scss module이나 stylex 사용해볼거같아서 noWould you like to use `src/` directory? -> src 디렉토리 사용할건지? 이건 개취일듯. 하..

https://blog.shako.net/installing-lemp-stack-on-ubuntu-server-16-04/ 이거대로 하면 그냥 바로된다~참고로 오늘기준으로 php-fpm이 7.2 버전으로 깔리기 때문에7.0으로 되어있는 것들을 7.2로 바꿔주고 셋팅해주면 된다.

Vue.js를 Ubuntu(18.04)에 배포하기 본격적인 설명에 앞서, 아주아주 퓨어한 Ubuntu 환경에서 nginx를 설치하고 vue 첫 페이지가 보여지도록 하는 것이 목표이다.환경은 ubuntu 18.04 / nginx 1.14.0 1. 서버 접속$ ssh root@111.111.11.11언제나 그렇듯 서버에 접속한다.root 계정으로 111.111.11.11 IP를 가지는 서버에 접속한다.비밀번호를 입력하고 서버에 딱 들어옴  2. nginx 설치$ sudo apt update$ sudo apt upgrade위와 같이 업데이트/업그레이드를 해준 후,$ sudo apt-get install nginxnginx를 설치한다. 그리고 nginx를 테스트하기 전에 방화벽 소프트웨어를 조정하여 서비스에 액..