# type-script
06. Type Script
타입스크립트 테크닉 옵셔널 체이닝 옵셔널 체이닝(Optional Chaining)을 사용하면 중첩된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 기술할 수 있습니다. 이제까지는 안전한 코드를 작성하려면 null 또는 undefined를 체크하는 if 조건 분기를 작성하거나 obj, prop1 && obj.prop1.prop2 같이 체크해야 했습니다 다음 코드처럼 속성 접근 시 옵셔널 체이닝 기능의 ? 를 사용하면 null 또는 undefined가 될 수 있는 객체에 대해 안전하게 처리를 기술할 수 있습니다. Non-null 어서션 연산자 컴파일 옵션 --strictNullChecks를 지정해 컴파일하면, 타입스크립트는 일반적으로 null일 가능성이 있는 객체에 대한 접은을 에러로 취급합니다. null이 아님을 나타내고ㅓ 싶을 때 Non-null Assertion 이라는 기능을 사용해 명시적으로 컴파일러에게 문
05. Type Script
실제 개발 시 중요한 타입 Enum 타입 Enum을 사용하면 이름이 붙은 상수 셋을 정의할 수 있습니다. Enum은 자바스크립트에는 없는 기능으로, 타입스크립트에서 확장한 기능 중 하나입니다. Enum을 사용하면 열거한 값 이외에는 대입할 수 없는 타입을 정의할 수 있습니다. 예시와 같이 상하좌우 방향등, 특정한 값만 받고 싶을 때 사용합니다. 콘솔에 출력된 Direction.Left의 값이 2가 뇝니다. 특별히 지정핮 않는 경우 Enum은 정의된 순서대로 0부터 숫자가 자동으로 증가하면서 설정 됩니다.(수치기반 Enum 타입) 타입스크립트에서는 수치 기반 이외에 문자열 기반의 Enum 타입도 사용할 수 있습니다. 이를 사용하기 위해선 각 멤버를 특정한 문자열의 상수로 초기화 해야 합니다. 문자열 기반(문자열 열거형)의 경우, 상숫값은 자동 증가하지 않지만 문자열로 전달된 값과 Enum의 정숫값을 비교할 때 편리합니다. 제네릭 타입 제네릭(Gene
04. Type Script
함수 타입 Type Script는 인수에도 함수를 사용할 수 있습니다. 함수 그 자체의 타입을 기입하는 방법입니다. 다음과 같은 표기법으로 함수 타입을 나타냅니다 인수명은 실제 함수의 인수명과 대응할 필요는 없습니다. 다음 코드는 예시입니다. singBirds는 인수가 문자열이고 반환값이 배열(문자인 배열)인 함수를 인수로 받습니다. 기본적인 타입의 기능 타입스크립트의 타입 기능 중, 기본적인 것 타입 추론 타입스크립트에서는 명시적인 변수의 초기화를 수행하면 타입 추론을 통해 자동적으로 타입이 결정되는 기능이 있습니다. 함수의 반환값도 마찬가지 그리고 타입스크립트 타입 추론은 대입할 대상 변숫값의 타입이 결정되어 있을 때, 대입할 값과 타입이 일치하지 않는 경우 에러가 발생하는 추론 기능도 있습니다. 다음은 자바스크립트를 실행할 때 표준으로 갖는 window 객체 함수 예시입니다. 타입스크립트는 정적 타입 언어이지만
03. Type Script
변수 변수 선언에는 var, let, const를 사용합니다. 변수명 뒤에 : 타입을 추가해 타입 애너테이션을 합니다. let을 사용해 변수를 선ㄴ언한 경우, var로 선언된 변수의 스코프가 해당 변수를 포함하는 함수에서까지 사용할 수 있는 반면, 블록 스코프로 선언된 변수는 해당 변수를 포함하는 블록 안에서만 사용할 수 있습니다. const는 상수를 나타내는 이름 그대로, 값을 변경할 수 없는 상수를 선언합니다. 한번 값이 대입되면 다시 대입할 수 없습니다. const 변수는 let 변수와 같은 스코프 규칙을 갖습니다. 현재의 웹 프론트엔드 개발에서는 주로 let, const를 사용합니다. 원시타입 자바스크립트에서 자주 사용되는 원시(primitive) 타입인 string(문자열), number(수치), (boolean)논릿값은 타입스크립트에 대응하는 타입이 있습니다. 이 타입들은 자바스크립트의 *
02. Type Script
타입 정의 타입스크립트의 가장 큰 기능이라고 할 수 있는 타입의 기능에 관해 공부해봅시다. 타입스크립트는 자바스크립트 문법을 기본으로 하지만, 타입이나 클래스 등 일부 코드 작성법이 다릅니다. 타입스크립트에서는 변수나 인수명 뒤에 : 타입과 같이 타입 애너테이션(Type Annotation)이라 불리는 타입 정보를 붙여서 변수나 인수에 저장할 값을 제한할 수 있습니다 그리고 변수 데이터 타입이 명확한 경우 일부 조건에서는 생략할 수도 있습니다. 타입 애너테이션에 반환할 값을 대입하면 타입스크립트 컴파일 시 에러가 발생합니다. 예를 들어 string타입을 받는 것으로 정의한 코드에 number 타입 변수를 대입하면 컴파일시 다음과 같은 에러발생합니다. 타입스크립트는 정적 타입으로 컴파일을 전제로 하는 언어이므로, 컴파일 에러를 통해 문제점을 파악 할 수 있습니다. 여기까지 예시들은 매우 간단한 것들입니다. 이것만으로는 타입스크립트의 장점을 느
0.1 Type Script 기초
타입스크립트와 자바스크립트의 차이 타입스크립트는 자바스크립트를 확장한 상위 호환 언어입니다. 즉, 전혀 다른언어가 아니라 자바스크립트의 코드를 그대로 타입스크립트 코드로 읽을 수 있습니다. 예들 들어 이 자바스크립트 코드는 타입스크립트 코드로서 작동합니다. 그리고 위 자바스크립트 코드의 변수와 인수에 타입 정보를 부여한 타입스크립트 코드는 다음과 같다. 타입 스크립트 코드와 자바스크립트 코드에 큰 차이가 없음을 직관적으로 알 수 있습니다. 타입스크립트는 자바스크립트에 다음 기능을 추가한것 입니다. 타입 정의 인터페이스와 클래스 null/undefined-safe 범용적인 클래스나 메서드 타입을 실현하는 제네릭(generic) 편집기의 입력 자동 완성 그 외, ECMA에서 정의되어 있는 자바스크립트의 최신 사양 타입스크립트로 작성된 코드는 빌드 도구를 통해 최종적으로는 자바스크립트로 변환됩니다. 따라서 자바스크립트로 구현된 것에 비해 성능의 차
[React] proces.env 관련 에러 해결
Create react app으로 만든 프로젝트에서 process.env를 불러오는데 에러가 나는 경우가 있다. 1. 잘 불러왔는데, undefined가 나오는 경우 이 경우에는 변수명에 REACTAPP을 붙였는지 확인하고 붙여야한다. 정확한 이유는 모르겠지만 그렇게 작동한다. 이 후 클라이언트 재접속을 해줘야 정상적으로 작동한다. next라면? next js를 사용한다면 REACTAPP이 아니라 NEXTPUBLIC으로 하면 된다. 예를 들어 BASE_URL을 하는 경우, 이와 같이 설정 가능하다. 첫 번째 BASE_URL은 서버컴포넌트와 라우터핸들러에서만 인식된다. (서버에서만) 그리고 두 번째 NEXTPUBLICBASE_URL은 서버와 클라이언트 둘 다 인식된다. 2. process.env로 불러온 변수명의 타입 에러 나는 경우 타입스크립트는 process.env가 string 인지 확신하지 않기 때문에 `un
[react] useState대신에 useRef를 사용하여 불필요한 재랜더링을 없애기
Input에 useState()대신에 useRef만 사용하기 보통 useState를 사용해서 input을 상대하면, 계속 그 컴포넌트가 쓸때없이 랜더링되는 현상이 발생한다. 그래서 해당 input의 값만 useRef를 통해서 string으로 받아낸다. 여기서 가장 중요한 것은 useRef를 사용한 것이 그냥 string 값일 뿐이지 그 input을 참조하는 것은 아니라는 것이다. 그래서 다음과 같은 로직이 나올 수 있다. 코드에서 todoVal은 그저 string으로 input값을 참조하는 것이고 실제적으로 input이 onChange될 때마다 값이 업데이트는 되고 있지만[1], 컴포넌트가 랜더링되지는 않는다. 또, UX를 위해서 input이 빈 칸일 때 사용자가 버튼을 누르면, 할 일을 적어주세요라는 알림과 함께 해당 input에 focus를 주는 기능에서는 직접 todoInputRef를 통해 `inp
[Type Script] React-router-dom 사용 router설정시 에러
React-router-dom을 세팅하는 과정에서 src/shared/Router.ts 부분에서 다음과 같은 에러가 발생했다. 에러 에러는 `부터 `까지 발생한다. 에러메시지 > 'Routes' refers to a value, but is being used as a type here. Did you mean 'typeof Routes'?ts(2749) 해결 여러가지 시도해보고 계속 안 되다가 어이없게 해결했다. 바로 확장자를 .tsx로 바꾼 것이다. Router.ts -> Router.tsx
[Type Script] Utility Types, 유틸리티 타입
Utility Types란 유틸리티 타입은 TypeScript에서 제공하는 내장 타입들로, 자주 사용되는 일반적인 타입 변환 및 조작 작업을 쉽게 수행할 수 있도록 도와주는 기능이다. 자주 쓰이는 타입 Required 만들어진 타입을 `로 감싸고, 앞에 Required`를 붙이면, interface로 정의된 객체의 타입을 임의로 복사 변경할 수 있다. (물론 본체는 건드리지 않는다.) 밑의 예시에서 Required으로 fields의 타입을 Required, Person으로 바꿔준다. fields는 결국 Person타입으로 name: string과 age: number 여야됨을 설정함과 동시에 Required로 이것은 꼭 채워야하는 사항임까지 설정하는 것이다. > [error] Required이므로 fields에 Person 타입의 요소가 하나라도 오지 않거나 다른 요소가 추가되면 에러를 낸다.
[Type Script, 기초] type과 interface
type과 interface 다음 두 코드는 완벽히 동일한 기능을 한다. 문법에서 다른 것 type으로 정의하면 =를 사용하며, interface로 정의하면 =를 쓰지 않는다. 설명 타입스크립트에서는 type이나 interface 두 가지를 사용하여 타입을 정의할 수 있다. interface는 주로 객체의 구조를 정의하는데 사용되고, type은 객체뿐만 아니라 모든 종류의 타입을 정의하는데 사용될 수 있다. interface를 사용하면 주로 객체와 관련된 타입을 정의하는데 더 자연스럽고 가독성이 좋을 수 있다. type을 사용하면 객체 이외의 다른 종류의 타입도 포함하여 정의할 수 있다. 결론 따라서 개발자의 취향과 상황에 맞게 적절한 방식을 선택하여 사용하면 된다.
[TS] 타입스크립트 사용이유
본격적으로 타입스크립트에 대해 알아보고자 합니다. 타입스크립트란 무엇인지, 어떤 특성들이 있고, 사용하면 어떤 점이 좋은지를 알기 위해서 타입스크립트 튜토리얼로 공부합니다. 문서를 읽으면서 스스로 이해한 내용을 함께 정리하고자 합니다 :) * TS for the New Programmer * [js의 특이점] JS는 빠른 사용을 위해 설계되었지만 몇몇 문제가 있음. 대부분의 프로그래밍 언어는 이런 오류가 발생하면 오류를 표출하고, 일부는 코드 실행전인 컴파일 과정에서 오류를 표출해줌. 애플리케이션 규모가 커질수록 이처럼 버그 때문에 프로그램이 아예 실행되지 않는건 큰 문제가 됨. cf. 정적 타입 언어 vs. 동적 타입 언어 타입을 확인하는 시점으로 구분. 정적 타입 언어: 코드의 상수, 변수, 함수 등에 대한 타입을 [컴파일 타임]에 확인하는 언어 (C, C++, Java, Rust, Go, Scala) 동적 타입 언어: [런타임 타임]에 확인하는 언어 (Perl,
[Type Script] 타입스크립트 실행 및 설정
Type Script사용법 오늘은 내가 사용하는 에디터인 VScode에서 Type Script를 사용해 볼려고 한다. 1. 일반 HTML CSS JS 웹개발시 타입스크립트 사용하기 먼저 node, npm 설치되어 있는지 확인한다. 나는 이미 설치가 되어있기 때문에 다음 작업으로 넘어갔다. study라는 폴더를 하나 만들어 주고 그 안에 TypeScript라는 폴더를 만들어 주었다. TypeScrip라는 폴더 안으로 들어간 후 터미널을 이용하여 아래 명령어를 순서대로 입력 해주면 된다. 그리고 node에서 typescript를 실행하게 하기 위해 ts-node를 설치를 해준다. 이제 tsconfig.json파일을 생성하여 typescript에 대한 설정을 해 주면 된다
[Type Script] 타입스크립트란?
Type Script란 무엇일까? 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어이다. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다. Jave Script vs Type Script 여기서 Java Scpript 와 Type Script의 차이점은 무엇이있을까? | Java Script | Type Script | | :-: | :-: | | 동적타입 언어 | 정적타입 언어 | | 인터프리터언어 | 컴파일언어 | | 독립적으로 사용가능 | Java Script에 의존적 | | 타입에 제한이 없다 | 더 나은 구조와 간결함, 일관성, 재사용성 | |.js 확장자 | .ts 확장자| |작고 간단한 프로젝트에 적합함 | 복잡한 프로젝트에 적합함 | 이런식으로 Java Script와 Type Scr
Nest js 시작하기
📌 Nest js? Node js 서버측 어플리케이션을 개발할 수 있는 프레임 워크이다. 자바스크립트와 타입스크립트를 모두 지원한다. 위의 명령어를 실행하게 되면 의 구조로 프로젝트가 생성되는데 각각의 파일의 역할을 살펴보자. 1. app.controller.ts 공식문서에서는 단일 경로가 있는 기본 컨트롤러 라고 명시되어있다. 앱의 controller는 req,res를 처리하는 로직이며, 특정 라우터에서 요청을 받아 처리한다. AppController 위에 @Controller를 선언한 후, get, post, delete, update의 req 요청을 선언한다 >@가 붙은 코드를 "데코레이터"라 칭한다. 위 코드의 경우 @Get 데코레이터가 사용되어 기본 url로 접속시, getHello()함수가 실행된다. 또한 @Get()은 HTTP
Postman으로 서버 연결해서 회원가입 조회 로그인 탈퇴 / 게시글 작성 조회 삭제
코드 https://github.com/mieum12/express-basic 실행하기 > 백엔드: Controller -> Service -> DAO(Repository) 프론트엔드: Component -> Hook(State) -> API(HTTP) 1. 회원가입 아이디, 비번을 Body에 JSON형태로 입력 -> userId할당해줌 이미 회원일 경우 2. 회원 조회 회원가입때 받은 userId를 주소에 입력해서 정보 얻기 
Type Script 환경에서 AOS 사용하기
프로젝트 시에 매우 유용하게 사용하고 있는 라이브러리 'AOS' 스크롤에 따른 애니메이션을 쉽게 구현할 수 있다. 1. AOS 라이브러리 설치 공식 GitHub를 따라서 AOS 라이브러리를 설치했다. AOS를 사용하기 위해서 위 코드를 입력했는데, aos server error referenceerror: document is not defined 에러가 발생했다. 
[프로젝트 Redux-RPG] 리덕스 RPG
이름이 리덕스 RPG인 이유는 리덕스 공부하려고 만들었기 때문입니다... 리덕스는 state관리 라이브러리니까, state을 잘 활용할 수 있는 프로젝트가 뭐가 있을까.. RPG?? 이런 흐름으로 주제를 정했습니다. 몬스터 모듈입니다. redux toolkit 라이브러리를 쓰니까 되게 깔끔하게 작성할 수 있어서 쉬웠어요. 
81일차 TIL: 타입스크립트 - 트러블슈팅
문제 데이터를 전역으로 전환하는 과정에서 아래와 같은 에러 메시지 출력 App.tsx Type '{children: Element;}' has no properties in common with type 'IntrinsicAttributes'. todos-context.tsx Property 'children' does not exist on type '{}'. 해결 찾아보니 리액트 18 이후 버전부터 나타나는 이슈라고 한다. 컴포넌트 반환 타입에 ``를 추가하자 해당 에러가 사라졌다. 📌 **<a href="https://github.com/chakra-ui/chakra-ui/issues/5896"
81일차 TIL : 타입스크립트 - 타임어택 오답풀이
friendsList를 friends로 봐서 대체 뭐가 문제지...? 하면서 풀었던 문제... 문제를 꼼꼼하게 읽자 ㅎ.... a. 1번 줄에서는 const가 var로 변경되고 나머지는 같은 코드가 출력된다. ➡️ 화살표 함수 역시 일반 함수로 변경되어야 한다. > ### ES5 ➡️ ES6 달라진 점 let, const 키워드 화살표 함수 Template Literal **Multi-li