본문 바로가기

모카 스터디

한입크기로 잘라먹는 타입스크립트 - 이해하기 - [인프런] 섹션 3 타입스크립트 이해하기 타입스크립트 이해하기 타입은 집합이다 타입 계층도와 함께 기본타입 살펴보기 unknown 타입 (전체 집합) unknown 타입은 타입 계층도의 최 상단에 위치합니다. unknown 타입 변수에는 모든 타입의 값을 할당할 수 있습니다. 바꿔 말하면 모든 타입은 unknown 타입으로 업 캐스트 할 수 있습니다. never 타입 (공집합 타입) never 타입은 타입 계층도에서 가장 아래에 위치합니다. void 타입 any 타입 어떤 곳으로 가든 어떤 곳에서 오든 모든 업캐스팅 다운 캐스팅이 가능하다 ==> 치트키 단, never 타입에서의 다운 캐스팅으 예외이다. 객체 타입의 호환성 초과 프로퍼티 검사 : 변수를 초기화(및 함수 인자 전달) 할때 초기화 하는값으로 객체 리터.. 더보기
한입크기로 잘라먹는 타입스크립트 - 기본타입 - [인프런] 섹션 2 타입스크립트 기본 기본타입 원시타입과 리터럴타입 다른 타입에 null을 넣으려면 옵션을 확인하고 수정을 통해 진행 배열과 튜플 튜플의 유용한 사용 예 객체 저 user는 객체긴한데 그 이상의 정보는 몰랑 ㅇㅅㅇ,, 와 같다 객체 리터럴 표기법으로 주로 사용 선택적 프로포티 , 옵셔널 프로퍼티로 지정. 프로포티의 값을 바꾸는 행위를 막는다. 타입 별칭과 인덱스 시그니처 이렇게 너무 타입 명시가 길어진다 ==> 타입 별칭 사용 객체 타입의 정의를 도와주는 ==>인덱스 시그니처 key와 value의 타입에 따라 규칙을 정할 수 있다. type에 명시한 규칙만 지키면 문제가 없다. => 그래서 꼭 필요한 값이 있어야 하면 아래와 같이 따로 명시를 해주는게 좋다. 또한 왼쪽과 같이 타입이 호환되어야 한다.. 더보기
한입크기로 잘라먹는 타입스크립트- 소개 및 개론- [인프런] https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165 Hello TS World - 타입스크립트 개론 한 입 크기로 잘라먹는 타입스크립트 ts.winterlood.com 섹션 0 강의 소개 섹션 1 타입스크립트 개론 타입스크립트를 소개합니다 자바스크립트의 한계점과 타입스크립트 프로그램이 비정상적으로 종료된다. 하지만 실행은 된다. 타입스크립트의 동작 원리 즉, 프로그램 실행결과에는 아무런 영향을 미치지 않는다. 타입스크립트 컴파일러 옵션 설정하기 타입스크립트의 컴파일러 옵션은 패키지 루트 폴더 아래에 tsconfig.json이라는 파일에 설정할 수 있다. 컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은 자동 생성 도구를 이용하는 방법 입니다. 터.. 더보기
따라하며 배우는 리액트 A-Z -도커를 이용한 리액트 실행 - [John Ahn] 섹션 11 도커를 이용한 리액트 실행 챕터 설명 도커를 사용하는 이유 도커란 무엇인가 맥에서 도커 설치하기 도커를 사용할 때의 흐름 감잡기 도커 이미지로 도커 컨테이너 만들기 도커 이미지 생성하는 순서 도커 파일 만들기 도커 파일로 도커 이미지 만들기 리액트를 위한 도커 파일 작성하기 workdir: 컨테이너 안의 어떤 경로에 (로컬의)파일들을 넣을것인지 첫번째 copy 두번쨰 copy ./(로컬 내 전체 디렉토리)를 ./(컨테이너 디렉토리 /usr/src/app)으로 카피 생성한 이미지로 어플리케이션 실행 시 접근이 안되는 이유(포트 맵핑) 3000(왼쪽) 로컬로 포트 접속을 요청하면 3000(오른쪽) 컨테이너 내부의 포트 3000으로 맵핑 EC2에서 도커 설치 및 실행 여기까지 도커를 설치하기 위한 .. 더보기
따라하며 배우는 리액트 A-Z -리덕스 - [John Ahn] 섹션 10 리덕스 리덕스란? 미들웨어 없이 리덕스 카운터 앱 만들기 combineReducers Redux Provider npm i react-redux --save useSelector & useDispatch 리덕스 미들웨어 Redux Thunk Redux Toolkit Redux Toolkit APIs Disney 앱에 Redux적용하기 Redux-Persist 리덕스 익스 텐션 추가하기 더보기
따라하며 배우는 리액트 A-Z -리액트 Version 18 - [John Ahn] 섹션 9 리액트 Version 18 Automatic batching Suspense on the server Transtition 더보기
따라하며 배우는 리액트 A-Z -Next.js와 TypeScipt - [John Ahn] 섹션 8 Next.js와 TypeScipt Next.js란 Next.js 기본 파일 구조 Pre-rendering Data Fetching TypeScript란? Next.js와 TypeScript 만들 앱 소개 메인 페이지 UI 만들기(마크 다운 파일 생성) 마크다운 파일을 데이터로 추출하기 TypeScript Type Typescript 추가 제공 타입 Type annotaion, Type ingerence Type assertion get Static Props를 이용한 포스트 리스트 나열 포스트 자세히 보기 페이지로 이동(file system 기반의 라우팅) 포스트 데이를 가져와서 보여 주기 (remark) 블로그앱 스타일링 Nextjs 13 더보기
따라하며 배우는 리액트 A-Z - React TDD - [John Ahn] 섹션 6 React TDD 기본 테스트 주도 개발(TDD)란 무엇인가? React Testing Library란? Jest란? Jest 파일 구조 및 사용법 React Testing Library 주요 API 쿼리 함수에 대해 Create react app으로 리액트 설치 및 Prettier 설정하기 ESLint 설치 및 설정하 섹션 7 React TDD 를 이용한 간단한 앱 생성 및 배포 TDD를 이용해서 만들 앱 소개 앱만들기 시작 플러스, 마이너스 버튼 생성 플러스 마이너스 버튼 시능 넣기(fire event) on/off 버튼 만들기(to HaveStyle) on/off 버튼 클릭 시 버튼 disabled github Action을 이용한 AWS S3로 앱 자동 배포하기 앱 배포를 위한 AWS S.. 더보기

티스토리툴바