전체 글 (137) 썸네일형 리스트형 [NextJS] NextJS 시작하기 - 8. URL에 데이터 전달하고 가져오기(Catch All URL) 1. 모든 URL 잡기 pages 하위에 파일명을 [...params].js(원하는 이름 사용)와 같이 설정하면 어떤 URL이라도 잡을 수 있다. 이를 이용해 영화 제목을 URL에 넣고, URL에서 정보를 받아 About 페이지에 뿌려줄 것이다. 1. pages/movies/[id].js를 pages/movies/[...params].js로 수정하고 2. index.js에서 페이지 이동 부분을 수정한다. const onClick = (id, title) => { router.push(`/movies/${title}/${id}`); }; {movie.original_title} 이때, 홈에서 영화 하나를 클릭하면, 디테일 페이지의 URL은 /movies/Sing%202/438695와 같고, router를 .. [NextJS] NextJS 시작하기 - 7. 다이나믹 라우팅 & 페이지 이동 1. Routes NextJS의 개요를 다루면서, pages 폴더에 대해 살펴본 적이 있지만, 오늘은 더 자세한 기능을 볼 것이다. pages는 페이지 라우팅을 자동으로 설정해주는 폴더로, 정적 라우팅은 물론 동적 라우팅도 가능하다. 아래 표를 통해 사용법을 확인하자. pages 하위 폴더 구조 URL pages/index.js / pages/about.js /about pages/movies/index.js /movies pages/movies/all.js /movies/all pages/movies/[id].js /movies/12 동적 라우팅은 [변수].js 파일을 통해 설정할 수 있다. pages/movies/[id].js 에서는 id를 변수의 이름으로 설정한 것이고, useRouter를 통해 확.. [NextJS] NextJS 시작하기 - 6. Server-Side Rendering 설정하기 (getServerSideProps) 1. Server-Side Rendering 특징 유저에게 보여주기 위한 모든 UI를 서버가 준비하는 것이다. 서버는 필요한 모든 데이터를 받아 HTML 안에 넣어 클라이언트에게 전달한다. 즉, 클라이언트는 온전한 HTML(데이터 포함)을 받아 유저에게 화면을 보여준다. 이렇게 HTML에 모든 정보가 포함되어 있어 SSR은 SEO에 좋다. ex. SSR에서 API fetch를 하는 경우 서버에서 API에 대한 작업(호출->응답)이 완료되었을 때 페이지가 렌더링된다. 이때 유저는 로딩화면을 보지 않고 바로 데이터가 포함된 화면을 볼 수 있다. 단, API 응답이 느린 경우 유저는 아무것도 없는 빈 화면을 보게 된다. 2. getServerSideProps Next가 React와 다른 가장 큰 차이점은 SS.. [코딩 테스트 준비 - 기초] 7. 비트마스크(Bitmask) 1. 비트 연산 NOT, AND, OR, XOR A B ~A A & B A | B A ^ B 0 0 1 0 0 0 0 1 1 0 1 1 1 0 0 0 1 1 1 1 0 1 1 0 not 연산의 경우 자료형에 따라 결과가 달라지는 것을 주의해야 한다. 특히, unsigned와 signed에 따라서 정수로 보여지는 값이 달라진다. (2의 보수 때문) Shift Left, Shift Right A B A를 B비트만큼 오른쪽으로 밀기 A / (2^B) ex. 2 >> 4 = 2 / 2^4 = 2 / 16 = 1 / 8 2. 비트마스크 개요 비트마스크는 비트 연산을 이용해 부분집합을 표현하는 것이다. 비트마스크를 통해 집합을 정수로 나타낼 수 있다. 단, 이때 집합에 저장할 수 있는 수의 범위가 정해져 있어야 한.. [NextJS] NextJS 시작하기 - 5. 영화 데이터 가져오기 & API KEY 숨기기 (feat. optional chanining, redirects, rewrites) 1. 영화 데이터 가져오기 (javascript & react 관련) 데이터 가져오기 https://www.themoviedb.org/?language=ko에서 영화 API를 사용한다. 위 아래 코드의 결과는 동일하다. (아직 위 코드처럼 쓰는 게 익숙지 않다..) useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}` ) ).json(); setMovies(results); })(); }, []); useEffect(() => { const getMovie = async () => { const { results .. [코딩 테스트 준비 - 기초] 6. 브루트 포스 - 순열 1. 다음(이전) 순열 구하기 순열은 순서가 중요한 경우 사용한다. 순열을 사전순으로 나열했을 때, 첫 순열은 배열을 오름차순 정렬한 것이고, 마지막 순열은 내림자순 정렬한 것이다. 다음 순열이란 i번째 순열이 주어진 경우 i+1번째 순열을 의미한다. (이전 순열은 반대) 시간복잡도는 배열의 크기가 N인 경우 O(N * N!)이다. 따라서 N 다음 순열 이용 내림차순 정렬 -> 이전 순열 이용 [백준 10972 다음 순열 & 백준 10973 이전 순열] #include #include using namespace std; int main() { int n; cin>>n; int arr[n]; for(int i=0; i>arr[i]; if(next_permutation(arr, arr + n)){ //이전.. [NextJS] NextJS 시작하기 - 4. 영화 앱 구조 잡기 & SEO 1. Patterns NextJS 프로젝트를 만들 때 주로 따르는 패턴을 알아보자. 사람들은 대체로 너무 큰 _app.js 파일을 원하지 않는다. (왜?? 일단 그렇다고 한다.) 따라서 아래와 같이 Layout 컴포넌트를 만들어 사용한다. (보면 볼수록 gatsby와 비슷하다. 다만, _app.js의 존재로 Layout을 각 페이지마다 직접 넣어주지 않아도 된다는 점이 next의 특징인듯) components/Layout.js import NavBar from './NavBar'; export default function Layout({ children }) { return ( {children} ); } pages/_app.js import Layout from '../components/Layout.. [NextJS] NextJS 시작하기 - 3. Next.js 개요 아래 강의 중 "NextJS 시작하기"를 보고 정리한 내용입니다. (+ 추가적인 것도 있음) https://nomadcoders.co/nextjs-fundamentals/lectures/3454 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 1. pages create-next-app으로 프로젝트를 초기화하면 자동으로 폴더 구조가 생성된다. (gatsby와 비슷한 느낌?!) 최상위 아래에 pages라는 폴더가 있는데, 이는 라우터의 기능을 한다. pages 하위에 파일을 생성하면 파일명이 url 주소가 된다. (컴포넌트명은 중요하지 않음) index.js는 홈으로 설정되어 있다. (ex. localhost:.. 이전 1 ··· 8 9 10 11 12 13 14 ··· 18 다음
