Hong_DEVBOX

getServerSideProps gerServerSideProps 함수를 호출하게 되면 반환된 데이터를 사용하여 각 요청에 미리 페이지를 렌더링 하게 된다. export async function getServerSideProps(context{ return{ props:{} } } getServerSideProps는 언제 실행될까? gerServerSideProps는 오직 서버사이드에서만 실행되고 브라우저에서는 실행되지 않는다. 만약 페이지에 요청이 들어오면, getServerSideProps는 요청 시간에 실행되고 반환된 값으로 미리 렌더링을 한다. 만약 현재 페이지를 `next/link`나 `next/router`와 같은 클라이언트 사이드 페이지 이동을 통해 요청했을 경우 getStaticProp..

NextJS 2022. 7. 21. 10:47

HTML이란? HTML(HyperText Markup Language)란 웹페이지의 구조와 컨텐츠를 나타내기위해 사용되는 코드이다. 예를들면, 여러 단락으로 구성된 컨텐츠를 나타낼 수도 있고, 리스트 형태나 이미지 또는 데이터 표를 나타낼 수도 있다. HTML은 컨텐츠 구조를 정의하는 markup language이다. HyperText란 단일 웹사이트 내에서을 연결이던 다른 사이트로의 연결이든 하나의 웹페이지에서 다른 웹페이지로의 연결을 나타낸다. 즉 HTML은 한마디로 웹페이지 간을 연결해주는 컨텐츠 구조 및 표현이라고 생각 하면 된다. HTML은 여러개의 '요소(element)'로 구성된다. 이 요소와 "" 둘러쌓여져 구성된 '태그(tag)'는 각각의 표현과 기능을 한다. 이렇게 감싸진 태그는 단어나..

HTML,CSS 2022. 7. 20. 12:46

getStaticPaths getStaticPaths 함수를 사용하게 되면 특정 경로에 따라 미리 정적 렌더링이 가능하다. export async function getStaticPaths(){ return{ paths: [ {params : {...}} ], fallback: true } } getStaticPaths는 정적으로 페이지를 생성하기 떄문에 앞선 포스트에서 언급했던 getStaticProps와 같이 사용할 수 있지만 getServerSideProps와는 같이 사용할 수 없다. 언제 getStaticPaths를 써야할까? 동적 라우트(dynamic routes)를 이용하여 미리 정적으로 페이지를 생성해야할 때 사용거나 다음의 경우에 사용한다. 데이터를 headless CMS에서 가져오는 경우..

NextJS 2022. 7. 20. 09:45

Data Fetching 이전 포스트에서 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-Side Renderin)을 알아보았다. 이번 포스트에서는 데이터를 가져오기 위해 Next.js에서 제공하는 세 가지 함수 및 client-side에서 어떻게 데이터를 가져오는지 알아보자. Next.js에서는 데이터를 가져오기위해 세 가지 함수가 사용된다: getStaticProps (Static Generation) : 프로젝트가 빌드될 때 데이터를 가져온다. getStaticPaths (Static Generation) : 데이터를 기반으로 동적 라우트를 지정한다. getServerSideProps (Server-Side Rendering) : 각 요청이 있을 때마다 데이터를 가져온..

NextJS 2021. 8. 27. 16:23

Pages Next.js에서 page 는 `.js`, `.jsx`, ' .ts'에서 내보내진 리액트 컴포넌트이다. 만약 `pages/about.js`와 같이 pages 디렉토리에 js 파일을 생성하게 되면 `/about` url 을 통해 접근이 가능하다. function About() { return About } export default About Pages with Dynamic Routes (동적 라우팅) Next.js는 동적 라우팅을 지원한다. 예를 들어 `pages/posts/[id].js` 와 같은 파일을 생성하게 되면 `posts/1`, `posts/2`와 같이 동적으로 접근이 가능하다. Two forms of pre-rendering Next.js는 정적 생성(Static Generati..

NextJS 2021. 8. 27. 12:23

Next.JS란? React를 위한 프레임워크로 weback과 같은 번들러, Babel과 같은 컴파일러를 사용하여 코드를 변환해주거나 코드 분할과 같은 프로덕션 최적화 및 성능, SEO(검색 최적화), SSR(서버사이드 렌더링)등을 수행한다. Next.JS 설치 Next.JS 설치에 앞서 VScode등 IDE 및 Node.js가 설치되어 있어야한다. npx create-next-app [프로젝트명] Node.js가 설치되어 있다면 콘솔창에 npx create-next-app이란 명령어를 통해 프로젝트를 자동으로 설치 할 수 있다. 필자는 npx create-next-app next-tutorial 로 프로젝트를 생성했다. 명령어를 입력하게되면 react, react-dom, next등 기본적으로 의존성이..

NextJS 2021. 8. 19. 16:30

프로토콜의 종류 프로토콜은 통신 프로토콜 또는 통신 규약을 의미하며 컴퓨터나 원거리 통신 장비 사이에서 주고 받는 양식의 규칙과 체계를 의미한다. HTTP (Hyper Text Transfer Protocol) HTTP(Hyper Text Transfer Protocol)란 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. 주로 TCP를 사용하고 HTTP/3 부터는 UDP를 사용하며 80번 포트를 사용한다. HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트는 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림을 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해..

웹 IT 지식정보 2021. 7. 20. 11:06

문자열 메소드 및 함수 Methods Description String.find('찾을 문자열') 찾고 있는 문자열의 처음 인덱스를 반환한다. 예를들면 'apple'이란 문자열에서 'p'를 찾는다면 인덱스 1을 반환한다. 없으면 -1을 반환한다. String.rfind('찾을 문자열') 찾고 있는 문자열의 마지막 인덱스를 반환한다. 예를들면 'apple'이란 문자열에서 'p'를 찾는다면 인덱스 2를 반환한다. 없으면 -1을 반환한다. String.index('찾을 문자열') find와 같이 찾고 있는 문자열의 처음 인덱스를 반환하지만 없는경우 에러로 표시한다. String.rindex('찾을 문자열') rfind와 같이 찾고 있는 문자열의 마지막 인덱스를 반환하지만 없는 경우 에러로 표시한다. Strin..

Python 2021. 5. 7. 16:50