[MIL] 2024년 7월(GDSC X 코드잇 프론트엔드 개발자 트랙)

부제: 코딩 초짜가 리액트 네이티브 박치기 하는 글

 

 

 

정말 정말 힘든 7월이었다.

자바스크립트도 제대로 못 하는데 내가 왜 React Native를 하겠다고 했을까 후회가 되는 나날이었지만

그래도 새로운 걸 배워가는 과정 자체는 상당히 재미있다.

 

 

아직 제대로 한 것도 없지만 프로젝트 극초기단계에서 마주친 고난들을 기술하며 7월의 MIL을 작성해보겠다.

상당히 한심스러운 글이 될 수 있지만 나처럼 무작정 구글링 박치기하는 초보가 있다면 분명 도움이 되지 않을까 싶다...

 

이런 사람도 프로젝트를 하니 많은 초보자들이 이 포스트로 용기를 얻길 바란다.

3번 항목엔 React Native Expo CLI로 프로젝트를 빌드하는 아주 기초적인 방법도 적어뒀으니 참고하시길.

 

 

 

중요!!!

필자는 GitHub 협업 경험 전무, 프로젝트 경험 전무, 혼자서 개발을 해본 경험도 전무.

오직 과제와 백준 깔짝 정도 해본 사람임.

 

 

 

 

 

1. Expo CLI가 뭐예요...?

 

 

 

프로젝트 세팅 단계... React도 잘 모르는데 React Native를 알 리가 없는 나.

구글링과 chatGPT의 도움으로 프로젝트를 빌드했는데 코드의 의미는 제대로 알지 못한 채 일단 그냥 무작정 따라했다.

 

 

그리고 며칠 뒤 멘토 커피챗 데이 때 멘토님께 받은 질문.

 

왜 expo가 아니라 native CLI를 선택하신 건지 궁금해요!

 

 

 

 

 

네?

리액트 네이티브가... 두 가지였어요?

 

 

 

충격의 커피챗이 끝난 뒤... 제대로 서치를 시작했다.

둘은 큰 차이가 있더라...

아래는 내가 참고한 블로그 링크를 첨부한다.

 

https://lasbe.tistory.com/171

React Native 장단점과 CLI, Expo 비교와 후기

 

 

 

간단히 말해서

 

React Native CLI

: 자유롭고 기능 많은데 어려움. ios 개발하려면 맥북 필수.

 

Expo CLI

: 기능에 제약이 있으나 쉬움. 맥북 없어도 ios 개발 가능. Expo Go라는 앱을 사용하면 편하게 확인 가능.

 

 

 

멘토님께서 Expo를 추천해주시기도 했고 우리 프론트엔드 개발자들은 둘 다 맥북이 없었기 때문에 Expo로 다시 프로젝트 세팅을 하기로 했다.

(근데 Expo+webview를 추천해주신 이유는 이해못했어요 죄송해요 율리님ㅠ)

 

 

 

 

2. npm...? yarn berry...? 이것뭐에요~?

 

소중한 프론트 팀원 태우님께서 하지톤에 다녀오신 후 이것저것 알려주셨다.

근데 npm이 아니라 yarn berry를 썼다고 하셔서 음? 그게 뭐지? 하며 검색을 해봤다.

 

별 생각 없이 따라했던 npm install은 사실 node package manager를 다운받는 과정이었다.

명령어를 입력했더니 node_modules 폴더가 생기는 게 신기해서 우와~ 했던 건 그냥 자바스크립트 라이브러리를 다운 받은 거였다...

(뭔지도 모르고 install 한 게 아직도 어이없다...)

 

 

 

그리고 yarn에 대해 검색해보니 기존 npm이 가진 모듈 의존성 문제를 해결한 새로운 패키지 매니저라고 한다.

토스에서도 yarn berry를 쓴다고 한다.

 

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

 

 

아직 나는 작성한 코드가 없고, 정말 많은 블로그에서 npm을 싫어한다는 의견을 봐서 태우님과 상의 후 그럼 우리도 yarn을 써봅시다! 하고 결정했다.

 

기존의 npm에서 코드 몇 줄만 입력하면 yarn으로 바뀐다는 말에 아래 코드 두 줄을 입력했다.

 

$ npm install -g yarn
$ yarn set version berry

 

 

그.런.데.

 

 

 

엔터를 누르자마자 엄청난 로딩을 하더니

갑자기 뜨는 수많은 빨간 줄............

 

 

무서워진 나는 급하게 이전 커밋 해시를 복사해 reset을 시도해봤지만 이미 바뀐 파일들은 돌아오지 않았고 수많은 오류들은 별 짓을 다해도 사라지지 않았다...

 

