반응형 TypeScript6 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고📝 타입 추론# 기존 코드const items: Item[] = getItems();# 수정 코드const items = getItems();처음에는 getItems() 함수가 반환하는 값의 타입을 명시적으로 지정하는 것이 안전하다고 생각했다. 하지만 코드가 길어지면서 타입 어노테이션이 불필요하게 복잡해 보였다.TypeScript의 타입 추론 기능을 활용하여 items 변수의 타입을 생략했습니다. getItems() 함수의 반환 타입이 명확하기 때문에 TypeScript 컴파일러가 자동으로 items 변수의 타입을 Item[]으로 추론한다. 코드를 간결하게 유지하면서도 타입 안정성을 확보할 수 있었다.타입 추론에 대한 이해가 부족.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고📝 React 네이밍 규칙모든 파일과 폴더를 컴포넌트에 맞추어 PascalCase로 작성하다 보니, 어떤 기능을 하는지 파악하기 어려웠다. 예를 들어, 컴포넌트와 유틸리티 파일이 같은 형식으로 작성되어 구분이 쉽지 않았다. 이러한 문제를 해결하기 위해, 폴더와 파일 네이밍 규칙을 좀 더 세분화할 필요가 있었다.폴더 및 파일 네이밍 규칙디렉토리 폴더명컴포넌트 폴더: PascalCase (대문자로 시작) - 컴포넌트임을 한눈에 파악할 수 있도록예: Header, Footer, UserProfile일반 폴더: CamelCase (소문자로 시작)예: components, services, utils서브폴더: CamelCase (소문자로 .. 2024. 7. 10. 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고📝 type 및 interfaceTypeScript를 학습하면서 헷갈렸던 부분 중 하나는 type과 interface의 차이점이었다. 처음에는 둘 다 비슷한 역할을 하는 것 같아 어느 상황에서 어떤 것을 써야 할지 혼란스러웠다. 그래서 둘의 차이점을 명확히 이해하고자 공부하게 되었다.typetype은 모든 타입을 선언할 때 사용할 수 있다. 기본 타입뿐만 아니라 복합 타입(union, intersection)도 선언할 수 있다.확장 불가능한 타입을 선언하고 싶다면 type을 사용한다.type StringOrNumber = string | number;interfaceinterface는 객체에 대한 타입을 선언할 때 사용할 수 있다... 2024. 7. 10. 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고📝 ESLint, Prettier (Airbnb)1. typescript-eslint 설정eslint와 typescript는 각각의 parser를 사용하여 다른 AST(Abstract Syntax Tree)을 생성하기 때문에, 이를 해결하기 위해 typescript-eslint를 설정하였다.다양한 설정 파일을 다루는 것이 어려웠으나, 최종적으로 최신 버전으로 설치하는 것이 가장 좋다는 결론에 도달하였다.npm install --save-dev eslint TypeScript와 ESLint의 통합을 위해 필요한 typescript-eslint 관련 라이브러리를 설치하였다.npm install --save-dev @typescript-.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고📝 tsconfig.jsontsconfig.json을 파일에 관하여, 문제가 생겼을 때 검색해서 나온 대로 설정했을 뿐, 정확히 무엇을 하고 있는지 이해하지 못했다. 🤷♂️tsc 사용하기tsconfig.json을 만들지 않고도 tsc를 사용할 수 있다는 사실을 알았다. tsc 명령어를 통해 원하는 .ts 파일을 .js로 컴파일할 수 있었다.$ tsc hello.ts tsc는 tsconfig.json 파일 없이도 바로 사용할 수 있었다. 그렇다면 왜 tsconfig.json을 설정해야 할까? 🤔 매번 명령어에 옵션을 주는 것이 번거롭고, 프로젝트에서 일정한 설정을 유지하기 위해서였다.vscode는 기본적으로 TypeScript에.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고📝 Create React AppBabel을 사용하여 트랜스파일링하고, Webpack으로 파일들을 번들링 하는 구조자바스크립트 기반으로, 최근에는 다양한 언어를 이용하여 자바스크립트의 한계를 극복하는 번들러와 트랜스파일러가 등장하고 있다. 자바스크립트는 싱글 스레드 언어로, 프로젝트 규모가 커지면 빌드 시간이 증가하여 개발 생산성이 저하될 수 있다.이러한 문제를 해결하기 위해 새로운 도구들이 등장하였다.번들러 Webpack > Vite개발 단계에서는 esbuild를 통해 빌드하고, 프로덕션에서는 rollup을 통해 번들링 한다. 현재는 rollup을 통해 프로덕션 빌드를 진행하지만, 추후 esbuild가 발전하면 프로덕션 빌드도 e.. 2024. 7. 1. 이전 1 다음 반응형
