NOW OR NEVER

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

React Sample Web App에 관하여 1. create react app이 기본적으로 제공하는 샘플 웹앱 실행 npm run start / npm start : create react app으로 개발환경을 만들고 난 후 npm run start 혹은 npm start을 terminal에 작성해 실행할 수 있다. 개발을 할 때 접속해서 개발 중인 앱을 확인하기 위한 주소(이 주소들 중 하나로 들어가면 확인 가능) Local: http://localhost:3000 On Your Network: http://192.168.35.217:3000 처음 실행했을 때 웹브라우저 상에 보여지는 앱은 create react app이 가장 최소한의 앱을 미리 구현해서 보여주는 앱 이다.(즉 react 기술로 만..

create react app을 활용한 개발환경 구축 순서 : npm 설치 -> create react app 설치 -> create react app 사용 1. node js 설치 npm은 node js로 만들어진 프로그램들을 쉽게 설치해 주는 일종의 앱스토어이므로 node js를 먼저 설치 설치 : https://nodejs.org/en/ LTS : 안정화 된 것 / current : 가장 최신 버전 2. npm node js 설치 시 자동으로 같이 설치됨 window에서 설치 확인 window key + R (실행 창 열기) cmd 입력해서 cmd 열기(cmd : commend의 약자로 명령어라는 뜻, 컴퓨터를 명령어를 통해서 제어하는 프로그래밍으로 즉 말로 제어하는 방법이다) cmd에서 npm -..

React 공식 문서 사이트 https://ko.reactjs.org/docs/getting-started.html 개발 환경 종류 online playground : 자기컴퓨터 세팅하는 건 까다로운 일, code sandbox 등 에서 리액트를 구현해볼 수 있는 온라인 사이트 add react to a website 이미 웹사이트를 가지고 있는 데 처음부터 끝까지 리액트로 만드는 것이 아니라 부분적으로 리액트를 추가하고 싶을 때 사용하는 옵션 시작하기는 쉽지만 뒤로 갈수록 개발환경을 직접 구축해야하는 어려움들이 많기 때문에 초급 개발자에겐 사용하기 까다로운 옵션 create a new react app Toolchains 리액트로 개발할 때 목표가 무엇인가에 따라서 그목표를 달성하기 위한 개발 환경, ..

Typescript redux middleware redux-thunk yarn add axios redux-thunk typescript 지원되서 따로 @types로 설치 안해도 됨 quicktype(https://app.quicktype.io/) 받아오는 json 결과물 무슨 타입인지 확인하는 법 json 결과물 복사해서 입력하면 typescript형태로 변환 가능 AxiosError : axios가 에러났을 때 사용하는 에러 객체의 타입 createAsyncAction : 비동기 작업시 사용하기 편한 액션 생성 함수 export const AsyncAction이름= createAsyncAction( 액션이름들 )(); ThunkAction keyof S : 상태가 지니고 있는 key github a..

Typescript React Context API 활용 state context : const context이름 = createContext( null ); dispatch context: const context이름 = createContext( null ); Context 생성 방법 context 안에서 관리할 값을 위한 type alias 선언 const context이름 = createContext(defaultValue값(=보통 null)); Provider 컴포넌트 생성 context 다 작성 provider props를 type alias로 작성 type typeAlias이름 = { children : React.ReactNode;} Provider 컴포넌트 생성, useReducer 선언..

TypeScript 자바스크립트를 알고 있다면 금방 배움 장점 자바스크립트는 weakly type으로 실수를 하게 될 수 있음 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음 타입스크립트 사용시 이런 문제점 보완 가능 VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음 함수 사용시 어떤 파라미터 넣는지 컴포넌트의 props에 어떤 값을 넣는지 실수로 빠뜨린 props 있을 시 에러 감지 사소한 실수 많이 방지 파일 생성 법 디렉토리 생성 : git bash 에서 mkdir 디렉토리명 git bash 에서 cd 디렉토리명 package JSON 생성 : git bash 에서 yarn init -y 해당 디렉토리 에디터로 열기 : git bash 에서 code ./ typescript(t..

리액트 리덕스 미들웨어 사용자 경험 개선 유틸함수 사용하는 이유 : 리액트와 리덕스를 함께 사용하게 될 때 api 연동하게 되는 경우 비슷한 코드를 자주 작성하게 되기 때문이다. redux-thunk에서의 react history Thunk에서 특정 경로로 이동하고 싶을 때 사용 import {createBrowswerHistory} from ‘history’; JSON server rest api를 json 파일로 호출 가능 연습 용이여서 실무에서 사용하면 안됨 json 파일 기반으로 서버 열기(port 4000으로) npx json-server json파일경로 --port 4000 개발 공부하거나 간단한 프로토 타입 만들 때 사용하면 유용 CORS와 webpack DevServer Proxy CORS..

리액트 리덕스 미들웨어 리덕스가 가지고 있는 핵심 기능 리덕스 사용시 미들웨어를 사용하지 않는 다면 context API 등과 다를 것이 없음 액션 -> 미들웨어 -> 리듀서 -> 스토어 액션 디스패치 될 때 미들웨어에서 특정 조건에 따라 무시할 수 있게 할 수 있다(리듀스에서 해당 액션을 처리하지 않는다는 뜻), 액션이 리듀서에 도달하기 전에 처리할 수 있음(액션 수정하거나 콘솔에 나타나게 함) 주로 비동기 작업을 처리 할 때 사용(redux-thunk, redux-saga) ex) API 요청 일반적으로 라이브러리로 만들어진 리덕스 미들웨어 사용 ex) redux-thunk, redux-saga, redux-observable, redux-promise-middleware(프로미스 기반 미들웨어) 등..

리액트 Redux 상태 조회 hook: useSelector const { number, diff } =useSelector(state => ({})) 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다. 액션 디스패치 할 경우 useDispatch Hook 사용 디스배치 함수 사용 가능 프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다. 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다. 디렉토리 상에서..