<feed xmlns="http://www.w3.org/2005/Atom"> <id>https://lgaeun.github.io/</id><title>우당탕탕 TIL</title><subtitle>A minimal, responsive, and powerful Jekyll theme for presenting professional writing.</subtitle> <updated>2022-04-04T23:55:35+09:00</updated> <author> <name>gaeun lee</name> <uri>https://lgaeun.github.io/</uri> </author><link rel="self" type="application/atom+xml" href="https://lgaeun.github.io/feed.xml"/><link rel="alternate" type="text/html" hreflang="ko" href="https://lgaeun.github.io/"/> <generator uri="https://jekyllrb.com/" version="4.2.2">Jekyll</generator> <rights> © 2022 gaeun lee </rights> <icon>/assets/img/favicons/favicon.ico</icon> <logo>/assets/img/favicons/favicon-96x96.png</logo> <entry><title>🌀 Delve into TS environment - eslint, prettier, babel</title><link href="https://lgaeun.github.io/posts/delve-into-ts-environment/" rel="alternate" type="text/html" title="🌀 Delve into TS environment - eslint, prettier, babel" /><published>2022-03-26T10:35:23+09:00</published> <updated>2022-03-26T10:35:23+09:00</updated> <id>https://lgaeun.github.io/posts/delve-into-ts-environment/</id> <content src="https://lgaeun.github.io/posts/delve-into-ts-environment/" /> <author> <name>gaeun lee</name> </author> <category term="TIL" /> <summary> 이번에 js 프로젝트를 ts로 바꾸는 강의를 들으면서 typescript 환경에 대해 궁금해져서 정리해 보게 되었다. ESlint code level에서 에러가 날 만한 부분을 짚어준다 문법오류체크, 자동완성, formatting 지원 .eslintrc.{js, yml, json} 여러가지 확장자로 할 수 있는데 js로 하면 주석 달 수 있어서 좋음 module.exports = { root: true, //lint가 root:true라고 지정하면 이 위치까지만 configuration 파일들을 찾음 env: { //프로젝트의 사용 환경을 설정 browser: true, node: true, }, extends: [ 'eslint:recommend... </summary> </entry> <entry><title>기본과 본질</title><link href="https://lgaeun.github.io/posts/booklog/" rel="alternate" type="text/html" title="기본과 본질" /><published>2022-03-25T15:18:54+09:00</published> <updated>2022-03-25T15:18:54+09:00</updated> <id>https://lgaeun.github.io/posts/booklog/</id> <content src="https://lgaeun.github.io/posts/booklog/" /> <author> <name>gaeun lee</name> </author> <category term="인사이트" /> <category term="Booklog" /> <summary> ⌜유대인의 하루는 저녁 6시에 시작된다⌟ -오인환 지음 감상 어느 순간부터 시간의 주인이 아니라 노예, 따지자면 솔거노비 쯤으로 살고 있다는 생각이 들고 나서 서점을 구경하다 이 책을 발견하고 덥석 사버렸다. 이외에도 요즘 많은 책들을 읽었는데 주제는 달라도 공통적으로 하는 말이 있다. 본질이 중요하다. 일의 본질, 시간의 본질, 공부의 본질, 독서의 본질 등. ‘주’와 ‘부’를 구별하는 힘. 우선순위와 핵심, 긴급도를 파악하는 능력. 독서도 마찬가지다. 거의 300~400쪽이나 되는 페이지를 들여서 결국 말 하고자 하는 단 하나의 문장은 무엇인가, 어떤 이유에서 쓰였고, 어떤 방식으로 얘기하는가. 본질 파악 뒤 가장 중요한 것은 당연히 실행력. 행동하지 않으면 아무 쓸모가 없다. 행동... </summary> </entry> <entry><title>🌀 TS strict 적용하기</title><link href="https://lgaeun.github.io/posts/ts-strict/" rel="alternate" type="text/html" title="🌀 TS strict 적용하기" /><published>2022-03-24T10:35:23+09:00</published> <updated>2022-03-26T00:48:59+09:00</updated> <id>https://lgaeun.github.io/posts/ts-strict/</id> <content src="https://lgaeun.github.io/posts/ts-strict/" /> <author> <name>gaeun lee</name> </author> <category term="TIL" /> <summary> Prerequisite tsconfig.json "strict": true 요런 family option들 모두에 대해 강한 타입 체크를 해주는 옵션이다. 1. Null 타입 오류 및 함수 타입 오류 해결 Strict Null Check function initEvents() { rankList.addEventListener('click', handleListClick); } rankList에 대한 null check가 필요하다. 따라서 initEvents 함수 최상단에 다음과 같은 Null check를 넣어줌으로써 해결한다. if (!rankList) { return; } Strict Function Type Check function의 argument typ... </summary> </entry> <entry><title>🌀 Event, Axios type 정의</title><link href="https://lgaeun.github.io/posts/event-axios-type/" rel="alternate" type="text/html" title="🌀 Event, Axios type 정의" /><published>2022-03-23T12:32:01+09:00</published> <updated>2022-03-23T12:32:01+09:00</updated> <id>https://lgaeun.github.io/posts/event-axios-type/</id> <content src="https://lgaeun.github.io/posts/event-axios-type/" /> <author> <name>gaeun lee</name> </author> <category term="TIL" /> <summary> 파라미터 타입들 정의하기 parameter, return value등에 대해 따로 빼서 interface나 type으로 정의해서 사용하면 된다. Event type function initEvents() { list.addEventListener('click', handleListClick); } async function handleListClick(event: any) { // ... } 에서 click 이벤트이므로 MouseEvent로 바꿀 수 있다. async function handleListClick(event: MouseEvent) { // ... } 이벤트 타입은 event위에 마우스를 올리면 알 수 있다. Axios Promise를 리턴하는 함수는 Prom... </summary> </entry> <entry><title>🌀 3/16 TS - DOM 함수 타입 오류 해결하기 (ref. ts:2740)</title><link href="https://lgaeun.github.io/posts/DOM-element-type/" rel="alternate" type="text/html" title="🌀 3/16 TS - DOM 함수 타입 오류 해결하기 (ref. ts:2740)" /><published>2022-03-16T12:35:23+09:00</published> <updated>2022-03-16T12:35:23+09:00</updated> <id>https://lgaeun.github.io/posts/DOM-element-type/</id> <content src="https://lgaeun.github.io/posts/DOM-element-type/" /> <author> <name>gaeun lee</name> </author> <category term="TIL" /> <summary> DOM Element type function $(selector: string) { return document.querySelector(selector); } const confirmedTotal = $(".confirmed-total"); const deathsTotal = $(".deaths"); const recoveredTotal = $(".recovered"); 위와 같은 util 함수를 작성했을 때, 반환되는 타입은 Element인 것을 알 수 있다. querySelectyor로 가져온 DOM Element의 타입은 어떻게 될까? 타입을 단언해주지 않으면 다음과 같은 메소드를 사용할 때 에러가 발생한다. deathsTotal.innerText = data[0].Cases;... </summary> </entry> </feed>
