# next js

32개의 포스트
post-thumbnail

[Next js] Route 이해하기

React 프로젝트를 Next js로 마이그레이션 하면서 느꼈던 차이점은 라우팅하는 방법이였다. Next js는 pages 폴더 내의 폴더, 파일명으로 자동으로 path가 설정되기 때문에 이를 먼저 이해하고 디렉토리 구조를 결정해야 한다. React와의 다른 라우팅 방

2022년 6월 19일
·
0개의 댓글

[Next js] getInitialProps, getStaticProps

우선 getInitialProps, getStaticProps 2가지 기능은 모두 pre-rendering가 필요한 상황에서만 사용하는 것이 좋습니다.next 에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 pre-rendering을 수행합니다.p

2022년 5월 28일
·
0개의 댓글
post-thumbnail

Next JS가 뭔데? 먹는건가?

우선 Next JS에 대해 설명을 하기 전, React를 모르는 리.알.못 이라면 스크롤을 내리기 전에 당장 유튜브에 가서 리액트 완강을 조지고 와야 이해가 빠를것이다.Next JS는 기본적으로 리액트를 사용하여 개발할때, 더 편리하고 빠르게 개발을 할 수 있도록 도와

2022년 5월 11일
·
0개의 댓글
post-thumbnail

암호화폐 자동매매 프로젝트(4)

기본적인 기능을 우선 구현하고 릴리즈를 하고 사용해본 나는 앞으로 갈 길이 멀었다는 것을 느꼈다.사실 첫번째 릴리즈만으로 완벽할 순 없다는것은 알고 있었다. 많이 늦어졌는데 과정을 한번 남기고자 한다.업비트, models 패키지 분리프로그램 구동 방식 변경UI 변경우선

2022년 4월 24일
·
0개의 댓글

Shallow Routing

shallow routing 얕은 라우팅은 getServerSideProps, getStaticProps, getInitialProps 같은 fetch 메서드를 다시 실행하지 않아도 URL의 변경을 할 수 있는 라우팅이다.얕은 라우팅을 사용하면 현 상태 정보를 유지한

2022년 4월 9일
·
0개의 댓글
post-thumbnail

암호화폐 자동매매 프로젝트(3)

드디어 기본 기능 구현을 완료했다.FRONT: React Native, Next JSBACK: Node JS, ExpressDataBase: MongoDB이렇게 프레임워크를 사용하여 구현을 완료했다. (feat. Figma)React Native로 앱을 구현하고 그 안

2022년 3월 26일
·
0개의 댓글
post-thumbnail

Container Presentational Pattern

코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다.이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다.React

2022년 3월 24일
·
0개의 댓글

Conditional Rendering

주어진 조건에 따라 보여주는(렌더링하는) 내용이 달라지는 것위 코드도 조건부렌더링의 예라고 볼 수 있다.하지만 흔히들 말하는 조건부렌더링은 삼항연산자, &&/||연산자, 옵셔널 체이닝(Optional-Chaining)을 사용하는 것을 의미한다.data에서 받아온 정보가

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

Static, Dynamic Routing

라우팅 = 페이지이동 const router = useRouter() <- use를 썼다? hooks router.push("이동할 페이지") <- push 말고도 명령어 많이 있음 라우팅은 정적라우팅과 동적라우팅이있다 정적라우팅은 라우팅할 페이지를 하나하나 설

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

Rest-API / GraphQl-API

로이 필딩(Roy Fielding)이 박사 학위 논문에 정의한 개념이다.REST는 Representational State Transfer의 약자이다.HTTP 기반의 웹에서 대부분 사용되었으며 이를 따르는 시스템을 RESTful이라고 표현하기도 한다.Google, Fa

2022년 3월 19일
·
0개의 댓글

Template Literals

공부를 하던 중 다음과 같은 값을 나타낼 필요가 있었다.return이나 console.log를 이용해 표현해보려고 했더니너무 복잡하고 번거로웠다.그러다 Template Literals 라는 좋은 방식을 알게 되었다.내장된 표현식을 허용하는 문자열 리터럴로 위에서 사용한

2022년 3월 19일
·
0개의 댓글

Try / Catch

Try / Catch 는 실행할 코드에 문제 또는 예외가 생겼을 때 어떻게 반응할지를 정하는 코드이다.catch 뒤에 if를 사용하여 문제 상황에 맞는 결과를 안내받을 수 있다. Catch 뒤에 Finally 를 추가하여 오류 발생 여부와 관계없이 실행되기 원하는 코드

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

Import & Export

외부에서 내보낸 정보를 가져올 때 사용한다.(컴포넌트, 이미지 등)가져올 내용에 따라(한 개만 가져올 것인가, 여러 개를 가져올 것인가, 전체를 가져올 것인가)다음과 같이 분류된다.문서 전체를 가져오는 경우하나만 가져오는 경우여러 개를 가져오는 경우문서 전체를 가져올

2022년 3월 16일
·
0개의 댓글

JSX 알아보기

JSX란? 'J'ava'S'cript + 'X'ML 의 줄임말로 JS를 확장한 문법이다. React에서 다음과 같이 HTML과 유사한 코드를 사용 할 수 있게 해준다. 이 때문에 가독성이 높아 편리하다. 위 내용처럼 각각의 부분이 가지고 있는 역할이 있다. retu

2022년 3월 15일
·
0개의 댓글
post-thumbnail

[React Native] Webview에 Stack Navigation 적용하기

🎯 Intro 최근 사이드 프로젝트에서 앱 개발이 필요해 하이브리드 앱 을 만들고 있는데, React Native 와 Webview 를 이용하여 앱을 구현하고 있다. 웹뷰 기반의 하이브리드앱을 구현하면서 여러 문제에 부딪혔었는데, 대부분은 구글링의 힘으로 해결이

2022년 2월 5일
·
0개의 댓글
post-thumbnail

Next.js #3. 넥스트의 사전 렌더링

넥스트를 알아봅시다.

2022년 1월 26일
·
0개의 댓글
post-thumbnail

Next.js #2. Next에서의 라우터

next를 알아봅시다.

2022년 1월 26일
·
0개의 댓글
post-thumbnail

Next.js #1. Next.js 란

next를 알아봅시다.

2022년 1월 25일
·
0개의 댓글
post-thumbnail

react unit 테스트 셋업

react 에서 unit 테스트 셋업

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

React js에서 page key

Next js를 하는데 dynamic Page에서 history를 pop up 할 때 url의 id가 바뀌었음에도 페이지의 reload가 되지 않았다.원인 : Page에 key 값을 부여하지 않아서 ...해결 : Page에 unique key를 줬더니 아주 잘 된다 .

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