전체 글70 next.js 로 엔드포인트 만들기; next.js 로 엔드포인트 만들기; pages폴더 안에 api폴더를 만들고 파일을 생성하면 api의 경로가 된다 -> http://localhost:3000/api/links 이런 식으로 const links=(req, res)=>{ res.send('Hello, api') // res.send는 응답을 보내는 메서드 } export default links links 파일에 api를 요청하는 코드를 넣고 주소로 들어가면 이렇게 나온다. 다이나믹 라우팅도 활용 가능 -> http://localhost:3000/api/short-links/(아무거나 넣기) [id.js] 파일에 코드를 적음 const handler=(req, res)=>{ res.send('hello next') // res.send는 .. 2024. 2. 21. 02.15 next.js의 프리렌더링 공부 프리렌더링 단순한 의미로는 ~~ 이전에 하는 렌더링 -> 웹페이지 로딩 이전에 하는 렌더링 프리렌더링이 실행되는 시점은? 웹브라우저가 html 코드를 받아오기 전에 렌더링 프리렌더링의 장점 - 초기 로딩이 빨리진다 -> html이 렌더링된 상태로 제공되기 때문에 - 검색엔진 최적화 -> 비어있는 html이 아니라 렌더링된 html을 미리 받기 때문에 프리렌더링의 2가지 방식 1. 정적 생성 2. 서버사이드 렌더링 1. 정적 생성 빌드를 하는 시점에 렌더링을 하는 것 (빌드할 때 html을 만드는것) - 빌드는 배포하기 전에 소스코드를 실행할 수 있는 형태로 바꿔놓는 것 소스코드를 빌드하면서 파일로 미리 만들어둠 -> 웹브라우저로 접속하면 만들어 놓은 걸 그대로 보여줌 -> 렌더링 된 상태에서 자바스크립트.. 2024. 2. 15. next.js공부중 next.js 1. 리액트 컴포넌트 파일에서 module.css를 import 해서 사용하기 2. global.css 적용할 때는 _app컴포넌트에 적용하기 3. alias 라는 거로 @ 설정 -> @ 사용하면 프로젝트 최상위 폴더를 기준으로 경로를 사용할 수 있음. -> 현재 파일의 경로랑 상관없이 사용 가능 4.파일시스템 기반 라우팅 -> 파일의 경로가 주소에 매칭되는 라우팅 방식 -> 폴더를 만들고 자바스크립트 파일을 만들면 됨 5. next.js의 폴더구조는 next.js에서 만든 거기 때문에 꼭 pages로 만들어야 하고 이 안에 파일을 넣으면 페이지가 됨 6. index.js는 최상위 페이지(홈페이지) 7.페이지에 사용되는 파일들은 꼭 export default로 해야한다. 8. pages폴더.. 2024. 2. 14. typescript 다른 타입들 enum 은 typescript에서만 사용하는 문법 => (열거형)값의 종류를 나열할 수 있는 경우에 사용할 수 있는 타입 enum Size { S = 'S', M = 'M', L = 'L', XL = 'XL', } console.log(Size.S) 값으로 사용할 때는 객체처럼 점 표기법 사용 / 되도록이면 값을 정해놓고 사용하는게 좋다. interface => 똑같은 타입을 여러번 지정하고 싶지 않을 때 interface Product { id: string; name: string; price: number; membersOnly?: boolean; } const hat: Product = { // interface product를 지정 id: 'a2202', name: '알록달록 모자', pric.. 2024. 2. 5. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
