프로그래밍/Project

📖 엘리스에서 2차 프로젝트를 마치고 🌱 GitFarm이란? GitFarm은 Git + Farm의 합성어로 농장을 컨셉으로 하여 Git 잔디 관리를 즐겁게 할 수 있도록 도와주는 서비스다. 개발자는 꾸준한 공부를 해야 하는데, 공부한 내용을 기록으로 남길 때 1일 1커밋을 주로 이용하곤 한다. 커밋 습관을 만들고 유지하도록 도와주어, 장기간 목표를 달성하고 성취감을 주기 위하여 GitFarm 프로젝트를 기획하게 되었다. GitHub - h1jun/GitFarm: GitFarm GitFarm. Contribute to h1jun/GitFarm development by creating an account on GitHub. github.com 🌟 GitFarm만의 차별점 기존 GitHub 페이지에서 제공하..

📖 엘리스에서 1차 프로젝트를 마치고 🐾 반려in이란? 국내 반려 인구 1500만 명 시대로 접어들었지만 그에 따라 유기되는 동물 또한 증가하고 있다는 기사를 접하게 되었다. 이러한 상황으로 펫샵이 아닌 보호소를 통해 유기 동물 입양을 독려하고 권장하는 "사지 말고 입양하세요"라는 캠페인이 진행되고 있다. 이러한 상황이 조금이나마 개선되기를 바라며 유기 동물을 입양에 관심 있는 사람들에게 정보제공 및 교류할 수 있는 커뮤니티를 제작하기로 결정했다. GitHub - h1jun/Pets-in: Pets-in Pets-in. Contribute to h1jun/Pets-in development by creating an account on GitHub. github.com ✍ 프로젝트에서 담당한 기능 - F..

🎯 리액트 웹폰트 적용 방법과 최적화 방법 윈도우와 맥에서 동일한 폰트를 보여주기 위해 웹폰트를 적용하기로 결정했다. 웹폰트는 용량이 커서 다운로드 시간만큼 로딩 속도가 느려진다. 따라서 최적화 작업을 해주는 것을 권장한다. 📝 웹 폰트를 다운로드해 웹 페이지를 렌더링 하는 과정 브라우저는 HTML 문서를 요청 브라우저는 HTML 응답을 구문 분석하고 DOM을 구성하기 시작 브라우저는 CSS, JS 및 기타 리소스를 검색하고 요청을 발송 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 구성하고 이를 DOM 트리와 결합하여 렌더링 트리를 구성 페이지에서 지정된 텍스트를 렌더링 하는데 필요한 글꼴 변형을 렌더링 트리가 표시한 후 글꼴 요청이 전달 브라우저는 레이아웃을 수행하고 콘텐츠를 화면에 그린다...

🎯 무한 스크롤 구현 (feat. IntersectionObserver, Event Delegation) TMDB API를 이용한 Vanilla JS SPA 홈페이지를 구현하고 있었다. 메인 페이지에는 Upcoming 영화 1개를 가져오고 아래에는 각 장르별 추천 영화 5개씩 가져오고 있었다. 무언가 부족해서 좀 더 많은 장르의 영화를 가져오려고 시도했지만 많은 데이터 요청으로 인하여 로딩 속도가 너무 느려졌다. 개선점을 찾으려고 고민하던 끝에 스크롤이 맨 밑으로 내려갔을 때 api를 요청해서 다음 장르의 추천 영화를 가져오는 무한 스크롤을 적용하기로 결정했다. 깃허브 코드 보기 🔍 결과 미리 보기 기존 화면 무한 스크롤 적용 화면 💡 생각 무한 스크롤 구현에 대표적인 방법에는 스크롤 이벤트 or Int..