Web60 [Next.js] 개발환경 설정 기본적으로 리액트 개발 환경과 동일하다 - 코드 에디터 - nodeJS - GIT nvm으로 node version 업데이트하기 더보기 nvm 설치 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com node 버전 목록 확인하기 원하는 node 버전 설치하기 사용하고자 하는 node 선택하기 [공식문서] Next.js by Vercel - The React Framework for the Web Used.. 2023. 4. 25. [Next.js] 왜 Next.js를 쓸까? Next.js? 웹 어플리케이션을 만들기 위해서 사용할 수 있는 React Framework Libraries => 특정한 문제들을 해결하기 위한 tool을 가져다 쓸 수 있음 Framework => 큰 단위의 전체적인 솔루션(골격)을 제공함 ex) Routing, UI, HTTP Clients, 상태 관리 => 리액트로 웹앱을 개발하는데 리액트 만으로는 힘든 많은 것들을 가능하게 해줌 Next.js의 6가지 원칙 - 복잡한 설정을 하지 않아도 - 자바스크립트를 사용해서 full stack 가능 - 자동으로 code split & sever rendering - 데이터를 어떻게 패칭할 것인지 설정 가능 - 결과를 미리미리 예측 - 손쉬운 배포 Web App에서 쓸 수 있는 4가지 렌더링 방식 CSR (C.. 2023. 4. 25. [TypeScript] 타입스크립트 컴파일러 tsc watch mode 작성 중인 TS 파일에 변경사항이 생기면 이를 반영해서 JS 파일로 자동 변환한다. (watch mode) $ tsc 파일명.ts -w 다음과 같이 실행하면, 현재 프로젝트 안에 있는 모든 TS 파일을 watch mode로 관리한다. $ tsc -w tsc init tsconfig.json 파일 생성 $ tsc --init - 다양한 옵션들을 확인 할 수 있다. 프로젝트 구조 정리 하기 위의 사진과 같이 JS, TS 파일이 섞여있는 경우에 이를 정리해주는 작업이 필요하다. 이것을 tsconfig에서 조작할 수 있다! outDir 옵션 config안의 outDir 옵션을 찾아서 경로 뒤에 원하는 폴더명을 작성하고 컴파일하면 build 폴더 안에 js 파일들이 생성된 것을 확인할 .. 2023. 3. 7. [JavaScript] Prototype Prototype : 반복적으로 쓰일 수 있도록 속성과 함수를 정의하는 것 "JS는 Proto를 기반으로 하는 언어이다" == 객체지향 프로그래밍을 할 수 있는 한 가지 방식으로서 행동을 재사용하는 것 == 기존의 객체를 재사용하는 것 프로토타입 Demo 다음과 같은 파일을 만든다. JS 파일과 HTML 파일을 연결하고, JS 파일에 다음과 같이 코드를 작성하고 서버를 실행시키면, 프로토타입을 상속한 객체가 출력되는 것을 확인할 수 있다. => JS에서 모든 Object는 Object라는 Proto를 상속한다. console.log(x.__proto__ === y.__proto__) // true => x, y는 동일한 object proto를 상속하고 있기 때문에 true를 반환한다. Prototype.. 2023. 3. 6. [TypeScript] Utility Type 타입스크립트에서는 타입을 변환하는 것이 가능하다. - 한 타입의 일부분을 새로운 타입으로 이용 가능 - 한 타입을 기본으로 하여 다른 타입으로 이용 가능 Index Type : 특정 타입의 Index에 기반한 타입 객체의 value는 다음과 같이 접근 가능하다. const obj = { name: "yuna", }; obj.name; // yuna obj["name"]; // yuna Animal이라는 타입을 선언한 뒤, 타입의 인덱스에 기반한 타입을 새로운 타입으로 사용할 수 있다. type Animal = { name: string; age: number; gender: "male" | "female"; }; type Name = Animal["name"]; //string const text: Na.. 2023. 3. 5. [TypeScript] 제네릭 (Generics) 다음 코드의 문제점은 number 타입에 대한 유효성 검사만 가능하다는 것이다. function checkNotNullBad(arg: number | null): number { if (arg == null) { throw new Error("not Valid Number!"); } return arg; } any 타입을 사용하는 것도 좋지 않은 방법임 => 타입이 보장되지 않기 때문 function checkNotNull(arg:any | null): any { if (arg == null) { throw new Error('not valid number!') } return arg; } const result = checkNotNull(123); 이때, Generic을 사용할 수 있다. 아래의 함수에.. 2023. 3. 1. [TypeScript] Composition 상속의 문제점 ? => 여러개의 클래스를 상속받아 사용하는 경우, 그 규모가 커질 수록 클래스간의 관계가 복잡해질 수 있음 순양은 이제 장자상속 없다 Composition : 각각의 기능별로 클래스를 분리해 만들어 둠으로써 필요할때마다 가져다가 쓰는 것 아래의 예제에서는 우유를 추가하는 클래스, 설탕을 추가하는 클래스를 따로 분리해보자 { /** * Composition */ type CoffeeCup = { shots: number; hasMilk?: boolean; // Optional hasSugar?: boolean; // Optional }; interface CoffeeMaker { makeCoffee(shots: number): CoffeeCup; } class CoffeeMachine im.. 2023. 2. 25. [TypeScript] 객체지향 (OOP) 절차 지향 : 정의된 순서대로(절차적으로) 함수가 하나씩 호출됨 하나를 수정하기 위해서 전체적인 어플리케이션을 이해해야함 수정했을때 side Effect가 발생할 수 있음 한눈에 이해하기 어렵다 Coffee Maker 예제) { /** * 절차지향적 프로그래밍 */ type CoffeeCup = { shots: number; hasMilk: boolean; }; const BEANS_GRAMM_PER_SHOT: number = 7; let coffeebeans: number = 0; function makeCoffee(shots: number): CoffeeCup { // 커피 콩이 부족하다면 if (coffeebeans < shots * BEANS_GRAMM_PER_SHOT) { throw new Er.. 2023. 2. 24. [TypeScript] 기본 타입 #2 Type Alias (타입 별칭) : 타입의 새로운 이름을 만들어 직접 타입을 정의할 수 있음 /** * Type Aliases * 새로운 타입을 내가 정의할 수 있음 */ // 원시타입 type Text = string; const name: Text = "yuna"; const address: Text = "korea"; type Num = number; // Object 타입 type Student = { name: string; age: number; }; const yuna: Student = { name: "유나", age: 24, }; String Literal Types : 타입을 값 자체로 지정할 수 있음 해당 타입으로 선언된 변수는 지정된 문자열의 값만 할당 가능 /** * String.. 2023. 2. 22. [TypeScript] 기본 타입 #1 기본 타입 { /** * JavaScript * Primitive : number, string, boolean, biginy, symbol, null, undefined * Object: function, array... */ // number const num: number = -3.0; // string const str: string = "hello"; // boolean const bool: boolean = true; // undefined - 아직 알지 못하는 값 let name: undefined; // ❌ 이렇게 하면 undefined만 할당 가능 let age: number | undefined; // 숫자 또는 undefined age = undefined; age = 12; func.. 2023. 2. 21. 이전 1 2 3 4 5 6 다음
