function App() {
  let posts = {color : 'blue' , fontSize : '30px'};
  return (
    <div className="App">
      <div className="black-nav">
        개발 Blog
      </div>
      <div style ={ posts }></div>
    </div>
  );
}

이런식으로 지정도 가능하다.

실행은 간단하게

npm start

구문을 터미널에 입력해주면 된다.

이제 서버가 켜질 때 까지 기다리다보면

서버가 실행이 완료되고 메인페이지를 보여준다.

app.js를 보면 함수의 return에 소괄호를 붙이고 html 문법으로 되어있는것을 볼 수 있다. 리액트에서는 소괄호 안에 html 문법을 반환을 해줘서 반영을 시킬 수 있다. 이러한것을 JSX라는 문법이라고 한다.

그리고 app.js를 변경 하게 되면

js파일을 변경 했지면 메인페이지의 내용이 바뀌는것을 알 수 있다. 그 이유는 index.js파일에서 app.js의 내용을 public에 있는 index.html에 반영 시켜주도록 되어 있기 때문이다!

준비물은 간단하다!

1. Node.js 최신 버전 설치 방법은 어렵지 않다. 한영키가 빠져있지 않다면 구글에 Node.js를 치고 다운로드로 들어간다! 그다음 최신버전을 설치 해주면 된다!

2.VSCode 설치 사실 다른 에디터를 사용해도 상관은 없다. 그 중 VSCode를 선택한 것은 에디터 자체가 가볍기도 하지만 터미널을 사용할 수 있다는것에 선택을 하였다! 설치 방법도 위와 동일하게 한영키가 빠져 있지 않다면 검색해서 다운받아 주자!

이제 설정은 다 됐다..! (자바에 비해 너무 간단하다!)

3. React용 폴더 생성 -> VSCode로 오픈

4. 터미널에 npx create-react-app [원하는 폴더명] 실행

이제 설치가 완료 될 때 까지 기다려주면 된다!

npx create-react-app는 리액트 환경 패키지를 자동으로 설치해주는 명령어이다!.

(간혹 오류 메세지가 뜨면서 설치가 안되면 컴퓨터를 재부팅이나 Node.js 환경 변수를 다시 설정 해주자! 내가 알기로는 Node.js는 설치를 할 때 자동으로 환경 변수 설정을 해주는것으로 알지만 오류가 난다면 환경변수를 재설정 해주고 재부팅을 해본다!)

기다기리만 하면 지루하니 npx, npm이 무엇 인지 검색해보았다!

npx를 알기 위해서 먼저 npm에 대해서 정리 해볼려고 한다!

npm란?

node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저라고 한다! <%-- 말이 너무 어렵다. 결국 하는일은 밑에 두가지 일을 한다.

1) 패키지 설치 2) 버전관리 제공 --%>

npm 사용 방법은

npm install 모듈이름 [-g]
-g는 글로벌 옵션이다!

내가 이해한 npm의 유의해야 할 점은 설치랑 버전관리만 해준다. 즉 내가 예전에 설치한 패키지가 새로 업데이트가 되도 자동으로 업데이트 해주는 것이 아니라 내가 업데이트를 해주기 전까지 나는 계속 예전 버전을 사용하는것이다! ㅠ

npx란?

언뜻 보면 npm이랑 비슷하다고 생각할 수 있지만 npm은 "패키지 매니저" 얘는 node.js 패키지를 실행시키는 하나의 "도구"이다. [즉 npm이 원딜 이라면 npx는 서폿이다. 아니면 회사로 치면 일개의 사원? ㅎ;]

<%-- 하는일은 도구답게 한가지 일을 한다.

1. 패키지 실행

언뜻 보면 하는일이 npm이랑 다를게 뭐지? 싶지만 동작 부터 다르다. npx를 실행 시키면

1. "최신" 패키지를 불러온다.
2. 불러온 패키지가 로컬에 있는지 확인한다.
3. 로컬에 없다면 이전 패키지를 지우고 최신 패키지를 설치하고 실행 시킨다.

--%>

내가 배울려고 하는 리액트는 모듈이 많아 자주 업데이트가 된다. 이러한 이유로 npx를 사용하는것을 권장한다고 한다!

npm과 npx를 정리하다보니 설치가 완료 되었다. 오늘은 설치만하고 이만 마쳐볼려고 한다.