1. 결과물 URL

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

트위터 새 대신 귀여운 물고기 아이콘을 넣고 Fish의 F를 따서 Fwitter입니다!

구글계정 로그인도 가능하고, 게스트용 계정도 만들어 두었으니 로그인하기 귀찮으신 분들은 활용해 주세요 :) sign in 눌러서 로그인창으로 바꿔주신 뒤 이메일은 [email protected], 비밀번호는 password 입력하시면 됩니당ㅎㅎ

자세한 설명은 서비스 소개에서 하겠습니다! ❤ 

2. 자기소개

안녕하세요, 펭귄을 사랑하는 대학생 코린이입니다! :>

웹개발은 이전에 장고는 아주 약간 다뤄봤는데, 리액트는 이번 <Do it! 클론 코딩 트위터> 책으로 처음 접하게 되었습니다! 리액트는 거의 일주일차인 완전 코린이네요😂

리액트와 자바 스크립트에 대해 아무것도 모르는 상태로 추석 연휴 동안 책 한 권을 끝내고, 주말까지 열심히 영혼을 갈아 넣어서 추가 기능들을 만들었습니다 :)

기능 하나 구현하는데 몇 시간씩 쏟을만큼 힘들었지만, 그래도 어느 정도 제가 원했던 기능들이 들어간 모습을 보니 뿌듯하네요ㅎㅎ 이게 코딩의 매력일까요?

책에서 설명도 잘해주시고, 재미있게 만들어 주셔서 며칠만에 책을 끝내고 새로운 기능까지 열심히 구글링해서 넣을 수 있었던 것 같아요! 좋은 책 만들어주신 니꼬쌤에게 감사의말씀을 드립니다😊

Footer 슬리퍼를 목표로 열심히 코딩했습니다!🙃

아직 많이 부족하지만, 귀엽게 봐주시면 감사하겠습니다!🐥

3. 서비스 소개

① 글씨체 변경, 줄 간격 넉넉히!

글씨체는 크게 안 달라져서 모르실 수도 있지만 나름 로컬 파일에서 로딩 없이 구현하려고 열심히 노력했습니다ㅠㅠ 가독성이 중요하니 줄 간격도 잘 챙겨주고요! :>

② 트윗 오래된 순/최신순으로 변경 가능하게!

Older / Newer 버튼을 누르면 트윗이 오래된 순/최신순으로 정렬될 수 있게 했습니다 :> 열심히 구글링하면서 처음으로 JS를 메인으로 스스로 기능을 추가해본 순간입니다ㅎㅎ

③ 색깔 변경✨✨

브러시 모양을 누르면 저렇게 색 파레트가 뜨게 됩니다!

총 4가지 색깔테마를 준비했어요✨

여기서 원하는 색깔 파레트를 눌러주면~~ 🔽🔽

이렇게 배경색, 아이콘색, 트윗입력창 색이 바뀌게 됩니다 :>

간단한 일처럼 보이지만, 글자색/배경색/테두리색을 모두 바꿔야 했고, class 이름으로 속성을 지정한 뒤 같은 이름의 속성을 찾아서 모두 변경하는 일이 생각보다 어려웠습니다😂

결국 해냈을 때 너무 기뻐서 소리도 질렀던ㅎㅎ.. 제일 만족스러운 기능입니다!

나중에 더 능력이 생긴다면 사용자가 원하는 색으로도 바꿀 수 있게 만들면 좋겠네요🐥

④ 사진을 큼직하게!

책에서는 사진이 너무 작은 크기로 나와서ㅠㅠ 사진을 크게 바꿨어요 :>

시원시원해서 보기 좋죠ㅎㅎ!?

⑤ 게시글에 날짜 표시

⑥ 게시글에 유저 표시(개발중)

날짜표시! 원래 책에서는 timestamp로 저장했었는데, 이걸 예쁜 날짜와 시간으로 바꾸는 것도 코린이인 저에게는 힘든 일이었어요😂 열심히 검색하고 무언가를 import한 끝에 성공해냈답니다!

유저 표시는 이름으로 표시하고 싶었는데, uid에서 유저를 불러와 displayName을 출력하는 방법을 모르겠어서 uid의 첫 세글자만 보이는 것으로 일단 이번 버전을 마무리 했습니다😥

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

JS와 리액트의 기초가 없었던 점이 가장 힘들었습니다😥 클론코딩에 집중하다보니 빠른 시간 내에 서비스를 만들 수 있었지만, 몸으로 부딪혀서 알아가는 느낌? 책을 따라하는 것에는 문제가 없었지만, 스스로 기능을 추가하다보니 기초가 부족한 게 더 느껴졌습니다ㅠㅠ

이번 프로젝트에서는 직접 구글링해서 필요한 부분의 기본 원리를 알기도 하고, 여러 코드를 넣어보면서 해결하기도 했지만 다음에 더 멋진 프로젝트를 완성하기 위해서는 기초 공부를 꼭 할 계획입니다!😝

5. 앞으로 계획

먼저 리액트와 JS의 기초 공부를 하고, 저만의 사이트를 만들어 보고 싶습니다!

동적으로 작동하는 페이지가 정말 흥미롭다고 느꼈고, 더 멋진 프로젝트들도 진행해 보고 싶다는 마음이 들었습니다🤗

긴 글 읽어주셔서 감사합니다 :)