FRONTEND

Next.js 14에서 뭐가 달라졌을까!

Next.js가 2016년에 처음 공개되고 나서 시간이 흘러 벌써 7살이 되었습니다 🎉 사실 저는 Next.js 13 버전부터 발을 들인 프론트엔드 응애라서 크게 와닿진 않지만.. 최근에 14로 버전업 되었다는 소식에 Next.js 13도 보내줄 겸, 이전 버전과 어떤 차이가 있는지 한 번 정리하고 넘어가려고 합니다. 지금 글을 쓰는 순간에 이미 버전이 0.1 올라가서 14.1.0이네요..ㅎ 자, 그럼 시작해볼까요? Next.js 14 버전업 특징 5가지 Turbopack : app router & pages router에 대한 5000회의 테스트 통과 - 53% 빨라진 로컬 서버 시작 속도 - 94% 빨라진 코드 업데이트 Server Actions(Stable) : 점진적으로 개선된 mutations ..

[yarn-package 배포] 나만의 boilerplate 만들기 (with inquirer)

사이드 프로젝트나 기업 과제를 수행할 때, 매번 새롭게 프로젝트 환경을 세팅해줘야 했는데, 프로젝트 기획에 맞춰서 달라지는 부분도 있지만, 거의 비슷하게 가져가는 스택은 그야말로 boilerplate였다. 그런 단순 반복 작업을 피하고자 이번에 날잡고 내 입맛대로 세팅한 '나만의 boilerplate'를 만들어보았다. 이 글은 제작 과정과 트러블슈팅에 대한 내용을 담고있다. workflows bolierplate 제작 1. 내 입맛대로 세팅한 boilerplate 제작 2. boilerplate github push yarn package 배포 1. 배포용 package 제작 2. yarn publish --access public 설치 테스트 1. 빈 폴더 생성 2. npx create-tangjin-..

[CI/CD] Docker-compose + github-actions + EC2 적용기

면접어때 프로젝트의 CI/CD를 적용하는 과정에서 생겼던 트러블 슈팅을 기록해보려고 한다. 목표 main 브랜치에 코드 변경이 일어나면 자동으로 EC2 서버에 배포된다. workflows feature-example -> main merge github-actions에서 감지 Docker Image build -> DockerHub push EC2 접속 및 docker-compose로 컨테이너 실행 배포 완료 CI/CD를 진행할 면접어때의 프로젝트 환경은 Next.js + Docker-compose + AWS EC2 + github-actions 이다. 필요한 중요 파일은 3가지로 다음과 같다. github-actions.yml docker-compose.yml DockerFile 먼저 해당 브랜치의 a..

Linux 폴더 권한 확인 + 권한 설정

이번에 폴더 권한 에러를 겪으면서 폴더 권한을 확인하고 새롭게 설정하는 Linux 명령어에 대해 정리해 보려고 한다. 폴더 권한 확인 명령어 ls -ld 폴더 결과 예시 : drwxr-xr-x 3 user group 4096 Jan 24 10:00 폴더 해당 결과를 나눠서 살펴보자. drwxr-xr-x d : 디렉토리를 나타낸다. 파일인 경우 ' - ' 로 표시된다. r : 읽기 권한 w : 쓰기 권한 x : 실행 권한 rwx를 한 묶음으로 왼쪽부터 소유자 권한, 소유 그룹 권한, 기타 사용자 권한 순으로 표시된다. 따라서 위 drwxr-xr-x의 뜻은 디렉토리이며, 소유자는 읽기,쓰기,실행 권한이 있고, 소유 그룹과 기타 사용자는 읽기와 실행 권한만 있다는 뜻이다. 3 링크 수 : 권한 표기 다음에 나..

EC2 - Nginx-proxy-manager 폴더 permission denied

