본문 바로가기
728x90

전체 글112

[TypeScript] TypeScript 함수 타입 이해 - 3 함수 타입 - 매개변수, 반환값 타입 지정이 필요하다. - 매개변수 필수 값이 아닌 경우 ? 를 사용하여 체크 할 수 있지만, 필수값 매게변수랑 값이 사용 시 필수값 뒤에 위치해야 한다. // 함수 타입 기본 정의 function func(a: number, b: number): number { return a + b; } const add = (a: number, b: number): number => a + b; // 함수의 매개변수 function introduce(name: string, age: number, tall?: number) { console.log(name); if (typeof tall === "number") { console.log(tall + 10); } } introduce.. 2024. 4. 14.
[TypeScript] TypeScript 타입 시스템 이해 - 2 타입 스크립트 원리 이해 타입 정의 기준 타입 관계 정의 기준 오류 검사 기준 타입 호환성 - 동일한 속성을 갖는 집합을 타입이라고 한다. - 어떤 타입을 다른 타른으로 변경해도 집합 안의 값인지 판단하는것을 타입 호환성이라고 한다. - 타입 호환성은 교집합 내에 판단한다. 예) 2, 0, -10, 0.123, Infenitiy 슈퍼 타입, 서브 타입 - 슈퍼 타입 : Down Cast(다운 캐스트)으로 변경될수 있는 타입 - 서브 타입 : Down Cast(다운 캐스트)으로 변경될수 없는 타입 *Down Cast(다운 캐스트) : 슈퍼 타입의 값을 서브타입으로 변경하는것, 변경여부가 상황따라 다르다. *Up Cast(업 캐스트): 서브타입의 값을 슈퍼타입으로 변경하는 것, 무조건 변경이 가능하다. //.. 2024. 4. 14.
[TypeScript] TypeScript 기본 문법 - 1 원시타입, 리터럴타입 원시 타입 - 하나의 값만 저장하는 타입 - 예) number, string, boolean, null, undefined // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = "hello"; let str2: string = "hello"; let str3: string = `hello`; let str4: string = `hello ${.. 2024. 4. 14.
[TypeScript] TypeScript 컴파일 옵션 설정 - tsconfig tsconfig 프로젝트를 타입스크립트를 자바스크립트로 변환(컴파일) 시 필요한 루트 파일과 컴파일러 옵션을 지정하는 파일 디렉토리에 tsconfig.json 파일 위치를 기준으로 TypeScript 프로젝트의 루트가 된다. tsconsifg 전역 속성 파일의 최상위에 위치하고 있는 속성을 의미 대표적으로 5가지 files extend include exclude compilerOptions files 프로젝트에서 컴파일할 파일들의 목록을 명시적으로 지정하는 속성 exclude 보다 우선 순위가 높다. 경로 작성 시 파일 확장자까지 정확히 작성해야 한다. { "files": ["src/main.ts", "custom.d.ts"] } extends 다른 tsconfig 파일의 설정을 가져와 재사용하게 해준.. 2024. 4. 12.
[TypeScript] TypeScript 문법 정리 1. 변수 선언 기본 요소: Boolean, Number, String, Object, Tuple, Enum, Any, Void, Never, Array, Null ,Undefined any TypeScript가 컨텍스트에서 유형을 유추할 수 없는 경우 특정 값으로 인해 유형 검사 오류가 발생하는 것을 원하지않는 경우 let num: number = 10; let str: string = "Hello"; let bool: boolean = true; let arr: number[] = [1, 2, 3]; let tuple: [string, number] = ["Hello", 10]; let obj: any = { x: 0 }; 1-1. 조건 적용 조건에 따라 타입을 선택적으로 정의하는 기능 let num.. 2024. 4. 12.
[JavaScript] 컴파일러와 트랜스파일러의 동작 원리 이해하기 개요자바스크립트는 본래 인터프리터 방식으로 동작하는 런타임 언어로 소스 코드를 바로 실행하였지만, 빠른 업데이트와 브라우저 간 호환성을 위해 컴파일 기술을 통해 실행 속도를 최적화되고 있는 언어입니다.또한, 개발 편의성을 높이기 위해 React와 Virtual DOM 같은 프레임워크와 트랜스파일러 기반의 언어들이 등장했습니다.이러한 언어들이 어떻게 동작하는지 살펴보고, 소스 코드 처리 과정과 소스 변환 도구에 대해 알아보겠습니다. 컴파일러 언어와 인터프린터 언어컴파일러 언어 : 컴파일 단계와 실행 단계가 분리된 언어인터프리터 언어 : 컴파일 없이 프로그램 소스 코드를 바로 실행하는 언어  소스 코드 처리 도구Parser (파서) Parser 란?파싱(Parsing)을 하는 프로그램컴파일러의 일부로 인터프.. 2024. 4. 11.
[React] ERROR - create-react-app / Create React App requires Node 14 or higher.Please update your version of Node. 오류 내용Create React App requires Node 14 or higher.Please update your version of Node. 오류 화면 오류 확인 결과- 24-04-08기준 create-react-app은 node 14버전 이상 시 프로젝트 생성이 가능하다.특정 npm 라이브러리 중 14이상이 필요한 라이브러리가 있다고 생각하면 된다.- nvm 을 사용해서 14버전 이상으로 로컨 노드 버전을 설정해주면 된다. 결과 2024. 4. 8.
[React] React이란?, React 기본 개념 - Component, JSX(Javascript + xml), Virtual DOMLifeCycle(render), state, props, SPA, CSR, Hooks, Event React이란?프로젝트 규모가 커지고, 다양한 유저 인터렉션이 전달되면서 DOM요소의 변화가 많아지게 되면서 DOM 요소의 변화를 개발자가 직접 관리하는 어려움을 개선하기 위해 DOM 관리와 상태 변화 관리를 최소화하고, 개발자 오직 기능 개발, 사용자 인터페이스에 더 집중할수 있게 만들어진 프론트앤드 라이브러리, 프레임워크중 하나 이다.리액트에서는 컴포넌트 단위로 작성하여 하나의 컴포넌트를 여러 부분에서 재사용하여 생산성과 유지보수에 좋다.Virtual DOM을 사용하여 렌더링 효율성이 높다. React가 인기있는 이유는 무엇일까?기술 쏠림 현상을 가지고 있는 대한민국 IT문화상 Virtual DOM을 토대로한 장점으로 초기 독점을 하였고, 현재까지 유지되어 사용율 1위를 차지하고 있다.2024년 기준.. 2024. 4. 5.
[TIP] 문서화 가이드: 제목 작성 형식 - 간결하고 명확하게 제목을 작성하는 형식문서의 성격과 목적, 작성 규칙이 있다면 따르기주제를 명시적으로 간결하고 명확하게 작성  기존에 존재하는 파일과 제목이 통일 1. 주제를 요약하는 제목예) "웹 브라우저 보안", "프론트엔드 성능 최적화", "데이터 관리 기술" 2. 의문형 제목- 이슈를 제시하거나, 대답을 할 수 있게 질문을 한다.예) "왜 웹 보안이 중요한가?", "어떻게 프론트엔드 성능을 향상시킬 수 있을까?", "쿠키 vs 세션" 3. 흥미 유발 제목- '강화, 전략, 핵심, 요약' 키워드를 사용한다.예) "웹 보안 강화 방법", "효율적인 프론트엔드 개발 전략", "데이터 관리의 핵심 원칙"  4. 요약- 문서의 목차나 키워드를 나열한다.예) "웹 보안: 중요성과 구현 방법", "웹 브라우저: 기본 개념과 구.. 2024. 3. 29.
728x90

티스토리툴바