안녕하세요 오늘은 tailwind css를 사용할 때 classname을 정렬하는 방법에 대해 알아보겠습니다. yarn berry Pnp mode를 사용할 때 흔히 겪을 수 있는 문제점과 해결방안도 함께 소개해드리겠습니다!tailwind를 사용하다보면 개발자마다 className을 적는 순서가 달라질 수 있습니다.똑같은 코드를 누군가는 아래처럼 적기도 하고누군가는 아래처럼 적기도 합니다.이렇게 코드를 작성하다보면 코드의 일관성이 떨어지고 불필요한 변경점이 생길 수 있습니다. 저희가 코드 컨벤션을 잘 맞춰두어야 하는 이유이기도 하죠.저희 프로젝트에서는 이 부분을 방지하기 위해 두가지 방법을 두고 고민했습니다.1. IDE에서 제공하는 tailwind formatter 플러그인을 사용하는 것2. prettie..

안녕하세요 :) 오늘은 nextjs에서 제공하는 image 컴포넌트의 로더 기능을 사용하여 서버 부하를 줄이게 된 경험을 공유하고자 합니다. 문제점 발견: Next/Image의 동작 방식ec2 서버의 부하를 줄이고 속도 개선 등 여러 이점을 위해 회사 내 인프라 구조는 CDN 서버를 맨 앞에 두어 이를 거쳐가도록 되어있습니다. 하지만 한가지 골칫덩이가 있었는데요. 바로 Next/Image입니다. 기존 프론트엔드의 이미지들은 모두 Next에서 제공하는 Image 컴포넌트로 되어있었습니다.import ImgSrc from '@/static/a/b/test.png'; 위와 같은 코드가 있을 때 우리는 빌드 후 아래와 같은 결과물이 나오기를 기대합니다. 그래야 s3 버킷으로 가서 원하는 경로의 이미지를 가져올 ..

이번에 Datepicker 때문에 antd library를 추가하게 되면서 라이브러리의 크기가 커서 성능이 떨어지지 않을까 우려되었습니다. 이를 줄이기 위해 여러가지를 시도해보았습니다.모듈 사이즈 확인하기분명 크기가 클 것 같은데 어느정도인지는 알 수 없어서 일단 자세한 설명을 보기 위해 터미널에 아래 명령어를 입력해주었습니다.npm info antd여러 항목 중 .unpackedSize: 50.3 MB 라는 내용이 눈에 띄었습니다. 이게 무엇을 의미하는건지 검색해봤더니 모듈이 다운로드되어 node_modules에 담겼을 때의 사이즈를 말하는 것이었습니다. 라이브러리가 최종적으로 만들어졌을 때의 사이즈라고 이해해도 되지 않을까 싶습니다. Finder로 확인해보니 정말 사이즈가 같았습니다.제가 줄여야 하는..