2. 결과물 URL + 캡쳐 이미지 2~3장

https://kmnkit.github.io/nwitter/#/

3. 자기소개

django 개발을 하다가 AI쪽으로 가고자 공부하고 있습니다.

현재 주로 머신러닝, 딥러닝쪽 공부하고 있습니다.

노마드코더의 현재 나온 유료 강의 모두 구매한 노마드코더 찐팬입니다.

4. 서비스 소개

느위터이긴 느위터인데....네...느위터예요....

트위터의 시그니쳐 컬러(?)인 파란색 계열을 적극적으로 사용하였습니다.

노마드코더의 리액트 강의에서는 주로 styled-components를 사용하지만 저는 이번에 프론트엔드에 scss를 사용해 보았습니다. 공부하려고 만드는 거니까요. 다른 건 다른 분들과 동일합니다.

또한 최대한 반응형으로 만들려고 했는데 모바일 크기를 먼저 만들고 나서 tablet이나 pc의 사이즈를 조절해 가는 쪽으로 해서 개발하였습니다.

5. 개발 과정(어려웠던 점과 해결방법)

(1) 제가 리액트를 거의 근 1년을 놓고 지낸지라 거의 다 까먹은 상태에서 리액트를 다시 만지게 되었습니다.

그래서 이번에 useEffect의 사용법에 대해 다시 익혔고, 공부가 되었습니다.

(2)안타깝게도 영상을 보면서 개발하기에는 현재 Firebase의 웹 버젼이 9로 올라 있다보니 그것을 적용하려면 영상을 보면서도 공식 문서를 봐야 서비스 구현이 되니 그것이 약간 수고가 더 드는 느낌은 들었습니다.

하지만 다행히 Firebase의 공식 문서가 매우 친절해서 금방 따라할 수 있었습니다.

이거 하면서 느낀 점이 "와 정말 firebase가 뚝딱뚝딱 개발이 가능하구나..백엔드 안 만져도 되니까 완전 편하네...!"라는 점이였습니다. 이 점은 니꼬쌤도 이 강의 소개에서 매우 강조하셨던 부분인데 정말 공감공감 할 수 밖에 없었습니다.^^

(3) 저 같은 경우 지난 토요일(18일)부터 시작했는데 책을 안 가지고 나오는 바람에 영상 60% 책 40%를 보면서 개발하였습니다.

책을 보면 영상을 막 봤다가 다시 돌려 봤다가 멈추고 봤다가 하는 수고(?)가 없어서 좋더군요.

(4) 이번의 가장 큰 어려움은 이 것입니다.

처음에는 이대로 그냥 강의에서 나온 부분만 코딩 끝내고 낼까 싶었습니다. 다른 공부가 지금 우선이기도 하고.. 

그런데 그냥 내기에는 너무 거저먹기라는 생각이 들었고, x위터의 핵심은 '피드의 절대적인 내림차순 정렬'과 '순차적인 로딩(인피니트 스크롤 사용)'이라고 생각했습니다.즉, 내림차순으로 피드를 표시하면서 동시에 그것을 n개(저는 10 단위로 고정시켰습니다) 단위로 순차적으로 로드 함으로써 데이터가 많아질 때를 대비하기 위한 움직임을 함께 넣었습니다. 이것은 공식 문서 + 리액트 챌린지를 했을 때 제가 유일하게 제출하지 못했던(ㅠㅠ) infinite scroll 코드를 참조해 가면서 구현했습니다.

그냥 내림차순이야 데이터를 내림차순으로 끌어오기만 하면 그만이지만...일정 개수로 끊어서 로딩해서 표시를 한다는 게 쉽지 않더군요.("어? 그거 겁나 쉬운데 무슨 소리야?" 하는 분이 계시다면 죄송합니다.) 어제 한나절을 이것에만 매달리다가 잘 안 돼서 제출을 포기할까 하다 마지막 미련(?)으로 다시 해 보니 되길래 이렇게 제출하게 되었습니다. 사실 이게 안 된 이유가..정말 사소한 이유 때문이더군요...^^ 코딩이란 게 다 그렇죠 뭐.

(5)반응형으로 하려다보니 css를 짜는 시간이 정말 많이 들었습니다. 이건 어느 분이나 다 그러셨을 거라 생각합니다.

(혹시 돌려보시는 분 중에 에러를 발견하신다면 적극적으로 제보해 주신다면 감사하겠습니다.)

6.앞으로의 계획

사실 지금 위에서 언급하였다시피 AI쪽 개발중이라 웹개발 공부를 전혀 손을 댈 수가 없었는데(AI가 공부할 게 엄청 많더군요....) 이번에 추석 덕분에 이렇게 도전하게 되었습니다.

제 원래 계획은 딥러닝을 적용한 모바일 어플리케이션을 만드는 것이기 때문에 지금 하고 있는 공부가 일단락 되고 나면 도전하다 어려워서 포기했던(...) 우버이츠 클론 수업을 다시 듣고 챌린지도 다시 도전 할 생각입니다. ^^ 

노마드코더 만세!!