항해99 6주차(2021.4.5 - 4.11) WIL - 인스타그램 클론코딩, 미니프로젝트

이번주는 목요일 자정까지 인스타그램 클론코딩, 주말에는 리액트와 자바스크립트 보충 교육을 했다.

1. 클론코딩 인스타그램

먼저 결과물을 보자

instagram99.shop/

 

www.youtube.com/watch?v=ixMeFdVdCLs&t=98s

리액트 능력자인 동료의 하드캐리가 있어서, 사놓고 묻어 두었던 인스타그램 클론코딩 강좌의 도움이 있어서 이 과제는 무사히 마치는게 가능했다. 다행이다 정말.

나는 리덕스를 많이 이해하지 못하고 있어서 걱정이 많이 되었다. 다행이 리액트 능력자 그분(이하 리능자)에게 귀찮도록 물어서 코드 설명을 들으면서 이해를 하거나 내가 공부를 따로 하면서 코드를 보니 조금씩 이해가 되었다. 리액트 교육주에는 그냥 dispatch가 왜 나오는지 이해도 못하면서 시간에 쫓겨서 교육자료의 코드만 베끼다시피 했는데 이제는 컴포넌트 파일안에서 dispatch는 리덕스로 데이터를 보내서 변경되게 주문하는것, useSelector는 컴포넌트가 원하는 데이터를 리덕스 스토어에서 받아오는 것이니 둘다 필요하다면 컴포넌트 파일안에 기술되어야 한다는 것을 깨달았다. 그러고나니 리덕스를 쓰는 법이 이해가 하나씩 되었다.  

출처 : https://im-developer.tistory.com/158

출처 : https://velog.io/@shin6403/Redux-Redux%EC%95%BC-%EB%84%88%EB%8A%94-%EB%88%84%EA%B5%AC%EB%8B%88Part.1

리덕스를 이해하려고 구글링을 하면서 본 위 개념도들이 리덕스를 이해하고 코드를 쓰는데 도움이 되었다. 하지만 여전히 자바스크립트 문법을 많이 모르니 오류가 생길 때 디버그를 하거나 내가 스스로 코드를 짜는데는 한계가 있다는 걸 절감했다. 특히 리능자 그분이 코드를 척척 짜고 문제도 곧바로 해결하는걸 보고 아는 자는 저렇게 쉽게 해내는데 모르는게 많은 나는 시간을 많이 써도 해결이 안된다는 걸 느끼면서 리덕스를 다시 보는 것은 물론이고 자바스크립트를 더 배워야겠다는 결심이 서게 되었다.

2. 리액트-리덕스 보충 교육 

이번 주말동안은 약간 쉬어가는 기간이라 보충 교육 기간으로 잡았고, 리덕스를 이해하는 것을 목표로 삼았다. 클론코딩주에 썼던 코드들을 리뷰하면서 리덕스 코드와 자바스크립트를 이해하면 큰 도움이 될거라고 생각했다. 그래서 아래 이미지처럼 클론코딩의 코드들을 리뷰하고, 항해99에서 제공한 리액트 교육자료들을 보면서 공부했다.

 

3. 자바스크립트 보충 교육 (feat. 유튜브 드림코딩엘리의 자바스크립트 강의)

www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

초보 자바스크립트 입문자들의 구원자 엘리쌤

• 지금까지 항해99를 해오면서 가장 크게 후회하는 부분을 두가지를 꼽자면 css를 많이 배우지 않고 시작한 것, 자바스크립트를 배우지 않았던 것이다. 자바스크립트는 항해99 시작전 준비기간에 제공한 교육자료로 공부한게 전부였는데, 그나마도 제대로된 기본 교육이 아니라 교육의 일부로 살짝 있던 수준에 불과했다. 왜 나는 파이썬만 팠던걸까... 어리석었던 나를 반성하게 된다. 이제는 부딪히면서 하나씩 배우면 된다는걸 알았기 때문에 자바스크립트도 쉽게 보고 도전하는 태도를 갖췄는데, 이런 태도 교정이 항해99에서 얻은 큰 수확이다. 나는 항해99를 단지 취업으로 가는 준비기간뿐만이 아니라, 나 자신을 실전에 밀어 넣음으로써 문제 많았던 내 무의식을 성장하는 진취적인 무의식으로 탈바꿈하는 것이 목적이었다. 그 목적에 부합하게 내가 변하는 모습을 보니 어려운 와중이지만 기분이 좋을때가 많다. 

• 자바스크립트를 알지 못하니 리액트 사용법을 익히는데 모르는 자바스크립트 문법을 이해한답시고(모르는게 이해가 될리 없는데 붙잡고 앉아 있던 나... 안타깝다) 들여다 보느라 아까운 시간을 허비했다. 이제부터는 준실전이고 곧 찐실전이니 자바스크립트를 필수 부분만이라도 꼭 배워야겠다는 생각에, 콜백함수를 명쾌하게 가르쳐준 유튜버 드림코딩엘리쌤의 강의를 필수라고 생각하는 부분만 발췌해서 주말동안 들었다. 몰라서 답답해 뒤지... 아니 고생한 함수, 배열 부분을 들었다. 

• 정말 엘리쌤은 나라를 구한 사람에 준하는 대접을 받아야 하는게 아닌가 싶다. 이렇게 쉽게 설명하다니! vscode에다가 직접 코드 쳐가면서 따라할 수 있게 하고 그 연습파일들을 모아서 관리도 할 수 있었다. 일요일 오후에는 각잡고 듣는데 정말 홀린듯 들었다. 특히 배열에서 애를 많이 먹었던 reduce함수 사용법, forEach는 배열의 원소 하나하나를 호출한 콜백함수에 인풋으로 넣고 아웃풋으로 나오는 것들을 새 배열로 만들어 주는 것이란걸 알고 나니, 리액트 코드에서 forEach가 왜 그렇게 쓰이고 reduce가 왜 그렇게 쓰이는지 이해가 되었다.  시간이 날 때마다 틈틈히 들어두면 앞으로 과제 수행에 큰 도움이 될 것이다. 역시 알고 하는 거랑 모르고 코드만 베끼는거랑 천지차이다. 이렇게 배워서 앞으로 하는 일이 더 쉬워지게 해서 즐겁게 하는 것이 목표다.

4. 매일 목표 설정하는 습관 들이기

• 오늘 일요일에 문득 그런 생각이 들었다. 목표가 없으니 하나를 끝내면 다음 할게 생각이 안나고, 편한 것만 찾으려는 몸의 본능에 의해 말초적인 재미만 찾는구나라고 깨달았다. 그러면 어떻게 해야할까?

• 그럼 묵혀두고 안 쓰고 있던 플래너에다 오늘 목표를 써서 상기를 하자는 마음이 섰다. 그렇게 플래너에 오늘 목표를 상세히 적었는데, 애매한 이야기가 아니라 '특정 책 읽기' '엘리쌤 유튜브 이것 듣기' 식으로 실행을 지시해 놓은 행동 명령어로(동사형으로) 적었다. 그랬더니 적은 것의 80% 는 실행했다. 효과 만점!

• 앞으로 2주는 준실전, 나머지 기간은 찐실전기간인데, 그 기간만큼은 어영부영 보낼 수 없다. 더 빡세게 목표지향적으로 움직여야 하는 시점이니 하루 목표를 적고 상기하는 습관이 큰 도움이 될거라 믿어 의심치 않는다.

• 하루 목표 적기가 이렇게 효과가 있는걸 봤으니 이제 주간 목표, 월간 목표, 연간 목표, 향후 2년간 목표들을 하나씩 세워서 매일 상기할 작정이다.