타입스크립트 [Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 [Sleact] 슬랙 클론 코딩 - 로그인 로그인을 하면 다음과 같이 쿠키를 확인할 수 있다. 로그아웃을 한다는 것을 이 쿠키를 지운다는 뜻과 같다. 그렇다면 프론트엔드 입장에서 내가 로그인에 성공했다는 것을 어떻게 알 수 있을까? 로그인 요청에 성공한다면 서버에서 프론트로 내 정보를 보내주는데 이걸 저장하고 있다가 로그아웃할 때 그 정보를 버리면 될 것이다. 로그인 정보를 저장하고 있으려면 전역 데이터로 저장하고 있어야한다. 이 프... 타입스크립트슬랙리액트리액트 [이펙티브 타입스크립트] - 9주차 따라서 타겟의 타입을 알고 있다면 더 구체적인 타입 추론을 위해 정확한 타입으로 타입 단언문을 사용하거나 null 값이 포함될 여지가 있다면 if문으로 분기처리를 해주어야한다. 타입스크립트에는 public, protected, private 와 같은 접근 제어자를 사용할 수 있다. 그러나 결국에 컴파일 되는 과정에서 제거되기 때문에 자바스크립트 코드에서는 접근할 수 있다. 또한 타입스크립트의... 타입스크립트FEonTheBlock스터디FEonTheBlock 타입으로 더하기 구현 뭔 개소린가 싶겠지만 가능하다. 먼저 이것부터 보자. 일단 [,,, . . .]) 이걸 구현해보자. number N 을 받고 Array<number> 배열도 받자. (기본 []) N이 0 (V ( [] )의 길이)이라면 그냥 []를 리턴하자. 아니라면 반복하자. 이제 Add 를 구현해보자. 아까 말한 [...[,,,], ...[,,]]['length']를 참고하면 쉽게 구현 가능하다. A +... 타입스크립트타입스크립트 타입스크립트_tsconfing 컴파일 세부설정 ▶️ tsconfig 파일 생성하기 tsconfing.json 파일을 생성하면, 타입스크립트 .ts 파일들을 .js로 변환할 때 어떻게 변환할 지 설정할 수 있다. 리액트나 뷰를 사용하면 이미 존재할 것이나, 하드코딩시엔 직접 파일을 생성하도록 하자. 그리고 json파일 안에 이렇게 복붙하도록 하자. 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. e... ts타입스크립트ts 타입스크립트_primitive type 정리 ▶️ 변수만들때 타입 정하기 타입스크립트는 변수만들 때 변수의 타입을 지정가능하다. 변수명:타입으로 정하면되고, 예제에서 이름이라는 변수는 string타입이 되며 갑자기 숫자 이런걸 할당하려고 하면 에러가 난다. 즉 타입이라는 쉴드를 하나 씌워준다고 생각하면 편하다. (참고) : name이라는 변수는 전역변수로 사용이 불가능하다. 지정하면 다음과 같은 오류 메세지가 출력된다. ▶️ 여러가지 ... ts타입스크립트ts 타입스크립트 interface, type 컨벤션과 readonly 속성 자판기 미션에서 처음으로 적용한 타입스크립트! 타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲 앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑 이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해 정리해보았다. 이름은 PascalCase를 사용한다. 멤버는 camelCase를 사용한다. I/T prefix를 사용하지 ... typescriptts타입스크립트ts [부록] TS, 왜 써야할까? 마이크로소프트에서 만들었으며, JS의 확장된 언어라고 할 수 있습니다. 덕분에 우리는 개발 초기 단계에서 오류를 확인하고 수정을 반영할 수 있습니다. 타입스크립트는 JS를 이해하고 유형 추론을 제공함으로써 추가 코드 없이도 훌륭한 도구가 될 수 있습니다. 더 정확하게 하기 위해서 function fuctionName(arg: argumentType): returnType의 형식으로 작성할 수... JSDocTS와 JS의 차이솝트typescript타입스크립트솝트30기SOPTTS의 장점타입스크립트의 특징JSDoc [리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element 미리 내용을 요약하자면 타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다. 클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다. 이 둘은 거의 유사한 대상으로 보면 된다. 함수형 컴포넌트의 리턴값에 해당된다. ReactElement|null Reac... 타입스크립트리액트리액트 괜찮은가? - children의 관점에서.. 현재 회사에서 리액트로 작업 중인 프로젝트는 타입스크립트를 사용하고 있고 컴포넌트를 React.FC로 타입을 선언해 사용하고 있다. 거의 최근까지는 그냥 다른 사람이 사용하길래 컨벤션을 맞추기 위해 사용한 경향이 있었고, children을 prop으로 선언하지 않아도 이미 타입 자체에 내재되어있어 굉장히 편하다는 생각으로 모든 컴포넌트를 FC로 선언했었다. '왜 React.FC사용을 지양해야... React.FC타입스크립트React.FC [개발일지] 리팩토링 두번째 - 기능 확장 메신저 어플리케이션에 친구 추가 기능 구현 그때, 나중의 과제로서 남겨두었던 몇가지 사항들이 있었는데, 오늘 드디어 그 과제의 첫번째 스텝으로, 친구 추가하기 기능을 구현해보았다. 전역으로 상태를 관리하기 때문에 각 컴포넌트에서는 상태에 대한 고민을 할 필요가 줄어드는 장점이 있다. 게다가 이를 Flux 패턴으로 상태의 변경을 관리하니, 코드의 간결성이 매우 증대헀다. 우선 기존의 UserC... 타입스크립트typescriptJavaScript리액트ReactJavaScript Type-Challenges_1 (warm-up ~ easy 1 / 2) 타입스크립트 관련 재밌는 Challenge 발견!! 난이도는 warm-up, easy, medium, hard, extreme 총 5단계로 나뉘어져있고 하나씩 진행하며 글 남겨보려 합니다..!! 참고자료 및 출처 👉 13 - Hello World 4 - Pick 7 - Readonly 11 - Tuple to Object 14 - First of Array 18 - Length of Tupl... ts타입스크립트typescriptts 타입스크립트로 순열 만들기 타입스크립트로도 원소들이 주어질 때에 만들어지는 순열을 타입으로 표현할 수 있을까?? 조건부 타입과 분산 조건부 타입 never 타입이 분산 조건부 타입에서 작동하는 방식. T가 U에 포함되는 관계라면 타입이 X로 결정되고 그렇지 않다면 타입은 Y로 결정된다. 일반적으로 요렇게 쓸 수 있다. 집합에서 분배법칙이 적용되듯이 유니온에서 각각의 타입에 조건부타입이 적용되는 것을 볼 수 있다. 실제... 타입스크립트조건부타입조건부타입 item 1. 타입스크립트와 자바스크립트의 관계 이해하기 이 글은 이펙티브 타입스크립트 (댄 밴더캄 저, 장원호 옮김) 를 읽고 개인적으로 정리한 글입니다. 보통 자바스크립트의 변형으로 타입스크립트를 들어본 적이 많을 것이다. 즉, 자바스크립트의 문법을 기초하여 추가적인 기능을 하는 것이다. 여기서 타입스크립트의 추가적인 기능은 자바스크립트에 정적 타입 체킹이라는 기능이다. 자바스크립트 코드에 정적 타입 오류를 검증하여 더 안정적인 프로그램을 만들... 이펙티브 타입스크립트effective-typescript타입스크립트typescripteffective-typescript TS) tsconfig 설정 빠르게 시작하기 빠르게 설치 해줍시다! 물론, 이전에 node.js가 설치 되어있어야합니다. 작업폴더 만들기 index.ts 파일을 만듭시다. tsc --init 를 통해 tsconfig.json 파일을 생성해줍시다. index.js 파일은 따로 만드실 필요없습니다. CLI로 tsc -w 를 하면, 자동으로 타입스크립트 파일을 컴파일하여 index.js가 생성됩니다. index.html 파일... 타입스크립트configconfig 타입스크립트 셋팅 참고자료1 : 인프런 이재승 님 강의를 보고 작성했습니다. 참고자료2 : node js 를 우선적으로 설치를 해야한다. 그후에 npm init -y 를 입력해주면 된다. 그럼 간단히 package.json 파일이 만들어 진다. npm install typescript 를 설치한다. 그리고 타입스크립트 설정 파일을 설치하기위해서 npx tsc --init 를 입력해주면 된다. node js 는... settings타입스크립트typescriptsettings 공변성과 반공변성, 이변성 A는 인자의 타입으로 string 또는 number를 받을 수 있다. B의 인자에는 string만 받을 수 있으므로 A의 인자의 타입은 B의 인자의 타입을 포함하고 있는 슈퍼셋으로 생각할 수 있다. 이라고 할 때에 A는 B의 서브타입이라고 할 수 있다. A → B가 성립할 때 Some<A> → Some<B>의 관계가 성립하면 Some을 공변적이라고 부른다. A → B의 관계가 성립하고, Li... 타입스크립트공변성공변성
[Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 [Sleact] 슬랙 클론 코딩 - 로그인 로그인을 하면 다음과 같이 쿠키를 확인할 수 있다. 로그아웃을 한다는 것을 이 쿠키를 지운다는 뜻과 같다. 그렇다면 프론트엔드 입장에서 내가 로그인에 성공했다는 것을 어떻게 알 수 있을까? 로그인 요청에 성공한다면 서버에서 프론트로 내 정보를 보내주는데 이걸 저장하고 있다가 로그아웃할 때 그 정보를 버리면 될 것이다. 로그인 정보를 저장하고 있으려면 전역 데이터로 저장하고 있어야한다. 이 프... 타입스크립트슬랙리액트리액트 [이펙티브 타입스크립트] - 9주차 따라서 타겟의 타입을 알고 있다면 더 구체적인 타입 추론을 위해 정확한 타입으로 타입 단언문을 사용하거나 null 값이 포함될 여지가 있다면 if문으로 분기처리를 해주어야한다. 타입스크립트에는 public, protected, private 와 같은 접근 제어자를 사용할 수 있다. 그러나 결국에 컴파일 되는 과정에서 제거되기 때문에 자바스크립트 코드에서는 접근할 수 있다. 또한 타입스크립트의... 타입스크립트FEonTheBlock스터디FEonTheBlock 타입으로 더하기 구현 뭔 개소린가 싶겠지만 가능하다. 먼저 이것부터 보자. 일단 [,,, . . .]) 이걸 구현해보자. number N 을 받고 Array<number> 배열도 받자. (기본 []) N이 0 (V ( [] )의 길이)이라면 그냥 []를 리턴하자. 아니라면 반복하자. 이제 Add 를 구현해보자. 아까 말한 [...[,,,], ...[,,]]['length']를 참고하면 쉽게 구현 가능하다. A +... 타입스크립트타입스크립트 타입스크립트_tsconfing 컴파일 세부설정 ▶️ tsconfig 파일 생성하기 tsconfing.json 파일을 생성하면, 타입스크립트 .ts 파일들을 .js로 변환할 때 어떻게 변환할 지 설정할 수 있다. 리액트나 뷰를 사용하면 이미 존재할 것이나, 하드코딩시엔 직접 파일을 생성하도록 하자. 그리고 json파일 안에 이렇게 복붙하도록 하자. 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. e... ts타입스크립트ts 타입스크립트_primitive type 정리 ▶️ 변수만들때 타입 정하기 타입스크립트는 변수만들 때 변수의 타입을 지정가능하다. 변수명:타입으로 정하면되고, 예제에서 이름이라는 변수는 string타입이 되며 갑자기 숫자 이런걸 할당하려고 하면 에러가 난다. 즉 타입이라는 쉴드를 하나 씌워준다고 생각하면 편하다. (참고) : name이라는 변수는 전역변수로 사용이 불가능하다. 지정하면 다음과 같은 오류 메세지가 출력된다. ▶️ 여러가지 ... ts타입스크립트ts 타입스크립트 interface, type 컨벤션과 readonly 속성 자판기 미션에서 처음으로 적용한 타입스크립트! 타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲 앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑 이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해 정리해보았다. 이름은 PascalCase를 사용한다. 멤버는 camelCase를 사용한다. I/T prefix를 사용하지 ... typescriptts타입스크립트ts [부록] TS, 왜 써야할까? 마이크로소프트에서 만들었으며, JS의 확장된 언어라고 할 수 있습니다. 덕분에 우리는 개발 초기 단계에서 오류를 확인하고 수정을 반영할 수 있습니다. 타입스크립트는 JS를 이해하고 유형 추론을 제공함으로써 추가 코드 없이도 훌륭한 도구가 될 수 있습니다. 더 정확하게 하기 위해서 function fuctionName(arg: argumentType): returnType의 형식으로 작성할 수... JSDocTS와 JS의 차이솝트typescript타입스크립트솝트30기SOPTTS의 장점타입스크립트의 특징JSDoc [리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element 미리 내용을 요약하자면 타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다. 클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다. 이 둘은 거의 유사한 대상으로 보면 된다. 함수형 컴포넌트의 리턴값에 해당된다. ReactElement|null Reac... 타입스크립트리액트리액트 괜찮은가? - children의 관점에서.. 현재 회사에서 리액트로 작업 중인 프로젝트는 타입스크립트를 사용하고 있고 컴포넌트를 React.FC로 타입을 선언해 사용하고 있다. 거의 최근까지는 그냥 다른 사람이 사용하길래 컨벤션을 맞추기 위해 사용한 경향이 있었고, children을 prop으로 선언하지 않아도 이미 타입 자체에 내재되어있어 굉장히 편하다는 생각으로 모든 컴포넌트를 FC로 선언했었다. '왜 React.FC사용을 지양해야... React.FC타입스크립트React.FC [개발일지] 리팩토링 두번째 - 기능 확장 메신저 어플리케이션에 친구 추가 기능 구현 그때, 나중의 과제로서 남겨두었던 몇가지 사항들이 있었는데, 오늘 드디어 그 과제의 첫번째 스텝으로, 친구 추가하기 기능을 구현해보았다. 전역으로 상태를 관리하기 때문에 각 컴포넌트에서는 상태에 대한 고민을 할 필요가 줄어드는 장점이 있다. 게다가 이를 Flux 패턴으로 상태의 변경을 관리하니, 코드의 간결성이 매우 증대헀다. 우선 기존의 UserC... 타입스크립트typescriptJavaScript리액트ReactJavaScript Type-Challenges_1 (warm-up ~ easy 1 / 2) 타입스크립트 관련 재밌는 Challenge 발견!! 난이도는 warm-up, easy, medium, hard, extreme 총 5단계로 나뉘어져있고 하나씩 진행하며 글 남겨보려 합니다..!! 참고자료 및 출처 👉 13 - Hello World 4 - Pick 7 - Readonly 11 - Tuple to Object 14 - First of Array 18 - Length of Tupl... ts타입스크립트typescriptts 타입스크립트로 순열 만들기 타입스크립트로도 원소들이 주어질 때에 만들어지는 순열을 타입으로 표현할 수 있을까?? 조건부 타입과 분산 조건부 타입 never 타입이 분산 조건부 타입에서 작동하는 방식. T가 U에 포함되는 관계라면 타입이 X로 결정되고 그렇지 않다면 타입은 Y로 결정된다. 일반적으로 요렇게 쓸 수 있다. 집합에서 분배법칙이 적용되듯이 유니온에서 각각의 타입에 조건부타입이 적용되는 것을 볼 수 있다. 실제... 타입스크립트조건부타입조건부타입 item 1. 타입스크립트와 자바스크립트의 관계 이해하기 이 글은 이펙티브 타입스크립트 (댄 밴더캄 저, 장원호 옮김) 를 읽고 개인적으로 정리한 글입니다. 보통 자바스크립트의 변형으로 타입스크립트를 들어본 적이 많을 것이다. 즉, 자바스크립트의 문법을 기초하여 추가적인 기능을 하는 것이다. 여기서 타입스크립트의 추가적인 기능은 자바스크립트에 정적 타입 체킹이라는 기능이다. 자바스크립트 코드에 정적 타입 오류를 검증하여 더 안정적인 프로그램을 만들... 이펙티브 타입스크립트effective-typescript타입스크립트typescripteffective-typescript TS) tsconfig 설정 빠르게 시작하기 빠르게 설치 해줍시다! 물론, 이전에 node.js가 설치 되어있어야합니다. 작업폴더 만들기 index.ts 파일을 만듭시다. tsc --init 를 통해 tsconfig.json 파일을 생성해줍시다. index.js 파일은 따로 만드실 필요없습니다. CLI로 tsc -w 를 하면, 자동으로 타입스크립트 파일을 컴파일하여 index.js가 생성됩니다. index.html 파일... 타입스크립트configconfig 타입스크립트 셋팅 참고자료1 : 인프런 이재승 님 강의를 보고 작성했습니다. 참고자료2 : node js 를 우선적으로 설치를 해야한다. 그후에 npm init -y 를 입력해주면 된다. 그럼 간단히 package.json 파일이 만들어 진다. npm install typescript 를 설치한다. 그리고 타입스크립트 설정 파일을 설치하기위해서 npx tsc --init 를 입력해주면 된다. node js 는... settings타입스크립트typescriptsettings 공변성과 반공변성, 이변성 A는 인자의 타입으로 string 또는 number를 받을 수 있다. B의 인자에는 string만 받을 수 있으므로 A의 인자의 타입은 B의 인자의 타입을 포함하고 있는 슈퍼셋으로 생각할 수 있다. 이라고 할 때에 A는 B의 서브타입이라고 할 수 있다. A → B가 성립할 때 Some<A> → Some<B>의 관계가 성립하면 Some을 공변적이라고 부른다. A → B의 관계가 성립하고, Li... 타입스크립트공변성공변성