Jay

프로젝트를 실행하려는 폴더로 들어가서 아래 명령어 실행 mkdir "만들 폴더" ls 확인 cd 폴더위치로 yarn create-react-app "만들 폴더명" cd "만들어진 폴더" 로 들어가서 yarn start 실행 아래 명령어들의 설명이다. yarn start =>작성한 코드를 직접 확인해 볼 수 있도록 실행을 하게된다. yarn build =>만든 앱을 배포할 수 있도록 빌드를 해주는 것이다. yarn test =>작성한 유닛 테스트를 실행해서 테스트를 성공했느지 실패했는지 실행해 주고 yarn eject =>create-react-app을 이용하게 되면 많은 것들이 자동적으로 설정이 되어져 있고 숨겨져 있는데 어떠한 툴들이 설치 되어져 있는지 일일히 수정하고 싶으면 yarn eject를 이용..

create react app사이트에서 netlify 부분을 보고 시작해보자. cmder 커맨드 창에서 아래명령어 실행한다.(경로는 build 안에서) cd C:\Users\kjh\react_dc\react-basic\habit-tracker\build npm install netlify-cli -g 빌드 폴더안에서 진행했기 때문에 한 단계 나가서(ls확인 해주고) 프로젝트 폴더 안에서 명령어를 입력해준다. 하고 난 다음 github랑 연동을 해주고 승인을 허락한다. cd.. ls netlify deploy 다시 명령어를 입력 해주고 create configure a new site를 클릭해준다. 팀명 정해주고 사이트이름 정해주고, build를 입력해준다. URL로 들어가면 안나온다. package.js..

작성했던 habit tracker를 github에 배포하는 과정을 해보자. create-react-app에 와가지고 Deployment부분에 가서 Github Pages를 살펴보자.(나중에는 Netlify도 이용하자.) 먼저 github 홈페이지에 들어가서 new repository를 이용해서 새로운 Repository를 만든다.(Description은 맘대로) Public으로 배포한 다음 Create React App으로 프로젝트를 만들면 Git이 초기화가 된다. 이미 있는 레퍼지토리에 추가할거기 때문에 아래와 같은 git 명령어를 친다. git remote add origin https://github.com/K-J-HYEON/habit_tracker.git 아래 명령어를 친다 / 이때까지 작업한 파..

리액트 동작원리에 대해서 다시보면 리액트는 변경사항이 한가지의 방향으로만 흘러간다. 데이터가 변경이 되면 => UI가 업데이트 된다. 즉, 데이터(State)가 변경이 되면 => 리액트가 render() 함수를 호출해서 UI가 업데이트 되는 것 리액트에서 제공하는 setState 함수를 호출하는 코드를 보면 위 코드를 보면 setState 함수를 이용하여 새로운 상태 오브젝트( 업데이트 하려고 하는 상태 데이터)를 인자로 받아 전달해 주는 것을 볼 수 있다. 리액트가 업데이트 되어야 한다고 알아 차리게 하기 위해 setState 함수를 호출해줘야 한다. 그래야 리액트가 상태가 업데이트 됐다는걸 알고 UI를 업데이트 하기 위해 render 함수를 호출하기 위해 준비하기 때문이다. 리액트가 내부적으로 어떻게..

리액트 컴포넌트란???! 리액트에서 컴포넌트라는 것은 웹어플리케이션, 웹페이지 둘다에서 독립적이고 다시 사용이 가능하게 만들어진 단위로써(box단위로) 만들어진 block를 말한다. 최대한 간단하고 독립적이고 재사용이 가능하게 작은 단위로 만들면 좋다. 리액트 라이브러리를 이용해서 컴포넌트를 만드는 방법은 클래스형, 함수형 두가지가 있는데 클래스 컴포넌트 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들면 되고, UI가 어떻게 표기 될 것인지, 정의하는 render() 함수를 구현해 줘야 한다. 컴포넌트 자체에서 기억이 되어져야 하는, UI를 표기하기 위해서 데이터가 주어진다면 this.state 멤버 변수에 오브젝트 형태로 데이터를 저장할 수 있다. 클래스 특성상, 클래스..

