React 프론트 개발 기초 ver 1

리액트 개발 기초 노트

 

1) 노드 설치(노드를 통해서 여러가지 리액트 라이브러리를 사용할 수 있다.)

 

 

 

 

2) 터미널을 열고 아래 명령어를 칩니다.

yarn은 개선된 버전의 npm입니다.

brew install yarn

 

잘 진행되고 있네요.

 

3) react를 사용하기 위해 추가해줍니다.

yarn -g add create-react-app

 

근데 아래와 같은 에러 발생

"Missing list of packages to add to your project"

명령어를 조금 바꿔봅니다.

 

 

 

-g 를 global로 바꾸니까 설치되었습니다.

yarn global add create-react-app

 

 

 

 

4) 리액트 잘 추가되었는지 버전 확인해봅니다.

create-react-app --version

 

 

 

5) 리액트 폴더 생성해줍니다.

create-react-app 폴더명

 

저는 front라는 이름으로 만들었습니다.

 

 

6) 친절하게 실행하는 방법을 가르쳐주네요.

그대로 따라해봅니다.

>> cd front
>> yarn start

 

 

 

7) 터미널과 크롬 브라우저에 아래와 같이 나타나면 정상적으로 작동하는 것입니다.

 

오예~~

 

8) 이제 저 파란색 리액트 친구를 없애주어야합니다.(우리의 목표)

일단 터미널에서 Ctrl+c로 나오고, ls 명령어를 쳐봅니다.

그러면 해당 폴더에 어떤 파일들이 생성됬는지 리스트가 나옵니다.

우리가 집중할 것은 src라는 폴더입니다.

cd src

 

 

 

9) 파일이 많이 있는데, 여기서 App.js를 변경해줄 것입니다.

아래와 같이 변경해줍니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default App;

 

 

 

10) 그리고 다시 yarn start로 실행해주면 아래와 같이 나타나면 성공입니다!

 

 

 

11) 이제 컴포넌트를 만들어주자.

src에 components 라는 폴더 만들고, components 별로 폴더를 따로 만들어서 특정 기능을 수행하도록 만들어 준다.

components 폴더 안으로 들어와서, indexTemplate.js를 만들어준다.

 

 

 

 

import React from 'react';
import '/.indexTemplate.css';

const indexTemplate = ({form, children}) => {
    return (
            <main className="index-template">
            <div className="title">
            오늘 할일
        </div>
            <section className="form-wrapper">
            {form}
        </section>
            <section className="todos-wrapper">
            {children}
        </section>
            </main>
    );
};

export default indexTemplate;

 

 

 

파라미터를 props로 받아야 하는건데, 위 컴포넌트는 2가지의 props를 받게 된다.

 

12) 이제 indexTemplate.css 파일을 만들어줍니다.

.index-template {
  background: white;
  width: 512px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* 그림자 */ 
  margin: 0 auto; /* 페이지 중앙 정렬 */
  margin-top: 4rem;
}

.title {
  padding: 2rem;
  font-size: 2.5rem;
  text-align: center;
  font-weight: 100;
  background: #22b8cf;;
  color: white;
}

.form-wrapper {
  padding: 1rem;
  border-bottom: 1px solid #22b8cf;
}

.todos-wrapper {
  min-height: 5rem;
}

13) index.css 파일을 수정하여 배경색을 지정하겠습니다.

 

 

 

 

 

 

14) 수정이 완료되었다면 이제 App.js에서 indexTemplate을 사용해줍니다!

 

import React,{Component} from 'react';
import indexTemplate from './components/indexc/indexTemplate';

class App extends Component{
    render(){
        return (
            <indexTemplate>
                템플릿 완성
            </indexTemplate>
        );
    }
}

export default App;

 

 

 

 

15) 실행해볼까요?

 

 

 

 

16) 에러 발생,.

 

 

 

확인해보니, indexTemplate.css를 못찾는거 같아요

 

 

이렇게 바꿔줍니다.

 

 

17) 근데 결과가 이상..

velopert.com/3480 <-- 이거 따라했는데 이렇게 안나오는 이유는 뭘까요?

 

 

 

18) 잉?

indexTemplate -> IndexTemplate으로 앞글자를 대문자로 하니까 잘 된다. 이상하다ㅋㅋ(규칙이 있나보다)

 

 

 

 

암튼 그럭저럭 템플릿 만드는 방법을 배웠다.

 

이걸로 말씀통통의 프론트 화면을 만들 것이다.

아래는 Text 수정해서 띄운거