1. 들어가며
안녕하세요 콥스랩 기술블로그입니다!
오늘은 React에 대해 알아보겠습니다.
어떤 방식으로 알아볼거냐면요,
HTML, CSS, Java Script기초 지식만 있고 리액트가 아예 처음인 사람의 입장에서
독학한다는 마음가짐으로 알아볼 것입니다.
- 리액트가 처음이신 분, 무엇인지 아직 감이 잘 안 잡히시는 분,
- 남들이 “프론트엔드하려면 리액트는 해야지”라고 해서 일단 배워볼까 하시는 분
- 리액트를 공부하려고 하는데 어떤식으로 첫 발걸음을 내딛어야하는지 잘 모르시겠는 분
그런 분들은 본 글을 한 번 천천히 읽어보시면서 따라해보시면 좋을 것 같아요!
사진 설명을 입력하세요.
2. 리액트 시작하기
지금부터 저는 리액트에 대해 아~~무 것도 모르는 사람이라고 가정합니다.
제가 알고 있는 지식은 (1) HTML (2) CSS (3) Java Script 기초뿐입니다.
2-1. Node js 다운로드 받기
https://nodejs.org/ko/download
위 링크로 가서 자신의 환경에 맞는 Node js를 다운로드 받아주세요!
Node.js는 JavaScript를 실행할 수 있는 환경(런타임)입니다. 기존에는 브라우저에서만 실행되던
JavaScript를 이제 브라우저 밖에서도 실행할 수 있게 해줍니다!
사실 지금 당장은 ‘브라우저 밖에서 실행한다?’라는 게 어떤 개념인지 모르셔도됩니다.
일단 우리는 NPM이라는 Node js 패키지 관리자를 사용하기 위해 Node js를 다운로드 받습니다.
NPM을 사용하려는 이유는 React 라이브러리를 다운받기 위함입니다.
2-2. Node js 설치가 끝난 후
powershell 혹은 cmd를 검색하여 아무 터미널이나 여신 뒤,
node -v해당 명령어를 입력하였을 때 버전이 표시되면 다운로드가 잘 된 것입니다.
2-3. React 프로젝트 생성하기
- 바탕화면에 react-practice라는 폴더를 만듭니다.
2. 폴더를 우클릭하신 후 > ‘터미널에서 열기’를 누릅니다.
3. 현재 경로가 올바른지 확인
현재 터널 상 위치가 ‘react-practice’디렉토리인지 확인합니다.
4. npx create-react-app myreact
명령어로 'npx create-react-app myreact’을 입력합니다.
명령어를 입력하면 ‘Creating a new React app in‘ 이라는 문구와 함께 무엇인가가 다운로드됩니다.
본 명령어에 대한 의미는 다음 기회에 알아보기로 하고, 오늘은 react 프로젝트를 간단하게 실행하는 것에 목표를 두겠습니다.
5. 다운로드 완료
일정 시간을 기다리시면 사진 속 문구와 함께 설치가 다 되었다고 나옵니다.
6. react-practice 폴더 구경
그럼 우리가 맨 처음 바탕화면에 만들었던 react-practice 폴더엔 어떤 것들이 다운로드 되었는지 구경해볼까요?
우선, myreact라는 폴더가 보이네요?
눈치빠르신 분은 벌써 알아차리셨겠지만 우리가 조금 전 ‘npx create-react-app myreact’ 명령어를 입력할 때 입력했던 맨 마지막 문구인 ‘myreact’가 바로 우리가 만들 리액트 프로젝트 폴더 이름입니다.
한 번 myreact 폴더를 클릭해볼까요?
7. myreact 폴더 구경
myreact 폴더에 들어가보니 이와 같은 파일 및 폴더들이 설치되어있는 것을 확인할 수 있습니다.
근데 이렇게 하나하나 클릭하면서 들여다보지 말고 우리는 visual studio code에서
myreact 폴더를 열어보겠습니다.
8. 비쥬얼스튜디오코드에 myreact 폴더 워크스페이스 만들기
- 비쥬얼스튜디오를 킨다.
- 좌측 상단 File 탭을 누른다.
- Add Folder to Workspace를 누른다.
- 바탕화면>react-practice>myreact를 추가한다. 끝
그러면 이제 workspace에 myreact 폴더가 추가된 것을 보실 수 있습니다.
3-1. 비쥬얼스튜디오코드에서 터미널 열어보기
- workspace에 있는 myreact 폴더 우클릭 >
- Open in integrated Terminal
자, 방금 우리가 무엇을 했냐면요. 맨 처음에 바탕화면에 폴더 반들고 터미널로 실행한 것과 똑같은 것을 이제는 비쥬얼스튜디오 코드에서 진행한 것입니다.
위의 두 절차를 진행하고 나면 이제는 비쥬얼스튜디오코드에서 터미널을 이용할 수 있습니다.
이런식으로 비쥬얼스튜디오코드에서 터미널이 열렸죠??
powershell이든 cmd든 git bash든 상관 없습니다.
3-2. npm start 입력해보기
자 이제 본격적으로 우리가 다운로드 받은 react 프로젝트를 실행해보겠습니다.
조금 전 우리가 띄워놓은 터미널에 다음과 같이 입력합니다.
npm start그러면 다음과 같은 문구와 함께,
(포트넘버는 다를 수 있습니다.)
이런 사이트가 나온다면
축하합니다!
첫 리액트 프로젝트를 실행해보셨습니다.
4. 파일 구경해보기
4-1. node_modules
: 프로젝트 구성에 필요한 패키지들과 프로젝트에서 사용하는 라이브러리들이 해당 폴더에 설치된 것입니다. 일단은 그냥 ‘아 내 프로젝트에서 필요한 라이브러리들이구나~’정도로만 생각하고 넘어가볼까요? npx create-react-app이라는 명령어를 통해 우리 프로젝트 실행에 필요한 라이브러리들을 자동으로 설치해준 것입니다.
4-2. public
- favicon?! 이친구는 뭘까요?
바로 아래 사진과 같이 우리가 방문한 웹사이트의 아이콘으로, 웹 브라우저 탭, 북마크 목록, 주소창 등에 표시되는 작은 이미지입니다.
4-3. public > index.html
어라? html?! 우리가 예전에 배워본 html 맞나?!
네 맞습니다. 파일을 들어가보면 우리가 코딩하던 html파일 구조와 똑같습니다.
1) 구조
우리가 항상 만들던 html코드처럼
<html>
<head>
<body>로 이루어져 있네요?
2) head
뭔가 복잡해보이는데 우리가 당장 저 주석들을 읽어볼 것은 아니기 때문에, 주석들을 모두 지워봅니다.
다른 게 뭔진모르겠는데 저 <title>태그는 뭐였었죠??
웹 사이트에 표시되는 제목이죠>>
React App대신 First React App이라고 바꿔봅니다.
<title>First React App</title>
위와같이 사이트 제목이 바뀐 것을 확인하실 수 있습니다.
3) body
자, body 태그 안 쪽을 살펴볼까요? 마찬가지로 주석을 모두 지워봅니다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>주석을 모두 지우고나니까, 어라? 딸랑 두 줄밖에 안 되네요??
그런데,,, 우리가 보고 있는 웹사이트는 아래와 같은 모양인데요??
‘어떻게 두 줄로만 이 페이지를 만들 수 있지??’라는 생각이 드셨다면 아주 정상적입니다.
‘아 index.html 파일이 내가 보고 있는 저 화면을 나타내는 코드가 아니구나’라는 생각이 드셨어도 아주 정상적입니다.
자, 해답은 천천히 알아가보는 것으로 하겠습니다. 저는 현재 리액트를 처음 한다고 가정중입니다.
앞으로 어떤 언어를 배우든, 어떤 기술을 배우든 간에 궁금증이 들 땐 이렇게 해봅니다.
‘코드 이것 저것을 지워보고, 추가해보고 ⇒ 변화를 관찰한다’
자 그러면 <body>태그에 아무런 엘리먼트를 추가해봅니다.
<h1>index.html 넌 대체 뭐니?</h1>저는 위와 같은 코드를 <body>태그 맨 위에 입력해보겠습니다.
그 랬 더 니…
어라라라라라라??,,
우리가 보고 있던 페이지에 저 코드가 나와버렸습니다!!
그 말인 즉슨,
‘index.html 파일은 곧 우리가 보고 있는 저 페이지를 보여준다!’라는 결론이 나오네요??! 좋았습니다.
아니 근데.. 아직도 우린 의문이 남는거죠?
저 리액트 로고와 검정 배경은 도대체 어디서 왔냐라는거죠..
4) 개발자도구 열어보기
잘 모르겠으면 일단 이것 저것 지워도 봐야됩니다
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>원래 적혀있던 이 두 줄을 없애볼까요?
그랬더니, 우리가 궁금해했던 리액트 로고와 검정 배경이 페이지에서 사라졌습니다.
즉, 우리가 방금 지운 저 코드 단 두 줄이 리액트로고와 검정화면을 웹 페이지에 띄워준 거네요?
그렇다면, 도대체 어떻게 가능한걸까요???
5. 궁금하시죠?
궁금하시다면 다음 포스팅을 기대해주세요!! 😜
6. 마치며
자 오늘은 react프로젝트를 실행하기 위한 a to z를 해보았습니다.
아직 우리는 궁금한 것 투성이입니다.
그렇기 때문에, 하나하나 천천히 알아가보는 것이죠.
‘왜 이 파일들이 있고, 이 파일들은 어떤 역할을 하며, 코드를 수정하면 어떻게 바뀔까?’
마치 수수께끼를 하나하나 풀어가듯 우리는 다음시간에도 위 프로젝트를 하나하나 살펴볼 것입니다.
그럼 다음 포스팅을 기대해주시고
지금까지 긴 글을 읽어주셔서 감사합니다 😃
'React' 카테고리의 다른 글
| 나.. 리액트 아예 처음인데 어떻게해? (create-react-app 맨땅에 헤딩 #2) (0) | 2023.07.08 |
|---|
댓글