next/image next.js에서 이미지를 최적화하기 위해서는 next.js에서 제공하는 next/image api를 사용하는 것이 일반적으로는 최적이다.// 인라인 문자열 방식// Static Image Import(정적 임포트 방식)import backgroundImg from '@/image/backgounrd.png'; next.js 공식문서에서는 Static Image Import 방식으로 이미지를 임포트하는 것을 권장한다. 임포트 방식에 따라 이미지 헤더에 붙일 Cache-Control을 내부적으로 제어하기 때문이다.Static Image Import Nextjs 공식 문서 - https://nextjs.org/docs/app/api-reference/components/image#mini..

문제Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client  nextjs 14 app router 웹에서 발생한 에러이다. 랜딩 페이지 호출 시 매우 적은 확률로 발생한다. 요청할 때마다 터지는 것은 아니고, 정말 가끔 발생한다. 응답 헤더를 중복으로 설정하려할 때 발생하는 에러라고 하는데, 우선 랜딩 페이지에서는 어떤 api도 호출하고 있지 않고 있다. 그래서 페이지 요청 시 거치는 middleware.ts에서 문제가 생겼을거라 판단했고, 콘솔 로그로 미들웨어에 들어오는 요청을 찍어봤다.   확인 결과, 페이지에 포함된 모든 정적 파일(.js, .png, .webp, .svg, .css 등)들이 미들웨어를 거..

npm의 xlsx 패키지 0.19.3 이전의 모든 버전이 취약점을 가지고 있다. Code Injection을 가능하게 하는 high 등급의 취약점을 가졌다고 한다. 이를 업데이트하기 위해서는 npm이 아닌 SheetJS 공식 문서를 따라야 한다. xlsx가 npm과의 법적 문제로 npm에서 퇴출.. 당했기 때문에 npm에는 0.18.5 버전까지 밖에 없다.. 다행히 버전을 업데이트해도 달라진게 없어서 수정할게 없었다. https://devhub.checkmarx.com/cve-details/CVE-2023-30533/https://docs.sheetjs.com/docs/getting-started/installation/frameworks/ Frameworks and Bundlers | SheetJS C..

"팀에는 그 팀의 크기에 걸맞는 아키텍처 또는 방법론이 존재한다." 최근에 드는 생각이다. 개발자가 1명인 조직과 5명, 20명, 100명인 조직의 문제해결방법은 다를 수 밖에 없다는 생각을 하게 됐다. 웹 클라이언트로 예를 들면, 웹 프론트엔드 개발자가 10명만 되도 프로젝트의 볼륨이 어마어마하게 커질 것이다. 관리하는 프로젝트의 개수도 많을 것이고 각 프로젝트의 크기도 클테니, 한 명의 개발자가 모든 프로젝트를 이해하는 것은 가히 엄두도 내지 못할 것이다. 여기에 새로운 기능을 추가한다고 할 때 얼마나 작은 기능을 구현하든간에, 무슨 사이드이펙트가 발생할지 예측이 쉽지 않을 것이다. 그래서 프로젝트 규모가 상당할 때부터 테스팅이 중요하다고 하는 것 같다. 특히 크리티컬한 결제 기능에서 이슈가 생기면 ..

배경 인턴 업무 중, 웹프로젝트를 AWS ECS(Elastic Container Service)에 배포할 일이 있었다. Next.js 프로젝트를 Docke 이미지로 말아서 ECR(Elastic Container Registry)에 올린 후, ECS에 배포하였다. 클러스터, 태스트 설정, 보안 그룹 설정 등의 사소한 문제는 있었지만 어떻게 해결했는데.. 이번에는 배포한 Next.js 프로젝트에서 로그인 토큰이 발급되지 않는 버그가 발생했다. 혼자서 해결해보려고 3시간 가량 코드를 쳐다보고 도커 이미지를 새로 빌드하면서 테스트해봤는데.. 도통 알 수가 없었다. 알게 된건, 로그인 api 요청 시, Next.js 서버에서는 로그인 인증 정보가 담긴 쿠키를 응답으로 제대로 보내고 있었다는 것과 Next.js 클..

배경 여태까지 나는 useEffect를 사용할 때, 익명 함수, arrow function을 사용했다. 타이핑하기도 간편하고 굳이 함수에 이름을 적을 필요성을 느끼지 못했기 때문이다. 그러나 강의를 들으면서 useEffect의 함수에 이름을 적는 것의 장점을 알게 되었다. 확실히 인턴을 하면서 하나의 파일인데도 코드량이 너무 길어서 이해하기 힘들었던 경험이 있다. 사수가 남긴 주석 덕분에 어떻게든 이해했지만, 이런 방법으로도 가독성을 향상시킬 수 있다는 것은 처음 알았다. 복잡한 로직을 다루게 될 때 한 번 적용해볼 생각이다. 포스팅하면서 머리에 새기고, 다시 되뇌어볼 생각이다. 1. 가독성 향상 함수에 이름을 적으면 당연하게도 코드의 가독성이 향상되면서 코드의 의도를 명확하게 전달할 수 있다. 함수의 ..