TypeScript의 장점 변수 타입을 컴파일 시간에 결정한다. VS Code에 입력하는 순간 타입이 체크된다. tsc 컴파일러 역할 소스코드의 정적 타입 검사 TypeScipt => JavaScript로 코드 변환 tsc --init tsc index.ts tsc src/*.ts .d.ts 파일 TypeScript 타입 정의 파일 JavaScript로 작성된 라이브러리를 사용할 수 있게 해준다. 타입 가변적인 타입의 데이터를 저장할 때는 any, unknown, union을 사용한다. any는 가급적 사용하지 않는 것이 권장된다. 유틸리티 타입 Partial : 기존 타입의 일부 속성만 제공하는 객체 생성 시 사용한다. Required : T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 개체 ..
Route 53 DNS Domain Name System 주소를 사용자가 쉽게 이해하고 시억할 수 있는 도메인 이름으로 변환해주는 시스템 모든 기기들은 IP 주소를 갖고 있으나 사용자가 기억하기 어렵기 때문에 변환할 필요가 있다. URL Top Level Domain Second Level Domain Subdomain Protocol ISP KT, SK, LG U+ DNS 서비스는 계층적으로 구성된 분산 시스템 Root DNS Server 가장 상위 도메인의 TLD DNS Server의 주소를 알아낸다. 인터넷 서비스 제공 업체들에 의해 운영된다. TLD DNS Server .com / .net / .kr 등의 TLD를 관리하는 서버 해당 도메인 이름이 속한 SLD DNS Server 주소를 알려준다...
소인수분해 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하는 solution 함수 만들기 문제 풀이 function solution(n) { var answer = []; for (let i = 2; i 1)) { isMinor = false; break; } } if (isMinor) { answer.push(i); } n = n / i; } } return answer; } 소수는 1을 제외하고, 본인 이외의 수로 나누어지지 않는 숫자이다. 풀이 순서 1..
TypeScript로 기본 세팅하기 yarn add redux react-redux @reduxjs/toolkit configureStore.ts 파일 생성 todoSlice.ts 파일 생성 configureStore.ts state의 타입 지정 (10번째 줄) RootState로 이름을 지어서 그냥 state와 헷갈리지 않도록 했다. dispatch의 타입 지정 (11번째 줄) 다른 블로그를 참고했을 때 지정하는 과정이 있어서 똑같이 작성했는데, 굳이 타입을 지정해주지 않아도 오류가 나지 않아서 주석처리 했다. 주석처리를 풀어도 오류가 없다. dispatch의 타입에 대해서는 더 공부해봐야 할 거 같다!🔥 todoSlice.ts initailState의 타입을 interface로 미리 지정하고 타입을 ..
리액트 프로젝트 세팅하기 프로젝트 생성 yarn create react-app my-app --template typescript 프로젝트 실행 yarn start 자식 컴포넌트로 props 내려주기 내려받는 props의 타입을 지정해줘야 함 타입을 지정해주지 않을 경우 타입스크립트의 IntrinsicAttributes 에러 발생 가능 props를 인자로 받는 부분에 인라인으로 하나씩 작성할 경우 props가 한 개일 때 const TodoList = ({ todos}: { todos: Todo[]; }) => { props가 여러개일 때 const TodoList = ({ todos, isDone, setTodos }: { todos: Todo[]; isDone: boolean; setTodos: an..
enum과 객체 리터럴 enum 상수 값을 그룹화해서 관리할 때 사용 컴파일 시에 자동으로 숫자 값으로 매핑되기 때문에 값을 할당할 필요 없 객체 리터럴은 복잡한 구조와 데이터 타입을 사용해야 할 때 사용 어떤 타입의 값도 대입 가능 유틸리티 타입 Partial 기존 타입의 일부 속성만 제공하는 객체 생성시 사용 기존 속성이 name, age일 경우 >> name / age / name, age 세 가지 경우 가능 Required T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 객체 생성시 사용 Readonly 타입 T의 모든 속성을 읽기 전용으로 만듦 : 완전한 불변 객체 취급 Pick 타입 T에서 K 속성들만 선택하여 새로운 타입을 만듦 Omit 타입 T에서 K 속성들만 제외하여 새로운 타입..
JavaScript의 약점 JavaScript는 동적언어! 짐작하기 어려운 undefined 에러가 발생되기 쉽다 변수 타입이 실행 시간에 결정됨 타입 체크 문제 불확실한 객체 TypeScript의 장점 변수 타입을 컴파일 시간에 결정 VS Code에 입력하는 순간 타입 체크 VS Code에 입력하는 순간 객체 체크 객체 지향 프로그래밍에서의 장점 (class의 객체를 마음대로 조작하지 못하도록 private 설정) 외부 모듈의 타입 정보 제공 tsc = typeScript 컴파일러 컴파일러의 역할 소스코드의 정적 타입 검사 >> 개발자가 코드에서 타입 관련 오류 미리 발견하고 수정 가능 TypeScript >> JavaScript로 코드 변환 컴파일러의 장점 에러 메시지 해석에 도움을 받을 수 있다. ..
Redux로 상태관리 '글 작성하기'라는 같은 모달창을 두 가지 버튼으로 띄울 수 있게 하는 경우 한 곳에서만 글 작성 모달창을 띄울 때는 const [isOpen, setIsOpen] = useState(false) const openModal = () => { setIsOpen(true) } const closeModal = () => { setIsOpen(false) } 이런 식으로 컴포넌트 내에서 모달창을 열 수 있는 state값을 만들어서 사용하면 된다. 하지만 글 작성 모달창을 띄우는 버튼이 각각 다른 컴포넌트에 속해 있다면, useState로 만들어낸 state로는 모달창 관리가 어렵다. 그렇기 때문에 Redux에서 공통으로 사용할 isOpen state를 만들어서 사용하면 된다. isOpe..
