nextjs
1.[Next.js] next-cookies(서버/클라이언트 쿠키 사용기)
쿠키(Cookie)란?쿠키는 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일입니다. 웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트에서의 사용자 세션 기간 동안 저장합니다. 웹 브라우저는 향후 사용자가 웹 서버에 요청할 때 관련 쿠키를 첨
2.[Next.js]Nextjs 프로젝트 도커로 빌드하기
도커 적용하기 먼저 도커 홈페이지로 이동후 각각 OS 환경에 맞는 도커 데스크탑을 설치해준다. 편한 개발환경을 위해 vscode 익스텐션도 설치해주자!! 설치를 한뒤 프로젝트 파일로 이동한 뒤 루트디랙토리에 Dokerfile, doker-compose.yml 파일을 생성해준다 .dokerignore 파일도 만들어주면 좋다!!(뒤에서 설명할 예정) 현재...
3.[Next.js]next 프로젝트 도커 빌드하기(2)
현재 프로젝트는 벡엔드 서버가 아직 배포가 되지않아서 명세서에 맞게 msw를 이용하여 mock 서버를 통해서 작업을 하고있다.이때 도커에 빌드시 msw 서버를 같이 빌드해서 추후 벡엔드 서버가 나오면 msw 서버 부분만 지우고 사용하고자 했다처음에는 docker로 빌드
4.[Next.js]next 프로젝트에 도커 적용기
트러블 슈팅 도커 빌드시 환경변수를 읽어 오지 못하는 오류가 생겼다 yml파일 이런식으로 설정을 해주고 docker compose config 명령어를 치면 환경변수가 잘 담기는데 빌드 과정에서 api 사용 부분에서 환경변수를 찾지 못하는 오류가 발생했다 이유는 우리 프로젝트는 fetch 함수를 커스텀 해서 사용중인데 API를 사용 하는 부분에서 ...
5.Next.js 프로젝트에서 Express 서버를 분리하여 배포한 이유
안녕하세요! 오늘은 제가 개발한 DevStudy Mate 프로젝트에서 기존에 Next.js에 통합되어 있던 서버 기능을 별도의 Express 서버로 분리하게 된 이유와 과정을 공유하려고 합니다.Express는 Node.js 환경에서 실행되는 웹 애플리케이션 프레임워크입
6.Nextjs 프로젝트에 express 와 파이어베이스 적용기
이전 글에서 express로 서버를 따로 연후 파이어베이스와 연동하는 작업을 진행 하였습니다.데이터베이스 설계는 애플리케이션의 성능과 확장성에 중요한 영향을 미친다는걸 알고는 있었지만 프론트엔드로써 직접 설계를 해본적은 한번도 없었다. 이번 작업 이후로 정말 데이터베이
7.안전한 인증 시스템 구현하기(토큰 관리) + 프론트엔드의 보안
최근 프론트엔드 개발에서 보안은 그 어느 때보다 중요한 주제가 되었습니다. 특히 Next.js와 같은 하이브리드 렌더링 프레임워크에서는 서버와 클라이언트 컴포넌트를 적절히 분리하고 통합하는 방식으로 보안과 성능 모두를 향상시킬 수 있습니다. 이번 글에서는 제가 구현한