typescript16 [ 타입스크립트(TypeScript) ] 이중 반복문에서 반복문 순회 후 타입 강제하기 📍 이중 반복문에서 반복문 순회 후 타입 강제하기 언뜻 제목만 봐서는 이해하기 힘들 수 있지만, 쉽게 말해 타입이 2개 이상인 data에서 find를 통해 나온 값에 원하는 property만 추출하고 싶을 때 해당 타입을 assertion 방법이다. 이미 data에 타입이 정해져 있는 경우라면 굳이 type assertion 해야되나?라고 생각할 수 있지만, API요청을 통해 받은 값(data)의 타입이 2개 혹은 2개 이상으로 설정되어있고, 내가 사용하고 싶은 property가 각각의 타입에 공통으로 들어있지 않은 property인데, 한쪽 타입의 property만 추출하면 컴파일 에러가 나는 경우 해결방법에 대해 글을 작성했다. 한 가지 예시를 통해 살펴보자. API를 통해 받은 값 data 값이 있.. 2022. 7. 3. [ 타입스크립트(TypeScript) ] 비구조할당문법에 type 선언하기 📍 비구조 할당 문법에 type 선언하기 코드의 가독성을 높이기 위해 객체나 배열로 된 변수에 비구조화 할당 문법(destructuring assignment)을 사용할 때가 자주 있다. typescript로 비구조화할당 문법을 사용하면 변수로 꺼낸 값에 타입을 정해주는 경우를 마주하는데 object형은 가끔 타입을 어떻게 정해야 하는지 헷갈리곤 한다. 이번 글은 거창한 글보단 미세먼지처럼 작은 팁이지만 종종 헷갈릴 때 도움이 되므로 가벼운 마음으로 읽어보자. 하단 코드블록에 나와있듯이 user를 구조분해할당 이후 타입을 잘못 선언하는 경우는 AS-IS처럼 사용한다. 하지만, 저 문법은 타입을 정해주는 문법이 아니라, 객체의 원래 속성명을 다른 이름으로 할당하는 문법이다. 여기선 string으로 바꾼다는.. 2022. 6. 21. [ 타입스크립트(TypeScript) ] 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 📍 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 구독신청 페이지를 만들면서 개인정보수집 checkbox와 광고성 정보 수신 input checkbox를 useState로 관리하려고 하는데, 여러 개의 useState로 선언하여 관리하니까 코드가 불필요하게 길어져 좋은 코드라고 보기 힘들었다. 그래서 기존에 const [state, setState] = useState(false)처럼 선언했다면 이를 object로 묶어 선언하니 코드가 줄어들었다. import { useState } from "react"; // 리팩토링 전 export default function Subscription() { const [allAgree, setAllAgree] = use.. 2022. 5. 16. [ 엘리스 SW 엔지니어 트랙 ] 선택강의 - React에서의 타입스크립트 📍 [선택강의] React에서의 타입 스크립트 이번 글은 필수로 들어야 하는 강의를 기록하기 위해 적는 글은 아니고 선택적으로 듣는 강의 중 React에서의 타입스크립트 강의를 기록으로 남겨 놓을까 한다. 그 이유는 이전부터 사용해왔지만 앞으로도 사용할 언어인 타입 스크립트와 프레임워크인 React기 때문이다. 그리고 지금까지 내가 작성한 코드를 어떻게 더 효율적이게 작성할 수 있을지에 대한 몇 가지의 샘플을 배울 수 있기 때문이다. 한 가지 예로 나는 이거 먹어봄? 프로젝트의 후속조치로 webpack과 babel를 직접 설정하는 간단한 예시(image-drag-and-drop)를 만들었으나, babel을 설정하기 위해 생각보다 많은 플러그인(npm i -D @babel/core @babel/preset.. 2022. 1. 24. [ 엘리스 SW 엔지니어 트랙 ] 65일차 📍 65일 차 1.22. 토. 온라인 강의 오늘은 직접 React와 Styled-components를 이용해서 트랙카드, 탭, 검색창을 초기 UI로 구현하고 이후에는 실제 API를 연동하면서 검색창에서 검색 데이터를 가져오는 방법까지 응용하는 법을 배웠고, JS에서 TS로 마이그레이션 설정 방법에 대해서 배웠다. 앨리스 수강 전 한 스타트업에서 기술면접을 봤을 때 `TS`로 마이그레이션 하는 방법에 대해 질문을 받았을 때 제대로 대답을 하지 못했던 것이 생각났다. 이번에 배운 내용을 토대로 직접 JS파일을 TS 파일로 마이그레이션 해보는 과정을 겪어보며 잊지 말아야겠다는 생각을 했다. 또 CSS를 배울 때 position과 같은 내용을 직접 적용하려고 할 때 어려움이 많았는데 이번 실습을 보면서 posi.. 2022. 1. 23. 이전 1 2 3 4 다음
