React
/
/

JavaScript/TypeScript

<TypeScript>에서는 자바스크립트와 타입스크립트 관련 학습한 글을 가장 빠르게 받아보실 수 있습니다.
Search
JS/TS

Introduction

TOAST UI를 라이브러리로 만들어 보자.
icoa
icoa
2022/05/05 12:43
React and TypeScript cleancode pattern 10 + 1
2022/03/18
icoa
icoa
2022/03/18 10:31

# 시작

<실전 리액트 프로그래밍> 책을 따라 공부해보는 과정 2~3일차

923 함수 타입

타입스크립트 공부하기, 타입스크립트 실행 방법, 따라하면서 이해하기 2~3 Studying TypeScript, how to execute TypeScript, and understanding while following 2-3

# 시작

<실전 리액트 프로그래밍>에 있는 내용을 따라 타입스크립트를 공부해본다. 타입스크립트를 실행하는 환경은 아래 사이트에서 도움을 받았다. 기존에는 컴파일하고 실행하는 귀찮은 과정을 반복했는데 이 방식대로 하면 매우 간편해진다.
방법
ts-node를 설치한다.
아래 명령어로 실행한다.
결과

# 실습

1) 배열은 두 가지로 정의할 수 있다.
2) 숫자 배열에 문자열로 입력하면 타입 에러
타입스크립트 공부하기, 타입스크립트 실행 방법, 따라하면서 이해하기 Studying TypeScript, How to execute TypeScript, Understanding while following
beginner
2021/01/23
icoa
icoa
2022/03/13 16:07

innerText

element 내부에 있는 text 값들을 말하며 설정한 엘리먼트의 보이는 텍스트 값을 가져옵니다

innerHTML

element 내부에 있는 HTML이나 XML 모두를 말합니다. 

append

노드 객체나 DOM String을 받을 수 있으며 한번에 여러 개의 자식 요소를 넣을 수 있습니다.
리턴 값을 반환하지 않습니다..

appendChild

오직 노드 객체만 받을 수 있습니다.
한 번에 오직 하나의 자식 요소만 넣을 수 있습니다.
리턴 값으로 추가한 자식 노드를 반환합니다.
innerHTML or innerText / append or appendChild
Vanilla JS
icoa
icoa
2022/05/15 14:42
'==' 연산자를 이용하여 두 값(null과 undefined)을 비교하면 둘다 true를 리턴합니다.
→ 정확히 null인지 undefined인지를 확인하고 싶다면? OR이 아니라는 전제 하에 === 로 검사하면 됩니다.
('===' 연산자를 이용하여 두 값을 비교하면 타입이 다르기 때문에 false를 리턴합니다.)
다시 말해 == 는 강제 변환을 허용하지만, === 는 강제 변환을 허용하지 않습니다.
⇒ 그리고 보통 undefined인지 null인지 둘다 확인하고 싶으면 === null || === undefined가 아니라 == null로 하는 것이 권장됩니다.
null, undefined와 동등, 일치 비교 연산자
icoa
icoa
2022/06/03 15:21

온보딩하기 위한 컨텐츠 세팅

User Onboarding을 Library로 만들어보자
자바스크립트에서는 작성한 위치가 어딘지에 따라 제대로 출력되지 않는 경우가 있습니다.
그 중 선택자인 document.getElementById(); 을 예를들어 설명하겠습니다.
p태그의 id : user를 생성하기전에 이미 실행을 하기 때문에 오류가 발생합니다.
오류메세지↓
위의 에러메세지처럼 작성위치의 문제때문에 오류가 발생하는건데, 해결방법은 p태그의 아래에서 script를 설정하는 방법과 window.onload. 두가지 방법입니다.

window.onload