이번 면접어때 프로젝트의 EC2 환경에서 github-actions + Docker로 CI/CD를 배포하는 과정에서 에러가 발생했다. DockerHub에서 nginx-proxy-manager 이미지를 pull 받아 사용하고있는데, 해당 이미지를 컨테이너에 올릴 때 참조하고있는 nginx-proxy-manager 폴더에서 permission denided가 되고있었다. 폴더 권한 확인 // 현재 폴더 권한 확인 ls -ld nginx-proxy-manager // 결과 : drwxrwxr-x 4 root root 4096 Sep 8 00:02 nginx-proxy-manager 먼저 해당 폴더의 권한을 확인해봤다. 그랬더니 drwxrwxr-x 4 root root 4096 Sep 8 00:02 nginx-..

Nextjs + Docker로 EC2 배포할 때 500Error

이번 [면접어때] 프로젝트의 프론트 배포과정에서 겪은 에러를 기록해본다. 도커로 배포하는 것도 3번째인데 매번 배포환경이 달라지다보니 한 번에 성공한적이 없는 것 같다. 저번 [아코하] 프로젝트에서도 Nextjs를 사용해서 배포했지만, 패키지 매니저로 yarn-berry를 쓰면서 도커의 multi-staging-build로 빌드 이미지 최적화를 하려했으나.. yarn-berry pnpMode의 패키지 의존성 문제, Nextjs13과의 호환성 문제 때문에 상당히 애를 먹고 끝내 타협 엔딩으로 막을 내렸었다! 그래서 이번 프로젝트 배포에서는 yarn을 쓰기 때문에 더 최적화 빌드가 간절했다. 배포 준비 이번에 배포한 환경은 크게 yarn + Nextjs + Docker이고 nginx-package-manag..

[Jest] react-query + recoil 적용시 에러

⚠️ 문제 상황 컴포넌트를 테스팅하는 과정에서 queryClient , recoilRoot 에러 발생 ERROR 1 : No QueryClient set, use QueryClientProvider to set one 에러난 코드는 다음과 같다. // _app.tsx ... return ( ) // Calendar.test.tsx import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { MainCalendar } from '@/components/project-main/Calendar'; import { renderWithQueryClient } fr..

[테스팅 초기 설정] Jest + yarn-berry + Nextjs + Recoil + TypeScript

[아코하] 프로젝트에서 Jest를 적용하기 위해 세팅이다. 프로젝트 환경 - yarn-berry 3.3.1 - Next.js 13.1.2 - Recoil 0.7.6 - TypeScript 4.9.4 - Jest 29.5.0 1. 프로젝트 시작 & 관련 모듈 설치 yarn create next-app --typescript CNA를 TypeScript 로 설치해주고, yarn add -D jest @types/jest jest-environment-jsdom ts-jest babel-jest Jest 와 관련 라이브러리도 설치해준다. - jest : 단위테스트에 적합한 테스팅 라이브러리 - jest-environment-jsdom : Jest 28 버전 이후부터는 테스팅환경을 jsdom이 아니라 이 패키지..

yarn create next-app 설치 안됨

⚠️ 문제 상황 새롭게 project 를 생성하려고 했는데 에러와 함께 설치가 안됨 yarn create next-app . —typescript → Usage Error: The nearest package directory (C:\Users\tangjin\Desktop\test) doesn't seem to be part of the project declared in C:\Users\tangjin 💡 문제 파악 검색해보니 프로젝트 폴더 상위 경로에 yarn.lock or package.json or node_modules 가 있으면 설치가 안된다고 함 💯 문제 해결 Users/tangjin 에 실제로 yarn.lock 파일과 숨김파일로 node_modules 등등이 있었고 이 파일들을 전부 삭제했더..

[a-coha] 모달 창 상태 제어 문제

목표 원했던 구현은 해당 아이템을 클릭했을 때 모달창이 뜨고, 모달 창을 제외한 다른 곳을 클릭하면 모달 창이 사라지는 것. 문제 상황 처음 클릭 했을 때는 모달 창이 뜨지만 다른 곳을 클릭해도 모달 창이 닫히지 않는다. 모달 창의 open 과 close를 recoil boolean 상태값으로 관리했는데, 어째서인지 동작하지않는다. // userList/index.tsx ... const onClickHandler = (e:React.MouseEvent) => { setIsUserModalOpen(true); }; ... return ( {channelUsers && channelUsers.map((member: ChannelUser, i: number) => { const isOnUser = onUse..