# nextjs
React에서 Next.js로 Migration(EP2: 과연 이게 올바른 선택일까? feat. Auth)
이번 EP2은 Next.js에서 어떻게 Auth를 처리했는지에 관한 이야기입니다. “next.js에서 httpOnly쿠키를 잘 다루는 법”
[Next.js] next/router의 asPath, pathname, query 사용 시 유의점
Next.js로 개발 시, 현재 나의 url 정보를 가져오기 위해서 next/router 에서 asPath, pathname, query 등을 사용할때 주의해야 할 사항이 있다.getServerSideProps 로 작성된 페이지를 SSR 페이지, 그렇지 않은 페이지를
can't resolve 'styled-components' (feat : npm --save)
Next.js프로젝트에 tailwind와 styled-components 설치 후 서버를 실행시켰더니can't resolve 'styled-components'can't not find modules 모듈을 찾을 수 없다는 에러발생.뭐지 순정버전으로도 깔아줘야되나 싶어
NextJS 와 NestJS를 같이 써보자 (3) - 배포(feat. 클라우드타입)
1. https://velog.io/@pudding/NextJS-%EC%99%80-NestJS%EB%A5%BC-%EA%B0%99%EC%9D%B4-%EC%8D%A8%EB%B3%B4%EC%9E%90-1 https://velog.io/@pudding/NextJS-%EC%99
Next.js Link 태그의 locale 동작 방식 파헤쳐보기
파헤치게된 계기 현재 저는 KR, JP, US 세 나라를 대상으로 각각 서비스를 개발하고 있고 그중 US를 Global 서비스로 전환하는 작업을 진행하고 있습니다. Global 서비스를 하면서 자연스럽게 해당 나라의 언어 노출에 대해 고민하게 됐는데요, 저희 팀은 도메인 뒤 lang] 슬러그를 이용해 언어 토큰을 판별([MDN 참고), 자체 i18n di...
[FedEx 스터디] 테스트
테스트는 개발에서 필수 과정이며 세 단계로 나눌 수 있다.단위 테스트코드의 각 함수가 제대로 작동하는지 확인하기 위한 테스트E2E 테스트사용자 상호 작용을 흉내내서 특정 작동이 발생했을 때 적절한 응답을 하는지 확인하기 위한 테스트통합 테스트서로 구분되어 있는 영역이
[FedEx 스터디] 커스텀 서버와 Next API Route
Next.js는 자체 서버를 제공하기 때문에 별도의 서버를 준비하고 실행할 필요가 없음.하지만 Next.js는 커스텀 웹 서버에서도 웹 애플리케이션을 쉽게 실행할 수 있도록 직관적인 API를 제공.정말 커스텀 서버가 필요할까?Next.js 웹 애플리케이션을 기존 서버에
[FedEx 스터디] CSS와 내장 스타일링 메서드, UI 프레임워크
CSS-in-JS 라이브러리.Next.js의 내장 기능이기 때문에 패키지를 설치할 필요 없이 프로젝트를 시작하고 바로 사용할 수 있음.→ 동적인 CSS 규칙을 만들 수 있음, 다른 컴포넌트에 영향을 주거나 충돌을 일으키지 않음.모든 컴포넌트에 적용할 CSS 규칙을 만들
[Next.js] 'Link', 'router.push()', 'a' tag 어떻게 다를까?
Next.js 로 웹 개발을 할때면 수 많은 페이지의 링크 이동을 구현 하게 되는데, 페이지 이동을 다음과 같이 크게 3가지의 방식으로 구현할 수 있다.빌드 후, a tag로 자동 변환된다.a tag 의 장점을 갖는다. (SEO 최적화, prefetch 가능, 우클릭
NextJs-basic features/page
nextjs문서 읽으며 번역 및 모르는 개념 정리Next.js에서 Page는 page 디렉러리의 .js, .jsx, .ts, .tsx파일에서 내보낸 React 구성요소 이다. 각 페이지는 파일 이름 기반으로 경로와 연결된다.기본적으로, Next.Js는 모든 페이지를 P
[Next.js] 뒤로가기 시, 스크롤 위치 복원하기
경험적으로 그리고 상식적으로 웹 사이트 혹은 앱을 이용할 때, 다음페이지로 이동 시 해당 페이지의 스크롤은 맨 위이여야 하고, 뒤로가기 시 그 이전 페이지의 이동 전 스크롤 위치로 돌아가야 한다. 하지만 Next.js 프로젝트를 생성하고 페이지 이동을 해보면, 뒤로가기
React HighLight recoil을 곁들인.
프로젝트 작업도중 키워드를 통해 게시물을 조회하는 부분을 진행하고 있었다조회된 게시물은 하이라이트 기능을 사용해야 했다.참고로 하이라이트 기능은 아래사진과 같이 검색된 키워드가 표시? 등 찾기쉽게 보여지는것을 뜻한다.바로 적용해보자!실제로 바닐라 js로도 충분히 만들
nextjs ssr에 aop를 적용해보기
nextjs는 정말 어려운 것 같다.. nextjs에서 서버사이드렌더링을 구현에서 불필요한 중복 방지를 위해 삽질했던 경험을 기록했다.ISR을 적용해야되는 페이지를 제외하고 모든 페이지에 대해서 jwt토큰을 통해 회원 정보를 조회하는 api를 서버사이드 렌더링으로 가져
[FE] React-NodeBird에서 발생한 문제(4)
이 오류의 원인은 deprecated된 babel-eslint를 사용하려했기 때문이었다. 현재 babel-eslint는 @babel/eslint-parser로 옮겨졌다.따라서, package.json 파일의"babel-eslint" 부분을 "@babel/eslint-p
Open AI로 나만의 비서 만들기
나에 대해서 알아서 대답해주는 비서가 있으면 얼마나 좋을까? Open AI로 만들어보자! 추가적으로 openAI "User-Agent”에러 해결법과 Unexpected token 'A', "An error o"... is not valid JSON 해결법을 담고있습니다
[AWS EC2] 배포를 해야 하는데, 막막할 때 (feat. pm2, NGINX, Certbot, Route53)
NextJS를 활용한 프로젝트를 배포하기 위한 여러 과정들을 다룬 글. AWS EC2 인스턴스 생성, 탄력적IP 적용, pm2를 이용한 무중단 배포, 간단한 NginX 설정, 도메인 설정, HTTPS 설정 등등
openAI로 이름 짓는 Web App 만들기 2
이전에 Udemy 강의를 들으면서 openAI 를 api 로 가져와서 반려동물 이름을 짓는 웹을 구현했었다. 회고하면서 이거도 추가하고 저거도 추가하고... 등등 이런 저런 계획을 세웠었는데, 그걸 통틀어서 여러 이름을 지어주는 AI 작명소를 구현해보았다.한글로 기능하