본문 바로가기

프론트엔드50

[공식문서-Handbook] Everyday Types(언어의 원시 타입들) 이번 장에서는 JavaScript 코드에서 찾아볼 수 있는 가장 흔한 타입들을 다루고, 이 타입들을 TypeScript에서 어떻게 기술하는지 각각의 대응하는 방식에 대하여 설명하겠습니다. 이 문서에서 빠짐없이 전부 다루고자 하는 것이 아니며, 타입을 만들고 사용하는 더 많은 방법들은 이후 이어지는 장에서 다룰 것입니다. 타입은 단지 타입 표기 이외에도 훨씬 다양한 위치에 나타날 수 있습니다. 타입 자체에 대하여 배우는 것과 더불어, 새로운 구조체를 만들고자 할 때 타입을 참조하는 경우들에 대하여 알아볼 것입니다. 우선 JavaScript 또는 TypeScript 코드를 작성할 때 가장 기본적이면서 흔히 만날 수 있는 타입들을 다시 살펴보는 데에서 시작해 보겠습니다. 이 타입들은 이후에 다루는 보다 복잡한.. 2023. 10. 4.
[공식문서-Handbook] The Basics(기초) JavaScript의 모든 값은 저마다 다양한 동작들을 내장하고 있으며 이는 다양한 연산(Operation)을 실행하여 확인할 수 있습니다. 이는 다소 추상적으로 들릴 수 있는데, 간단한 예시로 message라는 이름의 변수에 대하여 실행할 수 있는 몇몇 연산들을 살펴보겠습니다. // 'message'의 프로퍼티 'toLowerCase'에 접근한 뒤 // 이를 호출합니다 message.toLowerCase(); // 'message'를 호출합니다 message(); 위 코드를 분석해보면, 우선 첫 번째 실행 코드 줄에서는 toLowerCase라는 프로퍼티에 접근한 뒤 이를 호출합니다. 두 번째 줄에서는 message를 직접 호출하려 하고 있습니다. 하지만 message의 값이 무엇인지 모른다면 - 일반적.. 2023. 9. 27.
[공식문서] TypeScript for JavaScript Programmers 현대 프로그래밍 언어에서 TypeScript와 JavaScript의 관계는 다소 독특합니다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가합니다. 이 레이어가 TypeScript 타입 시스템입니다. JavaScript는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게 할당되었는지는 미리 확인해 주지 않습니다. TypeScript는 이 레이어로서 동작합니다. 이는 이미 존재하고 잘 동작하는 JavaScript 코드는 동시에 TypeScript 코드라는 의미지만, TypeScript의 타입 검사기는 사용자가 생각한 일과 JavaScr.. 2023. 9. 27.
[공식문서] NextJS - Pre-rendering and Data Fetching #5 데이터를 사용하거나 사용하지 않고 정적 생성 정적 생성은 데이터를 사용하거나 사용하지 않고 수행할 수 있습니다. 지금까지 만든 모든 페이지는 외부 데이터 검색이 필요하지 않습니다. 이러한 페이지는 프로덕션용으로 앱이 빌드될 때 자동으로 정적으로 생성됩니다. 그러나 일부 페이지의 경우 외부 데이터를 가져와 HTML을 렌더링하지 않으면 안될 수 있습니다. 파일 시스템에 엑세스하거나 외부 API를 가져오거나 빌드 시간에 데이터베이스를 쿼리해야 할 수 있습니다. Next.js는 이러한 경우를 지원하며, 이를 통해 데이터를 사용한 정적 생성을 쉽게 할 수 있습니다. getStaticProps를 사용한 데이터를 사용한 정적 생성 어떻게 작동할까요? Next.js에서 페이지 컴포넌트를 내보낼 때 getStaticPr.. 2023. 8. 26.
[공식문서] NextJS - Pre-rendering and Data Fetching #4 두 가지 형태의 사전 렌더링 Next.js에는 두 가지 형태의 사전 렌더링이 있습니다. 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-side Rendering)입니다. 차이는 페이지의 HTML을 언제 생성하는지에 있습니다. 정적 생성(Static Generation)은 빌드 시점에 HTML을 생성하는 사전 렌더링 방식입니다. 이 사전 렌더링된 HTML은 각 요청마다 재사용됩니다. 서버 사이드 렌더링(Server-side Rendering)은 각 요청마다 HTML을 생성하는 사전 렌더링 방식입니다. 개발 모드에서(npm run dev 또는 yarn dev를 실행할 때)는 모든 요청마다 페이지가 사전 렌더링됩니다. 이것은 정적 생성에도 적용되어 개발을 더 쉽게 할 수 있게 .. 2023. 8. 26.
[공식문서] NextJS - Pre-rendering and Data Fetching #3 사전 렌더링 (Pre-rendering) 데이터 가져오기에 대해 이야기하기 전에, Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 이야기해보겠습니다. 기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 이는 Next.js가 모든 페이지의 HTML을 미리 생성한다는 것을 의미합니다. 클라이언트 사이드 JavaScript로 모두 처리하는 것이 아닙니다. 사전 렌더링은 성능과 검색 엔진 최적화에 도움이 될 수 있습니다. 각 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 브라우저에서 페이지가 로드되면 해당 JavaScript 코드가 실행되어 페이지가 완전히 상호작용 가능해집니다. (이 과정을 hydration 라고 합니다.) 사전 렌더링이 진행되.. 2023. 8. 25.
[공식문서] NextJS - Pre-rendering and Data Fetching #2 이전 레슨을 계속 진행하고 있다면, 이 페이지를 건너 뛸 수 있습니다. 다음 페이지로 이동 하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드(선택사항) 만약 이전 레슨에서 진행하고 있지 않다면, 아래 명령을 사용하여 이번 레슨의 스타터 코드를 다운로드하고 설치하실 수 있습니다. 이 명령을 실행하면 이전 레슨의 결과와 동일한 nextjs-blog 디렉토리가 설정됩니다. 다시 말하자면, 이전 레슨을 완료한 경우 이 작업은 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/data-fetching-starter" 그리고 다.. 2023. 8. 19.
[공식문서] NextJS - Pre-rendering and Data Fetching #1 이번 레슨에서는 블로그를 생성하려고 합니다 (원하는 결과는 여기에서 확인 가능). 하지만 지금까지는 아무런 블로그 콘텐츠도 추가하지 않았습니다. 이 레슨에서는 외부 블로그 데이터를 앱으로 가져오는 방법을 배우게 될 것입니다. 블로그 콘텐츠를 파일 시스템에 저장할 것이지만, 다른 곳(예 : 데이터베이스 또는 Headless CMS)에 저장된 경우에도 작동합니다. 이 레슨에서 배울 내용 이 레슨에서 배우게 될 내용은 다음과 같습니다: Next.jsdml 사전 렌더링 기능 사전 렌더링의 두 가지 형태 : 정적 생성과 서버 사이드 렌더링 데이터를 포함한 정적 생성 및 데이터 없이 정적 생성 getStaticProps 및 이를 사용하여 인덱스 페이지로 외부 블로그 데이터를 가져오는 방법 getStaticProps.. 2023. 8. 19.
[공식문서] NextJS - Assets, Metadata, and CSS #10 스타일링 팁 다음은 도움이 될 수 있는 스타일링 팁입니다. 다음 섹션을 차례로 읽어보세요. 앱에 변경 사항을 가할 필요는 없습니다! 클래스 토글을 위해 clsx 라이브러리 사용하기 clsx는 클래스 이름을 쉽게 토글할 수 있는 간단한 라이브러리입니다. npm install clsx 또는 yarn add clsx를 사용하여 설치할 수 있습니다. 더 자세한 내용은 해당 문서를 참조하시길 바랍니다만, 기본 사용법은 다음과 같습니다: 예를 들어, 'success' 또는 'error'일 수 있는 type을 받는 Alert 컴포넌트를 생성하려고 합니다. 'success'인 경우 텍스트 색상을 녹색으로, 'error'인 경우 텍스트 색상을 빨강으로 표시하고 싶습니다. 먼저 다음과 같이 CSS 모듈(alert.modu.. 2023. 8. 17.

티스토리툴바