[나도 프로그래머] 리액트 1. 스타트

안녕하세요. ^^ @u robotics 입니다.
정말 오랜만에 식상한 인사로 시작하는 듯 합니다. ㅎㅎㅎㅎ

나도 프로그래머 시리즈를 시작해볼려고 합니다.
저같은 일반인도 프로그래밍을 잘 할 수 있다는 컨셉으로 해볼려고해요.
최대한 쉽게 풀어보겠습니다.

먼저, 이번에는 대세 웹앱 툴인
리액트를 시작해보겠습니다.
라이브러리라고들 말을 하는데요.

피씨에서 네이버 검색할 때 쓰는 창
(인터넷 익스플로러 등.... 웹 브라우저 라고 함)에
뭔가 특별한 값을 입력하면
여러분이 만든 페이지가 쨔잔하고 열리는 겁니다.
인터넷만 연결되어있으면 지구상 어디든 여러분의 페이지를 볼 수 있는 거죠.
생각보다 굉장한 기술인 것 같아요. 이 웹이란거요. ㅋㅋㅋ
여러분도 www.google.com 같은 걸 만들 수 있는 겁니다. ㅎㅎ

아무튼 시작해봅시다.
먼저, node js 와 npm을 설치해야 됩니다.
nodejs만 설치하면 포함되어 있어요.
nodejs 설치해줍니다.
https://nodejs.org/ko/
아마 대부분 windows / 64bit 겠져? 선택하시고 설치하시면 됩니다.

그 다음은 편집기(에디터) 설치합니다.
Visual Studio Code
Atom
서브라임 텍스트
브라킷
등이 있어요.

대세는 VSC 인데요.
저는 아톰 씁니다. ^^;;;
그냥 아톰 설치를 링크 걸겠습니다.
https://atom.io/
VSC를 설치하셔도 됩니다.

그러면 nodejs, npm 이랑
편집기 아톰이 준비 되었으니깐
진짜 시작입니다.

https://programmers.co.kr/learn/courses/944

노마드 프로그래머 님의 강의를 거의 그대로 갖고 왔씁니다. ^^;;;
조금 각색했져.
땡큐 노마드 ^^/

이번에 만들 앱은 영화 앱입니다. ^^

카드로 돼서 이미지와 설명이 있는 앱입니다.

create-react-app 라는 도구를 써서 빠르게 만들겠습니다.

windows키 + R을 누르시면

이런 창이 뜹니다.
cmd를 입력하고, 엔터를 칩니다.

검은 창이 뜨는데요.
맨 왼쪽에 있는 것은 여러분의 현재폴더 위치입니다.
저 같은 경우는 c:\react 죠.
https://github.com/facebook/create-react-app
여기 나온 순서대로 따라가주시면 됩니다.

npx create-react-app my-app (엔터)
cd my-app (엔터)
npm start (엔터)

이렇게 한 줄씩 입력하고 엔터를 쳐줍니다.

첫 줄을 실행하면
여러분의 현재폴더에서
my-app 이란 이름의 앱을 만듭니다.
(막 뭔가 나오더니면 진행됩니다. )

그리고 cd로 폴더를 이동해서
c:\react\my-app으로 들어갔구요.

마지막에 npm start로 실행시켰습니다.
그러면 이런 화면이 뜰 겁니다.

검은 창에 왼쪽 위 같은 성공 메시지가 뜨면서
화면같은 웹 창이 하나 열릴 겁니다.
그러면 성공입니다. ^^

첫 시간은 여기까지 하겠습니다.
감사합니다.