리액트 훅에 대해서 알아보면 앞에서 한 것들을 간단하게 리액트 훅으로 변경하려고 한다. 먼저 simpleHabit.jsx라는 파일을 만들어 놓고 간단하게 이름과 count만 할 수 있게 만든다. index.js에 App 대신에 SimpleHabit을 추가했다. 리액트 훅이라는 것은 기존의 함수형 컴포넌트에서 state와 라이프사이클 메소드를 잘 이용할 수 있게 만들어진 것이다. 최신버전에서 추가가 되었고 클래스 컴포넌트를 리액트 훅으로 변경하면 rsi를 이용해서 함수형으로 컴포넌트를 만들 수 있다. 코드가 많을 때 JSX르 리턴 못하기 때문에 코드블럭을 추가해준다. 리턴한거 복사해서 가져온다. 그리고 리액트 훅에서 state를 쓴다는 것은 useState라는 API를 이용하면 된다. 변수를 선언하는데 c..

간단한 habitAddForm 이라는 컴포넌트를 function 컴포넌트로 변경해볼건데, function 컴포넌트를 쓸때는 클래스를 rcc 이렇게 만들었다. function rsi로 만들면 된다. const라는 변수에 할당해도 되고 function HabitAddForm 식으로 만들어도 된다. rsi로 만들어보면 클래스와 마찬가지로 props 받고 원하는 것을 리턴하면 되는데 바로 컴포넌트를 리턴 하는게 아니라, 처리해야 될 것이 있기 때문에 코드블럭을 이용해고 render()부분에 리턴하는 것을 넣어 줘야 한다. 함수 안에서 const 지역변수를 설정해주고 함수안에서는 this로 안해도 되서 바로 변수에 접근이 가능하다. this도 지워준다. PureComponent를 이용해서 숫자가 증가되면 Habi..

리액트는 문서화가 잘되어 있기 때문에 필요한 지식을 금방 얻을 수 있다....(아래 참고사이트 참조) 라이프사이클을 클래스에 어떻게 추가하는지에 대해서 나와있다. habit이라는 것은 동적으로 생서되서 추가가 되는데 이미 세 가지가 들어있는 경우도 있고 추가하게 되면 새로운 컴포넌트가 만들어진다. 새로운 데이터를 네트워크 통신을 통해서 받아 오거나 타이머를 시작하거나 하게 하는 것이 라이프사이클 함수이다. 컴포넌트 클래스를 상속하게 되면 PureComponent도 컴포넌트를 상속하기 때문에 똑같다. 이렇게 클래스를 이용하면 라이프사이클 메소드를 이용할 수 가 있는데, 컴포넌트가 DidCatcth할 때 에러같은 것을 캐치 했을 때 컴포넌트가 등록이 되었을 때, 업데이트 되었을 때, 마운트가 될 때 이런것들..

habit.jsx파일에 와서 Component를 PureComponent로 바꿔주고 플러스 버튼을 눌러줘도 App창에서 업데이트가 되지 않는다. 왜그러냐면 shallow comparison 때문에 그런데 Habit라는 것은 자체적인 state는 없고 props를 전달받는 데, props안에 데이터가 변경 되지 않으면 render()가 호출 되지 않는게 PureComponent이다. props안에 habit가 있고 각각의 콜백함수가 전달되어지는데, (onIncrement, onDecrememnt, onDelete) 각각의 콜백함수는 결국 App에서 전달되는 건데 앱 클래스 Component 안에 선언된 handleIncrement나 이런 멤버변수같은 것들이 전달되기 때문에 한번 App이라는 클래스가 만들어..

Props에 대해서 개념을 짚고 넘어가자 1. State Component 안에서 사용자가 정의한 Component의 state 오브젝트이다. Component UI를 위한 자료를 보관하는 Object로써, state라는 Object를 통해서 데이터에 업데이트가 발생하면 React가 자동적으로 사용자가 구현한 render function을 호출한다. 이 부분을 아래 그림을 보자 2. Props Component컴포넌트 밖에서 주어지는 데이터인데, Component 안에서 자체적으로 데이터를 정의하여서 사용하는 State와는 달리, Props은 Component 외부에서 데이터를 제공받는다. 가장 근본적인 이유는 Component의 재사용을 높이기 위해서인데, 상황에 따라서 주어진 데이터를 받아서 그 데이..