시작하며...이번 프로젝트에서 직접 사용자들의 피드백을 받는 베타 테스트를 진행하기로 했다. 유저들의 피드백을 구글폼이나 디스코드로 받으려고 했는데 일단 접근성이 낮고 유저 입장에서는 귀찮을 거 같다는 우려가 있었다. 좀 더 간편한 방법으로 유저들이 피드백을 줄 수 있는 방법이 없을까? 하고 여러 사이트를 돌아다니면서 본 결과 "채널톡" 을 운영하는 것을 보게 되었다. 그래서 "채널톡" 을 프로젝트에 구현하게 되었고 이를 적용한 방법에 대해 글을 작성하게 되었다. 채널톡 적용하기공식문서채널톡 공식문서에 적용하는 방법이 자세히 적혀있다.https://developers.channel.io/reference/web-quickstart-kr#single-page-application 시작하기이 문서에서는 Ja..

시작하며...코드잇 스프린트 6기 파트3에서 6월 21일부터 7월 9일까지 약 2주간 중급 프로젝트를 진행하였다. 프로젝트를 진행하면서 내가 어떤 것을 구현하고 고민했는지를 상기하고 다시 한번 돌아보기 위해 글을 작성하게 되었다.https://github.com/wiki-viki/wiki-viki GitHub - wiki-viki/wiki-viki: 코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다.코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다. Contribute to wiki-viki/wiki-viki development by creating an account on GitHub.github.com 프로젝트 선정 목적프로젝트 선정 이유지난 초급 프로젝트와 동일하게..

시작하기 앞서현재 모던 리액트 Deep Dive 라는 책으로 스터디를 진행하고 있는데, 책에서 "any 대신 unknown을 사용하자" 라는 내용이 있었다. 사실 지금까지 타입스크립트를 작성하다가 모르겠는 타입은 any 로 지정했었다. 그런데 이 책을 읽고 unknown 이라는 타입을 알게 되고 any 보다는 unknown 을 사용하는 게 더 좋다 하여 해당 내용에 대해 자세히 알아보기 위해 글을 작성하게 되었다. any[타입스크립트 공식문서(한국어) - any] Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org간단하게 any 는 모든 타입을 허용한다. 그래서 모든 타입을 허용하여 타입 에러가 발생하지 않는다. any 단점any 는 편해 보..

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

시작하기 앞서기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다. 마이그레이션 방법1. TypeScript 설치타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest2. tsconfig.json 작성기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.나는 아래 코드에 있는 내용을 작성했다.{ "compilerOptions": { "baseUrl": "src", "target": "es5", "..

☘️ 시작하며... 현재 프로젝트에서 Zod 와 React-Hook-Form 조합으로 입력폼 내용을 구현하고 있고 아래 사진처럼 스키마 객체를 생성하여 폼 제출 시 유효성 검증을 만족하지 못하면 토스트 UI 가 뜨도록 구현을 했다. 현재 신고하기 기능을 구현하는 중이며, 신고종류를 라디오 버튼을 사용하여 고르게 되는데, 이 때 스키마객체에서 신고종류의 타입을 enum 으로 설정하였다. 그래서 신고종류를 선택하지 않고 폼을 제출할 경우, 에러 토스트 UI 를 띄우려는데 아무생각없이 다른 타입처럼 enum 이 min 값을 1을 만족하지 못하였을 때, message 를 다음과 같이 설정하려고 했다. // 적용 X reportType: z .enum([report, ...otherReport]) .min(1, ..

☘️유틸리티 타입(Utility Types) keyof keyof를 사용하면 인터페이스의 key값을 유니온 형태로 받을 수 있다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } // 'id' | 'name' | 'age' | 'gender' type UserKey = keyof User; Partial Partial은 옵셔널로 바꿔주어, 인터페이스의 일부분만 사용 가능하게 해 준다. // partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } let admin: Partial = { id: 1, name..

☘️제네릭(Generics) 제네릭을 사용하면 클래스 or 함수 or 인터페이스를 다양한 타입으로 재사용할 수 있다. 만약 배열을 입력받아 길이를 반환하는 함수를 만들었을 때, 아래처럼 유니온 타입으로 입력받는 배열의 타입을 매번 추가하면 번거로움이 있다. function getSize(arr: number[] | string[] | boolean[] | object[] ): number { return arr.length; } const arr1 = [1,2,3]; getSize(arr1); const arr2 = ["a","b","c"]; getSize(arr2); const arr3 = [false, true, false] getSize(arr3); const arr4 = [{name: "짱잼"},..

☘️클래스(Class) 클래스 자바스크립트에서 클래스를 작성할 때, 아래와 같이 하면 된다. 그러나 이를 타입스크립트에서 작성할 때엔 에러가 발생한다. 타입스크립트에서 Class 를 사용할 때에는, 멤버 변수를 미리 선언하고 타입을 설정해 준다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car('red'); bmw.start(); 멤버 변수를 미리 선언하는 방법 이외에도 접근 제한자나 readonly를 사용하는 방법이 있다. // 접근 제한자 class Car { // color: string; constructor..

☘️리터럴, 유니온/교차 타입 변수를 선언할 때, const와 let 을 사용한다. const 변하지 않는 값을 선언할 때 사용 let 변하는 값을 선언할 때 사용 그래서 const로 선언한 변수를 수정할 경우 에러가 뜨게 된다. 문자열 이외에 다른 타입을 넣고 싶을 경우 다음과 같이 수정할 수도 있다. const name1 = "짱잼"; let name2: string | number = "철수"; name2 = 1; 여기서 name1 처럼 정해진 값을 가진 것을 리터럴 타입 이라고 한다. 리터럴 타입 Job이라는 문자열 리터럴 타입을 만든다. 그러면 Job 타입을 사용할 경우 선언해 둔 문자열만 사용할 수 있게 되며, 그 외에 문자열을 사용할 경우 에러가 발생한다. type Job = "student..