결국 폴더 통째로 삭제하고 다시 npm으로 빌드를 진행했다...

yarn은... 좀 더 뭔가를 알게 되고나서 다시 도전해보는 걸로 하자...

 

 

 

 

 

3. 하단 탭이 안 없어져요 ㅠㅠ

 

나는 아래 블로그를 참고하여 프로젝트를 빌드했는데(이 글은 매우 좋은 글이지만 바로 저 블로그로 가지 말고 제 말을 끝까지 듣고 가주십시오...)

 

https://ccomccomhan.tistory.com/275

[React Native] - Expo 설치 및 실행, Expo 빌드하기(APK 파일 생성)

 

 

내가 따라하려고 켠 유튜브 강의와는 뭔가 화면이 많이 달랐다...

 

https://youtu.be/nOjirlwi10o?si=XOBRnO919jBMb_xx

 

 

왜... 나는 App.js가 없지?

 

 

 

개발 초짜는 강의와 뭔가가 조금만 달라도 멘붕에 빠진다.

별짓을 다 하며 코드를 노려본 결과 찾아낸 차이점.

 

나는 (tabs)라는 폴더 안에 index.tsx 뭐 이런 파일들이 여러 개 들어있었고

expo go 앱에서 열자마자 뜨는 화면은 이 (tabs) 폴더 안에 들어있는 index.tsx 파일이었다.

(tabs)는 여러 개의 하단 탭을 제공하고 탭끼리 넘어가기 편하게 미리 세팅이 되어있는 폴더였다.

 

 

 

내가 만드는 앱은 하단 탭이 필요 없는데...

그래서 나는 이 하단 탭을 없애려고 또 chatGPT와의 대화를 시작했다.

 

 

 

chatGPT는 여러가지 방법을 알려줬고 (tabs) 폴더 안에 있는 것들을 screens로 옮겨주고 App.tsx에서 import 해오는 파일 위치를 수정해주고... 뭐 그런 작업들을 하면 된대서 그렇게 했다.

 

 

(tabs) 폴더를 삭제한 뒤 두근두근 npx expo start 명령어로 앱을 돌렸는데!!!

 

 

 

?

왜... 스크린이 존재하지 않는 건데요...?

 

 

이전까지는 index.tsx 파일에서 글자도 바꿔보고 흥미롭게 뭔가를 하고 있었는데

(tabs) 폴더를 지우자마자 앱이 그냥 안 돌아갔다.

난 아직 Metro가 뭔지 bridge가 뭔지도 제대로 모르는 사람인데 앱 자체가 안 돌아가니까 또 멘붕에 빠졌다.

 

 

 

그래서 결국 휴지통을 열어서 (tabs) 폴더를 복원시키고 다시 이전처럼 전부 수정하고 npx expo start를 했는데,

 

또 This screen doesn't exist가 떴다.

 

 

 

나한테 왜 이러시는 건데요...

왜요... 아니 복원시켰으면 돌아와야 되는 거 아님?ㅠ

 

 

그냥 울고싶었다.

내가 뭘 잘못한 걸까...

 

 

(tabs) 폴더를 지우기 전에 깃허브에 push를 해뒀기 때문에 그걸 pull 해오면 괜찮겠지!!! 생각하고 git 서치를 와자자 시도해서 pull을 해왔다.

 

 

그 결과는,

 

 

전혀 달라지지 않았다.

그냥 저 에러페이지에 whyrano를 추가하는 방법만 터득했다.

 

그 와중에 go to home screen 저 버튼도 안 먹어서 누르면 또 다른 에러가 떴다.

환장의 연속이었다.

 

 

정말 딱 이런 기분이었다.

 

 

 

결국 또 다시 폴더 통째로 삭제.

npm install -g eas-cli부터 다시 입력하며 다시 만들었다.

 

 

또 다시 마주한 하단탭...

index.tsx 파일이라도 돌아가는 게 감사해서 하단 네비게이션 바를 없애는 방법을 열심히 검색했다.

 

 

그러나,

아무리 뒤져도 하단 네비게이션 바를 추가하는 방법만 나오지 없애는 방법은 존재하지 않았다.

 

https://reactnavigation.org/docs/bottom-tab-navigator/

Bottom Tabs Navigator | React Navigation

 

리액트 공식문서에도 추가하는 방법만 나왔다.

남들의 프로젝트는 하단 네비게이션 바가 기본적으로 깔리지 않았나 보다...

 

 

 

네비게이션 바 없애는 방법이라는 제목이길래 신나서 눌러보면

특정 페이지에서 일시적으로 안 보이게 하는 방법만 나왔다.

모든 페이지에서 없애는 방법은요...?ㅠ

 

 

왜 나만...?

왜 내 프로젝트만...?

