# nextjs

854개의 포스트
post-thumbnail

React에서 Next.js로 Migration(EP2: 과연 이게 올바른 선택일까? feat. Auth)

이번 EP2은 Next.js에서 어떻게 Auth를 처리했는지에 관한 이야기입니다. “next.js에서 httpOnly쿠키를 잘 다루는 법”

약 6시간 전
·
0개의 댓글
·

[Next.js] next/router의 asPath, pathname, query 사용 시 유의점

Next.js로 개발 시, 현재 나의 url 정보를 가져오기 위해서 next/router 에서 asPath, pathname, query 등을 사용할때 주의해야 할 사항이 있다.getServerSideProps 로 작성된 페이지를 SSR 페이지, 그렇지 않은 페이지를

약 6시간 전
·
0개의 댓글
·
post-thumbnail

[Next.js, react-query] 쇼핑몰 만들기

Next.js와 react-query로 쇼핑몰 만들기

어제
·
0개의 댓글
·
post-thumbnail

can't resolve 'styled-components' (feat : npm --save)

Next.js프로젝트에 tailwind와 styled-components 설치 후 서버를 실행시켰더니can't resolve 'styled-components'can't not find modules 모듈을 찾을 수 없다는 에러발생.뭐지 순정버전으로도 깔아줘야되나 싶어

2일 전
·
0개의 댓글
·
post-thumbnail

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

2일 전
·
0개의 댓글
·

Next.js Link 태그의 locale 동작 방식 파헤쳐보기

