TypeScript7 [TIL 2023.08.02] Next.js 기본 개념 💻오늘 배운 내용 Library vs Framework 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 => React 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 => Next 즉, React와 Next.js의 렌더링 프로세스 차이를 비교하자면.. - React: 주문을 받고 음식을 만들기 시작하는 식당. - Next.js: 음식을 미리 만들어서 바로 내놓는 식당. Next.js nextjs는 React로 만드는 서버사이드 렌더링.. 2023. 8. 2. [TIL 2023.08.01] 자바스크립트로 만든 투두리스트 타입스크립트로 바꾸기 ❓발생한 이슈/고민 지난번에 만든 투두리스트를 타입스크립트로 고쳐보았다. 고려해야할 사항은 타입 스크립트 환경에서 정적 이미지 파일 사용하기 react-router-dom 사용하기 redux 사용하기 💡해결과정 정적 이미지 파일 사용하기 원래 자바스크립트 환경에서는 export { default as all } from "./all.png"; export { default as culture } from "./culture.png"; export { default as game } from "./game.png"; 이미지 폴더 안에 index.js 파일을 하나 생성해서 export해서 사용할 수 있었다. 그런데 이걸 타입스크립트로 하려하니 빨간줄이 쫙쫙 그이면서 난리가 난 것. 이럴때에는 /src/@ty.. 2023. 8. 1. [TIL 2023.07.31] 타입스크립트 generic 💻오늘 배운 내용 Generic 타입을 함수의 파라미터처럼 사용한다. (선언 시에는 타입 파라미터만 적어주고, 생성하는 시점에 사용하는 타입을 결정) 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없을 때 유용하다. 예시코드 function getSize(arr:number):number{ return arr.length; }; const arr = [1, 2, 3]; getSize(arr); //3 getSize라는 함수가 있고, 호출 시 인자로 숫자배열을 넣어준다고 치자. 파라미터의 타입은 넘버, 함수의 타입도 배열의 길이를 반환하기 때문에 넘버가 된다 하지만 여러 형태의 배열에서 쓰인다면 어떨까? function getSize(arr : number[]): number { ret.. 2023. 7. 31. [TIL 2023.07.28] 타입스크립트 객체 지향 프로그래밍 💻오늘 배운 내용 클래스 객체를 만들기 위한 틀(template) 객체들이 공통으로 가지는 속성(attribute)과 메서드(method)를 정의 - 속성: 객체의 성질 - 메서드: 객체의 성질을 변화시키거나 객체에서 제공하는 기능들을 사용하는 창구 ❓객체: 클래스를 기반으로 생성. 클래스의 인스턴스(instance) 사용예시 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요! 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`); } } const person.. 2023. 7. 31. [TIL 2023.07.27] 헷갈리는 용어들 개념 정리 (절차적 프로그래밍 vs 객체지향 프로그래밍 / 정적언어 vs 동적언어 / 함수 vs 메서드 / Parameter vs Property vs 인자 vs 생성자) 🧐궁금점과 부족한 내용 오늘따라 공부하다가 유독 용어가 헷갈리는 게 많았다. 요것들은 나중에 따로 포스팅 해둘 필요가 있을 듯 절차적 프로그래밍(PP) vs 객체지향 프로그래밍(OOP) 절차적 프로그래밍(Procedural Programming) 객체지향 프로그래밍(Object-Oriented Programming) 정적언어 vs 동적언어 정적언어 = TypeScript 작성자가 소스 코드를 보고 변수 타입을 직접 작성하는 언어이다. 정적타입 언어에는 C, C#, C++, Java 등의 언어가 있고, 이들 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 한다. 컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생한다 동적언어 = JavaScript 코드를 실행할 때 알아서 변수.. 2023. 7. 27. [TIL 2023.07.26] 타입스크립트 enum과 object literal의 차이점 / 주요 유틸리티 타입 💻오늘 배운 내용 enum, object literal의 차이점과 언제 사용하면 좋을지 파악할수 있다. 주요 유틸리티 타입 학습 두 번째 TypeScript 프로그램 코드를 이해하고 발전시킬 수 있다. enum과 object literal의 차이점 enum enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } 열거형 데이터 타입. 상수의 그룹화를 할 때 적절하게 쓰인다. 코드의 가독성을 높이고 명확한 상수 값을 정의할 수 있다. 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다. object literal const o.. 2023. 7. 26. [TIL 2023.07.25] 타입스크립트 입문 / 기본 타입 💻오늘 배운 내용 기존 순수 JavaScript로만 개발했을 때의 한계점과 TypeScript의 등장배경에 대해 설명할 수 있다. TypeScript 컴파일러와 tsc의 개념에 대해 이야기 할 수 있다. .d.ts 파일의 역할과 사용 방법에 대해 설명할 수 있다. TypeScript에서 지원하는 기본 타입(boolean, number, string, 배열, 튜플, enum)을 활용하여 코드를 작성할 수 있다. 타입 안정성이 코드 품질에 어떻게 기여할 수 있는지를 설명할 수 있다. any, unknown, union을 이용하여 가변적 데이터 타입을 정의할 수 있다. 가변적 데이터 타입을 남발할 때 생기는 문제에 대해 설명할 수 있다. JavaScript의 약점 ☑️ 실행 시간에 결정되는 변수 타입 ☑️ 약.. 2023. 7. 25. 이전 1 다음
