Just Do IT!

스파르타코딩클럽 내일배움캠프 44일차 본문

스파르타코딩클럽 내일배움캠프/TIL

스파르타코딩클럽 내일배움캠프 44일차

MOON달 2022. 12. 29. 20:50
728x90
오늘 일과 간단 요약
  1. React Native 실시간 강의
  2. 프로그래머스 Level 0 1문제
  3. React Native 실시간 강의
  4. React Native 과제 (투두리스트 UI만 만들어보기)

 

 

 

 

 

 

React Native 시작

길었던 React 주차가 끝이 나고 새로운 챕터가 시작되었다.

시간표 보니까 React Native였는데 그동안 웹 개발을 하다가 왜 앱개발을 중간에 하지? 싶었는데 React랑 비슷하기도 하고 배워두면 좋으니까 배우는 거겠지? 싶어서 그냥 받아들였다 ㅋㅋㅋㅋ

 

앱개발 쪽은 예전에 학교에서 팀 프로젝트 한번 해본적 있는데...그 때는 안드로이드 스튜디오로 했던 기억이 있다.

근데 거의 코드 복붙...이었고 제대로 된 이해도 없이 그냥 했던 거라서 했다고 하기 좀 민망한...그런 프로젝트다.

그리고 앱개발 하면 아는 지인분이 flutter로 하신다는 이야기를 들었었는데...

그래서 나랑 아예 거리가 먼 분야라고 생각했다 ㅋㅋㅋㅋ

 

그래서 발제 끝나고 핸드폰에 expo 앱 설치도 해보고...오류도 나보고...(?)

여튼 시작부터 우여곡절이 많아서 블로그에 글도 정리했다.

 

https://daydream-sy.tistory.com/105

 

[React Native] Expo 사용법

Expo란? 리엑트 네이티브로 하는 개발을 쉽게 할 수 있게 해준다. 리엑트 네이티브를 위한 set-up이 미리 구성되어있다. native 파일들을 사용자에게서 숨겨놓고, 알아서 관리해주는 툴 Expo의 장점 Exp

daydream-sy.tistory.com

 

이건 핸드폰에서 앱 실행시켜보다 난 오류 때문에 작성한 글 (구글링 엄청 해봤다...ㅎ 그냥 튜터님한테 질문할걸...)

 

https://daydream-sy.tistory.com/106

 

[React Native] Network Response Time Out error

폰으로 QR코드 인식 할 때 로딩이 좀 길어진다 싶더나 저런 에러가 나왔다. Network response timed out. 로딩이 길어진다 싶더니 저 에러가 나온게 세번이라서 바로 구글에 검색해봐서 지금은 오류를 해

daydream-sy.tistory.com

 

그래도 혼자 에러를 해결해서 뿌듯한 마음에 적어두었다. (근데 저러고 오후에는 다른 어려움이...ㅠ)

 

 

 

 

React Native 실시간 강의

이번에는 튜터님이 실시간으로 강의를 해주셔서 오히려 좋았다.

 

특강을 제외하고 리뷰 강의, 뭐 이런거 제외하면 실강이 아예 없었었는데 이렇게 생소한 걸 배울 때 실시간 강의가 훨씬 좋은 것 같다. 물론 줌으로 수업 듣다보니까 자꾸 학교 수업 듣던 때가 생각나긴 했지만...ㅋㅋ

코로나 때문에 1년 학교 다니고 계속 줌으로 해서 그런가, 맨날 줌만 들어가면 학교가 생각난다.

 

여튼 오전에 1시간, 오후에 1시간 강의를 했는데 아직 많은 걸 배운 건 아니지만,

React와 다른 코드 진행 방식이 있어서 그 부분을 직접 따라쳐보고 공식 문서 가서 읽어보기도 했다.

 

항상 뭔가 공식 문서에 대한 거부감(?)이 있었던 것 같은데...(영어이기도 하고 걍 방대해서 읽기 싫어서....?)

이번에는 강의에서 튜터님이 공식 문서를 보여주셔서 복습 겸 수업 듣고 과제할 때 나도 슬쩍 들어가봤다.

그래봤자 거기 있는 예제 따라서 실행 시켜보고 뭐 이런것 뿐이었지만...

 

https://reactnative.dev/docs/components-and-apis

 

Core Components and APIs · React Native

React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat

reactnative.dev

 

오늘은 여기 나온 컴포넌트들과 style에 대해만 배웠다.

