교내 축제 애플리케이션

0. 📝 바쁘신 분들을 위한 요약 인천대학교 축제 가이드 애플리케이션 소스 코드 인천대학교 축제에 관련된 모든 것을 확인할 수 있는 애플리케이션을 만들었습니다. 팀 프로젝트로 5명이서 진행했습니다. 프론트 3명, 백엔드 2명입니다. ReactJs, TypeScri

React의 외부에서 External Store 형태로 데이터를 관리할 수 있다.React의 외부에서 External Store 형태로 데이터를 관리했습니다.External Store로 관리한 이유는 '관심사의 분리' 때문입니다.React 입장에서 데이터가 어떻게 관리

카카오톡에 링크를 공유하면 썸네일에 정보가 보이도록 할 수 있다.뿐만 아니라 다른 곳에도 링크를 공유하면 썸네일에 정보가 보이도록 할 수 있다.링크를 공유해도 썸네일이 나오지 않으면, 사람들은 관심이 없습니다.사이트에 대한 핵심 정보를 썸네일에 보여주는 것으로 사용자의

카카오 지도 API를 이용해서 커스텀 지도를 만들 수 있다.카카오 지도 API를 이용해서 커스커스텀 타일셋1

🙋 이 문서를 보고 나면 팀 프로젝트를 하면서 스트레스를 덜 받을 수 있다. 나의 태도를 돌아볼 수 있다. 현재 상황을 객관적으로 바라볼 수 있다. 🧑‍🚀 문서를 쓴 이유 팀원들의 특징이자, 또 저의 특징이었습니다. 무단으로 지각 무단으로 불참 의견이 없고 수동적 귀찮니즘으로 일을 굳이 안 하려고 함 혼자만 다른 의견을 가졌는데 끝까지 포기하...

유저 이탈 방지를 위한 방법으로 로딩 화면을 고려할 수 있다.사용자 경험에 도움이 되는 로딩 화면을 알 수 있다.스켈레톤 로딩을 구현할 수 있다.저희 애플리케이션은 화면을 처음 그리는데 평균 1.6초, 완벽하게 그리는데 평균 1.72초가 걸립니다.실제로 사용해보면 로딩

웹 브라우저에 링크 공유하기를 구현할 수 있다.모든 웹 브라우저의 호환성을 고려한 링크 공유하기를 구현할 수 있다.

'안정감'이라는 키워드에 대해 생각해보게 된다.팀에게 가져야 할

🙋 이 문서를 보고 나면 이전 페이지로 돌아가면, 이전에 있던 위치로 이동하게 할 수 있다. 이전에 있던 위치로 부드러운 스크롤링으로 이동시킬 수 있다. 인프런처럼 구현할 수 있다. 👨‍🚀 이 기능이 필요한 이유는? 베타 서비스 기간동안 가장 많이 요청받았던

이미지 최적화를 통해서 애플리케이션 속도를 개선할 수 있다.이미지 최적화를 위한 다양한 방법에 대해 알 수 있다.아래 내용들을 잘 고려하신다면 사용성면에서 더 매끄럽게 만드실 수 있을 것입니다.우선, 이미지가 많다기 보다 첫 페이지 로딩이 긴건 에셋들의 크기가 커서 문

swiperjs 라이브러리를 이용해서 React로 스와이퍼 구현할 수 있다.

처음에는 실수를 했습니다. 피그마와 '비슷하게' 개발을 하면 된다고 생각했습니다. 하지만 굵기, 크기, 간격 등 모든 것이 예쁘게 보일 수 있도록 설계된 것이었습니다.저는 이 부분을 간과했고 피그마를 천천히 다시보면서 모든 부분을 피그마와 동일하게 수정했습니다.모든 부

"죄송합니다. 비주점 데이터가 바뀌었어요!"예상에 없던 관리자 페이지가 절실했습니다. 배달의 민족을 사용해보면, 리스트에서 원하는 가게를 선택해서 보고 리스트로 다시 돌아와도 불편함이 없습니다.이유는 원하는 가게를 선택하기 전에 리스트에 있던 위치를 기억하고, 그 위치

🙋 이 문서를 보고 나면 자연스러운 스크롤링의 Bottom Sheet를 구현할 수 있다. 네이버 지도와 유사한 Bottom Sheet를 구현할 수 있다. 모바일 웹 뷰에서 Bottom Sheet가 갖는 문제를 해결할 수 있다. 👨‍🚀 이 기능이 필요한 이유는?

🙋 이 문서를 보고 나면 MSW를 활용한 Mocking 작업을 할 수 있다. 백엔드의 API 작업을 기다리지 않고 구현할 수 있다. 임의적으로 API를 만들고 데이터를 넘겨받을 수 있다. 👨‍🚀 이 기능이 필요한 이유는? 백엔드에서 데이터를 받을 수 없는 상