# next

251개의 포스트
post-thumbnail

Next.js - Routing

쉽게말해 라우팅은 사용자가 요청한 주소에 맞는 페이지를 보여주는 것이고, 라우터는 페이지를 이동할 수 있도록 하는 도구이다. 라우팅에는 정적(state)라우팅과 동적(dynamic)라우팅이 있다.네트워크적인 개념에서의 라우팅과 라우터 라우팅 -> 경로를 찾아가는 과정

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

Next.js에 Naver map 얹기

개발자는 아니지만 친한 동생이 백엔드 서버 개발자인데 뜬금 프로젝트 하나 해보자고 해서 진행을 하게 되었는데 Next.JS에 네이버 맵을 띄워야 하는 상황이 오게 되어 이리저리 삽질(?) 하다가 확인된 내용들을 정리하고자 합니다.. 벨로그와 구글링을 통해 Next

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

객체를 키와 값을 이용하여 동적 생성할 경우 Type 선언

TypeScript 환경에서 객체(objcet)를 키(key)와 값(value)를 이용하여 동적으로 생성하는 방법을 알아보자.

3일 전
·
0개의 댓글

next.js

리액트 프레임워크정적 사이트 만들때, SSR 지원하는 프로젝트를 만들때 유용SSR 고려하지 않아도 됨파일시스템 라우팅 사용 (파일경로가 곧 라우팅)pages폴더 안의 파일에 파일네이밍을 통해서 라우팅을 설정하기 때문에 정적인 경로를 설정하기 용이하다다이나믹 라우팅은ap

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

Spring Boot로 데이터 리턴 후 Next.js에서 Get 요청해보기

프론트엔드 개발자의 백엔드 공부 도전..!

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

카테고리별로 복수 선택이 불가능한 React CheckBox

카테고리마다 체크박스가 2개씩 있다고 가정하자. 복수 선택이 불가능하도록 설계하고, 체크한 아이템들을 마지막에 form onSubmit 할 때 넘겨주도록 구현하자.

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

Google Analytics(GA) 적용해보기🔬

GA 사용하여 프로덕트 상황 분석하기

6일 전
·
6개의 댓글

[Next] antd 사용해 화면 만들기

Link 태그 a 태그 대신 Link 태그를 사용하는 것이 좋다. a 태그를 사용하면 전체를 다 불러오게 되므로! 링크 태그로 호출이 될때 리소스를 거의 받아오지 않고 필요한 부분만 더 받아온다. 코드 스플릿이 잘 되어 있으면 효율적인 사용자 경험을 줄 수 있다. p

7일 전
·
0개의 댓글

next ssr

next를 쓰는 주된 이유는 서버 사이드 렌더링 때문이다.서버 사이드 렌더링이란 무엇인지 부터 정확히 개념을 짚고 넘어가보자.서버 사이드 렌더링클라이언트에서 요청을 하면 html 리소스를 서버로 넘기고 서버에서 데이터를 받아와 html이 완료되고 이를 다시 클라이언트로

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

Next.js 환경에서 현재 페이지 Image, PDF로 저장

현재 보여지는 페이지를 Image로 출력해보고, PDF로도 출력해보자.

2022년 5월 9일
·
0개의 댓글

React-nodebird #7

cookie 설정은 프론트엔드 개발자가 흔히들 빼먹는 부분이라고 한다.쿠키란 무엇인가 ?정보가 있고, 그 정보를 저장하기 위해 사용하는 것이라고 생각하면 될 것 같다.예를 들어 로그인 정보등이 대표적이다.아래는 정확하게 쿠키가 사용되는 과정을 복기하기 위해서 타 블로그

2022년 5월 8일
·
0개의 댓글

SSR/CSR 동작 원리와 차이점

브라우저 -> /blog 요청 -> 프론트 서버브라우저 <- js, html, css, img <- 프론트 서버한번 더 백엔드 서버로 /posts(게시글) 요청을 보낸다. 브라우저에서는 로딩창을 없애고 백엔드 서버에서 받은 데이터를 화면에 그려준다.브라우저

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

Cross-domain 환경에서 oauth를 통한 access-token 쿠키 등록하기

Cross-domain 환경에서 cookie 사용 시 발생할 수 있는 문제점과 oauth 인증 서버를 거쳐 cookie를 등록할때에 발생할 수 있는 문제점들에 대한 해결방법

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

React 에서 D3 사용하기 (막대 차트, 반응형)

React 환경에서 D3를 사용해보고, 반응형으로 차트의 크기를 설정해보자.

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

22.5.03 [HackerRank]Java List

🌱 배경지식 break; vs continue; break문 자신이 포함된 가장 가까운 반복문을 벗어난다. break문은 while 반복문 내의 if 조건문에 포함되어 있기 떄문에 가장 가까운 반복문인 while문 전체를 벗어나 3번은 출력되지 않았다. conti

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

useRef의 파라미터에서 타입

TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.

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

React Query 사용법

Client State와 Server State를 따로 관리하는 React Query를 완전 정복해보자!

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

ERR 오류해결 @eslint/eslintrc@1.2.2: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.5"

전에 없던 오류인데 갑자기 떠서 검색해보니 구선생님도 모른다는 소식에 좌절하고 있었다 ㅠㅠ심지어 설치파일에는 next 에 당연히 들어있어야하는 pages폴더도 없고.. 아무것도 존재하지 않은 상태..!분명 버전문제같아 찾아봤는데 도무지 모르겠어서 이것저것 검색하던 중

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

Next에서 Redux ToolKit 사용하기

Redux를 적용하려다 Redux ToolKit을 적용하게 되었다.

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

useRouter 첫 번째 렌더링 undefined Bug

Next.js 에서는 query string값을 사용하고 싶다면 useRouter를 이용할 수 있다. 하지만 이 값을 이용하여 데이터를 요청하면 원하던 대로 동작하지 않을 수 있다.

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