React / Next

react에서 next만 바꿔줌typescript를 원하면 뒤에 -- 추가 후 적기리액트가 진행하는 라우팅이 따로 필요 없음pages 폴더에 '경로 이름.js' 파일을 만들고 return 한 내용이 그대로 출력index.js 파일은 홈 화면 출력localhost:300

Next의 Link는 to가 아닌 href 프로퍼티로 경로 설정style, className등을 설정 불가a태그를 따로 만들어 style 및 className 등 설정useRouter를 사용하면 location 정보(현재 경로, 이전 페이지 등)를 얻을 수 있음rout

module.css 파일은 styles라는 이름으로 import 됨className={styles.nav} 형식으로 스타일 적용중괄호 안에 백틱을 이용하여 ${}안에 원하는 className 각각 담기배열 안에 className을 담고 join(' ')를 이용해 묶기

NavBar.js에서 작성한 내용은 NavBar에서만 적용다른 파일에서 같은 클래스를 사용해도 적용 안 됨(독립적인 className을 자동으로 생성하기 때문)다른 파일에서 NavBar 컴포넌트에 스타일링 주려고 해도 안 됨

페이지가 렌더링 되기 전에 custom app을 먼저 확인 후 렌더링App({Component, pageProps}) <Component {...pageProps} />는 정해진 양식Component는 모든 컴포넌트를 지칭. 따라서 \_app.js파일에 내용을 적

async부터 감싸고 끝나자마자 실행res안에 results가 있어서 비구조할당

async redirects를 이용해 특정 주소에 접속했을 때(source) 다른 주소로 이동(destination)여러개를 설정하고 싶으면 { }를 이용해 여러개 만들기:path는 url 파라미터처럼 설정 가능\*을 이용해 뒤에 어떤 문장이 오든 catch 가능위에서

데이터가 유효할 때 화면이 보여지는 게 좋은지(server side rendering), Loading 화면을 보여준 뒤 데이터를 받는 게 좋은지 선택은 본인의 몫함수 이름 절대 변경 불가!!! return에 있는 object의 props 이름도 절대 변경 불가!!!a

page에 중첩라우터를 적용하고 싶다면 폴더 내에 파일을 만듬index.js 파일은 '/' 경로로 지정변수명을 대괄호 로 감싸줌. 만약 대괄호가 없으면 /movies/id로 경로가 설정됨url에 /movies/abc /movies/123 등을 입력한 결과 원하던 'de

API_KEY를 숨기기 위해 rewrite설정rewrite가 궁금하다면?https://velog.io/@minsu2344/Next-next.config에서-redirect와-rewrite로-중요-정보-가리기-.env-파일에서-정보-가져오기router 변수에 u

기존 router와 Link의 경로를 title을 포함하여 변경해 줌결과 화면 및 개발자 도구 상황(아직 ...id.js 파일 안 고쳐서 Loading으로 뜸)기존 ...id.js에서 의미를 위해 ...params로 변경router.query.params에 있는 tit

page 폴더에 '404.js'파일을 만듬404.js도 component이기 때문에 Layout 영향 받음

crate-next-app에서 이미 설치돼서 바로 import 해주면 됨탭 제목을 담당. children에 내용 삽입위에서는 title을 props로 받아와 사용탭 아이콘 담당public 폴더에 원하는 사진을 넣어둠rel='icon' href'/public에 있는 사진

Next.js에서 styled-components를 쓰는 방법은 리액트와 비슷함초기 설정에서 SSR에서 오류가 없도록 \_document와 .babelrc 설정이 필요npm 설치 시 babel-plugin-styled-components는 -D 넣어주기.babelrc

