20220419

side_project 기록

0. 작업할 폴더 생성

폴더 생성 후 폴더에서 VSCode 실행

터미널 open (ctrl+`)

 

1. github 프로젝트 로컬로 가져오기

git clone 주소
cd 프로젝트 이름

 

2. 브랜치 생성

1) VSCode에서 왼쪽 하단부에 master 클릭

2) 새 분기 만들기

 

3. 실행

npm install

: node_modules 폴더 생성 ( .gitignore파일에 /node_modules 추가되어있음)

npm start

: 실행

package.json 

 "scripts": {

    "start": "react-scripts start",

}

 

 

React

리액트 블로그 참고

https://velopert.com/3613 

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

요약정리

1. 사용 이유

웹 개발 시 귀찮은 DOM 관리와 상태 값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위한 라이브러리

Virtual DOM을 사용

 

2. jsx를 쓸 때 준수해야 할 규칙

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 합니다

div 태그로 감싸주는 방법이 있지만 스타일 관련 설정으로 꼬일 수 있습니다.

Fragment를 사용하면 해결 할 수 있습니다. <Fragment> </Fragment> 대신 <> </> 이렇게 써도 됩니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
		/*
		<div>
			<div>
				Hello
			</div>
			<div>
				Bye
			</div>
		</div>
		*/
		<Fragment>
			<div>
				Hello
			</div>
			<div>
				Bye
			</div>
		</Fragment>
    );
  }
}

export default App;