bravo my life!

1. 개요 리액트와 자바스크립트로는 손쉽게 했던 styled-components defaultProps 사용이 타입스크립트에서는 복잡한 느낌이 들어 기록을 위해 포스팅 한다. 2. styled-components에서 defaultProps는 왜 사용할까? defaultProps라는 이름에서 유추할 수 있듯이 CSS를 부모요소에서 props로 전달받기 위해 사용한다. 기본값을 정해 두고 부모요소에서 CSS를 변경할 수 있는 기능인데, 컴포넌트화를 하려 한다면 사용해보자. 가령, 부모요소에 같은 컴포넌트가 여러개 있다고 가정을 하고 각각 CSS를 다르게 적용하고 싶은 상황이 있을 것인데 바로 그럴 때 사용하면 좋은 기능이다. defaultProps로 background: black을 지정한 뒤 styled ..

1. 개요 boolean값으로 상태를 관리하며 어떤 아이콘을 false때는 상단에 빨간점을 표시하지 않고, true때는 상단에 빨간점을 표시하는 기능을 만들어 볼 것이다. 2. 코드 상세 //HomeHeader.tsx import { useState } from 'react'; import styled from 'styled-components'; //인터페이스를 사용하여 NotiState의 타입을 지정해준다. interface NotiState { noti: boolean; } const NotificationButtons = styled(IonButtons)` margin-right: 20px; `; //noti의 boolean 상태값에 따라 백그라운드 이미지를 바꾸어 줄 것이다. const Noti..

1. 프로젝트 디렉토리 생성. 2. VSCODE에서 생성한 디렉토리 열 것. 3. 터미널을 켠다. 4. npm init -y를 입력하고 package.json 파일을 생성한다. 5. 생성한 package.json을 다음과 같이 편집한다. 6. npm i -D typescrip를 입력하고 typescript를 설치한다. -D를 입력했기 때문에 devDependency에 설치된다. 7. 루트폴더에 tsconfig.json이라는 파일을 생성하고 다음과 같은 내용을 입력한다. 8. package.json으로 돌아와서 아래의 내용을 추가한다. 9. 루트폴더에 src폴더를 만들고 src 폴더안에 index.ts파일을 만든다. index.ts 내용은 간단하게 테스트용으로 다음과 같이 작성한다. 10. 터미널에 npm..

1. Call Signatures : 미리 type을 선언하자 Call Signatures란 위의 사진처럼 편집기 상에서 함수나, 변수, 인수 등등에 마우스 커서를 올리면 볼 수 있는 말풍선안의 내용을 말한다. 함수를 어떻게 호출 할 수 있는지 알려주는 용도로 사용하는 기능이다. 타입스크립트를 사용하다 보면 타입을 일일히 명시하지 않아야 하는 상황이 생긴다. 위의 사진을 예로 든다면 변수명은 다르지만 변수의 내용이 같은 코드가 무수히 반복되는 경우가 있을 수 있다. 이럴 때에 Call Signatures를 사용하여 미리 선언을 해둔다면 컴포넌트를 재활용하는 것과 같은 느낌으로 타입 선언을 사용할 수 있다. 미리 선언된 타입을 변수에 지정해 주었다. 이렇게 내용이 같은 다른 변수들에도 같은 타입을 지정해 ..

1. unknown으로 변수의 타입을 미리 알 수 없을 때를 대비하자. 내가 받아올 타입을 당장 알 수 없을 때 unknown을 사용한다면 어느정도 대비가 가능하다. let a: unknown; let b = a + 1; 위와 같은 코드를 작성한다면 오른쪽 사진과 같은 오류를 알려주는데 unknown을 사용하는 방법이 잘 못 되었기 때문이다. let a: unknown; if (a === "number") { let b = a + 1; } if (a === "string") { let b = a.toUpperCase(); } 이처럼 unknown으로 타입을 지정해 두었다면 나중에 "알게 되었을 때"의 조건을 만들어 줘야 한다. 2. 아무것도 return하지 않을 때는 void. function hello..

1. readonly로 읽기 전용 타입을 만들 수 있다. readonly 속성을 지정하게 된다면 속성이 적용된 타입이 실수로 수정되는 것을 막아준다. 불변성이 생기게 되는 것이다. type Name = string; type Age = number; type Player = { readonly name: Name; age?: Age; }; const playerMaker = (name: string): Player => ({ name, }); const pjm = playerMaker("pjm"); pjm.age = 12; pjm.name = "lkjj" 배열에도 적용이 가능하다 const numbers: readonly number[] = [1, 2, 3, 4]; numbers.push(1) array..

1. 선언할 수 있는 타입들. 굉장히 많은 타입들을 선언할 수 있다. 많은 타입을 지정할 수 있으니 다른 것들은 차차 알아가 보기로 하고, JsvaScript를 사용해 보았다면 알만한 number, string, boolean을 먼저 공부해 보았다. 타입을 선언할 때는, const a: string = "Tom" 이런식으로 타입을 선언 할 수 있다. 또 각각의 타입을 배열로 지정할 수가 있는데 타입명 뒤에 []을 사용하면 가능하다. 예. string[] 2. 타입 선언을 한다면 보다 더 컴퓨터와의 대화에 가까워진다. 깊이 들어가보자. 객체로 타입을 선언하고 싶다면 const player : object = { name : "pjm" } player.name 이 방법을 생각했지만 틀린 방법이었다. 우측 사..

부트캠프 수료 후 공부를 좀 더 하고 싶어하는 수강자들끼리 스터디그룹을 만들었다. 부트캠프 매니저가 배워두면 좋다는 TypeScript와 Next.js를 하려고 한다. 우선 노마드 코더의 TypeScript 강의가 무료인 점이 있어서 TypeScript를 먼저 진행하고 있다. 1. TypeScript? 타입스크립트는 명칭부터 "나는 이런 언어입니다."라고 알려주고 있다. 강타입 성향의 언어로서 타입에러를 검출할 수가 있는데 TypeScript를 제외한 강타입 성향의 언어는 C, C++, GO, Java 등등이 있다. 내가 개발언어로 처음 접한 JavaScript는 약타입의 언어로 타입 안정성이 낮고 에러를 발생시켜야 할 상황에서 에러발생없이 연산이 되는 경우가 있었다. JavaScript의 이런 단점을 ..