JS/TS

uncertainty

JavaScript/TypeScript

JS/TS

💭

JS/TS

태그보기

사진보기

제목보기

태그검색

Introduction

React-Toastify라는 토스트 알림 라이브러리가 있다. 이것의 90개 정도의 기능을 구현해보려고 한다.

파일 구조

먼저 토스트 메시지가 잘 보이는지 확인합니다.

Open with Live Server를 클릭

이런 스타일을 만들어야 한다.

TOAST UI를 라이브러리로 만들어 보자.

2022/04/11

www.youtube.com

icoa

2022/05/05 12:43

React and TypeScript cleancode pattern 10 + 1

2022/03/18

icoa

2022/03/18 10:31

# 시작

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

https://sjwdev.tistory.com/17

# 실습

923 함수 타입

함수의 타입 정의하기

1) 매개변수 타입과 반환 타입 정의

2) 매개변수 name은 문자열 타입이라 substr 메서드 사용 가능

3) 매개변수 age는 숫자이므로 숫자와 비교 가능

4) age에 문자열을 입력하면 타입 에러

5) 숫자 타입에 문자열 반환값을 넣으면 타입 에러

변수를 함수의 타입으로 정의하기

1) 함수 구현 코드에서 매개변수, 반환 타입을 작성하지 않아도 됨

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

# 시작

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

https://riptutorial.com/ko/typescript/example/28089/ts-node%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-typescript-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0

TypeScript - ts-node를 사용하여 TypeScript 실행하기 | typescript Tutorial typescript documentation: ts-node를 사용하여 TypeScript 실행하기 riptutorial.com

방법

ts-node를 설치한다.

아래 명령어로 실행한다.

결과

# 실습

1) 배열은 두 가지로 정의할 수 있다.

2) 숫자 배열에 문자열로 입력하면 타입 에러

타입스크립트 공부하기, 타입스크립트 실행 방법, 따라하면서 이해하기 Studying TypeScript, How to execute TypeScript, Understanding while following

beginner

2021/01/23

icoa

2022/03/13 16:07

icoa

2023/02/07 04:16

Luxon substracting one day if JS date is UTC

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/72295851/luxon-substracting-one-day-if-js-date-is-utc

Time localization with luxon

icoa

2022/09/27 07:37

'==' 연산자를 이용하여 두 값(null과 undefined)을 비교하면 둘다 true를 리턴합니다.

→ 정확히 null인지 undefined인지를 확인하고 싶다면? OR이 아니라는 전제 하에 === 로 검사하면 됩니다.

('===' 연산자를 이용하여 두 값을 비교하면 타입이 다르기 때문에 false를 리턴합니다.)

다시 말해 == 는 강제 변환을 허용하지만, === 는 강제 변환을 허용하지 않습니다.

⇒ 그리고 보통 undefined인지 null인지 둘다 확인하고 싶으면 === null || === undefined가 아니라 == null로 하는 것이 권장됩니다.

null, undefined와 동등, 일치 비교 연산자

icoa

2022/06/03 15:21

자바스크립트에서는 작성한 위치가 어딘지에 따라 제대로 출력되지 않는 경우가 있습니다.

그 중 선택자인 document.getElementById(); 을 예를들어 설명하겠습니다.

p태그의 id : user를 생성하기전에 이미 실행을 하기 때문에 오류가 발생합니다.

오류메세지↓

위의 에러메세지처럼 작성위치의 문제때문에 오류가 발생하는건데, 해결방법은 p태그의 아래에서 script를 설정하는 방법과 window.onload. 두가지 방법입니다.

window.onload

보통 로드가 된 시점에 발동하는 window.onload는 위치에 상관없습니다.

onload는 언제 사용하나?

icoa

2022/04/29 20:50

생성자 함수 안에서 this를 사용하기 전에 매개변수에 this를 첫번째로 넘겨주고 타입을 지정해주어야 한다.

icoa

2022/03/13 16:14

'this' implicitly has type 'any' because it does not have a type annotation

https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation

생성자 함수에서 this에 대한 type 정의(any X)

icoa

2022/03/13 16:14

'await' has no effect on the type of this expression

I searched about this but I didn't find anything specific for what I need. If there is one, please, share here. I'm trying to create a generic service to be called in various components. Since it's a function that requests data from an external source, I need to treat it as an asynchronous function.

https://stackoverflow.com/questions/60368017/await-has-no-effect-on-the-type-of-this-expression

deleteWL에서 fetchData를 디스패치할 때 에러?

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

2022/03/13 16:10

http://daplus.net/javascript-keycode와-which/

데브매칭 과제에서 저렇게 해둔 이유는 파이어폭스에서 keyCode로 하면 onkeypress 이벤트가 작동하지 않기 때문이다. 0이 반환되기 때문

.keyCode vs. .which

I thought this would be answered somewhere on Stack Overflow, but I can't find it. If I'm listening for a keypress event, should I be using .keyCode or .which to determine if the Enter key was pre...

https://stackoverflow.com/questions/4471582/keycode-vs-which

.code는 키보드에서 키의 물리적 위치에 해당하는 반면

