나의 개발일지

MPA (Multi Page Application) 여러 페이지로 구성된 웹 애플리케이션이다. 전통적인 방식으로 jsp, php 등이 MPA 방식을 사용한다. 페이지 이동 시 서버로부터 HTML 파일을 전달받아 다시 렌더링을 하기 때문에 새로고침이 발생하고 이는 깜빡임이 나타나는 원인이 된다. 그렇기 때문에 페이지를 로드하는데 오래 걸리고 새로고침으로 인해 스크롤 위치, form, 포커스 등이 사라져서 사용자 경험에도 만족을 줄 수 없다. 반면, MPA는 SPA에 비해 SEO(검색 엔진 최적화)에 유리하다. 여러 페이지로 구성되어 있기 때문에 각각 키워드에 맞춰 meta tag를 추가할 수 있기 때문이다. meta tag는 웹페이지의 내용을 요약하는 기능을 하며, 이는 검색 엔진 페이지의 정보를 쉽게 이..

💡GitHub : https://github.com/hyeomin/final-project 💡Mango : https://www.mymango.today/ Keep 원활하고 적극적인 의사소통 자유롭게 의견을 말할 수 있는 분위기 상대방을 존중하는 말투 팀 노션을 활용하여 사소한 것이라도 메모 코드 컨벤션을 잘 지킨 것 commit msg를 가독성 있게 작성하고 자주 commit한 것 merge 상황 공유하고 conflict 방지를 위해 다 같이 merge 한 것 필수 기능 모두 구현한 것 github의 projects를 잘 이용한 것 각각의 기능의 유효성 검사 Problem 페이지 로딩시간 개선 firebase-backend 오류 react devtools를 적극적으로 활용 Try 시간이 더 여유로웠다면..

로딩 속도 개선을 위해 폰트 최적화가 필요했다 그러기 위해선 파일 용량 크기를 줄이거나 preload를 통해 성능을 개선하는 방법이 있다 1. otf , ttf 대신 woff2 파일 사용하기 & subset 폰트로 바꾸기 기존에 쓰고 있던 OTF 파일을 용량이 적은 WOFF2로 대체하면서 subset 폰트로 바꾸어 주는 사이트가 있다 https://transfonter.org/ Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @fo..

스켈레톤은 최종 프로젝트를 진행하며 처음 알게 되었다. 일상 속에서 그동안 많은 스켈레톤을 접했지만, 이것이 가져다주는 효과에 대해서는 생각해보지 못했다 매일 매일 사용하는 인스타그램 앱에서도 스켈레톤을 확인할 수 있었다. 아는 만큼 보인다고.. 이제서야 발견했다 ... 그렇다면 스켈레톤에 대해 정확히 알아보자 스켈레톤 UI는 사용자 인터페이스(UI)를 개발할 때 사용되는 디자인 패턴 중 하나다. 이 패턴은 로딩 시간이 긴 웹 페이지나 앱에서 사용자에게 진행 상태를 시각적으로 보여줄 수 있도록 도와준다. 스켈레톤 UI는 실제 내용이 아직 로드되지 않았을 때에도 사용자에게 페이지 구조와 레이아웃을 미리 보여주는 방식으로 작동한다. 이를 통해 사용자는 대기 시간 동안에도 인터페이스의 진행 상태를 알 수 있으..

