전체 글
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..
How to upgrade node version on Windows10 (윈도우 환경에서 노드버전 업그레이드 하는 방법)
제목이 장황하네요 그저 토이프로젝트 하나를 시작하려 했을 뿐인데 생각보다 삽질이 길었기에 공유하고자 합니다 우선 간만에 설정을 하려고 하니 Node LTS 버전이 살짝 바뀌어 있길래 손쉽게 업그레이드를 하고싶었습니다만 저는 평생 Mac없이 살아왔기 때문에... (just window) NVM이라는 훌륭한 노드버전 매니저를 이용할 수 없었습니다. 그래서 눈물을 머금고 그냥 무식하게 언인스톨 후 다운로드를 할까 했습니다만 왠지 자존심이 상해서 계속 찾아보다 보니 최근에 RN (리액트 네이티브) 셋팅할 때 사용했던 chocolatey가 눈에 들어오더라구요 https://chocolatey.org/packages/nodejs-lts Node.js LTS (Install) 14.15.4 Node.js is a J..
[React.js] 특정 화면에서 Header 혹은 Container 숨기기
최근에 간단한 페이지 구현 중에 헤더가 자꾸만 나타나서 여러가지 방법이 있겠지만 헤더 혹은 컨테이너같은 Wrapper를 특정 화면에서는 보이지 않게 하기 위한 방법을 나름대로 고민하고 삽질해본 결과 가장 간편하다고 생각되는 예를 공유하고자 합니다 Class 형 컴포넌트를 사용하시는 분들은 숨기고 싶은 컴포넌트(헤더, 컨테이너 등) 안에다가 아래 코드를 작성해주세요 render() { if (window.location.pathname === '/본인이 헤더 등을 숨기고자 하는 주소') return null; return ; } 위처럼 작성하시게 되면 성공입니다. 함수 컴포넌트에서도 크게 다르지 않습니다 Const Header = () => { if (window.location.pathname === '..
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 ..
Git push error 해결방법
$ git push origin master To https://github.com/mrkyel/SSR.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to (url) hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help..