한 번 로딩 되는데는 시간이 걸리지만, 그 이후 필요한 부분만 변경할 수 있어 빠른 UX를 제공서버가 하는 일이 적어 상대적으로 서버에 부하가 적음페이지 로딩 시간(Time To View)이 길어 사용자가 처음 화면을 마주하는 데(First Contentful Pain

13.2 버전에서는 위 명령어를 실행해줬어야 했는데 현재 13.4에서는 자동으로 다 적용되어 있다.심지어 global.css에도 이미 import가 완료되어 있다!tailwind css를 쓰고 싶다면 처음 설정할 때 사용하겠다고 고개 끄덕 100번하고 가면 자동 설치되

components폴더를 src 하위에 만들고 그 안에 파일들을 만든다.Link를 이용해 라우팅 처리해준다.href에서 직접 작성은 따옴표 처리만 해줘도 되고, js 문법을 넣으려면 중괄호를 넣어준다.HTML에서 특수문자를 직접 사용하려면 " 같은 걸

global.csslayout.tsxbodyflex column으로 헤더, 내용, 푸터 세로 정렬width를 꽉 차게 두고, 최대 width를 2xl로 지정화면이 커졌을 때 가운데 정렬을 위해 mx-auto(margin 양쪽)gap-4는 각 요소의 갭을 16px씩 주는

Image를 import 하고 src에서 폴더 내 경로를 찾아간다.width와 height를 넣어주고, alt까지 필수요소다.round-full을 이용해 사진 동그랗게 만들기 가능그냥 img 태그 사용할 때처럼 가져오면 오류가 난다.next.config.ts에서 따로

path에서 import한 path는 경로를 타고 들어가 읽어올 파일을 가져온다.현재 작업 경로를 나타냄최상단 data 폴더의 posts.json파일을 읽어온다.fs/promises에서 importthen바로 뒤에 타입 지정해줄 수 있음then(res => JSON.p

사진의 너비와 높이를 잘 모를 때 부모 요소 중 relative, absolute, fixed를 찾아(absolute와 비슷) 사진 크기를 맞추는 속성object-contain(object-fit: contain)을 추가해주면 사진 비율 깨짐 없이 채울 수 있고, ob

리액트에서 addEventListener를 쓰면 적폐인 줄 알았는데 사실 개꿀이다.e.returnValue = '' 이거는 크롬에서는 암튼 써줘야한다고 한다....

clientY를 이용해 위로 나갔을 때만 콘솔을 띄운다.useEffect에 return 안 써도 결과 똑같은데 왜 써주는지 이해가 안 간다...

useRef를 element에 스프레드 연산자로 사용하면 useRef의 모든 효과가 적용된다.(기존에는 ref={fadeInH1} style={{opacity: 0}} 적었음)useRef.current는 현재 가리키는 element다.return시 ref의 프로퍼티를

navigator.online은 개발자도구 network의 online/offline을 boolean 형태로 반환

scroll은 state를 객체 형태로 받는 게 편하다객체를 return하면 const {y} = useScroll(); 로 받는다.사실 스크롤이 안 생겨서 확인은 못 했다^^

refetching 방법 및 loading data 컨트롤axios 어려워했는데 더 어려워진 것 가ㅌ...

deps가 비어있을 때(\[]) 첫 mount와 화면이 전환되어 unmount되기 전에 cleanup이 작동한다.deps에 값이 있을 때(count, name) 첫 mount와 함께 변수가 생성되며 useEffect 함수가 작동한다.deps의 값들이 변화할 때 해당 d

create-react-app을 이용해 만든 프로젝트는 .env 파일 변수들 앞에 REACTAPP'SOMETING' 처럼 REACTAPP을 넣어줌보안적으로는 취약함. 어차피 사용자에게 key들이 보여짐. 하지만 github에 노출하기 싫을 때 위처럼 설정process.

import의 절대경로를 설정해줄 수 있음최상위 폴더에 jsconfig.json 파일 생성 후 위 내용 작성하면 기본 경로가 'src'로 변경import시 '/components' === '/src/components'

예전부터 하고 싶었던 부드럽게 흘러나오는 사이드바...드디어 알아냈다...(샤라웃 투 n0hack)opacity로 불투명도 줬을 때 안 보이지만 박스 내부 클릭은 작동해서 포기했었다.이번엔 opacity와 pointer-events: none 으로 설정하여 아무리 마우

d.ts 파일에 device, PC 등 변수를 만들어 props로 크기 넣기보통 제외하고 @media screen만 사용함only : 뒤의 조건에서 만not : 뒤의 조건을 제외한all : 모든 미디어 타입aural : 음성 합성 장치braille : 점자 표시 장치h

css 박스를 가득 채우다보면 margin-bottom을 줘도 먹히지 않거나 잘려있을 때가 있음위 코드에서 Container의 크기가 지정 됐음에도 컨텐츠가 그 이상으로 들어가면 우리 배가 늘어나는 것처럼 비정상적으로 늘림위 코드는 최상단 div에 flex를 이용하여

코드 배운점 Notification API의 존재 현재 작성한 내용은 기본 알림이고 더 많은 알림은 아래 링크 참조 https://developer.mozilla.org/ko/docs/Web/API/notification