이 포스트는 생활코딩 이고잉님의 기초 React 강좌, React 공식 문서를 기반으로 작성되었습니다.
구름EDU - Be Really Excellent!
구름EDU는 전국 대학, 기업 등에서 활용 중인 온라인 학습 및 교수 마켓플레이스입니다. 다양한 IT분야에 대해 배워 보세요. 여러분의 커리어 패스에 확실한 도움을 드립니다.
edu.goorm.io
https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html
Tutorial: Intro to React – React
A JavaScript library for building user interfaces
reactjs.org
시작하면서
"넘기셔도 됩니다."
처음 시작하는 클라우드 IDE입니다. 또한, 처음 시작하는 개발 블로그입니다. 1학년을 지나 이제 4학년에 진입할 시기가 되는데 지금에 와서야 Blog를 시작하는 것은 늦지 않을까 걱정되기도 합니다. 하지만, 공부하는 3년 동안 Java, JS, JSP, Spring을 배우는 과정에서 저는 깨달았습니다.
"아, 내가 아는 것이 하나도 없구나."
그동안에 저의 공부의 방향성이 틀렸던 겁니다. 그저 '학점을 받기 위한 공부'에 그쳐 내 머릿속에 떠도는 지식들을 정리하지 못하고 그저 흘려보내 허송세월만 보냈던 것 같습니다.
그래서 이 블로그는 저의 개발자로서의 성장 과정을 기록함과 동시에 떠도는 지식을 정리하기 위한 제 필기노트의 역할로서 쓰일 것 같습니다. 또한, 내가 하고 싶은 공부, 아니 내가 만들고 싶은 것에 필요한 공부를 하여 필요한 무언가를 만드는 것이 제 목표입니다.
하지만, 4학년을 졸업하여 취업하는 시기까지에 모든 것을 정리하기엔 짧은 시간이 아닐까 걱정이 되는 것도 사실입니다. 그럼에도 이 블로그를 작성한다면, 이 블로그는 포트폴리오로 쓰일 수도, 그렇다면 포트폴리오에 올라가게 될 제 코드들은 효율성, 부족함이 없는, 이해하기 쉬운 코드가 되기 위해 제 고민이 듬뿍 들어가 있지 않을까요.
제가, 이 블로그를 회사에 제출하는 날이 오면, 저는 그만큼 성장해있는 개발자가 돼있기를 바랍니다.
구름 IDE 선정 이유
구름 IDE를 쓸까, 아마존에서 서비스하는 CLOUDE9를 쓸까 고민을 했지만 제가 학생 입장인지라 가능하면 돈이 안 드는 구름 IDE를 선택했습니다.
로컬 환경에서도 개발 환경을 구축할 수 있지만, 굳이 클라우드 형식의 IDE를 선택한 것은 아무래도 장비와 장소에 한정되지 않는다는 장점과, 이제 시작하는 새내기 개발자로서 여러 가지 것을 경험해보고 싶다는 생각이 주된 이유였습니다.
구름 IDE로 React Container 만들어보기
1.
- 구름 IDE에서 ID를 생성하고 로그인하는 과정은 생략하겠습니다.
현재 화면은, 그룸 IDE에서 로그인하고 IDE탭 클릭, 대시보드 클릭 후 나오는 화면입니다.
이 화면에서처럼 새 컨테이너 생성을 누르시면 됩니다.
2.
- 클릭하시면 위와 같은 화면이 나옵니다.
3.
- 저는 제 Github와의 연동을 위해 템플릿을 Github로 변경하겠습니다.
4.
- Github의 id와 비밀번호를 치면 나오는 창입니다. 이 중 자기가 미리 만들어둔 Repository를 선택합니다.
Github에서 Repository를 생성하는 법은 여기에선 생략하겠습니다.
React 프로젝트 생성 및 실행
1.
- 처음 구름 IDE에서 React로 Container를 생성시켰을 때 나오는 화면입니다.
2.
- 이 화면에서 첫 번째로 할 일은 터미널 창에서 npm install -g create-react-app 명령어를 입력하여 create-react-app모듈을 추가해주는 것입니다.
- npm install -g create-react-app
3.
- 그 후, create-react-app my-app을 입력하여 'my-app' react 프로젝트를 생성합니다.
- create-react-app [project-name]
4.
- 프로젝트 성공 시에 보이는 화면입니다. 옆의 '프로젝트' perspective에서 my-app이 생성된 것을 볼 수 있습니다.
5.
- my-app 폴더로 이동 후, npm start명령어를 입력하여 node server를 실행시킵니다.
- cd my-app
- npm start
6.
- 실행 성공 시 보이는 화면입니다.
7.
- 실제 브라우저 화면을 보기 위해선 goorm IDE에서 임의로 설정된 domain과 port로 지정된 url을 통해 확인할 수 있습니다.
- '프로젝트' 탭의 '실행 URL과 포트'를 클릭합니다.
8.
- 아래의 url을 복사하여 chrom 탭에 입력합니다.
- 주의할 점은 아직 ssl 인증을 받지 않았기 때문에 http://로 프로토콜을 url에서 변경하셔야 합니다.
9.
- 해당 url을 브라우저 검색창에 입력하면 보이게 되는 화면입니다.
마치면서
아.. 중간에 노트북이 맛이 가서 블로그 작업과 react 프로젝트 생성 작업을 두 번 했네요. back-up을 잘해둡시다 ㅠㅠ