본문 바로가기

nextjs67

TypeScript Call Signatures / Dictionary 호출 시그니처(call signatures) 코드 작성last(arr): 이 함수는 배열의 마지막 요소를 반환해야 합니다.function last(arr: T[]): T | undefined { return arr.length > 0 ? arr[arr.length - 1] : undefined;}호출 시그니처: (arr: T[]): T | undefined설명:제네릭 타입 T를 사용하여 다양한 타입의 배열을 처리할 수 있도록 했습니다.배열이 비어있을 경우 undefined를 반환하도록 처리했습니다.prepend(arr, item): 이 함수는 배열의 시작 부분에 item을 넣고 배열을 return해야 합니다.function prepend(arr: T[], item: T): T[] { return [i.. 2024. 9. 27.
TypeScript / 타입스크립트 개념 및 활용 JavaScript는 유형 안전 언어일까요?아닙니다. JavaScript는 유형 안전(type-safe) 언어가 아닙니다.왜 JavaScript는 유형 안전 언어가 아니라고 할까요?동적 타이핑(Dynamic Typing): JavaScript는 변수를 선언할 때 명시적으로 데이터 타입을 지정하지 않아도 됩니다. 즉, 같은 변수에 문자열, 숫자, 객체 등 다양한 타입의 값을 할당할 수 있습니다. 이러한 유연성은 개발 속도를 높여주지만, 런타임 시 예상치 못한 타입 오류가 발생할 가능성을 높입니다.약한 타이핑(Weak Typing): JavaScript는 타입 간의 변환을 자동으로 수행하는 경우가 많습니다. 예를 들어, 숫자와 문자열을 더하면 자동으로 문자열로 변환되어 연결됩니다. 이러한 특징은 편리할 수 .. 2024. 9. 26.
[공식문서-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 - Deploying Your Next.js App 이 마지막 기본 레슨에서는 Next.js 앱을 프로덕션 환경에 배포하는 방법을 알아보겠습니다. Next.js의 창시자들이 만든 플랫폼인 Vercel에 Next.js 앱을 배포하는 방법을 배우겠습니다. 또한 다른 배포 옵션에 대해서도 이야기할 것입니다. 사전 준비: 이 레슨을 수강하려면 GitHub 계정이 필요합니다. 이 레슨에서 다음을 배우게 됩니다. Next.js 앱을 Vercel에 배포하는 방법 DPS 워크플로우: 개발(Develop), 미리보기(Preview), 배포(Ship) Next.js 앱을 자체 호스팅 제공 업체에 배포하는 방법 시작 코드 다운로드(선택 사항) 이전 레슨에서 진행 중이 아니라면 다음 레슨을 위해 시작 코드를 다운로드하고 설치하고 실행할 수 있습니다. 이렇게 하면 이전 레슨의 .. 2023. 9. 14.
[공식문서] NextJS - API Routes Next.js는 Node.js 서버리스 함수로 API 엔드포인트를 쉽게 생성할 수 있는 API 라우트를 지원합니다. 이 레슨에서는 블로그 앱에는 필수가 아니지만 API 라우트를 사용하는 방법에 대해 간략히 설명하겠습니다. 이 레슨에서 다음 내용을 배울 수 있습니다: API 라우트를 생성하는 방법. API 라우트에 관한 유용한 정보. 시작 코드 다운로드 (선택 사항) 이전 레슨에서 진행하지 않으신다면, 이 레슨을 위한 시작 코드를 다운로드하고 설치한 후 실행할 수 있습니다. 아래 명령을 사용하여 이전 레슨의 결과와 동일한 nextjs-blog 디렉토리를 설정합니다. 이전 레슨을 완료한 경우 이 작업이 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm.. 2023. 9. 14.
[공식문서] NextJS - Dynamic Routes 우리는 인덱스 페이지에 블로그 데이터를 채웠지만 아직 개별 블로그 페이지를 만들지 않았습니다 (여기에 원하는 결과가 있습니다). 이러한 페이지의 URL을 블로그 데이터에 따라 다르게 만들려면 동적 라우트를 사용해야합니다. 이 레슨에서는 다음을 배우게 됩니다: getStaticPaths를 사용하여 동적 라우트를 가진 페이지를 정적으로 생성하는 방법. 각 블로그 게시물의 데이터를 가져오기 위해 getStaticProps를 작성하는 방법. remark를 사용하여 마크다운을 렌더링하는 방법. 날짜 문자열을 깔끔하게 서식화하는 방법. 동적 라우트를 가진 페이지로 연결하는 방법. 동적 라우트에 관한 유용한 정보. 시작 코드 다운로드 (선택 사항) 이전 레슨에서 진행 중이 아니라면 이 레슨을 위한 시작 코드를 다운로.. 2023. 9. 12.
[공식문서] NextJS - Pre-rendering and Data Fetching #9 요청 시간에 데이터 가져오기 빌드 시간이 아닌 요청 시간에 데이터를 가져와야 하는 경우 Server-side Rendering을 시도할 수 있습니다. 서버 사이드 렌더링을 사용하려면 페이지에서 getStaticProps 대신 getServerSideProps를 내보내야(export) 합니다. getServerSideProps 사용 다음은 getServerSideProps의 시작 코드입니다. 우리의 블로그 예제에는 필요하지 않으므로 구현하지 않겠습니다. export async function getServerSideProps(context) { return { props: { // props for your component }, }; } 왜냐하면 getServerSideProps는 요청 시간에 호출되므로.. 2023. 9. 8.

티스토리툴바