.key는 위치에 관계없이 눌린 키에 의해 생성된 문자에 해당합니다.

– 크리스토퍼

2017년 9월 22일 15:36

'코드'와 '키'는 모두 최신 브라우저에서 특징이 있습니다. 의 "사용해 보기" 예제를 사용하면 IE11/IE Edge가 '코드'와 '키'를 구현하지 않음을 보여줍니다. 구현이 Chrome/FF/Safari의 구현과 일치하지 않습니다(차이점은 주로 Escape 및 Enter와 같은 제어 문자에 있는 것으로 나타남). 이러한 변화에 대해 스스로 설명하지 않는 한 라이브러리를 사용하는 것이 가장 쉬울 수 있다고 생각합니다. 나는 이것이 답이 되기를 정말로 원하지만 IE는 이것을 망친다 :-(

흠... 사실 크로스 브라우저 방식으로 키를 구현하는 것도 나쁘지 않아 보입니다. 일반 영숫자 키는 해당 값을 반환하고 제어 키(이스케이프, 엔터, 탭 등)의 경우 이전 버전의 사양을 구현하는 IE11/Edge를 제외하고 대부분의 브라우저에서 동일하게 구현된 것으로 나타나므로 각각에 대해 최소한 두 개의 가능한 값만 있습니다. 열쇠. 2018년 2월 14일 15:53

event keyCode, which란? 대신 key, code

icoa

2022/03/13 16:10

javascript 클래스 메서드 화살표함수처럼 this바인딩 문제있음.

icoa

2022/03/13 16:09

JavaScript Factory Functions vs Constructor Functions vs Classes

Prior to ES6, there was a lot of confusion about the differences between a factory function and a constructor function in JavaScript. Since ES6 has the `class` keyword, a lot of people seem to think...

https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e

생성자가 개방/폐쇄 원칙을 어겼다는 데 동의하지 마십시오. 우리는 객체를 구성하는 두 가지 다른 언어 기능/방법에 대해 이야기하고 있습니다. 이것은 그것과 아무 관련이 없습니다.

팩토리 함수의 가장 큰 이점은 클로저에서 캡처된 비공개 속성과 메서드가 있다는 것입니다.

오브젝트:코드로 이해하는 객체지향 설계

COUPANG

https://www.coupang.com/vp/products/231471527?itemId=734034614&vendorItemId=4855175831&src=1042503&spec=10304984&addtag=400&ctag=231471527&lptag=10304984I734034614&itime=20220221063743&pageType=PRODUCT&pageValue=231471527&wPcid=16444676165763381101040&wRef=&wTime=20220221063743&redirect=landing&gclid=CjwKCAiA6seQBhAfEiwAvPqu19XID2OUCtEmcrvyUEKWyEYTtBMZdmVrOqu69FMfkkMrQUw3o4OUbRoC2lMQAvD_BwE&campaignid=12654708954&adgroupid=123881097567&isAddedCart=

https://www.zerocho.com/category/JavaScript/post/57b9692ae492d01700b0b75a

design-patterns-JS

fbeline

javascript-factory-functions-vs-constructor-functions-vs-classes

icoa

2022/03/13 16:09

모던 자바스크립트의 엘레강스한 패턴 - RORO

나는 자바스크립트 언어가 개발 된 지 얼마 되지 않았을 때, 처음 몇 줄의 코드를 써봤다. 그 때, 언젠가 자바스크립트에서 엘레강스한 패턴에 대한 글을 쓰게 될 거라고 말했다면, 당신은 웃어 넘겼을 것이다. 나는 자바스크립트를 간신히 "진짜(real) 프로그래밍" 자격이 있는 이상한 언어로 생각했다. 20년 동안 많은 변화가있었다.

https://usecode.pw/elegant-patterns-in-modern-java-script-roro/

js 엘레강스 패턴

icoa

2022/03/13 16:09

constructor에서 바로 데이터를 받게 되어 있다.

하지만 에러가 발생한다. 필요한 로직은 함수로 감싸야겠다.

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

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.

[에러일지] Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of...

순수 자바스크립트로 SPA를 구현하던 중에 계속 등장했던 오류다. 🤢 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. 모듈을 import할 때 확장자명, 경로 지정을 제대로 입력하지 않아서 발생하는 에러다.

https://velog.io/@nemo/failed-to-load-module-error

[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

2022/03/13 16:09

this.state.data로 접근할 때 그 data가 처음에는 들어오지 않으므로 this.state.data?.로 지정해주어야 함

icoa

2022/03/13 16:09

event.keyCode is deprecated → e.key로 해라

icoa

2022/03/13 16:08

tpgns.github.io

https://tpgns.github.io/2018/04/12/Why-Composition-is-Harder-with-Classes/

Should You Use Classes in JavaScript?

Design Expression vs Dogma Object Oriented Programming ( OOP) is without question an important advancement in the design and development of software. In fact languages such as C++ and later Java were developed primarily around the OOP concept of a class[1-2].

https://medium.com/@vapurrmaid/should-you-use-classes-in-javascript-82f3b3df6195

Composing Software 시리즈 요약

소프트웨어 합성: 개요

합성은 전체를 구성하기 위해 부분이나 요소를 결합하는 행위다.

소프트웨어 개발이란 복잡한 문제를 작은 문제로 분해해 그 해법들을 조합해서 복잡한 문제를 해결하는 솔루션을 만드는 행위라고 배웠다.

그 말의 중요성을 늦게 깨달았다. 소프트웨어 설계의 본질이다.

소수의 개발자만 깨닫고 있었다. 대부분 우리가 활용할 가장 중요한 개념과 잘 적용하는 방법을 몰랐다.

•

함수 합성(function composition)이란?

•

객체 합성(object composition)이란?

// 뭔지 잘 몰랐음. 특히 객체 합성(함수 합성은 콜백 함수 던지는 방식이 아닐까, 객체 합성은 상속?)

객체 리터럴 vs 생성자 함수 vs 클래스. 왜 리팩터링 툴은 클래스를 추천하는가? #클래스함수를 대체할 팩토리 함수

icoa

2022/03/13 16:08

테스트 코드로 todo 앱을 만들면서 본 코드다. 타입스크립트 기반이라 enum을 보게 되었다.

타입스크립트를 오직 타입을 선언하는데만 사용해왔었는데 타입스크립트 공부를 각잡고 해본 적이 없어서 그런듯하다. 자바스크립트 공부는 안하고 리액트만 했던 거랑 비슷하다.

참고할 수 있는 블로그를 찾았다.

Typescript Enum이란?

Javascript와 다르게 Typescript에서는 Enum을 제공합니다. Enum이 무엇인지, Enum을 사용하면 어떤 이점이 있는지 알아봅시다. enum 은 enumerated type(열거형)을 의미합니다. Enum은 값들의 집합을 명명하고 이를 사용할 수 있게 합니다. 일반적으로 우리가 사용하고 있는 열거자들은 주로 식별자입니다. 예를들면 boolean 을 들 수 있습니다. 많은 컴퓨터언어들에서 사용자들이 새로운 열거형을 정의할 수 있게 하고있습니다.

https://sambalim.tistory.com/142

간단하게 요약해본다. 추가적으로 책을 사서 학습할 예정이다.

My Status

Status를 정의한다. status는 number로 해야할까 string으로 해야할까?

근데 상태를 string으로 정의했더니만 내가 원하지 않는 상태가 string 타입이라 할당되어질 수가 있다!

즉, 범위가 너무 넓다.

이럴 때 Union과 String Literal Types를 사용해서 범위를 좁힌다.

그런데 또 문제가 있다. 백엔드에서 받아오는 값을 모두 정의해놓을 수가 없다!

object처럼 keyValue 쌍으로 가독성을 크게 높일 수 있다.

타입스크립트 enum 사용법? State를 만들 때 사용한다.

icoa

2022/03/13 16:07

TypeScript | Index Signature - string key로 객체에 접근하기

JSX 파일을 TSX확장자로 바꾸어 작업을 하면서 객체를 활용하고 프로퍼티에 접근, 프로퍼티를 추가하는데에 자바스크립트와 타입스크립트 간에 차이가 있다는 것을 새롭게 알게되어 아래에 정리해보고자 한다. 먼저, 타입스크립트 오류 메시지 중 읽어봐도 감이 안잡혔던 오류를 해결한 방법을 통해 객체 활용 시 자바스크립트와 타입스크립트의 차이점에 대해 말하면 좋을 것 같다.

https://velog.io/@yyeonjju/TypeScript-Index-Signature-string-key%EB%A1%9C-%EA%B0%9D%EC%B2%B4%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B8%B0

index signature란? 객체의 string 키를 사용할 때 타입스크립트의 차이점

icoa

2022/03/13 16:07

Typescript 유틸리티 클래스 파헤치기

Typescript에서 타입에 대한 유틸리티 클래스를 정리한 내용으로 라이브러리 코드에 대한 설명도 포함하고 있기 때문에 간단히 어떤 역할을 하는지와 예시만 보아도 무방합니다. this타입과 관련한 유틸리티 클래스는 apply를 통한 재정의이기 때문에 생략하였습니다. never는 에러가 발생했을 때 프로세스를 중단시키지 않고 무시하는 타입입니다. any를...

https://medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20

this 타입과 관련된 유틸리티 클래스는 apply를 통한 재정의이므로 생략

keyof 키워드

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

never 타입

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

Partial<T>

Required<T>

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

Readonly<T>

모든 프로퍼티를 값을 참조만 할 수 있도록 바꿉니다.

220313 TS 유틸리티 클래스 파헤치기 읽기

icoa

2022/03/13 16:07

# 실습

923 함수 타입

# 실습

My Status

JS/TS

Introduction

# 시작

# 시작

innerText

innerHTML

append

appendChild

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

.highlight-container

window.onload

Raw strings (원래 문자열)

소프트웨어 합성: 개요

인터페이스와 제네릭을 이용한 타입 추론 방식

타입 단언

타입 호환

keyof 키워드

never 타입

Partial<T>

Required<T>

Readonly<T>