본문 바로가기

전체 글

(71)
React - Netlify에 배포하기 GitHub Page는 현재 리액트 라우터에서 제공하는 브라우저 히스토리가 지원되지 않는다. 그래서 Netlify를 이용해 배포해보자. ( Netlify, Now, Heroku 등.. 많이 사용 ) 참고 create-react-app.dev/docs/deployment#netlify 1. Netlify 설치 터미널에서 netlify 글로벌로 설치 >> npm install netlify-cli -g 2. 계정 생성(가입) >> netlify deploy deploy 명령어를 호출하면 아래와 같은 가입창이 뜬다. github 계정으로 생성 3. 승인팝업 승인 4. 팀이름, 사이트 생성 승인이 허락되면 터미널에 아래와 같은 질문이 나오고, 답하면된다. (파란글씨가 질문) ? What would you lik..
React - GitHub Page에 배포하기 1. github 로그인 후 repository 생성 Repository name 작성 Public으로 체크 2. local에 있는 폴더를 github에 연결 (원격 레파지토리 설정) 로컬 터미널에서 해당 디렉토리로 들어간다. >>git remote add origin https://github.com/유저네임/레파지토리명.git 3. local에 작성된 코드 commit & push >>git add * >>git commit -m "add habit tracker" >>git branch -M main >>git push -u origin main **main으로 적으면 브랜치명이 main으로 생성됨. 4. github page 설정 4-1. repository의 Settings로 들어가서 아래로 내..
오브젝트의 가변성(참조형) & Spread Operator ([ ... ], { ... }) 오브젝트의 가변성 변수에 원시형 데이터(primitive type : number, String, boolean, null, undefined)를 할당하게 되면 데이터 자체가 변수에 할당되지만, 오브젝트를 변수에 할당하면 변수에는 오브젝트가 들어있는 메모리의 주소(참조값, reference)가 할당된다. a = 1 b = a b = 5 //결과 a=1, b=5 위의 코드에서 원시형 데이터는 number는 다른 변수에 할당한 후, 데이터를 변경해도 원본 데이터 a에 영향을 미치지 않는다. a = [ 1, 2, 3 ] b = a b.push(4) //결과 a=[1,2,3,4], b=[1,2,3,4] 위의 코드에서 배열오브젝트는 다른 변수에 할당한 후, 데이터를 변경하면 원본 데이터 a에 영향을 미친다는 것을..
React - React Hook (중요 포인트) 공식 홈페이지 ko.reactjs.org/docs/hooks-intro.html Hook 이란 React에서 제공하는 기능. (React 16.8 이후 추가됨) 함수형 컴포넌트에서 state와 lifeCycle method를 잘 사용할 수 있게 만들어진 것 this를 사용하지 않아 가독성 및 편리성이 좋고, 코드중복을 줄일 수 있다는 장점이 있다. 출처 ko.reactjs.org/docs/hooks-overview.html state와 props가 변경될 때 호출 차이 (클래스컴포넌트 vs 함수형 컴포넌트) 클래스 컴포넌트에서 멤버변수는 클래스가 만들어질 때 한번만 만들어지고, render함수만 반복적으로 호출된다. 함수형 컴포넌트에서는 함수의 블럭안에 있는 코드 전부가 반복적으로 호출된다. (함수 내 ..
React - PureComponent & memo PureComponent가 Component와 다른점 shouldComponentUpdate()의 구현이 되어있다. 해당 컴포넌트의 props와 state가 바뀌어서 업데이트가 필요하다면 true를 리턴하고, 바뀌지 않았다면 false를 리턴해서 컴포넌트를 업데이트 하지 않는다. Shallow Comparison (얕은 비교) props와 state를 비교할때, 얕은 비교를 한다는 것은 reference를 비교한다는 것이다. 객체를 가지고 있다면 그 객체가 가지고 있는 어떤 데이터가 변경되더라도 객체가 변경되지 않았으니 같은 객체로 본다. 출처 ko.reactjs.org/docs/react-api.html#reactpurecomponent 얕은 비교를 위한 데이터 수정 방법 객체의 데이터 값만 수정하는 ..
React - 디버깅 tip 렌더링되는 부분 표시 설정 컴포넌트가 렌더링 될때 업데이트되는 부분을 하이라이트로 표시해준다. 크롬 개발자도구에서 components를 클릭. (크롬 웹스토어에서 React Developer Tools 설치후) components의 설정에서 아래와 같이 체크박스 클릭.
React - Dom과 컴포넌트에 접근하는 방법(Refs) React에서는 Dom에 접근할때, document.querySelector 와 같은 api를 사용하지 않고 Ref를 이용한다!! Ref 사용방법 Ref를 생성해서, 생성된 ref에 원하는 돔 엘리먼트를 저장 저장 후 this.(ref이름) 으로 사용. 아래 코드 참고! -------------------------------------------------------------------------------------------- Class textForm extends Component { inputRef = React.createRef(); // Ref생성 focusTextInput = () => { this.inputRef.current.focus(); } render() { return ( /..
React - 프로젝트 시작하기 (터미널명령어) & 컴포넌트 생성 및 작성 터미널 명령어 1. yarn으로 react-app 생성하기 프로젝트 폴더를 만들고자 하는 위치로 디렉토리를 설정하고 아래 명령어를 입력한다. >> yarn create react-app 프로젝트폴더명 2. 폴더를 통째로 복사하기 templete 폴더를 habit-tracker 로 복사한다. >> cp -R templete habit-tracker 2. 코드 열기 (편집기로) 코드를 열기를 원하는 프로젝트 폴더로 디렉토리를 설정하고 아래 명령어를 입력한다. >> code . 리액트 기본 폴더 구조 public 폴더 : 정적인 파일, static한 것들 src 폴더 : 동적 파일 (자바스크립트 코드), dynamic한 것들 * 웹팩에서는 빌드할때마다 자바스크립트의 유니크한 고유의 버전이 할당 된다. 그래서 ..