Programming/React10 [React] CRA(create-react-app) + TypeScript 세팅하기 이제는 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다. 우선 해야 할 작업들은 다음과 같다. CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기 eslint, prettier를 적용하여 코드 컨벤션 보장하기 typescript가 필요한 라이브러리 세팅 tsconfig.json에 src 절대 경로 세팅 1️⃣ CRA(create-react-app) + TypeScript TypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 작성한다. .. 2023. 4. 28. [React] Hooks란? 사용방법과 배경 정리 (useEffect, useState, Custom Hook) Hook Hook을 사용하여 기존 Class 바탕의 코드를 작성할 필요 없이, 상태 값 관리와 여러 React 기능을 사용할 수 있다. (v16.8 부터 추가됨) Hook이 만들어진 배경 기존 컴포넌트 사이에서 상태 로직 재사용이 어려웠다. React는 컴포넌트 간 재사용 가능한 로직을 붙이는 방법을 제공하지 않는다.(ex. 스토어에 연결) 따라서, render props나 HOC(고차 컴포넌트) 패턴으로 해결해 왔지만, 이런 패턴은 컴포넌트 재구성을 강요하며, 코드 추적을 어렵게 만든다. provicders, consumers, HOS, render props 그리고 다른 레이어로 둘러싸인 wrapper hell이 될 수 있다. 그래서 React는 상태 관련 로직 공유를 위한 좀 더 좋은 기초 요소가 .. 2023. 4. 21. Typescript에서 useState를 props로 넘기는 법 useState로 선언한 setValue를 컴포넌트에 props로 넘기고 싶은데 아래처럼 코드를 짜면 Typescript에서는 타입 경고가 뜬다! // ParentComponent.tsx const [value, setValue] = useState(true); // ... return ( ); // SomeComponent.tsx interface SomeComponentProps { setValue: () => void; } // ... 이 때 저 ParentComponent.tsx의 setValue에 마우스를 올리면 이런 친절한 가이드가 나오는데, 이대로 인터페이스 타입 세팅을 수정해주면 된다. // SomeComponent.tsx import { Dispatch, SetStateAction } f.. 2022. 11. 9. React에서 <input> 태그를 사용할 때 주의할 점 리액트에서 input을 사용하다 보면 가끔 원하는 대로 동작하지 않을 때가 있는데, 이 때 props나 state 값을 잘 연결했는지 확인해보아야 한다. 주의할 점은 다음과 같다. 1. (중요) input에 value 속성을 지정하면 인풋값이 변경되지 않는다. 항상 변경되는 상태값(this.state.inputValue)을 연결해주어야 한다. 2. React의 onChange 이벤트는 값이 입력되어 변경이 생기면 발생한다. 참고 및 출처 https://velog.io/@towozy/React를-쓰면서-착각할-수-있는-몇가지-요소-3kjukr898l 2021. 7. 23. [React] React onClick에 여러 함수를 넣고 싶다면 (+주의사항) React onClick할 때 여러 동작을 붙이고 싶은 경우가 많다. 처음에 많이 당황스러웠던 에러는 onClick에 함수 두 개 넣었을 때 예상치도 못했는데 에러가 무한으로 발생했을 때. 이런 간단한 코드에서 에러가 발생하다니 난 바보야.. 같은 생각 들면서 당황스러웠더랬지.. 그럼 이럴 때는 어떻게 하면 되는지 침착하게 알아보자. 함수 하나일 때와 여러 개일 때의 차이점은? 단순하게 설명하자면 함수 하나일 때와 여러 개일 때의 차이는 바로 () => {} 유무이다. 당연하게도 onClick에 여러 함수를 넣었을 때, 그냥 무작정 코드 추가만 하게 되면 에러가 발생한다. 실수로 놓칠 때도 있었고 알고 나서도 꽤 많은 에러가 여기서 났었다. 이 정도 실수는 다신 안해 싶을 때 또 찾아오는 에러.. 방심은.. 2021. 7. 23. React, React-Native 한 번에 여러 스타일 적용하는 법 한 번에 여러 스타일 적용하는 법 (multiple styles) 스타일 적용 시 아래와 같은 TypeError가 발생했고 스타일 적용 문제였다. React — TypeError: CSS2Properties doesn’t have an indexed property setter for ‘0’ 한 태그에 여러 스타일을 적용하려고 한 부분에서 생긴 에러였고, 한 번에 여러 스타일을 적용하는 해결방법을 찾았다. React style={Object.assign({},style1, style2, ...)} React-Native style={[style1, style2, ...]} 참고 https://medium.com/@abhaytalreja/react-typeerror-css2properties-doesnt-.. 2021. 7. 23. [Redux] 새로고침 유지: Redux Persist 테스트 후기 도입 배경 Redux의 스토어는 페이지 새로고침 시 state의 데이터들이 초기화되기 때문에, 새로고침 시에도 저장된 상태가 없어지지 않도록 캐시 기능을 구현하는 장치가 필요했다. 기존에는 새로고침 시에 로그인이 풀리지 않도록 하기 위해서, LocalStorage로 사용자 인증 상태를 확인하기 위한 토큰을 저장하고 불러와서 사용하고는 했다. 하지만 그 토큰에 페이지의 많은 상태값이 의존하고 있고, LocalStorage에 매번 직접 접근하여 인증 정보를 가져오는 것보다 store에서 관리하는 것이 더 적합하다고 생각했고, 추후 자동 로그인 기능 도입을 위해서도 반드시 대안이 필요할 것이라고 판단하였다. 또한 새로고침 시에 유지해야 할 상태값들이 많이 추가되었고, 앞으로의 확장성을 위해서도 Redux Pe.. 2021. 7. 23. React 빌드, 배포 시 주의할 점 소스맵 제거하기 create-react-app으로 빌드, 배포하는 경우 기본적으로 webpack에 의해 번들링 된 파일과 sourcemap이 생성된다. sourcemap은 디버깅을 위한 파일이기 때문에 브라우저 내에서 다시 원본 소스처럼 확인할 수 있다. 개발자 도구에서 source 확인 시, 코드가 그대로 노출될 위험이 있으므로 반드시 package.json에서 아래와 같이 수정이 필요하다. 최종 배포 전에 꼭 브라우저에서 다시 확인하는 작업이 중요하다. GENERATE_SOURCEMAP=false "build" : "GENERATE_SOURCEMAP=false react-scripts build" 또는 빌드 후 직접 삭제 (v1.0.11 보다 높은 버전이어서 사용해보지는 않았다) "build": "r.. 2021. 7. 23. [React] CRUD 블로그 만들기 - 2. 프론트엔드 [React] CRUD 블로그 만들기 - 1. 백엔드 에 이은 포스팅입니다. [React] CRUD 블로그 만들기 - 1. 백엔드 프로젝트 목적: React 프로젝트로 CRUD 게시판 만들기. 챕터 1. 백엔드 개발. 웹 서버 - Koa 프레임워크를 사용했다. Django와의 고민이 있었지만, python을 추가로 설치할 필요 없이 nodejs로 개발할 수 있다는.. bolob.tistory.com 프로젝트 목적 React 프로젝트로 CRUD 게시판 만들기 프론트엔드 개발 구현 기능 및 화면 회원가입/로그인, 포스트 목록 조회, 특정 포스트 조회, 포스트 작성/수정/삭제 상태 관리 모듈, 컴포넌트를 react-router-dom와 Redux로 상태 관리 해결한 오류 Fix typo(오타, 필드 네임 불일.. 2020. 3. 9. [React] CRUD 블로그 만들기 - 1. 백엔드 프로젝트 목적: React 프로젝트로 CRUD 게시판 만들기. 챕터 1. 백엔드 개발. 웹 서버 - Koa 프레임워크를 사용했다. Django와의 고민이 있었지만, python을 추가로 설치할 필요 없이 nodejs로 개발할 수 있다는 점이 큰 장점으로 작용했다. 백엔드 라우팅은 Koa-router를 사용하여 다른 주소로 요청이 들어올 때 다른 작업 처리하도록 했다. REST API를 사용하여 직접 데이터를 변경하지 않고 클라이언트와 DB 사이에 REST API(서버)를 두어 작업을 처리했다. (요청 종류에 따라 다른 HTTP 메서드 사용함. 포스트 작성: POST, 포스트 목록 조회: GET, 포스트 삭제: DELETE, 포스트 업데이트: PATCH ... ) 폴더 / 파일 관리: 폴더 - 라우팅 종류.. 2020. 3. 8. 이전 1 다음
