IT/React
Create React App을 사용하여 Typescript 프로젝트를 생성하는 방법
1. Create React App 설치 Create React App은 Node.js와 npm이 설치되어 있어야 합니다. 아래 명령어로 Create React App을 전역으로 설치합니다. npm install -g create-react-app 2. Typescript 템플릿 생성 아래 명령어로 Typescript 템플릿을 사용하여 Create React App 프로젝트를 생성합니다. npx create-react-app my-app --template typescript 위 명령어에서 my-app은 생성할 프로젝트의 이름입니다. 3. 프로젝트 실행 프로젝트 디렉토리로 이동한 후, 아래 명령어를 입력하여 프로젝트를 실행합니다. cd my-app npm start 4. 추가적인 작업 이제 Typescr..
CRA(Create React App) 환경에서 Emotion 설치해서 사용하기
원래는 스타일드 컴포를 가끔 사용하거나 그냥 일반 css파일을 사용하거나 혹은 scss를 사용하여 스타일링을 수정 등 했었습니다만 많은 사람들이 말하는 emotion이 궁금해서 한번 써보기로 결정 하지만 게으른 탓에 제대로 써보지도 못하다가 최근에 다시 토이프로젝트가 생성되어 도전합니다 설치 방법은 간단합니다. 터미널에서 아래와 같이 입력해줍니다 yarn add @emotion/react @emotion/styled or npm i @emotion/react @emotion/styled 저는 왠지 yarn이 좋아서 (가수 얀이 생각나서..? 연식 인증..) yarn을 사용합니다 사용법은 원래 아래 링크 주소를 통해서 익혔었는데요 https://howdy-mj.me/css/emotion.js-intro/ ..
CRA(Create React App) + Eslint + Prettier 로 환경설정하기
자주 하는 셋팅이라 음 뭐 별거없군 하다가 삽질 너무 오래해서 ...ㅠㅠ 공유합니다 먼저 제 앞전 포스팅 보시고 노드나 npm 버전 다 lts로 맞춰두시구요. npx create-react-app 본인이 원하는 프로젝트명 위처럼 입력하시면 후라라락 프로젝트가 생깁니다 친절하게 터미널에 설명이 다 나오죠 (VScode 에서 기본 터미널을 git bash로 설정해두신 분이라면 조금 더 편할 것 같습니다) 설치가 완료되면 cd + 폴더명 입력 후 npm start 하시면 기본 화면에 진입합니다 이제 Vscode 익스텐션 마켓에 가셔서 Eslint랑 Prettier를 설치해주세요 설치가 완료되면 root 경로에다가 (package.json과 같은 경로) .eslintrc.json 과 .prettierrc.jso..
useMemo, useCallback, useReducer, useState 의 특징 (간단하게)
오랫만에 쓰는 글 최근 리액트를 아무리 봐도 자꾸만 하얘지는 머릿속에 감탄하며 책을 다시 보는 중이다. 그 중 헷갈리는 개념 몇개를 아주 간단하게 정리하여 공유하려고 한다. useMemo : 렌더링 성능을 최적화하기 위하여 주료 사용함 ( 특정 값이 바뀌었을 때만 렌더링 될 수 있도록 최적화를 도와줌) useCallback : useMemo와 거의 똑같은 성능을 가지고 있으나 함수를 재사용하는 용도로 주로 사용함 useReducer :useState보다 더 다양한 상태를 관리하기 위해서 사용하는 Hooks 현재상태를 미리 정의해 둔뒤 액션에 맞추어 작동할 수 있는 컨트롤러를 구현해놓음 후에 리덕스를 사용하기 위해서는 꼭 알아두어야 할 패턴 중 하나 useState : 렌더링 대상이 되는 state를 관리..
Create-react-app (CRA)에서 절대경로 설정하기
자주 글을 쓰지 못하네요 (게을러서) React를 쓰시는 분들은 자꾸만 경로를 설정할 때 ./ ../ ../ 등등 여러가지 짜증나는 일들을 겪으실 텐데요 ( 21년 1월 28일 갑자기 지난 포스팅 돌아보다가 수정) 이제 VSCODE를 설정해주셔야 해요 일반 자바스크립트로 리액트를 코딩 중이시라면 jsconfig.json 만약 타입스크립트로 리액트를 코딩 중이시라면 tsconfig.json 요렇게 파일을 들어가셔서 "compilerOptions": { "baseUrl": "./src" } 요렇게 추가해주시면 됩니다 이거 전체 복사해서 넣으시는거 아니고 저 가운데 baseUrl라인만 복사해서 넣으시면 됩니다 그리고 설정 마치시면 꼭 ../ ../ 이런거 찾아서 싹 지워버리시구요 그다음에 서버 껐다가 npm ..
VScode Styled Component 자동완성 기능
React 공부를 하다보니 예제를 따라칠 때 Styled Component를 따라칠 일이 많아졌다 하지만 자동완성 기능이 지원되지 않아서 넘나 귀찮은 것.. 마침 구글링해서 얻은 정보가 있어서 익스텐션 공유차 포스팅 위와같은 좌측 바에서 맨 아래를 클릭하고 검색창에다가 vscode-styled-components Extension 를 입력해주시면 되시겠습니다 설치하면 바로 자동적용되니 이제 편안한 React 개발공부 하러 다시 총총
리액트 조건부 라우팅 방법
리액트에서 로그인 폼을 만들어 보는 예제를 진행 중에 로그인 버튼을 눌렀을 때 조건에 따라 로그인이 되고, 조건이 맞지 않으면 화면이 넘어가지 않도록 구현하기 위해 삽질을 잠깐 해보다가 무언가 단순한 걸 놓치고 있다는 생각이 들어서 공식문서를 참조했습니다. 우선 리액트에서 자주하는 삽질 중 하나이자 꼭 기억해야 할 내용으로 Form을 다룰 때 반드시 e.prevendefault를 활용해야 한다는 것입니다. 이를 설정해두지 않으면 자동으로 렌더링을 하기 때문에 조건을 걸어도 막을 수가 없습니다. 예를 들면 if (username === "admin" && password === "1234") { } else { e.preventDefault(); } 위와 같은 상황을 같이 보실 경우, username이 a..
a component is changing an uncontrolled input of type text to be controlled. 'value' prop on 'input' should not be null.
아마도 많은 사람들이 저랑 같은 상황을 언젠가 마주치지 않으실까 싶어서 공유합니다. 리액트로 form을 코딩하실 때에 제목과 같은 에러를 마주치실 일이 종종 있으실 겁니다. 그 이유를 찾지 못해 구글링과 Stackoverflow를 뒤지다가 문득 아이디어가 떠올랐습니다. 그냥 개발자 화면에 떠있는 에러 문구 자체의 의미를 좀더 깊게 생각해보자 라는 생각이었으며, 이슈 해결 후 방법 공유합니다. 위와 같은 에러가 발생하였으며 원인은 제가 value={this.props.value} 혹은 value={this.props.value || ''} 위와 같은 방법으로 문제를 해결하려 했다는 점입니다. 만약 value={this.props.value == null? "" : this.props.value} 와 같이 ..