군대에서 REACT 공부하는 사람

Intro

군대에서 개발을 하기란 쉽지 않다.

나는 꾸준히 개발을 하기 위해서 공군에 들어왔고,
사지방(사이버지식정보방)에서는 인터넷을 사용할 수 있기에 코딩을 할 수 있겠다고 생각했다.

해당 컴퓨터는 PC방 마냥 부팅을 할 때 마다 기본세팅으로 돌아온다.
그래서 VS같은 IDE를 컴퓨터에 설치할 수 있는 여건이 되지 않아 찾아낸 것이 클라우드 IDE REPLIT이다.

Replit.com

replit에서는 Python, c++, node.js 등 여러가지 탬플릿을 사용할 수 있고, 물론 REACT도 있다.

replit에 회원가입 및 로그인 후, 좌측 상단 +Create Repl 버튼을 누르면 탬플릿을 선택할 수 있고, 제목과 공개여부를 지정할 수 있다.

여기서 개사기 기능이 드러나는데, 바로 자신의 github repo와 연동을 할 수 있다는점.
Replit에서 지원해주는 Git 기능을 사용해서 버튼만 딸깍 하면 pull과 push, merge까지 간단하게 할 수 있는것을 보면 평소에 터미널로 하나하나 입력하던 시절이 생각나 가끔 눈물이 앞을 가린다.

주의: private repo 연동은 replit의 월 요금제를 구매하셔아만 사용이 가능하다. 나는 월급 80받는 대부자 공군이기 때문에 사용하지만 아직 안정적 수입처가 없는 응애들은 참고바람.

Replit 프로젝트에 대해 알아보던가

내가 대략 군대에 들어온지 1년이 넘어가며, 해당 IDE를 사용한지 1년이 다 되어가는 짬킹의 입장으로 아는 선에서 설명을 해보겠다.

우선 프로젝트를 만들면 좌측 상단에 Files 칸이 있을 것이다.
해당 칸은 당신이 만든 프로젝트 이름으로 된 폴더를 표시하고 있으며, 상위 폴더에 접근하고 싶다면 Shell, Console 을 이용하면 가능하다.

나는 보통 React 탬플릿을 많이 사용하기때문에 이것을 기준으로 설명해볼게습니다잇

프로젝트를 만들면 기본폴더에 자동으로 public, src 폴더와, index.html, README.md 파일이 존재한다.
그리고 밑에 Packager files 부분에는 package.json, package-lock.json파일이 존재한다.

.config 폴더 같은 중요한 파일들은 숨겨져있는데, Files 우측 점 세개를 세게 누르면 Show hidden files 버튼이 보일텐데, 해당 버튼을 눌러주면 볼 수 있다.

---

프로젝트를 생성하면 화면 중앙에 파일, 우측에 Console 또는 Shell 창이 나타날 것이다.

위와 같은 파일 및 도구를 사용하기 위해서는 파일의 상단을 보면 작게 +버튼이 있다.
해당 버튼을 누르면 당신이 띄울 수 있는 파일 및 도구를 보여줄 것이다.
또는, 좌측 하단에 Tools 창이 있는데 거기서도 선택을 할 수 있다.

Tools에 뭐가 디게 많은데 그중에서 Shell 또는 Console, 그리고 Git만 알면 된다.

Shell, Console은 크게 설명할 것은 없으니 넘어가고 Git에 대해 알아보까까??

GIT 연동

replit에서 github와 연동을 해둔 상태라고 가정을 하고 진행하겠음미다.

처음 프로젝트를 생성할 때 Git 연동을 해두지 않았다면 git tool을 눌렀을 때 이상한 화분 모양과 함께 Initialize Git Repository 버튼이 나타날 것이다.
해당 버튼을 누르면 main 페이지가 나타나는데, 해당 페이지는 아직 당신의 git의 어느 repo와도 연결이 되지 않은 임시 branch이다.

우측 상단에 톱니바퀴 버튼을 누르면 Setting 화면으로 이동을 하는데,
Remote 칸의 주소 아래 GitHub 부분을 누르면 퍼런 Create Repository on GitHub 버튼이 있다. 해당 버튼을 눌러주면 자동으로 당신의 github에 같은 이름을 가진 repo가 생성이 된다.

이후에는 Publish branch 뭐시기 버튼을 눌러 당신의 임시 branch를 생성된 repo에 배포해주자.

그러면 이제부터 당신이 파일을 수정할 때마다 자동으로 해당 tool에서 수정됨을 인지하고 Stage and commit all changes 버튼이 활성화 될 것이다.

Pull을 하고싶다면 branch부분에 Pull 버튼을 눌러봐라.

Outro

대충 이쯤하고 replit으로 프로젝트 생성 및 기능 소개는 마치겠음미다.
부족한 부분이 있으면 다음에 눈치껏 추가로 작성하겠다.

다음 글에서부터는 TypeScript + vite + React Query를 이용한 음악 추천 사이트 구현 프로젝트를 진행하겠다. 그럼 나가세요