# next
Next.js - Routing
쉽게말해 라우팅은 사용자가 요청한 주소에 맞는 페이지를 보여주는 것이고, 라우터는 페이지를 이동할 수 있도록 하는 도구이다. 라우팅에는 정적(state)라우팅과 동적(dynamic)라우팅이 있다.네트워크적인 개념에서의 라우팅과 라우터 라우팅 -> 경로를 찾아가는 과정
Next.js에 Naver map 얹기
개발자는 아니지만 친한 동생이 백엔드 서버 개발자인데 뜬금 프로젝트 하나 해보자고 해서 진행을 하게 되었는데 Next.JS에 네이버 맵을 띄워야 하는 상황이 오게 되어 이리저리 삽질(?) 하다가 확인된 내용들을 정리하고자 합니다.. 벨로그와 구글링을 통해 Next
객체를 키와 값을 이용하여 동적 생성할 경우 Type 선언
TypeScript 환경에서 객체(objcet)를 키(key)와 값(value)를 이용하여 동적으로 생성하는 방법을 알아보자.
next.js
리액트 프레임워크정적 사이트 만들때, SSR 지원하는 프로젝트를 만들때 유용SSR 고려하지 않아도 됨파일시스템 라우팅 사용 (파일경로가 곧 라우팅)pages폴더 안의 파일에 파일네이밍을 통해서 라우팅을 설정하기 때문에 정적인 경로를 설정하기 용이하다다이나믹 라우팅은ap
카테고리별로 복수 선택이 불가능한 React CheckBox
카테고리마다 체크박스가 2개씩 있다고 가정하자. 복수 선택이 불가능하도록 설계하고, 체크한 아이템들을 마지막에 form onSubmit 할 때 넘겨주도록 구현하자.
[Next] antd 사용해 화면 만들기
Link 태그 a 태그 대신 Link 태그를 사용하는 것이 좋다. a 태그를 사용하면 전체를 다 불러오게 되므로! 링크 태그로 호출이 될때 리소스를 거의 받아오지 않고 필요한 부분만 더 받아온다. 코드 스플릿이 잘 되어 있으면 효율적인 사용자 경험을 줄 수 있다. p
next ssr
next를 쓰는 주된 이유는 서버 사이드 렌더링 때문이다.서버 사이드 렌더링이란 무엇인지 부터 정확히 개념을 짚고 넘어가보자.서버 사이드 렌더링클라이언트에서 요청을 하면 html 리소스를 서버로 넘기고 서버에서 데이터를 받아와 html이 완료되고 이를 다시 클라이언트로
React-nodebird #7
cookie 설정은 프론트엔드 개발자가 흔히들 빼먹는 부분이라고 한다.쿠키란 무엇인가 ?정보가 있고, 그 정보를 저장하기 위해 사용하는 것이라고 생각하면 될 것 같다.예를 들어 로그인 정보등이 대표적이다.아래는 정확하게 쿠키가 사용되는 과정을 복기하기 위해서 타 블로그
SSR/CSR 동작 원리와 차이점
브라우저 -> /blog 요청 -> 프론트 서버브라우저 <- js, html, css, img <- 프론트 서버한번 더 백엔드 서버로 /posts(게시글) 요청을 보낸다. 브라우저에서는 로딩창을 없애고 백엔드 서버에서 받은 데이터를 화면에 그려준다.브라우저
Cross-domain 환경에서 oauth를 통한 access-token 쿠키 등록하기
Cross-domain 환경에서 cookie 사용 시 발생할 수 있는 문제점과 oauth 인증 서버를 거쳐 cookie를 등록할때에 발생할 수 있는 문제점들에 대한 해결방법
22.5.03 [HackerRank]Java List
🌱 배경지식 break; vs continue; break문 자신이 포함된 가장 가까운 반복문을 벗어난다. break문은 while 반복문 내의 if 조건문에 포함되어 있기 떄문에 가장 가까운 반복문인 while문 전체를 벗어나 3번은 출력되지 않았다. conti
useRef의 파라미터에서 타입
TypeScript 환경에서 useRef를 사용하고 있었다. 그리고 이 ref값을 함수나 훅스에 넘겨주는 과정에서 문제가 생겼다.
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폴더도 없고.. 아무것도 존재하지 않은 상태..!분명 버전문제같아 찾아봤는데 도무지 모르겠어서 이것저것 검색하던 중
useRouter 첫 번째 렌더링 undefined Bug
Next.js 에서는 query string값을 사용하고 싶다면 useRouter를 이용할 수 있다. 하지만 이 값을 이용하여 데이터를 요청하면 원하던 대로 동작하지 않을 수 있다.