[React, 사이드 프로젝트] 링모(LINGMO), 당신의 링크 모음

📒 당신의 링크 모음, LINGMO

---

(서버 내려간 상태입니다)

 

링모(LINGMO) - 당신의 링크 모음

주변 사람들이 자신의 링크 모음을 인스타그램 프로필에 올려두는 것을 보고 시작하게 된 사이드 프로젝트입니다.

 

비슷한 링크 모음 서비스를 찾아보며 완전히 따라잡기는 무리라고 생각해 기존 기능은 가져가되,
링모에서는 더 다양하고 자유롭게 색을 사용할 수 있는 것을 차별점으로 가져갔습니다.

 

회사를 다니며 혼자 기획과 디자인, 개발을 하다 보니 처음부터 많은 기능들을 넣기엔 무리가 있어
핵심 기능에만 집중하고 추후 더 다양한 기능들을 추가할 생각입니다.

---

📌 개발 기간

• 2023년 2월 ~ 2023년 3월 / 2023년 6월 ~ 2023년 7월

초반에 핵심적인 기능 구현은 한 달 만에 전부 끝났으나
개인적인 일정과 공부하며 블로그에 글을 작성하는 것 때문에 기간이 많이 늘어졌습니다.

 

특히나 서버 쪽을 거의 모르고 있던 상태에서 이것저것 해보려다 힘이 빠져
4월 5월은 손을 놨었으나 6월부터 정신 차리고 마무리했습니다.

---

📌 사용 기술

🔎 서버

자취방 구석에서 하루종일 돌아가는 노트북 서버입니다.

 

노트북을 맥으로 바꾸면서 서버 연습용으로 사용하고 있습니다.

 

윈도우를 밀어버린 후 Ubuntu 22.04.1 LTS를 설치했습니다.

---

🔎 시스템 구성도

nginx 컨테이너로 SSL 인증서를 적용한 Proxy Server와 빌드 파일을 전송하는 Web Server를 올렸습니다.

 

데이터 관리는 Firebase의 Firestore Database와 Storage를 사용했습니다.

---

🔎 주요 프레임워크 및 라이브러리

• typescript
• React 18
• styled-components
• recoil
• craco

---

📌 핵심 기능

제가 평소 사용해보고 싶었던 기술들은 이 프로젝트를 진행하며 원 없이 공부하면서 적용해 봤습니다.

 

그중에서도 글로 남기며 다시 한번 되새겼던 것들 위주로 소개드립니다.

 

🔎 Debounce

[React/TypeScript] Debounce, 일정 시간동안 발생한 이벤트 중 마지막만 실행

파이어베이스 무료버전을 사용하며 서버 읽기 쓰기 횟수를 최대한 줄여야 했던 와중에 발견해서 유용하게 사용한 기술입니다.

---

🔎 애니메이션

[CSS] Animation 최적화

[React] 스크롤 애니메이션, IntersectionObserver + styled-components

평소 B2B 웹 프론트엔드 업무를 하기 때문에 간단한 효과 외 애니메이션 효과를 사용할 일이 많이 없습니다.

 

하지만 동적인 움직임으로 일반 사용자들의 눈길을 끌기 위해 적극적인 애니메이션 효과가 필요하다 생각해 공부하며 적용해 봤습니다.

 

쉬울 거란 예상과 렌더링 최적화 문제와, 순서를 이리저리 바꾸기 위해
데이터를 식별 및 저장하고 타이밍을 맞추는 부분에서 꽤나 애를 먹었던 기억이 아직도 생생합니다.

---

🔎 배포 자동화

Github Action + Docker + Nginx + React 야매 CI/CD 완성기

 

Github Action + React + Firebase API KEY 숨기기

직접 서비스할 프로젝트여서 배포 자동화는 꼭 필요한 기능이라 생각했습니다.

 

개인 서버라 부담도 없겠다, 빨간색 fail 딱지만 수십 개 보면서 CI/CD 파이프라인 구축 과정을 몸소 느꼈으며

덩달아서 서버 쪽 지식과 경험도 함께 쌓을 수 있는 소중한 기회였습니다.

---

🔎 https 적용

[Docker + Nginx] Proxy Server에 Certbot으로 SSL 인증서 발급 받고 Https 적용하기

막상 해보니 별거 없었지만 이상한 곳에 막혀서 가장 힘들게 했던 ssl 적용 과정이었습니다.

 

덕분에 도메인 관련 지식을 쌓을 수 있었고, 한 번 해보니 다음부터는 수월하게 적용할 수 있을 것 같습니다.

---

🔎 검색 엔진 최적화

[React] SPA 사이드 프로젝트 검색 엔진 최적화(SEO) 끝장내기

구글과 네이버의 검색 결과에 노출되기 위해 SEO에 필요한 과정들을 적용했습니다.

 

티스토리 블로그를 최적화한다고 한번 해본 적이 있어서 수월하게 진행했습니다.

 

 

📌 후기

기획부터 배포까지 프로젝트의 전 과정을 온전히 혼자 진행해 본 것은 사실상 이번이 처음입니다.

 

필요에 의해 여러 분야를 공부하며 B2B 프론트 업무만으로 얻을 수 없는 값진 경험을 했다고 느낍니다.

 

마무리한다고 6개월 전 작성한 코드를 다시 보니 그때 최선이었던 코드가 마음에 안 들어서 근질근질하지만
한편으론 그동안 조금이나마 성장해 그 당시에 안 보이던 것들이 지금에서야 보인다고 생각하며 일단 마무리 작업을 하고 있습니다.

 

해야 될 일이 태산 같아 보여서 괜히 밍기적 거렸던 6개월,

돌이켜 보니 걱정만큼 결과물은 커다랗지 않지만

완성에 대한 압박감이 한 번에 해소되는 거 같아 너무나 시원한 기분입니다.

 

약간의 휴식을 취한 뒤, 리팩토링도 하고 기능추가도 하며

이번 프로젝트를 통해 얻은 경험으로 또 다른 도전에 대한 고민을 이어나가려고 합니다.