프로젝트
웹 성능 최적화 - 1. 이미지
최근 개인적으로 진행하고 있는 사이드 프로젝트의 화면이다. gif 파일을 검색하고 공유할 수 있는 플랫폼인 giphy.com을 클론하고 있다. 스크린샷에서 알 수 있다시피 대부분의 data가 img, video 파일들이다. 현재 진행상황은 랜더링과 검색기능만 간단하게 구현된 상태이며, 추가 기능 구현에 앞서 더 나은 ui를 위해 성능최적화 작업을 진행 중에 있다. 라이트 하우스로 웹 성능을 측정해본 결과 형편없는 점수가 나왔다. 이미지 파일의 크기를 줄이기 위해 기존에 사용하던 img 태그 대신 next/image 를 사용하여 리팩토링을 진행했고, gif 파일형식 대신 webp 파일형식을 사용했으나 큰 차이는 없었다. 원인 분석 이미지 성능을 개선하기에 앞서 웹 성능에 주요한 영향을 미치는 요인들에 대해..
기획부터 배포까지, 첫 개인 프로젝트 회고
프로젝트 회고 여러 개발강의를 들으면서 따라했던 프로젝트를 제외하고는 한번도 기획부터 배포까지 혼자 프로젝트를 진행해본적이 없었다. 아무래도 전체적인 흐름을 파악하고, 여러가지 기술 스택을 도입하는 연습을 하기 위해서 배포된 개인 프로젝트가 있으면 좋겠다는 생각을 했고 이를 위해 진행했던 Jiphy 프로젝트를 회고 하고자 한다. 기획 오픈 api 를 활용할 것 어느 정도 복잡도가 있을 것 프로젝트를 기획하기에 앞서 가장 크게 고려했던 부분은 위 두가지였다. 처음엔 백엔드도 파이어베이스를 공부하여 간단하게 구현해볼까 생각도 했지만 api와 mock data를 만드는데 불필요하게 많은 공수가 들어갈 것이라고 판단하고 오픈 api를 활용하기로 했다. 또한 성능 최적화를 연습해보고 싶었고, 추후 다양한 기능과 ..
일주일만에 기획부터 배포까지?! (테오의 구글 스프린트 7기)
지난 4/20 ~ 4/25 6일간 참여한 테오의 구글 스프린트에 대한 회고를 해보려 한다. 벨로그를 하는 개발자라면 아마 한번쯤은 다 들어봤을 정도로 이제는 너무나 유명해져버린 테오의 구글 스프린트에 드디어 참여하였다. 동료 개발자의 강력한 추천으로 신청했는데, 간신히 자리가 딱 한 자리 남아있어서 운좋게 참여할 수 있었다. (이제 너무 유명해져서 오픈런 해야 신청할 수 있게 되어버린...🚴 🔥 ) 구글 스프린트가 뭐죠? 간단히 말하면 5일 만에 고객테스트를 진행할 수 있는 프로토타입을 만들어내는 개발방법론 중 하나이다. 테오의 구글 스프린트에서는 1 cycle 만 진행하고 끝냈지만, 이것을 cycle을 반복하면 빠르게 시장에 프로토타입을 출시하고 사용자들의 피드백을 받아 주차별로 보완해나감으로써 빠른 ..
React | 프립 클론 프로젝트
2nd TEAM Project 1차 프로젝트였던 마켓컬리 클론 프로젝트가 끝나고 곧이어 진행되었던 2차 프로젝트에서는 여가, 액티비티 공유 플랫폼인 프립을 클론하게 되었다. 이전 프로젝트 때 화면 구현조차 완벽하게 하지 못해 아쉬운점이 너무 많았고 2주 간의 프로젝트 기간 외에 추석연휴 1주가 포함되어 있어 사실상 3주라는 시간이 주어졌기에 개인적으로 많은 욕심이 났던 프로젝트이다. 하지만 예상치 못한 여러 난관들로 인해 이전 프로젝트 못지않게 많은 아쉬움을 남기고 마무리 했어야만 했던 두번째 팀프로젝트를 회고해보려 한다. 작업기간🔥 2021.09.13 ~ 2021.10.01 (추석 연휴 1주 제외) 기술스택 FE : 3명 React Javascript Styled Component BE : 3명 Dja..
React | 마켓컬리 클론 프로젝트
마켓컬리 클론 프로젝트 위코드 1차 프로젝트로 신선식품 새벽배송 플랫폼인 '마켓컬리' 클론 프로젝트를 진행하게 되었다. 이 프로젝트를 통해 나는 처음으로 다른 사람들과 함께 소통하고 협업하며 결과물을 만들어 내는 경험을 할 수 있었다. 비로소 개발자들의 업무방식을 이해할 수 있게 되었고, 개발자라는 직무가 그 어떤 직무보다 원활한 소통이 밑바탕이 되어야만 더 나은 결과물이 나온다는 사실을 배울 수 있었다. 작업기간🔥 2021.08.30 ~ 2021.09.10 기술스택 ⚙️ FE : 3명 HTML/CSS Javascript(ES6+) React SASS BE : 3명 Django Python PyJWT 구현 사항 상품상세페이지 메인페이지에서 상품 이미지를 클릭하면 query string url로 상품 상세..