보통 로드가 된 시점에 발동하는 window.onload는 위치에 상관없습니다.
onload는 언제 사용하나?
icoa
icoa
2022/04/29 20:50
생성자 함수 안에서 this를 사용하기 전에 매개변수에 this를 첫번째로 넘겨주고 타입을 지정해주어야 한다.
icoa
icoa
2022/03/13 16:14
빈 배열, 빈객체는 true값이다.
falsy 값이 아닌 빈 배열, 객체
icoa
icoa
2022/03/13 16:10
String.raw() - JavaScript | MDN
String.raw()메서드는 템플릿 리터럴의 태그 함수입니다.이는 Pyhon의 r 접두사 또는 C#의 문자열 리터럴의 @ 접두사와 유사합니다.(그러나 동일 하지는 않습니다. 이 문제에 관해서는 여기 이슈를 참조하십시오.)이 메서드는 템플릿 리터럴의 윈시 문자열을 가져오는데 사용됩니다. 즉, 대체(예: ${foo})는 처리되지만 이스케이프(예: \n)는 처리되지 않습니다. String.raw()의 경우 보통 템플릿 리터럴과 많이 사용하고, 첫번째 구문의 경우 잘 사용되지 않습니다.왜냐하면 자바스크립트 엔진이 당신을 위해서 자동으로 적절한 인수로 호출해주기 때문입니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/raw

Raw strings (원래 문자열)

