목록스터디/프로그래밍 기초 (4)
구어체로 설명하는 다이어리
getServerSideProps는 Next.js에서 SSR (Server Side Rendering) 하기 위한 방법입니다.서버 단에서 데이터를 받아와 클라이언트 페이지에 렌더링하는데요.이 함수는 페이지를 요청할 때마다 호출되고, HTML을 서버 단에서 먼저 생성하여 클라이언트에 전달합니다.미리 페이지를 생성한다는 점에서 역시 SEO에 좋은 선택입니다. import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';type Repo = { name: string; stargazers_count: number;};export const getServerSideProps = (async () => { // Fetch data f..
Next.js는 Static Site Generation (SSG, 정적 사이트 생성) 을 합니다.SSG는 프로젝트 빌드 시점에 미리 사이트를 만들어 놓는 것인데요.이렇게 미리 사이트를 만들어 놓으면 클라이언트 측에서 페이지에 접속했을 때 서버 측에서는 빌드 시 미리 생성해두었던 페이지를 클라이언트로 전달하고,클라이언트에서는 서버 측에서 받은 페이지를 그대로 뷰에 띄워주기만 하면 되기 때문에 페이지 로딩 속도가 빨라집니다.getStaticProps와 getStaticPaths는 이 SSG를 하기 위한 두 가지 방법입니다. getStaticProps getStaticProps는 빌드 시에 데이터를 가져와서 페이지를 생성합니다. import type { InferGetStaticPropsType, Ge..
리액트로 개발을 하다보면 렌더링을 두 번 하는 것을 확인할 수 있습니다. 왜 렌더링을 두 번씩이나 하는지 궁금해서 검색해보니, Strict Mode 때문이라는 걸 알 수 있었습니다. 그럼 Strict Mode가 뭐길래 이렇게 개발자를 귀찮게 하는걸까요? Strict Mode Strict Mode란 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 개발 모드에서만 활성화되며, 프로덕션 모드에서는 영향을 끼치지 않습니다. Strict Mode를 고려하는 것은 너무 귀찮은 일인데, 그럼 Strict Mode를 주석 처리해서 두 번 호출하지 않도록 설정하면 끝나는 일일까요? 정답은 아니오 입니다. 왜 그러한지를 이해하려면 리액트의 철학을 이해해보면 쉽습니다. 하단은 글쓴이가 이해를 돕기 위해 생..
Call by Value (값에 의한 호출)와 Call by Reference (참조에 의한 호출) 이 두 가지는 함수가 인자를 전달하고 처리하는 방식을 말합니다. Call by Value 값에 의한 호출은 원시 타입에서 나타나며, 함수의 인자로 전달한 값을 복사하여 사용합니다. 무슨 이야기인지 코드를 보면서 알아봅시다. function myFunction(a) { a = a + 100; console.log(a); //- 101}let x = 1;myFunction(x);console.log(x); //- 1 이처럼 myfunction 함수에서 매개변수 a로 받을 때 인자로 받은 x의 값을 복사해서 사용합니다. 원본 값의 복사본을 수정하는 것이기에 myFunction 함수 안에서 값을 ..