📌 Catch all URL 어떤 URL이던 catch 해내는 url 항상은 아니지만 필요한 순간이 있음 예를 들어 영화 제목을 url에 넣어 SEO에 좋음 파일명을 […id].js 처럼 앞에 … 을 붙여준다. const router = useRouter(); const onClick = (id: string, title: string) ...

📌 getServerSideProps getServerSideProps 데이터가 없을때 loading을 보여줄것인지 loading없이 API가 완료되도록 기다린 후에 모든 정보를 보여줄거인지 선택하게된다 먼저 loading을 보여줄때는 react에서 사용하던것처럼 사용하고 loading없이 API가 완료되도록 기다린 후에 모든 정보를 보...

📌 NextJS에서 API키 숨기기 api 키 보는법 next의 redirects 와 rewrites 활용 //next.config.js /** @type {import('next').NextConfig} */ const API_KEY = "api_key"; const nextConfig = { reactStrictMode: true,...

📌 NEXT JS github pages 배포 작성 예정~

📌 NEXT JS 13 변경점 /pages 폴더 변경전 /pages ㄴ test/ ㄴ index.tsx <- /test ㄴ page.tsx <- /text/page ㄴ some.tsx <- /test/some 변경후 /app ㄴ test/ ㄴ index.tsx <- 접근불가 ㄴ page.tsx <- /t...

📌 react-query react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. 사용 이유 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터...

📌 iterable, iterator 이터러블을 [for…of], [전개 연산자], [비구조화] ..등, 이터러블이나 이터레이터 프로토콜을 따르는 연산자들과 함께 동작하도록 하는 약속된 규약을 의미한다. 이터러블은 이터러블 규약을 따르는 객체 ✏️ iterable 이터레이터를 리턴하는 Symbol.iterator 메서드를 가진 객체 배열의 경...

📌 Generator ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. 제너레이터 함수는 일반 함수와는 다른 독특한 동작을 한다. 제...

📌 redux-thunk ✏️ redux-thunk redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어입니다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. redux-thunk는 리덕스의 창시자인 Dan Abramov가 만들었으며, 리덕스 공식 매뉴얼에서도 비동기 작업을 처리하기 ...

📌 footer 하단고정 ✏️ 1. fixed position: fixed; bottom: 0; fixed 의 경우 footer가 바디 컨텐츠를 가리게 되어 fail ✏️ 2. absolute position: absolute; bottom: 0; 스크롤이 없으면 정상적인것처럼 보이나 스크롤이 생기는 순간 위치가 고정되어 footer가 ...