⭐소소한 수정 사항
⭐페이지마다 앱 Title 바꿔주기
브라우저 탭에 뜨는 요 App title 부분에 App 제목과 더불어 특정 페이지에 걸맞는 타이틀이 옆에 뜨도록 페이지마다 코드를 삽입해 주었다.
useEffect(() => {
const titleElement = document.getElementsByTagName("title")[0];
titleElement.innerHTML = "My Little Task Manager - Home";
}, []);useEffect에 빈 배열을 deps로 전달해서 컴포넌트가 처음 마운트 될 때 실행되도록 하고, 내부에 DOM을 조작하는 코드를 넣어 주면 끝!
⭐Open graph 설정
App을 카카오톡을 비롯한 SNS에 공유할 때 공유될 썸네일, 제목, 간단 설명을 Open Graph 메타 태그를 삽입하여 설정해 주었다.
<meta property="og:url" content="https://my-little-task-manager.web.app/" />
<meta property="og:title" content="My Little Task Manager" />
<meta
property="og:description"
content="Manage your day with To-do lists, Diaries, and Wish lists!"
/>
<meta property="og:image" content="%PUBLIC_URL%/assets/thumbnail.png" />썸네일을 조금 더 기깔난 걸로 하고 싶었지만 마땅한 게 없는 관계로 로그인 화면에 있는 undraw 일러스트로 대체했다.
공유하면 요로코롬 뜬다!
⭐코드 정리
기능은 그대로 두고 가독성이나 통일성을 위해 코드의 순서 등을 조정했다.
-
React를 비롯한 다른 라이브러리 import 코드를 상단에 두고 컴포넌트나 인터페이스 import 코드는 아래에 따로 분류했다.
-
주석을 이용해서 Styled-components와 일반 Component, 그리고 따로 분리한 데이터 변수들을 구분지었다.
-
주석은 기본적으로 영어로 작성하되, 영어로 설명하면 너무 길어지거나 바로바로 읽히지 않는 설명들만 한글로 작성했다.
-
인터페이스 파일로 분리되지 않은 타입과 인터페이스를 옮기고, 필요한 부분에 import했다. 같은 구조로 이루어진 인터페이스는 중복을 피하기 위해 하나를 재사용하는 식으로 코드를 줄였다.
⭐Firebase로 배포
이번에는 Github page와 Netlify 대신 Firebase로 배포해 보았다. Firestore와 연동시키지 못해서 배포라도 이걸로 해보고 싶은 마음 반, 이전에 안 써본 것으로 배포해보고 싶은 마음 반이었다(ㅋㅋㅋ)
Firebase 사이트가 시키는 대로 VSCode 터미널에 명령어를 입력해서 Firebase를 프로젝트와 연결시킨 후, build를 마친 상태에서 firebase deploy 명령어를 통해 배포했다!
⭐성공적으로 배포한 My Little Task Manager
⭐로그인 & 로그아웃
⭐404 페이지
⭐홈 & 투두리스트
⭐다이어리
⭐위시리스트
⭐개발자 소개 페이지
이 페이지는 사실 없어도 되는 페이지인데 날리기 아까워서 나를 소개하는 용도로 남겨 두었다. 회원가입 기능을 구현해서 유저가 가입 시 입력한 데이터를 여기에 띄워주고 수정 및 저장까지 했으면 완벽했을텐데...!
앞으로 토이 프로젝트를 하게 되거든 꼭! 꼭! 꼭! 회원가입 기능을 구현해 보고 싶다. 공부해서 성장하자...!
⭐마지막 회고
개발 공부를 시작한 이래로 가장 많은 시간과 정성을 쏟은 프로젝트가 이렇게 완성되었다. 5월 19일에 첫 커밋을 했으니 한 달이 넘게 걸렸는데, 짧다면 짧고 길다면 긴 시간이었다.
My Little Task Manager가 내게 있어서 중요한 의미를 갖는 이유는 다음과 같다.
우선, 이전에 바닐라 JS로 만들었던 프로젝트를 리액트, 리덕스, 타입스크립트로 리팩터링한 결과물이다. 디자인과 초기 컨셉은 그대로 살리면서 그 당시에는 구현하지 못한 기능을 100퍼센트는 아니지만 꽤 만족스럽게 구현했고, 그 과정에서 프로젝트의 완성도를 높이기 위해 리덕스와 타입스크립트까지 무사히 적용시켰으니 중요하지 않을리가.
그리고 전에는 개발을 시작하던 당시에 쓰던 언어 그대로 하나의 언어만을 이용해서 개발을 했었다면, 이번에는 중간에 자바스크립트를 타입스크립트로 바꾸면서 사용 언어의 변환(?)을 경험할 수 있었다. 실무에서는 겨우 이 정도의 작업은 아무 것도 아닐 테지만, 어찌됐든 내 입장에서는 타입을 하나하나 정의하고 strict 단계를 높여가면서 여러 에러를 해결하는 과정이 꼭 필요한 과정이었다고 생각한다. 이것도 결국에는 유지보수 아니냐고!
서버와 DB에 연결시키지 못한 점은 아쉽지만, 그래도 무사히 완성해서 배포했다는 데에 의의를 두고 싶다. 지금은 안 되더라도 늘 그랬듯 더 성장해서 다음 번에는 할 수 있을 테니 걱정 따위는 하지 않으려고 한다.
이제 완성된 프로젝트와 그간 기록한 개발일지를 토대로 내 프로젝트를 온전히 내 것으로 만들고, 지원을 위해 CS 공부에 집중해야겠다. 7월에는 취업할 수 있기를...~
