제2회 스파르톤을 임하는 나의 계획 & 개발일지

* 스파르톤 공부 목표!!

1. 앱개발종합반 복습하기

2. 회사 앱을 내가배운 React & Expo 를 활용해서 만들어보기

    ※ 실제 기능구현은 화면을 모두 그린다음 시도해보는걸로!!

 

우선은 스파르톤을 시작으로 밤새기 위한 모든 준비는 끝났다!!!!

목표한 내용을 이번 밤샘을 통해 다 완성하지못하여도 과정이 더 중요하다고 생각된다! 

 

09:00 

팀별 아이스 브레이킹 및 행사안내를 시작으로 본격적으로 시작하게 된다!

나는 19조에 포함되었고 팀명은 "십구뜯고맛보고즐기고!"  (아이디뱅크이신분 덕분에 좋은 팀명을 얻었다!)

이번 밤새면서 목표한 코딩 목표를 십구뜯고맛보고 즐기면서 해봐야겠다!!!

 

이제 본격적인 준비가 끝났으니까!

9시30분부터 내가 목표한 내용을 학습을 시작해보자!!! 화이팅!! 

 

 

09:30

 

앱개발종합반 3주차 복습하기!

실제로 처음 강의를 들었을때는 솔직히 무슨말인지 도통 알수가없었다ㅠㅠㅠㅠ

그래도 회사에서도 틈틈히 공식문서를 보고 리액트 강의도 듣고 하다보니까 지금 복습하는 차원에서는 내용 이해가 훨씬 쉬운것 같다.

 

이번 시간에 들을 강의 내용 

- 리액트에서 데이터를 관리하는 방법(state)

- 페이지 이동 (스택네비게이터)

 

강의를 듣기시작하고 따라하다보니 어김없이 오류가 발생한다. 

아래 오류에 대해서는 튜터님이 왜 발생하는지 친절하게 설명을 해주신다! 이것도 여러번 듣다보니까 왜 그러는지 이해가 쉬운것 같다. 

처음 같았으면은 오류 문구를 파파고 검색도 해보고 구글 검색도해보고 무작정 막 찾아봤겠지만 

이제는 동작 원리에 대해 이해를 하다보니 뭐 때문에 발생하는지 파악하는게 조금은 수월 해 진것 같다!!!

useState를 통해 컴포넌트 안에서 상태 관리를 하는데 useState가 상태관리를 할수 있는 변수(초기값=state)를 하나 주고 상태를 변경할 수있는 함수(setState)를 준다.

이걸 useEffect 안에서 관리를 하게된다. (useEffect는 화면이 그려진다음 가장 먼저 실행되는 함수)

현재 강의에서 작성한 코드로 봤을때는 useState에는 초기값은 빈리스트로 state에 값이 없는 상태고 아무것도 없는 빈 리스트에서 tip를 꺼내서 반복문을 돌리려고하니까 오류가 발생했다.

 

이부분을 로딩화면을 넣어줌으로써 오류가 발생하는 부분에 대해 해결을 해보자!!

 

※ 이번 스파르톤으로 밤샘코딩을 하면서 내가 공부한 내용 중 알고 넘어갔으면 하는 내용에 대해 정리를 해두자.

    나중에 다시보면서 뿌듯함도 있고 좋은 기록으로 남을 것 같다

 

 

수업때 알아두면 좋을 내용들은 틈틈히 수업들으면서 따로 정리를 해두자!

 

아직 나의 정신상태는 맑음! 첫 시작은 레드불과 함께 시작한다.

 

10:00

 

벌써 레드불을 하나 먹어버렸다...!!! 

 

이번에 공부한 내용은 카테고리 기능을 위한 카테고리 상태 관리이다.

리액트를 배우면서 상태 관리가 가장 어려워서 여러번 다시 보기를 했던 것 같다ㅠㅠ

 

※ 짚고 넘어가야할 용어 정리

filter() : 배열을 순회하면서 요구조건을 확인하고 조건에 맞는 원소들로 구성된 새로운 배열로 리턴 

 

