Web

laka project1 PR & git pull merge | state의 특성 비동기 & ... spread operator & Input name

긴모양 2020. 6. 8. 22:16

20.05.25 React 초기세팅

PR & git pull merge

table을 이용해서 Sign Up page를 만들어보았다. 라카는 어떻게 만들었는지 궁금해서 개발자 도구를 사용해서 코드를 보았는데 table tag를 사용해서 만들었어서 table tag 손에 익혀둬도 나쁘진 않을 듯해서 나도 써봤다.

git branch

  • git branch는 새로운 작업 마다 가지를 만들어주는 것이 좋다.

git branch feature/branchName

 

git master pull 과 merge

MacBookPro:rocka-frontend $ git pull origin master
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 28 (delta 9), reused 23 (delta 7), pack-reused 0
Unpacking objects: 100% (28/28), done.
From https://github.com/wecode-bootcamp-korea/Rocka-frontend
 * branch            master     -> FETCH_HEAD
   482b6f1..f203675  master     -> origin/master
Updating 482b6f1..f203675
error: Your local changes to the following files would be overwritten by merge:
        src/Component/Nav/Nav.js
Please commit your changes or stash them before you merge.
Aborting
gwonmilan-ui-MacBookPro:rocka-frontend gwonmiran$ git commit -m "try"
[feature/SignUp 2bca698] try
 5 files changed, 3 insertions(+), 1 deletion(-)
 rename {Component => src/Component}/Footer/Footer.js (100%)
 rename {Component => src/Component}/Nav/Nav.js (100%)
 rename {Images => src/Images}/Laka Main.png (100%)
 rename {Styles => src/Styles}/reset.scss (100%)
MacBookPro:rocka-frontend $ git checkout master
Switched to branch 'master'
MacBookPro:rocka-frontend $ git pull origin master
From https://github.com/wecode-bootcamp-korea/Rocka-frontend
 * branch            master     -> FETCH_HEAD
Updating 482b6f1..f203675
Fast-forward
 .github/workflows/nextjs.yml         |  22 ++++++++++++++++++++++
 Component/Footer/Footer.js           |   0
 Component/Nav/Nav.js                 |   0
 pull_request_template.md             |  16 ++++++++++++++++
 src/Component/Nav/Nav.js             |   9 +++++++++
 {Images => src/Images}/Laka Main.png | Bin
 src/Pages/Main/Main.js               |  18 +++++++++++-------
 {Styles => src/Styles}/reset.scss    |   0
 8 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 .github/workflows/nextjs.yml
 delete mode 100644 Component/Footer/Footer.js
 delete mode 100644 Component/Nav/Nav.js
 create mode 100644 pull_request_template.md
 create mode 100644 src/Component/Nav/Nav.js
 rename {Images => src/Images}/Laka Main.png (100%)
 rename {Styles => src/Styles}/reset.scss (100%)
MacBookPro:rocka-frontend $ git branch
  feature/SignUp
* master
MacBookPro:rocka-frontend $ git checkout feature/SignUp
Switched to branch 'feature/SignUp'
MacBookPro:rocka-frontend $ git merge master
CONFLICT (add/add): Merge conflict in src/Component/Nav/Nav.js
Auto-merging src/Component/Nav/Nav.js
Merge made by the 'recursive' strategy.
 .github/workflows/nextjs.yml | 22 ++++++++++++++++++++++
 pull_request_template.md     | 16 ++++++++++++++++
 src/Component/Nav/Nav.js     |  9 +++++++++
 src/Pages/Main/Main.js       | 18 +++++++++++-------
 4 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 .github/workflows/nextjs.yml
 create mode 100644 pull_request_template.md

 

git pull request

//양식

## 수정 사항 간략한 한줄 요약
(여기에 수정 사항에 대한 간략한 한줄 요약/제목 작성해 주세요. 예: 로그인 엔드포인트 구현)     
         
## 수정 사항들 자세한 내용
- (여기에 수정 사항에 대한 자세한 내용을 작성해 주세요)

 

 

20.05.26 본격적으로 시작하는 React

state의 특성 비동기 & … spread operator & Input name

Stand Up

  • YB - 어제 한 일 : 모델링 하려다가, 오늘 검사 받는다. 3일 정도 투자를 받는다. 설계가 탄탄해야한다. 립 컬러 설정, 웹 크롤링을 아직 하는 중이다. 제품마다 컬러의 갯수가 달라서, 제품명을 키 값으로 받고 나머지를 객체의 Value. / 오늘 할 일 : 모델링을 완벽하게 끝나는 것
  • KM - 어제 한 일 : 영빈님과 동일한 작업을 모델링에 집중, 크롤링 수업 듣구서 느낌이 와서, 뷰티풀 숲(외에) 동적으로 프로그래밍하는 것. STORE 크롤링 작업.
  • HG - 어제 한 일 : Main 레이아웃 / 오늘 할 일 : 프로덕트 페이지 레이아웃 + 네비게이션이랑 푸터는 스타일링
  • GR - 어제 한 일 : Sign Up & Login 틀 잡기 / 오늘 할 일 : 스타일링, 필요한 함수 구현

 

정의형 목록 태그 dl tag

<dl>
	<dt>
		타이틀
	</dt>
	<dd>
		content
	</dd>
	<dd>
		content
	</dd>
</dl>

 

 

state의 특성 비동기

onsole.log(this.state.optionVal)이 처음에는 안찍히고 두번째 선택하면 찍히는데, 그 이유는 콜백함수와 관련이 있다. 비동기로 작동하는 setState method. 리액트는 state가 변경될 때 마다, 매번 DOM을 re-rendering하지 않는다. 퍼포먼스 효율성을 위해 여러차례 setState가 있을 경우, 다른 state의 변경 까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 DOM을 re-rendering한다.

optionChange라는 이벤트를 이용해서 option의 값을 setState해주면 console.log(this.state.optionVal)를 하면 한박자씩 늦게 콘솔에 찍히는데, setState가 비동기적 실행된다. 따라서 setState가 this.state변수 호출 후 즉시 변경되지 않는다. 따라서 상태 변수에 상태를 설정한 직후 작업을 수행하고 결과를 반환하려는 경우, 콜백함수를 사용해야한다.

  • setState의 기본적인 작동 방식은 비동기적

 

참고site

비동기로 작동하는 setState 이해하기 / Async Nature Of setState()

 

mock data

 

React로 사고하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

{… spread operator}

버튼을 클릭시 배열에 새로운 객체를 추가하는 것. 배열의 기존 정보가 새로운 정보로 대체 되었다. 배열에 정보를 추가하는 동안 어떻게 정보를 보존할까? 이때 필요한 것이 스프레드 연산자이다. 기존의 배열을 그대로 유지하면서 다른 요소를 추가 할 수 있다.

const colors = ['pink', 'pupple'];
const addColor = [...colors, 'green'];

console.log(addColors)
//[ 'pink', 'pupple', 'green' ]

Using the spread operator in React setState

 

Input name 속성 사용

input 요소를 제어시, name속성을 추가해 event.target.name값을 기반으로 핸들러 함수 사용

폼 - React

 

component의 종류

  • class : state&LifeCycle - 사용가능
  • function : state&LifeCycle - 사용불가능
저작자표시 비영리 동일조건 (새창열림)