-
React 기본 : Visual Studio Code 이용 코딩 및 Github에 저장하기컴퓨터 알아가기/React 2021. 6. 18. 19:30728x90반응형
지난시간 React 환경설정을 완료 하였습니다. 이제부터는 코드편집기중에 가장 핫하다는 Visual Studio Code를 이용 본격적으로 개발연습을 해 보도록 하겠습니다. 이전까지는 React환경을 Codepen에서 연습을 했는데 이제는 개인컴퓨터에서 시작을 하는 개념으로 보시면 될 것 같아요.
▒ Local Host 활성화
지난시간에 해본 것처럼 React 코드에 따라 바로 브라우저에 반영될 수 있도록 로컬호스트를 활성화 하겠습니다 .
명령어 : yarn start
활성화된 로컬호스트
▒ Visual Studio Code (VS Code)에서 열기
이제부터는 VS Code에서 열고 코드를 작성해 볼 겁니다.
프로젝트 폴더를 'manage'라는 폴더를 만들었기 때문에 그 안에는 다양한 sub 폴더와 파일들이 있습니다. 따라서 전부 작동을 시키기 위해서는 '폴더로 열기'를 선택해야 합니다.
한번 열어보도록 하지요.
왼쪽 manage 폴더안에 생성된 다양 폴더와 파일을 볼 수가 있습니다.
▶ src > App.js에서 소스코드 확인하기
VS Code에서 보시면 src 폴더가 있습니다. 폴더 내역중 App.js라는 파일을 클릭해 봅니다. 이 파일이 HTML의 <body>태그라고 보시면 됩니다.
이 곳의 내용을 조금만 이해를 위해 보도록 하겠습니다.
상기 코드와 활성화된 로컬호스트 내역을 비교해 보면
①번이 원자핵처럼 돌아가고 있는 로고이고 ②번이 <p>태그로서 "Edit src/App.js and save to reload"라는 태그가 표시가 됩니다. ③번은 Learn React를 링크시키는 <a>태그입니다.
▒ 주요 파일별 기능 확인
기 설명드린바와 같이 App.js에서 내용을 수정하면 브라우저에 수정된 내용이 반영이 됩니다. 그렇다면 주요 파일들의 기능이 그동안 Codepen에서 학습한 기능들과 어떤 연관성이 있는지 간단하게 살펴 보겠습니다.
변경을 하고자 하는경우 App.js 파일에서 변경하고 App.css파일은 스타일링을 변경하고자 할 때 사용합니다.
① App.js의 내역은 로고와 배경색을 바꾸기 위한 className을 설정
② App.css 에서 전체 배경색 지정
그러면 yarn start 화면에는 다음과 같이 나옵니다.
③ public 폴더 > index.html 확인
다음과 같이 public 폴더에 있는 index.html의 내용을 확인하기 위해 코드와 상관없는 주석(녹색)을 전부 지워봅니다.
위 index.html을 보면 지난 시간까지 Codepen에서 연습한 HTML 문서의 특징을 보입니다. 특히
<div id="root"></div>
를 볼 수 있는데 id값이 root인 곳에 App.js의 내역을 그려라라는 의미인것은 이미 알고 있습니다. 그렇다면 ReactDOM도 어딘가에 써 있을수 밖에 없겠죠?
④ index.js의 역할
index javaScript는 root라는 id값을 가져와서 App.js를 HTML로 나타내라는 명령어를 나타내고 있습니다.
상기 그림을 보면 Codepen에서 Babel을 설정할 때 import한 React와 ReactDOM을 import하고 나머지 명령을 진행하는 것을 볼 수 있습니다.
⑤ README.md 수정
이 부분은 Github에 나의 소스코드가 올라갈 때 보여지는 설명서라고 보면됩니다. 외부에서 나의 소스코드를 볼때 내용을 참조할 수 있는 여러가지 안내서 개념으로 작성하면 될 듯 합니다.
다음과 같이 맨 위에 작성해 보도록 하지요.
저장(Ctrl + S)하고 잘 반영이 되었는지 브라우저를 확인합니다.
▒ Github에 소스코드 저장
Github라고 하면 저장소라고 보면됩니다. 즉, 하나의 클라우드 저장소에 내가 만든 소스코드를 올려놓고 수정을 하거나 추가를 하는 경우 자동으로 반영이 될 수 있는 곳이라고 보면됩니다.
많은 개발자들이 소스코드를 Github에 올려놓고 공유를 통해서 더욱 코드를 발전시킨다고 하는군요. 우리는 개발자 수준이 될 수 없지만 그래도 Github를 한번 이용해 보고 어떻게 사용하는지 알 필요가 있다고 판단됩니다.
위 간단히 변경한 App.js가 포함된 전체 폴더를 Github에 올려 보도록 하겠습니다.
☞ Git과 Github
저도 처음에는 이해도 안가고 차이점도 몰랐습니다. 그리고 이러한 용어가 있는지도 몰랐습니다. 그래서 간단하게 Git과 Github의 정의를 간단하고 명확하게 확립하도록 하겠습니다. 최소한 다른 곳에서 해당 용어를 듣더라도 당황하지 않게
Git 은 분산관리 소프트웨어 프로그램이고 Github는 여러 소스코드가 저장되고 공유될 수 있는 저장소(repository) 로 이해하면 쉽습니다. Github 저장소의 파일의 변경사항등을 지속적으로 추적, 조율하는 역할을 하는 프로그램이 Git라고 이해하면 쉬울 듯 합니다.
Git로고 Github로고 ① Github 회원가입
Google에서 Github를 검색하고 회원가입(Sign Up)한 후 로그인(sign In)을 합니다.
② 프로젝트 저장소(Repository) 만들기
Repository 폴더를 누르거나 Start를 누르면 Create a new repository 화면이 나옵니다. 나만의 저장소 이름을 만들고 진행합니다.
맨 밑으로 가면 Create repository 버튼을 눌러 저장소를 만듭니다.
③ 할당된 내 Repository URL 연동하기
다음과 같은 화면의 내가 만든 저장소이름의 URL이 생성된 것을 알 수가 있습니다. 이를 복사합니다.
④ 복사한 URL VS code와 연동하여 Github에 올리기(Push하기)
▶ VS Code Git 탭 이해하기
VS code로 다시가면 왼쪽 Git 탭을 누르면 원래 코드에서 우리가 수정했던 내용을 확인할 수 있습니다.
총 5개파일이 변경되었다고 나오네요. 이것이 원코드에서 어떤 부분이 변경이 되었는지 알 수 있도록 하는 VS Code의 강력한 기능이라고 할 수 있습니다.
▶ Local 저장소에서 저장하기
VS Code의 Git탭을 보면 5개가 Change되었다고 표시되고 있습니다. Chnage된 5개의 파일을 저장하고 (+기호 누름) 저장한 이름을 쓰고 commit버튼을 누름
▶ Github로 Push하기
VS Code를 통하여 Local 저장소 (하드디스크)에 저장을 해야 Github인 클라우드 저장소로 보낼 수 있기 때문에 순서가 중요합니다. Github로 Push하기 위해서는 VS Code에 Terminal 창에서 진행합니다.
Push 명령어는 다음순서입니다.
원격지 주소 추가
원격지 주소는 Github에서 Repository 만들때 나온 URL 주소입니다. (이미 복사하셨죠?)
VS code Terminal 창에 똑같이 씁니다.
Github 수정 내역 반영
git push --set-upstream origin master
⑤ 잘 Push 되었는지 확인
Github 새로만든 저장소를 새로고침(Ctrl+R) 해봅시다. VS code에서 있는 전체 파일이 올라와 있는 것을 확인할 수 있습니다.
Github에 Push된 모습 이제부터는 수정되는 내용들을 체계적으로 관리하면서 프로그램을 개발할 수 있도록 하는게 Github를 사용하는 가장 큰 목적이라고 볼 수 있겠습니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
React 기본 : 고객 Component 구조화 (계층적으로 만들기) (2) 2021.06.22 React 기본 : 고객 Component 를 Props 를 이용하여 구조화하는 개념잡기 (0) 2021.06.21 React 기본 : Node.js 설치 및 Create React App을 통한 개발환경 세팅 (0) 2021.06.17 React 기본 : Event Handling(이벤트 처리) - On Off 버튼 만들고 작동하기 (0) 2021.06.16 React 기초 : Life-cycle 관련 함수의 정의와 API호출 (0) 2021.06.15