모달이 뜨고 변경 전 프로필이 1초 정도 머물다가 바뀌는 오류가 있었다 기존 코드 const userProfileUpdateMutation = useMutation({ mutationFn: async ({ authCurrentUser, displayName, profileImage }: updateProfileInfoProps) => await updateProfileInfo({ authCurrentUser, displayName, profileImage }), onSuccess: (updatedUser) => { queryClient.invalidateQueries({ queryKey: [`${QUERY_KEYS.USERS}`] }); if (updatedUser) { authContext?.updat..

moment.js와 day.js는 둘 다 JavaScript에서 날짜 및 시간을 다루는 라이브러리다. 나는 moment.js를 통해 날짜를 받아왔다. 하지만 중간 피드백에서 튜터님이 moment.js보다 day.js를 사용하는 것이 좋다고 하여 리팩토링을 해봤다. 그렇다면 어떤 면에서 day.js가 moment.js보다 좋다고 할 수 있는지 알아보자. moment.js day.js 파일 크기 파일크기가 상당히 크다 62k (gzipped: 19.9k) --> 웹페이지 성능을 저하시킬 수 있다 moment.js에 비해 파일 크키가 작다 7.6k (gzipped: 3.2k) API 호환성 많은 개발자들이 익숙한 API를 제공하여 기존에 moment.js를 사용하던 프로젝트에서는 호환성을 유지하기 위해 mom..

반응형 구현 후, 모바일로 이것저것 보다가 구글 로그인을 시도했는데 오류가 발생하였다. 내가 mango 사이트를 들어간 경로는 카카오톡으로 링크를 공유하여 들어간 것이다. 403 오류 : disallowed_useragent 검색을 해봐도 해결을 해줄 수 있는 방법이 잘 나와있지 않았다. 어떤 블로그 말하길, 해당 브라우저(카카오톡)은 구글의 브라우저 정책을 준수하고 있지 않아서 로그인을 하지 못하니 다른 브라우저에서 시도해보라고 권하고 있다. 또한 보안 상의 이유로 웹뷰에서 구글 로그인을 차단하고 있다고 한다. 이를 해결하는 방법은 카카오 측에서 user-agent를 구글 측에서 허용하도록 하는 것인데 아직 해결이 안되었다고 한다. 다른 방법으로 시도하는 방법이 있다고는 했다. 하지만 그 방법은 우회하..

막막하기만 했던 반응형을 드디어 구현하게 되었다. 방법은 생각보다 간단했다 @media screen and (max-width: 431px) { } 라는 코드로 최대 넓이를 설정해주고 {} 안에 431px 미만일 때, 적용될 CSS를 쓰면된다. 만약 반응형 코드에 쓰지 않은 스타일이 있다면 원래 사용된 CSS로 적용이 된다. 즉, 431px 미만일 때, 이상하게 보여지는 CSS만 수정하면 되는 것 하다 보니, 반응형을 할 예정이면 무조건 같이 구현해야 한다는 것을 깨달았다. 처음부터 웹용으로만 만들다보니 잘 되지 않았다. 특히 스타일 컴포넌트를 구성하는 곳에서 어려움을 마주해야 했다 그래서 구조를 새롭게 짜거나 추가하는 경우가 꽤 있었다. 또한 다양한 넓이의 모바일이 존재했기 때문에 우리는 우선 아이폰 ..

마이페이지 내 게시물에서 게시물을 최신순으로 정렬하고 싶었다. 그래서 처음에는 쿼리 키로 데이터를 가져올 때, uid가 일치하는 것만 가져와서 오름차순으로 정렬을 했었다. 하지만 이 방법이 쿼리 키를 여러 번 호출하는 것 같아서 데이터를 한꺼번에 가져온 후 로컬 로직에서 가공하는 방법을 택했다. const getAllPosts = async () => { try { const postRef = collection(db, 'posts'); const querySnapshot = await getDocs(postRef); const posts: PostType[] = []; querySnapshot.forEach((doc) => { const postData = doc.data() as PostType; p..

다양한 query-key를 사용하고 있는데, 최적화를 위해 코드를 다시 살펴보았다. mypage에서 사용하는 것은 MyProfile.tsx에서 내 게시물 수, 유저랭킹 / HabitCalendar.tsx에서 날짜별로 게시물 수 / MyPosts.tsx에서 내 게시물 보여주기 / LikePosts.tsx에서 내가 누른 좋아요 게시물 보여주기가 있다. 하지만 Firebase에서 사용하는 컬렉션은 posts와 users 단 두 개 뿐이다. 데이터를 불러올 때, 여기저기 많이 사용해서 무분별하게 데이터를 많이 불러온다고 생각해서 전체 데이터를 우선적으로 가져온 뒤, 하나의 쿼리키를 사용하고 로컬 로직에서 가공하여 사용하면 어떨까를 생각했다. 하지만 분명 장단점이 있기에 정리를 해보면서 어떻게 사용해야 할지 생각..