아 필요 없어요 네비게이션 바 가져가시라고요

 

 

그렇게 울면서 한참을 헤매던 내가 발견한 유튜브 강의 댓글.

 

 

 

template... 이요?

template이요?!?!?!?!?!??!?!?!!!!!!!

 

 

아직 뭘 해보진 않았지만 뭔가 이게 내 문제를 해결해줄 것만 같은 느낌.

유레카를 외쳤던 아르키메데스의 기분이 이랬을 것만 같은 느낌.

 

 

 

기존에 작업하던 폴더는 싹 다 지우고 다시 프로젝트를 생성하기로 했다.

 

내가 입력한 코드는 다음과 같다.

 

npm install -g eas-cli
npx create-expo-app [App-Name] --template

 

 

이렇게 하면 밑에 여러가지 템플릿이 뜨는데

그동안 나는 default로 create해서 하단 탭이 있는 거였다!!!!!!

 

blank(typescript)를 선택하고 빌드하니

내가 그토록 바라던 하단 탭이 없는 깨끗한 화면이!!!!!!!!!!!!!!!!!!!!!

 

 

 

이제서야 뭔가를 할 수 있는 상태가 되었다.

코드는 한 줄도 안 짰는데 프로젝트 초기 세팅부터가 이렇게 힘들다니. 역시 코딩은 아무나 하는 게 아니다...

(나머지는 아래에 있는 블로그 그대로 따라하면 된다. 위에 있던 그 블로그 맞다. 정말 최고의 블로그 글이다)

 

https://ccomccomhan.tistory.com/275

[React Native] - Expo 설치 및 실행, Expo 빌드하기(APK 파일 생성)

 

 

 

 

 

이 외에도 중간중간 수많은 고비가 있었으나... 어찌저찌 chatGPT와 구글링의 도움으로 헤쳐나갔다.

정말 고비가 30번도 더 있었는데 너무 많아서 제대로 기억도 안 난다.

 

 

깃허브 초기화와 branch 삭제도 여러번 했다.

깃허브 관련해서도 문제 천지라서 정말 너무 힘들었는데 어떻게 해결했는지 기억이 안 난다... 이런 걸 기록해둬야 나중에 의미가 있을 텐데...

 

 

 

모르겠으면 그냥 clone 하고 폴더 지우고 git remote origin develop 이런 식으로 입력했던 것 같다... 무슨 upstream도 하고 그랬는데 제대로 이해 못 해서 기억이 잘 안 난다.

 

깃에 문제 생겼을 땐 터미널에 뜨는 에러 메시지를 그대로 복사해서 chatGPT에게 물어보면 잘 해결해준다.

그리고 에러메시지를 마주할 때마다 파파고를 돌리고 있는 나를 보며 영어공부도 해야겠다고 느꼈다...

 

 

 

 

 

4. 서버랑 통신은 어떻게 해요?

 

커피챗 시간에 프론트엔드 개발자가 알아야 하는 백엔드 지식이 있나요? 라는 질문을 했었다.

그때 돌아온 멘토님의 답변.

컴퓨터 네트워크 지식을 꼭 알아야해요^^ 박준철 교수님의 컴네 시간에 절대 놀면 안 됩니다.

 

 

오마이갓.

내가 수강한 전공과목 중에 B0를 받은 유일한 과목이 박준철 교수님의 컴퓨터 네트워크이다.

 

 

시간을 되돌려 1학기로 돌아가고 싶었다.

그래도 수업은 꽤 열심히 들었는지 HTTP, GET/POST 리퀘스트는 뭔지 알고 있었다. 정말 불행 중 다행이었다...

 

 

그런데 또 발생한 문제.

그래서 리퀘스트는 어떻게 보내요...?

 

 

 

 

그때 내게 찾아온 코드잇의 강의.

 

한 줄기 빛.

나의 희망.

 

https://www.codeit.kr/topics/sending-requests-with-js?mediumTypedId=UGxheWxpc3Q6NjYzYjBhNDhlYzkyNDIzZTYzZGY2NWU4

자바스크립트로 리퀘스트 보내기 - 강의 | 코드잇

 

선수강의는 안 들은 게 천지지만 이 강의는 내게 리퀘스트의 형식을 알려주었다...

await이 뭔지 promise가 뭔지 몰라도 일단 리퀘스트를 어떻게 보내는지는 알 수 있다는 거다...

(심지어 이전 강의인 [비동기 자바스크립트]에서 그거 다 알려줌)

 

 

백엔드 팀원분들이 보내주신 서버 링크에 접속해서 어쭙잖은 코드로 get 리퀘스트와 post 리퀘스트를 보내봤다.

 

 

 

헤헿.헤헤헤헿.

