웹 프로젝트

Frontend 이미지 최적화하기

이미지 최적화를 하게된 계기한동대학교 온라인 졸업전시 프로젝트(One In Christ)에 1인 개발자로 참여했습니다. 참여하겠다고 생각한 순간부터 가장 먼저 떠오른 생각은 이미지 최적화였습니다. 왜냐하면 디자인학부 졸업 전시회의 특성상 이미지를 가장 많이 사용하고, 디자인 작품이다보니 이미지 용량이 20MB 이상 차지하는 것이 대부분이라 웹 성능에 영향을 미칠 것이라고 생각했기 때문입니다. 특히 작품들이 나열되어 있는 works 페이지의 경우 여러 작품들이 한 번에 로딩되어야 하기 때문에 웹서버로부터 이미지를 요청하고 응답받는 데 시간이 오래걸릴 것이라 예상했습니다. 이는 웹사이트의 성능을 낮추기 때문에 좋지 않은 사용자 경험을 야기할 것이라고 판단했습니다.이미지 최적화 방법1️⃣ 이미지 포맷 변경(..

AWS 프리티어 적용 범위

이미지 최적화를 위해 AWS S3와 CloudFront를 통한 CDN서비스를 이용하려고 한다. 나는 아직 프리티어 계정이 유효하기 때문에 S3와CloudFront의 제공 범위에 대해서 기록해놓고 과금이 나오지 않도록 조심해서 사용해보려고 한다. Amazon CloudFront (AWS의 CDN서비스)프리티어와 관계없이 모든 고객에게 월 1TB 데이터 송신, HTTP/HTTPS 천만건, CloudFront 함수 200만건 무료Amazon S312개월 동안 5GB 제공, GET 요청 20000건, PUT 요청 2000건 중요한 것은 아직 저 건수가 너무 추상적이다,, 실제로 돌려보고 체감을 해봐야 실제로 어느정도의 사용량이 있을 지 알 수 있을 것 같다. 해킹으로 인한 과금과 무료로 제공되는 지원을 넘었을 ..

FE 프로젝트 아키텍처에 대한 고민(feat. FSD 아키텍처)

프로그래머스 최종 프로젝트에서 프론트엔드 폴더구조에 대한 논의를 거쳐 FSD 아키텍처에 대해 공부하고 내용을 공유하기로 했다. FSD 아키텍처는 어떤 구조인지 살펴보며 이전에 사용하던 방식과 FSD 아키텍처를 사용했을 때를 비교하여 좋은 점을 살펴보고 우리 프로젝트에 적용했을 때 얻게되는 이점 또한 생각해보려고 한다. FSD 공식페이지 : https://feature-sliced.design/ Welcome | Feature-Sliced DesignArchitectural methodology for frontend projectsfeature-sliced.design공식문서에 다양한 서비스들의 깃허브 주소가 있다. 레퍼런스로 활용할 수 있을 것 같다.FSD(FeatureSliced Design) Arc..

[React] sitemap으로 SEO 작업하기

파드 동아리원들의 여러가지 성과가 생기면서 성과페이지를 추가로 만들게 되었다. 새로운 기수를 뽑기 위한 홍보 과정에서 성과가 유용하게 작용해야했기에 SEO가 불가피했다. SEO에 대한 경험이 없어서 좋은 기회라고 생각했고, 개발로 끝나는 것이 아닌 기록으로 남기며 공부를 해보려고 한다.1. 검색엔진 결과 페이지(SERP)검색엔진은 SERP를 만들기 위해 아래와 같은 과정을 거친다.크롤링 : 구글봇(웹 크롤러)이 웹페이지의 콘텐츠를 복사해서 모든 정보를 수집한 정보를 검색엔진으로 가져온다. 인덱싱 : 구글봇이 가져온 정보를 주제별로 색인해서 데이터를 보관한다.랭킹 : 색인된 콘텐츠를 검색 의도에 맞춰서 순위를 부여한 다음 사용자가 해당 키워드로 검색했을 때 랭킹 순서대로 결과를 제공한다.2. 사이트맵SER..

[Crop] 프로젝트 팀스페이스 생성!

프로젝트 시작 계기SSR에 대해 경험을 쌓고 싶어서 Next.js를 사용해봐야겠다는 생각을 했다.또, 그냥 "화면상으로 표시하고 완성!" 으로 끝났던 이전 프로젝트와는 다르게 긍정적인 사용자 경험을 만들어주기 위한 노력을 해보고 싶었다. 렌더링이 오래걸리는 페이지에서 시간을 줄여보고 싶었고,,,그니까 결국 성능 올리기 위한 경험의 갈급함이 커서 이를 중점으로 둔 프로젝트를 기획했다. 또 파드에서 프로젝트를 진행할 땐 오류해결을 기록할 시간이 정말 부족해서 하나하나 다 기록해놓지 못했다(아주 큰 실수였다)그때로 다시 돌아가 어떤 오류가 있었는지 살펴보는게 더 오래 걸릴 것 같아서 해당 프로젝트를 현재 시점에서 리팩토링을 진행하려고 하고,이번 프로젝트를 통해서 오류에 대해 깊게 공부하고 고민해서 기록해보려고..