공식문서 링크: https://nextjs.org/learn/dashboard-app공식문서 번역 블로그 링크: https://kidongg.github.io/categories/next-js-learn/Chapter 1. Getting Started`pnpm (패키지 매니저)` 사용 권장⬇️ pnpm 설치npm install -g pnpm  ⬇️ Next.js 애플리케이션 생성npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpmcreate-next-app: CLI 도구--example: 스터터 예제 플래그⬇️..

보호되어 있는 글입니다.

chapter 3. 타입스크립트 이해하기 0. 타입스크립트를 이해한다는 것은? 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들 간 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사하는지 그 원리와 동작 방식을 이해하는 것. 1. 타입은 집합이다 타입스크립트의 '타입'은 여러 개의 값을 포함하는 '집합'이다. 집합: 동일한 속성을 갖는 요소들을 하나의 그룹으로 묶은 단위 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 포함되는 관계를 갖는다. 이런 관계에서 다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입)이라 부르며, 반대는 서브 타입(자식 타입)이라고 한다. 타입 간의 이러한 계층 관계를 어떻게 이용할 수 있는지 살펴보는 것이 중요하다. ✅ 타입 호환성 A와 B ..

chapter 2. 타입스크립트 기본 6. any와 unknown ✅ any 타입 타입스크립트에서만 제공되는 특별한 타입 타입검사를 받지 않은 특수 타입 let anyVar: any = 10; anyVar = "hello"; anyVar = true; anyVar = {}; anyVar.toUpperCase(); anyVar.toFixed(); anyVar.a; 어떠한 타입 검사도 받지 않으므로 아무 타입의 값이나 범용적으로 담아 사용 가능하며 다양한 타입의 메서드를 마음대로 호출해도 문제가 되지 않는다. any 타입은 모든 타입스크립트의 문법과 규칙으로부터 자유롭지만, 타입 검사가 이뤄지지 않기 때문에 코드 오류가 발생할 여지가 크다. 따라서 *특수한 경우를 제외하고는 any 타입 사용은 권장되지 않는..

chapter 2. 타입스크립트 기본 3. 객체 ✅ 객체 타입을 정의하는 방법 1️⃣ object로 정의하기 let user: object = { id: 1, name: "kim", }; user.id; //오류 발생 객체 생성과 타입 정의를 잘해주었는데도 `user.id`를 이용해 객체의 프로퍼티에 접근하려 하면 오류가 발생한다. 👉 원인: 타입스크립트의 object 타입은 객체의 프로퍼티에 대한 어떤 정보도 가지고 있지 않기 때문 🤔 변수 user에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야 할까? 2️⃣ 객체 리터럴 타입 중괄호를 열고 객체가 갖는 프로퍼티를 직접 내열해 만드는 타입 let user: { id: number; name: string; } = { id: 1, name:..

이론 CI/CD란 무엇인가? → [링크] GitHub Flow 전략에 대한 이해 → [링크] GitHub Action에 대한 이해 → [링크] 실습 CloudFront, S3 원클릭 배포하기 → [링크] GitHub Action 지속적 전달 구현하기 → [링크] 최근 프론트엔드 취업을 위해 공고를 살펴보다 보면 CI/CD와 AWS라는 키워드가 눈에 띈다. 공부해 보면 좋겠다는 생각은 했지만 솔직히 자바스크립트, 리액트, 타입스크립트 등 더 우선순위에 있는 공부할 거리들이 널려 있기에 엄두도 못 냈었다. 그러던 차에 마침 인프런에서 강의형 스터디를 진행한다고 해서 얼른 신청해 보았다. 사전 과제대로 가비아 도메인도 구매하고(.shop 도메인은 1년에 부가세 포함 550원... 개인 플젝 배포할 도메인도 그..

chapter 2. 타입스크립트 기본 0. 기본 타입(Basic Types) 이란? TS가 자체적으로 제공하는 타입, 내장 타입 TS에서만 제공하는 타입: any, void, never, unknown 타입 계층도: TS가 제공하는 기본 타입들을 계층에 따라 분류한 그림 chapter 2. 실습 환경 설정 { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "include": ["./"] } tsc//컴파일 tsx index.ts//실행 1. 원시타입과 리터럴 타입 원시타입 동시에 한 개의 값만 저장할 수 있는 타입들 number,..

2. 타입스크립트의 동작 원리 컴파일: 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정 AST(추상 문법 트리): 코드 공백, 주석 등 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태의 자료구조에 코드를 저장해 놓은 형태의 트리 타입스크립트의 동작 과정 타입스크립트 코드를 AST로 변환 AST를 확인하면서 코드 상 타입오류가 없는지 점검 타입에 오류가 있었다면 타입 검사 실패 및 컴파일 중단 타입에 오류가 없다면 타입 검사 통과 AST를 자바스크립트 코드로 변환 컴파일 종료 타입에 오류가 있는 경우 컴파일 시 타입 검사를 통과할 수 없음 👉 컴파일로 변환된 자바스크립트는 타입 관련한 에러가 없는 안전한 코드 타입스크립트의 타입 관련 코드는 자바스크립트로 변환될 때 사라짐 👉 실..

0. 타입스크립트를 소개합니다. 🎨 타입스크립트 = 자바스크립트의 확장판 원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 추가하면 타입스크립트 코드가 된다. 🎨 타입스크립트 사용 이유? 자바스크립트는 웹 브라우저에서만 동작하도록 만들어졌으며, 아주 간단한 사용자 상호작용을 처리하도록 만들어진 언어이다.(ex. 웹사이트에서 버튼 클릭 시 경고창 띄워주기 정도의 간단한 작업) 따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요 없이 유연하게 설계되었다. 그런데 `Node.js`(자바스크립트의 런타임/실행환경)가 등장하면서 웹 브라우저에서만 실행 가능했던 자바스크립트를 어디서든 실행할 수 있게 된다. 이렇게 자바스크립트의 활용성이 늘어나고 자바스크립트를 사용하는 애플리케이션의 규모도 커지게 되었다...