setCateState(state.filter((d)=>{

return d.category == cate

}

 

→ state에는 전체 꿀팁 리스트가 들어가있고, 여기에서 filter 함수를 통해 특정 함수에 해당하는 리스트만 리턴해줄 수 있다.

     즉, return 뒤에 조건이 true인 애들만 리스트로 리턴해준다.

 

또, 여러상황에 따라 상태관리를 하기위해 여러개를 둘수도있다(강의에서 만드는 나만의 꿀팁만해도 벌써 3개의 상태 코드가 만들어졌다.)

const [state,setState] = useState([])

// 전체 꿀팁을 두기위한 상태

const [cateState,setCateState] = useState([])

// 카테고리별 리스트를 보기위한 상태

const [ready,setReady] = useState(true)

// 데이터가 준비중일때 준비화면을 보여주기위한 상태 

 

처음 듣을 때는 뭔소리인가 싶었는데 이제는 이해하면서 듣는 나를 보며 괜히 뿌듯함과 그동안 공부한 보람은 있다!!!

 

11:00

 

이제 살짝 걱정이된다. 왜냐하면 항상 12시전에는 잠을 잤기때문에......

아침잠은 없는 대신 밤잠이 너무 많다ㅠㅠㅠ 그래도 밤새코딩하기로 마음먹은거 다시 공부 시작해보자! 

11:30분 퀴즈 시작하기 전까지 강의 복습 스타트!

 

앱 상태바(Status Bar) 에 대해서  복습을 했으나!!!

내 핸드폰(아이폰 12미니)에서는 적용이 왜 안되는것인가! 깊은고민에 빠지게되었다ㅠ

 

내 핸드폰에서는 굳이 상태바를 추가하지않아도 시간 와이파이 등등이 보여지고있기때문에 그런것같기도하고

다른 어떤 이유가 있는것 같지만 이건 도전 스파르타 골든벨 시간이 지나고나서 다시 찾아봐야겠다!

 

이제 매번 자는 시간만 지나면 밤새는 건 어렵지 않을 것 같다!  아직 나의 상태는 괜찮고 나에겐 레드불 한발이 더 남았다

 

하지만 11:30분의 퀴즈 기회는 물건너 갔다ㅠㅠㅠ

한번이라도 맞추고싶었지만 맞추는 속도를 따라갈수가없다 도저히..!!

 

 

12:00

 

매번 자는시간이라서 조금 걱정했지만 다행히 퀴즈풀면서 웃고 했더니 잠좀 깨는것같다! 

 

이번에는 앱개발에서 유용하게 사용되는 "스택 네비게이션" 에 대해서 공부해보자.

이 기능을 잘 활용하면 내가 오늘 목표한것처럼 회사 앱을 리액트 앱으로 화면을 만들어볼때 페이지이동하는데 유용하게 사용할 수 있을 것 같아서 더 유심히 봐둬야겠다!!

 

이제 12시가 넘어가면서 살짝.... 졸립고 배고픈감이 있어 야식을 안먹을수가없다ㅠㅠ

역시 야식에는 라면..!!! 

배불리 먹었으니 다시 화이팅해보자!

 

다시 복습하면서 느끼는 거지만 앱개발종합반 김건희 튜터님은 진짜 처음 앱개발을 접하는 사람들을 위해

강의내용에 대해서 꼼꼼하게 설명도 해주시고 강의자료에 정말 세세한부분까지 설명을 잘 달아주셔서 정말 좋은 것 같다!

 

 

01:00

 

머리가 조금씩 아파오기시작하는건 기분탓일까...?

정신을 차리기 위해 준비해뒀던 커피를 마시고 다시 시작해보자!

 

오늘 목표한 계획을 하기위해서는 여기서 멈춰선 안된다!

 

스택네비게이션에 대해서 튜터님이 설명해주시는게 참 이해가 쉽게 가고 좋은 것 같다.

앱은 페이지가 쌓이는 구조이다. ( 메인 → 어바웃 → 디테일  화면으로 쌓이고 뒤로가기버튼을 누르면 쌓인 페이지가 하나씩 벗겨진다고 보면된다.)

 

Stack.Screen 은 앱 화면에 대한 페이지

Stack.Navigator 은 페이지들이 모여 만들어진 책갈피 

→ 중요한 기초개념들은 정리하면서 넘어가자! 그리고, 스택네비게이션에 여러 기능들을 활용하려면 그때 마다 필요한 패키지를 설치해줘야 하는것도 잊지말자. 

 

코딩을 배우면서 느낀부분이 코드를 따라해보면서 이것저것 실행해보는것도 중요하지만 

무엇보다 어떤 원리로 동작하는지 기초적인 부분에 대한 이해가 중요한 것 같다! 그래야 오류가 발생해도 원인파악하는데 조금 더 나은 것 같다.

 

또, 강의를 들으면 들을 수록 공식문서를 활용을 잘해야될 것 같다. 요즘은 라이브러리가 정말 사용하기 쉽고 잘 되어있다보니 공식문서만 잘 보더라도 왠만한 기능들이 다 구현되어있고 좋은 앱을 만들 수 있을 것 같은 생각이 든다!

 

02:00

 

막상 9시간이라는 시간이 생기긴 했지만 ! 9시간동안 풀로 집중할 수는 없기때문에 2가지 목표를 모두 하기에는 조금 어려울 수도 있을 것같기도하다ㅠㅠ

사실 걱정은 했지만 생각했던것보다 엄청 졸립고 그러진 않은 것 같아 다행이다.

나이는 들었지만 아직까지 체력적으로 죽지 않았나보다! 이정도 체력이면 개발자 가능하지 않을까?ㅎㅎㅎ

 

사실 이시간대가 되니 졸린건 아니지만 굉장히 집중력이 떨어지는건 맞는 것 같다...ㅠㅠ

그렇다고 포기할 생각은 없다!!!!

 

이번에 복습할때에는 처음 막 따라해보고 시간에 쫓겨 급급하게 공부하던 시절은 지났기때문에

공식문서도 다시 들여다보고 이해가 안갔던 부분들에 대해서도 다시 천천히 보면서 시간이 걸리더라도 확실히 이해하고 넘어가도록 해보는 게 좋을 것 같다!

https://reactnavigation.org/docs/stack-navigator/

https://reactnavigation.org/docs/stack-navigator/

사실 코딩을 하면서 영어공부를 해야되나 싶을 정도로 ㅠㅠ 내가 영어를 너무 모르는 거 같기도하다.

공식문서 뿐만아니라 코드들도 영어로 치다보니 오타도 많고 공식문서 보기도 어렵게 느껴지는 것 같다. 번역해도 되지만 간혹 번역이 잘못되는 것 같은 느낌이 들때도 있어서 영어공부를 그동안 왜 안했을까 싶을때도 있다...!

 

페이지 이동을 위해서 navigation 와 route 라는 딕셔너리(객체)를 속성으로 넘겨받아 사용해야 한다고한다.

말만 들었을때는 사실 좀 이해가 안갔지만 바로 코드로 설명을 해주시니 이해가 안될수가없는 것 같다!

 

 

03:00

 

3시가 되니까 절정으로 힘든 시간이 되었다..ㅠㅠ 하지만 마라톤 시작!

 

스파르타코딩클럽에 많은 분들이 열정적으로 참여해주시는 바람에 렉이 걸려 두바퀴 도는데 오랜시간이 걸렸지만 돌긴돌았다!!

지금부터는 본격적으로 잠이 오기시작해서 졸음을 깨면서 다시 시작해봐야겠다!

 

마지막 생존을 위해(배그?) Start !

 

어김없이 오류가 발생한다...ㅠㅠㅠ 오늘은 왠일로 오류가 안난다고 했더니 역시나!

코드스니펫을 제공을 해주지만 정확히 어떤 부분이 달라지고 어떻게 동작하는지 알아보기위해 직접 코드를 작성하다보니

이렇게 빠진 부분이 있어서 오류가 발생하였다!

그래도 나름 빨리 캐치할 수 있었던건 그전보다 어떻게 동작하는지 이해를 하고 있어서 그런게 아닐까싶다!! 

 

코딩을 시작한 계기는 내가 생각한것들을 만들 수 있다는 것도 있지만 ! 코딩을 하면서 더 재밌게 느낀 부분은 바로 이런 쾌감이다

문제가 생겼을때 이걸 찾아보고 해결하려는 과정은 힘들지 몰라도 해결했을때에 그 짜릿함이 있다.

 

세부코드는 작성하면서 봐뒀으니 중요내용 & 어떻게 동작하는지 흐름정도만 알고 넘어가보자.

1. StackNavigation을 통해 DetailPage에서 navigation 과 route를 받고 있다.

     이떄, DetailPage는 Stack.Screen에 붙어있어야 페이지 이동이 가능하다.

2. DetailPage에서는 MainPage와 같이 로딩화면을 넣어놓지는 않았다! 로딩화면을 넣은이유는 데이터가 준비될 시간을 벌어주는

    것이였으며, 이는 임의의 데이터(=초기상태값)를 선언해주면 굳이 로딩화면을 넣지않아도 오류를 해결할 수 있다. 

    즉 초기에 임의의 데이터로 화면을 그려준다음 데이터를 받아와서 다시 화면을 그려준다. 

    (useEffect 함수 실행)

 

정리하자면, 

1. DetailPage 컴포넌트가 useState에 들어 있는 데이터 가지고 화면에 그려짐(return 함수실행)

2. 화면에 다 그려진후, useEffect 함수 실행

3. useEffect에서 상태값 변경 이벤트가 실행되면 변경된 데이터 가지고 다시 return 실행

4. 변경된 데이터를 가지고 화면에 DetailPage가 다시 그려짐.

 

04:00 

 

이제 2시간이면은 목표한 9시간이 종료가 된다! 

처음에는 집중력도 부족하고 오래앉아있지못하나보니까 스파르톤을 계기로 집중해서 공부를 해보자라는 생각으로 시작을 했는데

중간에 정말 졸릴때도 있었지만 그 시간이 잘지나니까 조금 편안해진 것 같다!

 

생각했던것보다 복습을 많이 하지는 못했지만 그래도 내가 긴 시간동안 끝까지 포기하지않고 노력했다는게 

앞으로 코딩 공부하는데 있어 많은 도움이 될 것 같다!!!

 

05:00

 

 

* 스파르톤을 성공적으로 마무리하게 된 소감!!

오늘 같이 밤샘 코딩이 마무리가 되어 간다! 

마지막 2시간은 진짜 많이 졸려서 그전에 봤던 내용 들 다시 점검 하는 식으로 시간을 보냈다! 

이렇게 낙오 없이 끝까지 완주하게되어 너무 기쁘게 생각한다!

 

이때의 노력을 잊지말고 앞으로 더 많은걸 노력해서 좋은 결과가 있었으면 좋겠다!!

 

* 스파르톤 공부 목표 마무리!!

1. 앱개발종합반 복습하기

    → 앱개발종합반 3주차 복습 완료!

2. 회사 앱을 내가배운 React & Expo 를 활용해서 만들어보기

    ※ 실제 기능구현은 화면을 모두 그린다음 시도해보는걸로!! 

    → 시간관계상 시도하지못했다..ㅠ 하지만 내 9월달 목표였으므로 틈틈히 공부해서 9월중으로 완성해볼 생각이다!

 

끝으로 내가 지금까지 혼자 공부하고 있었다면은 이렇게까지 열정적으로 하지 못했을거라 생각하고

온라인에서 수업을 듣는 많은 사람들을 위해 이렇게 까지 노력해주시는 스파르타코딩클럽에 다시한번 감사의 인사드립니다!

앞으로 많은 좋은 강의 부탁드립니다.

 

 

https://spartacodingclub.kr/?f_name=%EA%B0%95%ED%99%8D%EC%88%9C&f_uid=6044be3eea76fe086b066ce7 

스파르타코딩클럽