전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ npx create-react-app redux-test --template typescript # Typescript는 옵션입니다. Redux 설치 $ npm i redux react-redux // package.json { "name": "redux-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/nod..
생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다. never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. -- Typescript 가이드북 나는 React + Redux를 적용하는 도중 문제를 직면했다. 타입 지정 export interface UserSearchList { characterId: string; characterName: string; jobGrowId: string; jobGrowName: string; jobId: string; jobName: string; level: ..
Type Script의 Type Checker는 타입 추론이라는 기능을 가지고 있어서, 사용자가 직접 타입을 입력하지 않아도 알아서 타입을 체크한다. // 이렇게 쓰지 말자 let letNum1: number = 11; const constNum1: number = 33; // 직접 타입 작성을 하지 않아도, 알아서 추론해준다. let letNum2 = 11;// number type const constNum2 = 33;// Union type(33) 심지어 복잡한 객체 구조까지 추론이 가능하다. // 아래 두 코드는 동일하게 타입이 추론된다. // 너무 안타깝다 const person1: { name: string; born: { when: Date; where: string; }, age: numb..
타입스크립트를 처음 시작할 때 타입 단언방식은 사용하지 말고, 타입 선언 방식만 사용하라고 들었는데 왜 그래야 하는지 궁금해 찾아보고, 정리했다. 타입 지정 방식 타입 지정에는 두 가지 방법이 있다. 설 명 타입 단언 선택된 값을 해당 타입으로 간주한다. 타입 선언 선택된 값이 선언된 타입임을 명시한다. interface Person { name: string; age: number; gender: boolean; } // 타입 단언 const user1 = { name: 'Conative', age: 25, gender: true } as Person // 타입 선언 const user2: Person = { name: 'Contia', age: 27, gender: false } 아래 간단한 예시를 ..
개요 Redux는 어렵게 생각할 필요 없이, 3단계로 이루어져있다. 설 명 Action 상태 변경을 일으키는 이벤트에 대한 정적인 정보로서, 대부분 객체 형식으로 이루어져있다. Reducer Action을 받아, 어떻게 수행할지를 정하는 함수 Store State를 관리하는 장소 예제로 살펴보기 아래는 간단하게 JS에서 테스트해본 것이다. // 테스트에서는 CDN으로 불러오는 방식을 사용했다. // const Redux = require('redux'); // 리듀서 const myReducer = (state = 0, action) => { switch(action.type) { case 'add_number': return state + 1; case 'minus_number': return stat..
이전 내용을 확인하고 싶으시다면, 아래 링크를 눌러주세요. 1. Webpack이란 무엇인가? 이전부터 Front-end 개발 업무를 할 때 코드를 수정하고 저장한 뒤 브라우저를 새로고침해서 확인하거나, 웹 서버에 배포할 때 HTML, CSS, JS 및 이미지 압축, CSS 전처리기 반환 등의 작업을 해야 했다. conative.tistory.com Webpack이 뭔지 대충 알았으니, 이제 본격적으로 Webpack을 적용해 보겠다. $ mkdir webpack_test $ cd webpack_test $ npm init -y $ npm i webpack webpack-cli css-loader style-loader mini-css-extract-plugin -D 아래 파일들은, 루트 경로에 작성한다. ..
