# next

82개의 포스트

[Next.js] getStaticProps vs getServerSideProps

우선은 두 함수 모두 pre-render가 필요한 경우(SEO,Adsense 등)에만 사용하도록 권장한다."빌드 시에 딱 한번만" 호출되고, 바로 static file로 빌드 된다. 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.앱 빌드 후에 바뀌지 않는 내용

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

Next.js 초기 세팅 패키지

Next초기세팅 소스코드Next.js 초기세팅을 진행하다 보니, redux적용하는 법도 좀 어렵고, reactstrap, i18next 등등 라이브러리들을 적용하는데 제대로 되는게 하나 없었다.typescript도 공부 한지 얼마 안되었고 redux-saga도 처음이고

약 7시간 전
·
0개의 댓글

[next.js] reactstrap 적용

next.js 세팅을 완료하고 보니 reactstrap이 안먹힌다.아래의 코드를 pages/\_app.tsx에 추가 해준다.head 태그에 cdn을 추가해주면 되는거였다. 이 글을 보시는 분들은 이렇게 간단한 작업 때문에 나처럼 몇시간을 허비하지 않기를 바라며....

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

Data Fetching

Pages 문서에서 Next.js는 2종류의 pre-rendering이 있다고 설명했다: Static Generation 과 Server-side Rendering. 이제 각 경우의 data 가져오는 전략의 대해 좀 더 깊이 알아보자. pre-rendering시 dat

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

Pages

Next.js에서에서 각 페이지는 pages 디렉토리의 .js, .jsx, .ts or .tsx 파일들로부터 추출된 React Component이다.예: 만약 pages/about.js 페이지를 생성한다면 그건 아래와 같은 모습일거고, /about에 접근할 수 있다.N

2021년 4월 12일
·
0개의 댓글
post-thumbnail

NEXT 시작하기

첨 Next.js를 접했다면 먼저 learn course 로 시작해라. 코스와 상통하는 퀴즈들은 Next.js를 사용하기위한 모든 것을 가이드해준다.Node.js >= 10.13MacOs, Windows (including WSL), Linuxcreate-next-ap

2021년 4월 12일
·
0개의 댓글

SNS 회원가입 및 로그인 - 구글

이번 시간에는 전 시간처럼 SNS 회원가입 및 로그인에 대한 두번째 시간이다. 이번에는 구글을 통해서 회원가입 및 로그인 처리를 할 예정이다. 이번에도 passport를 통한 전략과 구글 개발 사이트에서 설정을 통해서 어떻게 진행되는지 알아보자. Google > h

2021년 4월 12일
·
0개의 댓글

SNS 회원가입 및 로그인 - 카카오

이번 시간에는 SNS로 회원가입과 로그인 구현에 대해서 정리를 하겠다. 한국에서 자주 쓰이는 카카오와 구글로 구현을 했다. passport를 이용하여 구현을 진행하였다. passport에는 SNS에 대해서 많은 기능을 가지고 있다. 카카오, 구글, 페이스북, 트위

2021년 4월 12일
·
0개의 댓글
post-thumbnail

Next.js-1 (install)

Javascript를 공부하고, React를 공부하고 포트폴리오를 만들고 있던 중, 작게나마 협업을 해본 경험이 있다면 스스로의 기술을 더 키울 수 있을 것 같았다.그래서 집사답게...!!고양이를 좋아하는 사람들이 모여서 팀 캔따개 라는 이름으로 프론트엔드 3명, 백엔

2021년 4월 11일
·
0개의 댓글

회원가입 및 로그인 구현 #4

이번 시간에는 로그인 후 지속적으로 로그인을 유지할 수 있도록프론트와 백에 코드를 추가하여 마무리할 예정입니다.로그인을 유지할 수 있는 라우트는 user로 정해서 진행했습니다.isLoggedIn / isNotLoggedIn 뭐지?로그인을 했는지 체크해주는 미들웨어다.그

2021년 4월 9일
·
0개의 댓글

회원가입 및 로그인 구현 #3

이번 시간에는 Router와 passport에 대해서 정리를 하려고 한다. Router - routes/page.js >클라이언트에서 API요청을 할 경우 해당하는 주소 및 메소드에 맞게 Router를 만들고, 작업 수행에 필요한 코드를 작성하면 된다. 위에서 예시

2021년 4월 9일
·
0개의 댓글

회원가입 및 로그인 구현 #2

로그인 및 회원가입 두번째 시간 노드로 구축한 백엔드 정리하려고 한다. Node.js로 서버를 구축하기 위해서 프레임워크인 Express를 사용하였다. DB는 MySQL이며, SQL문법 대신 자바스크립트 문법으로 대체할 수 있는 시퀄라이즈를 사용했다. Express

2021년 4월 8일
·
0개의 댓글
post-thumbnail

회원가입 및 로그인 구현 #1

이번 시간에는 회원가입과 로그인을 구현을 진행하였다. React Next.js typescript 로 프론트를 작업하였고, express MySQL sequelize passport로 백 부분을 작업했다. 투두앱을 제외한 프론트와 백을 구축해서 어떤 개인 실습을 해볼

2021년 4월 8일
·
0개의 댓글
post-thumbnail

[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)

앞전 포스트에서 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)에 대한 개념을 살펴보았다. 자세한 내용은 여기를 참고하자.이번 포스팅에서는 SPA 형태의 웹 서비스에서 SSR 방식을 적용하기 위해 Next.js를 간단히

2021년 4월 5일
·
0개의 댓글
post-thumbnail

VS Code - shortcuts

최근 C와 C++에 대해 공부를 시작하려고 하는데코딩한 걸 빌딩하다 보면 Terminal이 Task - g++ build action file로 되는데다시 bash나 zsh로 바꾸려면 마우스를 잡아야 되는게 너무 귀찮아서 단축키를 지정하기로 했다방법은 굉장히 간단한데상

2021년 3월 24일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] Tutorial 2 - Color Hunt Clone - Color Card 만들기

각 색 카드들을 컴포넌트로 만들어 봅시다😉

2021년 3월 23일
·
0개의 댓글
post-thumbnail

JAVA next() vs nextLine()

next()와 nextLine()간에 차이가 있다는 것을 알게되었다.

2021년 3월 22일
·
0개의 댓글

Next.js에서 styled-components 사용하기

넥스트에서 css-in-js 방식인 styled-component를 이용하려면몇가지 설정이 필요하다.ssr시에 실행되는 파일인 \_documents.js에styled-components의 스타일 코드를 추출하는 로직을 추가한다.공식문서를 참고해서 아래와 같이 getIn

2021년 3월 20일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] Tutorial 2 - Color Hunt Clone API와 레이아웃

컴포넌트의 재사용 튜토리얼을 위해 어떤 클론이 좋을까 고민하다 Color Hunt를 가져왔습니다🤓

2021년 3월 19일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] Tutorial 1 - Settings

TypeScript로 작성하는 Next의 기본 튜토리얼입니다. 공식문서의 튜토리얼이 짧아서 간단하게 작성했습니다.😅

2021년 3월 18일
·
0개의 댓글