파헤치게된 계기 현재 저는 KR, JP, US 세 나라를 대상으로 각각 서비스를 개발하고 있고 그중 US를 Global 서비스로 전환하는 작업을 진행하고 있습니다. Global 서비스를 하면서 자연스럽게 해당 나라의 언어 노출에 대해 고민하게 됐는데요, 저희 팀은 도메인 뒤 lang] 슬러그를 이용해 언어 토큰을 판별([MDN 참고), 자체 i18n di...

2일 전
·
0개의 댓글
·
post-thumbnail

[FedEx 스터디] 테스트

테스트는 개발에서 필수 과정이며 세 단계로 나눌 수 있다.단위 테스트코드의 각 함수가 제대로 작동하는지 확인하기 위한 테스트E2E 테스트사용자 상호 작용을 흉내내서 특정 작동이 발생했을 때 적절한 응답을 하는지 확인하기 위한 테스트통합 테스트서로 구분되어 있는 영역이

2일 전
·
0개의 댓글
·
post-thumbnail

[FedEx 스터디] 커스텀 서버와 Next API Route

Next.js는 자체 서버를 제공하기 때문에 별도의 서버를 준비하고 실행할 필요가 없음.하지만 Next.js는 커스텀 웹 서버에서도 웹 애플리케이션을 쉽게 실행할 수 있도록 직관적인 API를 제공.정말 커스텀 서버가 필요할까?Next.js 웹 애플리케이션을 기존 서버에

2일 전
·
0개의 댓글
·
post-thumbnail

[FedEx 스터디] CSS와 내장 스타일링 메서드, UI 프레임워크

CSS-in-JS 라이브러리.Next.js의 내장 기능이기 때문에 패키지를 설치할 필요 없이 프로젝트를 시작하고 바로 사용할 수 있음.→ 동적인 CSS 규칙을 만들 수 있음, 다른 컴포넌트에 영향을 주거나 충돌을 일으키지 않음.모든 컴포넌트에 적용할 CSS 규칙을 만들

2일 전
·
0개의 댓글
·

[Next.js] 'Link', 'router.push()', 'a' tag 어떻게 다를까?

Next.js 로 웹 개발을 할때면 수 많은 페이지의 링크 이동을 구현 하게 되는데, 페이지 이동을 다음과 같이 크게 3가지의 방식으로 구현할 수 있다.빌드 후, a tag로 자동 변환된다.a tag 의 장점을 갖는다. (SEO 최적화, prefetch 가능, 우클릭

2일 전
·
0개의 댓글
·
post-thumbnail

NextJs-basic features/page

nextjs문서 읽으며 번역 및 모르는 개념 정리Next.js에서 Page는 page 디렉러리의 .js, .jsx, .ts, .tsx파일에서 내보낸 React 구성요소 이다. 각 페이지는 파일 이름 기반으로 경로와 연결된다.기본적으로, Next.Js는 모든 페이지를 P

3일 전
·
0개의 댓글
·
post-thumbnail

Next.js로 다국어(i18n) 제공하기

Next.js로 다국어를 적용하면서 공부하고 고민했던 흔적들에 대해서 설명합니다.

3일 전
·
0개의 댓글
·

[Next.js] 뒤로가기 시, 스크롤 위치 복원하기

경험적으로 그리고 상식적으로 웹 사이트 혹은 앱을 이용할 때, 다음페이지로 이동 시 해당 페이지의 스크롤은 맨 위이여야 하고, 뒤로가기 시 그 이전 페이지의 이동 전 스크롤 위치로 돌아가야 한다. 하지만 Next.js 프로젝트를 생성하고 페이지 이동을 해보면, 뒤로가기

4일 전
·
0개의 댓글
·
post-thumbnail

NextJS의 정적 페이지에 대한 데이터 가져오기

NextJS의 정적 페이지에 대한 데이터 가져오기에 대해 알아보자

5일 전
·
0개의 댓글
·
post-thumbnail

React HighLight recoil을 곁들인.

프로젝트 작업도중 키워드를 통해 게시물을 조회하는 부분을 진행하고 있었다조회된 게시물은 하이라이트 기능을 사용해야 했다.참고로 하이라이트 기능은 아래사진과 같이 검색된 키워드가 표시? 등 찾기쉽게 보여지는것을 뜻한다.바로 적용해보자!실제로 바닐라 js로도 충분히 만들

5일 전
·
0개의 댓글
·
post-thumbnail

nextjs ssr에 aop를 적용해보기

nextjs는 정말 어려운 것 같다.. nextjs에서 서버사이드렌더링을 구현에서 불필요한 중복 방지를 위해 삽질했던 경험을 기록했다.ISR을 적용해야되는 페이지를 제외하고 모든 페이지에 대해서 jwt토큰을 통해 회원 정보를 조회하는 api를 서버사이드 렌더링으로 가져

5일 전
·
0개의 댓글
·

[FE] React-NodeBird에서 발생한 문제(4)

이 오류의 원인은 deprecated된 babel-eslint를 사용하려했기 때문이었다. 현재 babel-eslint는 @babel/eslint-parser로 옮겨졌다.따라서, package.json 파일의"babel-eslint" 부분을 "@babel/eslint-p

6일 전
·
0개의 댓글
·
post-thumbnail

Open AI로 나만의 비서 만들기

나에 대해서 알아서 대답해주는 비서가 있으면 얼마나 좋을까? Open AI로 만들어보자! 추가적으로 openAI "User-Agent”에러 해결법과 Unexpected token 'A', "An error o"... is not valid JSON 해결법을 담고있습니다

6일 전
·
4개의 댓글
·
post-thumbnail

[AWS EC2] 배포를 해야 하는데, 막막할 때 (feat. pm2, NGINX, Certbot, Route53)

NextJS를 활용한 프로젝트를 배포하기 위한 여러 과정들을 다룬 글. AWS EC2 인스턴스 생성, 탄력적IP 적용, pm2를 이용한 무중단 배포, 간단한 NginX 설정, 도메인 설정, HTTPS 설정 등등

6일 전
·
2개의 댓글
·
post-thumbnail

openAI로 이름 짓는 Web App 만들기 2

이전에 Udemy 강의를 들으면서 openAI 를 api 로 가져와서 반려동물 이름을 짓는 웹을 구현했었다. 회고하면서 이거도 추가하고 저거도 추가하고... 등등 이런 저런 계획을 세웠었는데, 그걸 통틀어서 여러 이름을 지어주는 AI 작명소를 구현해보았다.한글로 기능하

2023년 3월 21일
·
0개의 댓글
·