프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

9월 7일 (화)

📚 TIL

프로젝트 배포 서비스 학습

• AWS EC2

• Github Pages

• Firebase

• Netlify

• Vercel

업무관리용 툴 Notion 프로젝트 코드 리펙토링

---

📮 Feelings

프로젝트 배포 서비스 학습

내가 진행했던 개인 프로젝트들에 대하여 배포를 통해 도메인을 얻는 과정을 Github Pages를 나는 활용을 많이 했었는데 오늘 편리하고 유용한 여러 배포 서비스들에 대한 간단한 사용방법에 대하여 학습할 수 있었다.

우선 Netlify와 Vercel의 사용이 굉장히 편리하게 느껴졌고 간단히 Github 계정과 연동하여 repo들을 배포할 수 있다는 점에서 굉장히 매력적으로 느껴졌다.

이를 통해 해보고 싶은 것이 생겼는데 나의 프로젝트에 대하여 api 호출 주소는 보안 처리를 하여 github에 public repo를 등록하고 Netlify나 Vercel을 통해 배포를 진행했을 때 보안 처리 된 API 키에 따라 내 프로젝트가 api 호출이 정상적으로 이루어지는지 시험을 해보고 싶어졌다.

이번 주 일정을 최대한 빨리 소화하고 본격적인 프레임워크 개발을 다루기전에 Vanilla JS 프로젝트의 배포까지 정상적으로 다루어보고 싶다.

업무관리용 툴 Notion 클론 프로젝트 코드 리펙토링

지난 주에 마무리한 Notion 클론 프로젝트에 대하여 대대적인 코드 리펙토링을 진행하였다.

단순 텍스트 저장을 담당했던 Editor를 Rich한 동작이 가능한 Editor로 기능을 개선하여 기초적인 마크다운 제목 태그 지정이 가능한 기능을 구현하였고, 편집중인 현재 페이지에 하위 페이지가 존재한다면 Editor 하단에 링크가 가능한 하위 문서 정보들을 나타내도록 개선하였다.

그 후 사이드바의 토글과 페이지 렌더링에 대해 라우팅이 아닌 history API를 활용하여 사용자에게 훨씬 깔끔한 UI를 제공하도록 기능을 개선하였다.

그 과정에서 사이드바의 중첩 태그들에 대한 hover 효과를 위해 관련 마크업에 대해 좀 더 자료들을 찾아보며 중첩 태그에서 각각의 태그들에 대해 독립적인 hover 효과만 나타나도록 하는 UI 개선에 성공하였다.

마지막으로 url을 통한 강제 접근에 대하여 존재하지 않는 링크 정보에 대한 예외처리 로직을 구현하여 페이지에 좀 더 편리하게 접근 가능한 코드를 개선하였다.

마치며 🙏

배포서비스에 대해 공부하며 해보고 싶은 것이 생겼다는 점이 일단 너무 인상적이다.

막막한게 아닌 내가 빨리 해보고 싶을만큼 흥미를 가졌다는게 기뻤고 api에 대한 보안 처리를 하고 나서 배포 과정이 성공적으로 이루어진다면 나중에는 간단한 api 구축 역시 다루어보고 싶다.

이번 주에 모든 것을 끝내는 것이 아닌 천천히 학습 능률을 올려 시간을 잘 쪼개어 이러한 공부를 더 진행하도록 노력해야겠다.

오늘은 컨디션이 좋았다고 느꼈고 평소 잘 구상이 이루어지지 않았던 코드들이 잘 구상이 되었고 그 결과 많은 기능들을 개선할 수 있었다.

이는 내가 계속해서 깊게 고민하였고 여러 코드들을 구현해보며 잘못된 코드 역시 구현해보았기에 가능했던 결과라고 생각한다. 결국 헛된 시간은 없었다고 깨닫게 된 소중한 시간이였다 🙏

---

📅 Future Action Plans

• 무한 스크롤 UI 구현

• 디바운스와 스로틀 개념 학습