타입스크립트 [Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 [이펙티브 타입스크립트] - 9주차 따라서 타겟의 타입을 알고 있다면 더 구체적인 타입 추론을 위해 정확한 타입으로 타입 단언문을 사용하거나 null 값이 포함될 여지가 있다면 if문으로 분기처리를 해주어야한다. 타입스크립트에는 public, protected, private 와 같은 접근 제어자를 사용할 수 있다. 그러나 결국에 컴파일 되는 과정에서 제거되기 때문에 자바스크립트 코드에서는 접근할 수 있다. 또한 타입스크립트의... 타입스크립트FEonTheBlock스터디FEonTheBlock 타입스크립트_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 [개발일지] 리팩토링 두번째 - 기능 확장 메신저 어플리케이션에 친구 추가 기능 구현 그때, 나중의 과제로서 남겨두었던 몇가지 사항들이 있었는데, 오늘 드디어 그 과제의 첫번째 스텝으로, 친구 추가하기 기능을 구현해보았다. 전역으로 상태를 관리하기 때문에 각 컴포넌트에서는 상태에 대한 고민을 할 필요가 줄어드는 장점이 있다. 게다가 이를 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로 결정된다. 일반적으로 요렇게 쓸 수 있다. 집합에서 분배법칙이 적용되듯이 유니온에서 각각의 타입에 조건부타입이 적용되는 것을 볼 수 있다. 실제... 타입스크립트조건부타입조건부타입 Practicing Typescript: Advanced Props Union of string literals Children props Children as react component node Optional type... 타입스크립트typescripttypescript item 1. 타입스크립트와 자바스크립트의 관계 이해하기 이 글은 이펙티브 타입스크립트 (댄 밴더캄 저, 장원호 옮김) 를 읽고 개인적으로 정리한 글입니다. 보통 자바스크립트의 변형으로 타입스크립트를 들어본 적이 많을 것이다. 즉, 자바스크립트의 문법을 기초하여 추가적인 기능을 하는 것이다. 여기서 타입스크립트의 추가적인 기능은 자바스크립트에 정적 타입 체킹이라는 기능이다. 자바스크립트 코드에 정적 타입 오류를 검증하여 더 안정적인 프로그램을 만들... 이펙티브 타입스크립트effective-typescript타입스크립트typescripteffective-typescript Practicing Typescript: React Hooks props useState useReducer useContext useContext future value useRef... 타입스크립트typescripttypescript 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 애니스크립트, 타입스크립트로 변환! 🧟♂️🧚🏻♂️✨👨🏻💼 리액트에서 이벤트 객체의 타입은 React 객체로로부터 꺼내 쓴다! 그리고 나서 제네릭 타입으로는 해당 함수를 이벤트로 걸어준 태그의 타입을 찾아 지정한다. 나와 같은 경우는 div 태그에 onClick 프로퍼티로 함수를 할당했으므로, HTMLDivElement 타입을 써주었다. 타입을 잘 못 설정하면 아래와 같은 오류가 발생하기도 한다. Property 'pageX' does not exi... 애니스크립트FROMuseRef 타입함수 타입이벤트 객체 타입history 타입이벤트 핸들러 타입api 타입객체 키 타입타입스크립트useState 타입FROM 공변성과 반공변성, 이변성 A는 인자의 타입으로 string 또는 number를 받을 수 있다. B의 인자에는 string만 받을 수 있으므로 A의 인자의 타입은 B의 인자의 타입을 포함하고 있는 슈퍼셋으로 생각할 수 있다. 이라고 할 때에 A는 B의 서브타입이라고 할 수 있다. A → B가 성립할 때 Some<A> → Some<B>의 관계가 성립하면 Some을 공변적이라고 부른다. A → B의 관계가 성립하고, Li... 타입스크립트공변성공변성 Practicing Typescript: Generic props typescript타입스크립트typescript
[Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 [이펙티브 타입스크립트] - 9주차 따라서 타겟의 타입을 알고 있다면 더 구체적인 타입 추론을 위해 정확한 타입으로 타입 단언문을 사용하거나 null 값이 포함될 여지가 있다면 if문으로 분기처리를 해주어야한다. 타입스크립트에는 public, protected, private 와 같은 접근 제어자를 사용할 수 있다. 그러나 결국에 컴파일 되는 과정에서 제거되기 때문에 자바스크립트 코드에서는 접근할 수 있다. 또한 타입스크립트의... 타입스크립트FEonTheBlock스터디FEonTheBlock 타입스크립트_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 [개발일지] 리팩토링 두번째 - 기능 확장 메신저 어플리케이션에 친구 추가 기능 구현 그때, 나중의 과제로서 남겨두었던 몇가지 사항들이 있었는데, 오늘 드디어 그 과제의 첫번째 스텝으로, 친구 추가하기 기능을 구현해보았다. 전역으로 상태를 관리하기 때문에 각 컴포넌트에서는 상태에 대한 고민을 할 필요가 줄어드는 장점이 있다. 게다가 이를 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로 결정된다. 일반적으로 요렇게 쓸 수 있다. 집합에서 분배법칙이 적용되듯이 유니온에서 각각의 타입에 조건부타입이 적용되는 것을 볼 수 있다. 실제... 타입스크립트조건부타입조건부타입 Practicing Typescript: Advanced Props Union of string literals Children props Children as react component node Optional type... 타입스크립트typescripttypescript item 1. 타입스크립트와 자바스크립트의 관계 이해하기 이 글은 이펙티브 타입스크립트 (댄 밴더캄 저, 장원호 옮김) 를 읽고 개인적으로 정리한 글입니다. 보통 자바스크립트의 변형으로 타입스크립트를 들어본 적이 많을 것이다. 즉, 자바스크립트의 문법을 기초하여 추가적인 기능을 하는 것이다. 여기서 타입스크립트의 추가적인 기능은 자바스크립트에 정적 타입 체킹이라는 기능이다. 자바스크립트 코드에 정적 타입 오류를 검증하여 더 안정적인 프로그램을 만들... 이펙티브 타입스크립트effective-typescript타입스크립트typescripteffective-typescript Practicing Typescript: React Hooks props useState useReducer useContext useContext future value useRef... 타입스크립트typescripttypescript 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 애니스크립트, 타입스크립트로 변환! 🧟♂️🧚🏻♂️✨👨🏻💼 리액트에서 이벤트 객체의 타입은 React 객체로로부터 꺼내 쓴다! 그리고 나서 제네릭 타입으로는 해당 함수를 이벤트로 걸어준 태그의 타입을 찾아 지정한다. 나와 같은 경우는 div 태그에 onClick 프로퍼티로 함수를 할당했으므로, HTMLDivElement 타입을 써주었다. 타입을 잘 못 설정하면 아래와 같은 오류가 발생하기도 한다. Property 'pageX' does not exi... 애니스크립트FROMuseRef 타입함수 타입이벤트 객체 타입history 타입이벤트 핸들러 타입api 타입객체 키 타입타입스크립트useState 타입FROM 공변성과 반공변성, 이변성 A는 인자의 타입으로 string 또는 number를 받을 수 있다. B의 인자에는 string만 받을 수 있으므로 A의 인자의 타입은 B의 인자의 타입을 포함하고 있는 슈퍼셋으로 생각할 수 있다. 이라고 할 때에 A는 B의 서브타입이라고 할 수 있다. A → B가 성립할 때 Some<A> → Some<B>의 관계가 성립하면 Some을 공변적이라고 부른다. A → B의 관계가 성립하고, Li... 타입스크립트공변성공변성 Practicing Typescript: Generic props typescript타입스크립트typescript