나의 개발일지

✔️ 문제 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

Page Router와 다른 점 가장 큰 변화는 페이지 라우팅 방식이다. Page Router는 Next.js의 기본 라우터로서, 각자의 파일이 'pages' 디렉토리 내에 위치하는 경우 자동으로 라우트가 생성된다. 예를 들어, 'pages/about.js' 파일이 있다면, 이는 '/about' URL로 접근할 수 있게 된다. ( 정적인 페이지 구조 ) App Router는 Next.js의 동적 라우팅 시스템으로서, 런타임에 URL 경로를 결정할 수 있다. '[param].js'와 같은 파일 형식으로 파일을 생성하면, 'param' 부분은 URL의 일부로 대체될 수 있다. 'pages.posts/[id].js' 파일이 있다면 '/posts/1' , '/posts/abc'와 같은 다양한 URL로 접근이 가..

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만 수정하면 되는 것 하다 보니, 반응형을 할 예정이면 무조건 같이 구현해야 한다는 것을 깨달았다. 처음부터 웹용으로만 만들다보니 잘 되지 않았다. 특히 스타일 컴포넌트를 구성하는 곳에서 어려움을 마주해야 했다 그래서 구조를 새롭게 짜거나 추가하는 경우가 꽤 있었다. 또한 다양한 넓이의 모바일이 존재했기 때문에 우리는 우선 아이폰 ..