이것도 내일 들은 수업까지 합쳐서 노션에 정리하고, 블로그에도 정리해야겠다.

이걸 토대로 투두리스트 UI를 만들어보는 게 오늘의 과제였다.

 

 

 

 

 

투두리스트 UI 만들기

React랑 태그도 조금씩 다르고 쓰는 방법도 달라서 초반에는 그냥 익숙한 방식으로 쓰다가 자꾸 에러가 났었다 ㅋㅋㅋ

머리로는 아는데 대체 왜 자연스럽게 리액트 쓰던 식으로 쓰는 건지...

그래서 공식 문서 들어가서 예제를 고대로 가져다 실행시켜보고 그걸 내식대로 써보고 하는 식으로 과제를 했다.

 

그런데 여기서 엄청난 문제를 만났다.

핸드폰 과부하인지 뭔지...계속 App.js를 수정하고 수정하다 보니까 앱 자체가 실행이 안되는 것이다..!

 

Expo 앱을 통해 스캔해서 실행시켜보고는 계속 그 화면을 띄워놓고 조금씩 수정해가면서 하고 있었는데

오류 났다가 오류 해결하고, 다시 input 하나 추가시켜보고, 버튼 넣어보고...

연습을 너무 많이 해서 그런지 핸드폰으로 expo 앱이 아예 안 켜진다...ㅠㅠㅠㅠㅠ

앱에 오류 생겨서 꺼지고 다시 로딩이 되었다가 꺼지고 UI 코드 짜다가 아예 핸드폰을계속 보고 있었는데...

계속 씨름하다가 그냥 어차피 안드로이드 스튜디오도 있겠다, 에뮬레이터를 깔았다.

 

그래서 실행해서 보지 않고 이전까지 실행했던 화면을 토대로 UI 코드만 우선 완성시켰다.

에뮬레이터를 다 다운받고 거기서 실행되는 걸 보고 나면 수정하기로 하고...

제대로 된 건지 모르겠지만 ㅋㅋㅋㅋ 일단 코드는 쓰긴 썼다.

 

그 이후에서야 android studio에서 에뮬레이터를 설치하고 연결하는 작업을 계속 했다.

저녁 먹고 돌아오니 제대로 설치 완료!! 3번의 에뮬레이터 설치를 거쳐(...) 드디어 핸드폰이 아닌 노트북에서 동시에 돌릴 수 있게 되었다. 좀 느리긴 하지만...ㅎ

 

설치 후 Bundling 중...

 

 

 

 

프로그래머스 Level 0 1문제

오전에 1시간 강의 듣고 설치까지만 확인하고 오랜만에 프로그래머스 1문제를 풀었다.

한 일주일 정도 안풀었나...?

그래서 그런가 대문자/소문자 변환이 갑자기 생각나지 않아서 처음에는 자바스크립트 아닌 파이썬으로 먼저 풀었다.

아무래도 파이썬이 좀 쉬우니까...ㅋㅋㅋ 그러다가 구글링해서 변환하는 걸 알아냈고,

그 다음에야 자바스크립트로 풀었다.

내 예상과는 다르게 제법 간단하게 끝나는 문제였는데...근데 솔직히 파이썬 문법으로 더 간단하긴 하다...ㅎ

 

아무튼.

하루에 한문제씩은 꾸준하게 풀어야 하는데 오랜만에 푸니까 머리가 굳었는지(?) 기억이 나질 않았다.

이러는 걸 방지하기 위해서 어떤 식으로 공부해야 하나 고민이다.

 

고민하다가 새로운 거 (=React Native) 하니까 금방 그 고민을 잊어버린 했다 ㅋㅋㅋ

내일은 꼭 시간 내서 고민해보는 걸로...!

 

 

 

 

 

 

짧은 일기

하루종일  핸드폰 안되는 거 때문에 이거저거 찾아보다가 결국 에뮬레이터까지...

정작 react native 공부한 시간보다 핸드폰 앱 다시 켰다 아니다가 등등...수많은 로딩중을 기다렸다 ㅋㅋㅋ

 

여튼 그래도 에뮬레이터가 잘 작동되어서 다행이다

차라리 노트북으로 한번에 보는 게 더 다행인것 같기도 하고 ㅋㅋㅋ

아무튼 프로젝트 끝났는데도 정신없는 하루였다. 아니면 프로젝트 여파로 아직 좀 힘든가....?ㅋㅋㅋㅋ

내일은 react native에 대해 좀 더 공부하고, 리액트 복습도 해야겠다...!