Frontend
-
[Vue3] 배경지식Frontend/Vue3 2023. 5. 1. 17:08
Vue.js는 다른 프론트엔드 프레임워크와 비교해 차별화된 다양한 장점이 있습니다. 1. 쉬운 학습 Vue.js는 초보자도 쉽게 배울 수 있는 간결한 문법과 구조를 가지고 있습니다. 다른 프레임워크에 비해 더 빠르게 익힐 수 있으며, 기본 HTML, CSS, JavaScript 지식만으로도 시작할 수 있습니다. 2. 유연성 Vue.js는 컴포넌트 기반의 구조를 가지고 있어, 작은 프로젝트부터 대규모 애플리케이션까지 유연하게 개발할 수 있습니다. 또한, 다른 라이브러리와의 통합이 쉬워, 기존 프로젝트에도 적용하기 용이합니다. 3. 가볍고 빠른 성능 Vue.js는 경량화되어 있어 빠른 초기 로딩 속도와 업데이트 성능을 제공합니다. 가상 DOM(Virtual DOM)을 활용하여 불필요한 업데이트를 최소화하고,..
-
[TDD] Test-driven Development 란Frontend/TDD 2023. 5. 1. 16:49
TTD(Test-driven Development)란, 테스트 주도 개발 방법론으로 개발자가 개발하기 전에 테스트 코드를 작성하고 이를 통과하는 코드를 작성하는 방식입니다. 프론트엔드 개발에서 TTD가 중요한 이유는 다음과 같습니다. 1. 코드 품질 향상 TDD는 코드를 작성하기 전에 테스트를 먼저 수행함으로써, 개발자가 실수를 미리 발견하고 수정할 수 있습니다. 이는 전반적인 코드 품질을 높여주며, 버그 발생 가능성을 줄여줍니다. 2. 간결한 코드 TDD를 사용하면, 코드를 작성하기 전에 먼저 요구 사항을 명확하게 정의하게 됩니다. 이로 인해 필요 이상의 기능이 추가되지 않고, 요구 사항에 부합하는 간결한 코드를 작성할 수 있습니다. 3. 명확한 목표 테스트 케이스를 먼저 작성함으로써, 개발자는 개발해..
-
[Composition API] Typescript 적용하기 (script setup)Frontend/Vue3 2023. 3. 12. 16:34
Typing Component Props Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 때 사용합니다. Props Default Values default props값을 지정하는 방법입니다. Typing Component Emits Emits는 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 이벤트, 데이터를 넘겨줄 때 사용합니다. Typing ref() ref는 초기값으로 타입을 추론하는 기능이 기본적으로 내장되어 있습니다. import { ref } from 'vue' // inferred type: Ref const year = ref(2023) // => TS Error: Type 'string' is not assignable to type 'number'. yea..
-
[Typescript] Type GuardFrontend/Typescript 2023. 3. 12. 16:31
Type Guard란? 변수의 타입을 특정 영역으로 제한 → 타입을 더 한정되게 좁혀 나가는 과정 공식문서에 따르면, 타입가드는 특정 스코프 내에서 사용되는 타입을 런타임에 체크하는 일종의 표현입니다. Type Guard 사용해야 하는 상황 Union type을 사용할 시 발생하는 오류 유니온 타입을 사용해 코드를 작성하면 타입스크립트 컴파일러는 “타입체크”를 수행할 수 없다. //JS코드 function add(a, b) { return a + b; } // 실행결과가 예상과 다를 순 있어도, 컴파일도중에 오류가 발생하진 않는다. //TS코드 function add(a: number | string, b: number | string): number | string { return a + b; } //..
-
[Typescript] EnumFrontend/Typescript 2023. 3. 12. 16:17
enum이란 enum은 Typescript가 자체적으로 구현하는 기능입니다. enum은 여러 값들에 미리 이름을 정의하여 열거해 사용하는 타입입니다. enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } 필요성과 존재 이유 1. 분야별 종류를 정의하여 명확하게 사용하기 위해 예를 들어, 사용자 권한을 관리자 = 0, 회원 = 1, 게스트 = 2로 관리할 경우, 개발자는 관리자 === 0 이라는 점을 기억하고 코딩해야 합니다. // 관리자 여부를 숫자로 체크한다. if (userType !== 0) { alert("관리자 권한이 없습니다"); } // 만약 회원 타입이 20종류가 넘어간다면??? // 관리..
-
[Typescript] type과 InterfaceFrontend/Typescript 2023. 3. 12. 16:13
TypeScript에서 타입(Type)과 인터페이스(Interface)는 유사한 점이 매우 많고, 여러 경우에 자유롭게 혼용되어 사용 가능합니다. interface AnimalInterface { species: string height: number weight: number } const tiger: AnimalInterface = { species: 'tiger', height: 200, weight: 300 } type AnimalType = { species: string, height: number, weight: number } const lion: AnimalType = { species: 'lion', height: 180, weight: 400 } 하지만 둘의 차이와 한계를 이해하고 표..
-
[TypeScript] 잘 사용하기Frontend/Typescript 2023. 2. 19. 23:19
정확한 타입 지정하기 (any 사용 피하기) any 변수의 데이터 유형을 알고 있는 경우 any를 사용하지 마세요. 새 변수를 선언할 때마다 데이터 유형을 정의하는 것이 좋습니다. strict 모드 사용하기 ES5에서 use strict 기능이 추가됐습니다. tsconfig.js 파일에서 strict 환경설정을 찾을 수 있습니다. 이는 선언되지 않은 변수를 사용하거나 타입 지정을 하지 않거나 예약어를 변수이름으로 사용하려고 시도하는 등의 실수를 제한합니다. 변수는 let, 상수는 const 사용하기 변수 var는 똑같은 변수명으로 다시 선언해도 오류가 발생하지 않습니다. 타입스크립트는 어떠한 오류를 보여주지 않지만 예상치 못한 결과로 끝나게 됩니다. 이를 막기 위해 let, const을 사용해야 합니다...
-
[TypeScript] 동작 원리, 장점과 단점Frontend/Typescript 2023. 2. 19. 21:09
- 동작원리 텍스트를 컴파일러 프로그램이 파싱해 AST라는 자료 구조로 변환 AST(Abstract Syntax Tree) : 추상 문법 트리 컴파일러 프로그램이 AST를 바이트 코드로 변환 런타임 프로그램에 바이트 코드를 입력해 평가받은 결과 출력 - 장점 정적 타입 지원 TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착 할 수 있다. (tsc라는 명령어로 타입 스크립트 파일 컴퍼일 → 자바스크립트로 출력 → 문법 에러 catch) 또한, tsconfig.js 파일에 명시된 ECMA 버전으로 자동 변환 가능. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술 할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다. function sum..