Raw string은 이스케이프 문자를 해석하지 않은 일반 문자열입니다.String.raw 태그함수를 사용하면 템플릿 문자열을 입력한 대로 출력할 수 있습니다.
태그 함수를 만들어 원래의 문자열을 반환하려면 첫 번째 인자의 raw 프로퍼티를 사용하면 됩니다.
Raw String (템플릿 리터럴)
icoa
icoa
2022/03/13 16:10
데브매칭 과제에서 저렇게 해둔 이유는 파이어폭스에서 keyCode로 하면 onkeypress 이벤트가 작동하지 않기 때문이다. 0이 반환되기 때문
.code는 키보드에서 키의 물리적 위치에 해당하는 반면
.key는 위치에 관계없이 눌린 키에 의해 생성된 문자에 해당합니다.
'코드'와 '키'는 모두 최신 브라우저에서 특징이 있습니다. 의 "사용해 보기" 예제를 사용하면 IE11/IE Edge가 '코드'와 '키'를 구현하지 않음을 보여줍니다. 구현이 Chrome/FF/Safari의 구현과 일치하지 않습니다(차이점은 주로 Escape 및 Enter와 같은 제어 문자에 있는 것으로 나타남). 이러한 변화에 대해 스스로 설명하지 않는 한 라이브러리를 사용하는 것이 가장 쉬울 수 있다고 생각합니다. 나는 이것이 답이 되기를 정말로 원하지만 IE는 이것을 망친다 :-(
흠... 사실 크로스 브라우저 방식으로 키를 구현하는 것도 나쁘지 않아 보입니다. 일반 영숫자 키는 해당 값을 반환하고 제어 키(이스케이프, 엔터, 탭 등)의 경우 이전 버전의 사양을 구현하는 IE11/Edge를 제외하고 대부분의 브라우저에서 동일하게 구현된 것으로 나타나므로 각각에 대해 최소한 두 개의 가능한 값만 있습니다. 열쇠.  2018년 2월 14일 15:53
event keyCode, which란? 대신 key, code
icoa
icoa
2022/03/13 16:10
javascript 클래스 메서드 화살표함수처럼 this바인딩 문제있음.
icoa
icoa
2022/03/13 16:09
생성자가 개방/폐쇄 원칙을 어겼다는 데 동의하지 마십시오. 우리는 객체를 구성하는 두 가지 다른 언어 기능/방법에 대해 이야기하고 있습니다. 이것은 그것과 아무 관련이 없습니다.
팩토리 함수의 가장 큰 이점은 클로저에서 캡처된 비공개 속성과 메서드가 있다는 것입니다.
design-patterns-JS
fbeline
javascript-factory-functions-vs-constructor-functions-vs-classes
icoa
icoa
2022/03/13 16:09
constructor에서 바로 데이터를 받게 되어 있다.
하지만 에러가 발생한다. 필요한 로직은 함수로 감싸야겠다.
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
icoa
icoa
2022/03/13 16:09
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
[SPA error] type=module로 ./index.js를 스크립트하고, 임포트를 사용했을 때 경로와 확장자를 정확하게 적지 않으면 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
icoa
icoa
2022/03/13 16:09
this.state.data로 접근할 때 그 data가 처음에는 들어오지 않으므로 this.state.data?.로 지정해주어야 함
icoa
icoa
2022/03/13 16:09
event.keyCode is deprecated → e.key로 해라
icoa
icoa
2022/03/13 16:08
Composing Software 시리즈 요약

소프트웨어 합성: 개요

합성은 전체를 구성하기 위해 부분이나 요소를 결합하는 행위다.
소프트웨어 개발이란 복잡한 문제를 작은 문제로 분해해 그 해법들을 조합해서 복잡한 문제를 해결하는 솔루션을 만드는 행위라고 배웠다.
그 말의 중요성을 늦게 깨달았다. 소프트웨어 설계의 본질이다.
소수의 개발자만 깨닫고 있었다. 대부분 우리가 활용할 가장 중요한 개념과 잘 적용하는 방법을 몰랐다.
•
함수 합성(function composition)이란?
•
객체 합성(object composition)이란?
// 뭔지 잘 몰랐음. 특히 객체 합성(함수 합성은 콜백 함수 던지는 방식이 아닐까, 객체 합성은 상속?)
객체 리터럴 vs 생성자 함수 vs 클래스. 왜 리팩터링 툴은 클래스를 추천하는가? #클래스함수를 대체할 팩토리 함수
icoa
icoa
2022/03/13 16:08
테스트 코드로 todo 앱을 만들면서 본 코드다. 타입스크립트 기반이라 enum을 보게 되었다.
타입스크립트를 오직 타입을 선언하는데만 사용해왔었는데 타입스크립트 공부를 각잡고 해본 적이 없어서 그런듯하다. 자바스크립트 공부는 안하고 리액트만 했던 거랑 비슷하다.
참고할 수 있는 블로그를 찾았다.
간단하게 요약해본다. 추가적으로 책을 사서 학습할 예정이다.

My Status

Status를 정의한다. status는 number로 해야할까 string으로 해야할까?
근데 상태를 string으로 정의했더니만 내가 원하지 않는 상태가 string 타입이라 할당되어질 수가 있다!
즉, 범위가 너무 넓다.
이럴 때 Union과 String Literal Types를 사용해서 범위를 좁힌다.
그런데 또 문제가 있다. 백엔드에서 받아오는 값을 모두 정의해놓을 수가 없다!
object처럼 keyValue 쌍으로 가독성을 크게 높일 수 있다.
타입스크립트 enum 사용법? State를 만들 때 사용한다.
icoa
icoa
2022/03/13 16:07
index signature란? 객체의 string 키를 사용할 때 타입스크립트의 차이점
icoa
icoa
2022/03/13 16:07
this 타입과 관련된 유틸리티 클래스는 apply를 통한 재정의이므로 생략

keyof 키워드

타입 값에 존재하는 모든 프로퍼티의 키값 을 union 형태로 리턴 받는다.

never 타입

에러가 발생하면 프로세스를 중단하지 않고 무시하는 타입. any를 제외한 모든 타입의 원시타입이다. 변수 선언은 불가능하고 함수의 리턴 타입으로 에러를 무시하고 진행시키는 역할

Partial<T>

Required<T>

마이너스 연산자는 옵셔널을 제거해주는 연산자입니다.

Readonly<T>

모든 프로퍼티를 값을 참조만 할 수 있도록 바꿉니다.
220313 TS 유틸리티 클래스 파헤치기 읽기
icoa
icoa
2022/03/13 16:07
TS 보완 https://yozm.wishket.com/magazine/detail/1376/
property-value-does-not-exist-on-type-readonly
모던자바스크립트 내용 읽기
룰렛 ui 구현
화살표 함수
정규표현식
Promise
Made with