응답이 돌아왔다...

아... 뿌듯해.

 

그 전까지는 서버랑 통신을 어떻게 하는 건지 감도 안 잡혀서 너무 무서웠는데 한 번 요청을 보내보니까 갑자기 부담이 확 덜어졌다.

 

 

 

또 리퀘스트를 보냈더니 json 파일이 아니라 html 파일로 응답이 돌아와서 자꾸 오류가 뜨는데 이게 프론트쪽에서 리퀘스트를 잘못 보낸 건지 서버에서 잘못 설정한 건지 모르겠다.

오류코드는 500이었는데 나도 내 코드에 확신이 없으니 백엔드 쪽에 무엇을 어떻게 확인해달라고 요구를 할 수가 없어서 우리 팀원들은 서로 '저희 쪽의... 문제일... 수도...' 이런 말만 반복하고 있다.

 

무능한 팀장이라 미안합니다...

 

Expo Go 앱 켰는데 이런 빨간 화면 뜨면 너무 무서워서 소리질렀다.

 

 

그리고 느낀 점.

코드잇의 로드맵은 완벽했구나... 강의를 안 들은 내 잘못이었구나...

 

밀린 강의를 밤을 새서라도 다 듣기로 결심했다.

 

 

 

 

 

 

5. 매개변수 타입이 이상함(아직 해결 못함)

 

이건 아직도 해결하지 못한 문제이자 내가 새벽까지 깨어있는 원인이 된 문제이다.

 

스택 네비게이션을 활용하여 기본적인 화면 구성을 하는 중인데

 

navigation.navigate('ClassScreen');

 

이 코드 부분에서

 

 

No overload matches this call. Argument of type '[string]' is not assignable to parameter of type 'never'. Overload 2 of 2, '(options: never): void', gave the following error. Argument of type 'string' is not assignable to parameter of type 'never'.ts(2769)

 

 

이런 에러메시지가 출력된다.

매개변수의 타입 오류... 관련된 에러 같은데 제대로 모르겠어서 열심히 구글링을 하는 중이다.

 

 

 

나와 비슷한 에러메시지를 받은 분의 블로그를 발견했다.

 

https://velog.io/@xian0310567/React-Native-Navigation-Typescript-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React Native Navigation + Typescript 사용하기

 

그러나 나는 아직 이해를 못해서 적용을 못하고 있다.

저 분의 코드를 따라하니까 또 다른 오류가 발생하고... 또 수정해보니 또 다른 오류가 발생하고... 정말 미쳐버릴 것 같다.

 

 

 

그 와중에 가장 어이없었던 건 classScreen.tsx로 파일을 생성했다가

파일명을 ClassScreen.tsx로 수정하고

모든 부분을 전부 대소문자까지 확실하게 수정했는데 계속 대소문자 안 맞는다고 오류를 띄웠다.

컴퓨터 화면을 보며 2시간째 비명을 지르며 머리를 쥐어뜯고 있으니 20년 전에 자바스크립트 짱이었다는 아빠까지 와서 분석을 하다가 '왜 이러냐...' 하고 갔다.

 

 

 

너무 화가 나서 다 포기하는 심정으로 classScreen.tsx였다가 ClassScreen.tsx로 이름을 바꾼 파일을 지워버리고

처음부터 제대로 ClassScreen.tsx로 파일을 다시 만들었는데

 

 

 

 

오류가 사라졌다.

 

 

 

아 정말 울고싶었다.

뭔 개복치인가요?? 이름 잘못지었다가 바꾸면 오류 띄우고 처음부터 제대로 써야 되고??

 

 

 

그러나 교훈을 얻었다...

처음부터 똑바로 하자!

 

 

 

 

---

마무리하며

 

역시 처음부터 리액트 네이티브는 무리였나... 라는 생각이 들지만

프로젝트를 하며 그때 그때 리액트 공부를 보강하고 자바스크립트 공부를 보강하며 어찌저찌 전진하고 있다.

아직 제대로 짠 코드도 거의 없지만 한 번 감을 잡으면 가속이 붙지 않을까... 기대하며 매일 매일 열심히 모니터를 노려보고 키보드를 두드린다.

 

 

아주 계란으로 바위치기 하는 꼴이 따로 없지만 좋은 팀원들을 만나 정말 다행이라고 생각한다.

얼른 리액트 짱 깃허브 짱이 되겠습니다.

 

 

 

 

 

그리고 개발을 시작해보니 더 와닿았다.

코드잇은 정말 좋은 사이트였다...

수강권 기한이 지나기 전에 얼른 다 들어야겠다...

 

 

개발 하는 여러분 모두 모두 파이팅.

구글링 파이팅 챗지피티 파이팅.