나의 개발일지

레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술이다. 레이지 로딩을 적용하게 되면 최초 페이지 로딩 시간을 개선하고 최초 데이터 전달 양을 감소시키는 것이다 웹페이지를 로딩하는 기존 방식은 리소스들을 한 번에 받는 것인데 로딩 시간이 더욱 길어지고 사용자 경험을 하향시키는 것이다. 레이지 로딩은 주로 이미지와 영상들에 적용이 되고, 유저가 스크롤을 내려서 해당 이미지가 뷰포트에 들어오게 될 경우, 자비스크립트가 그 플레이스 홀더를 대체하면서 제대로된 사이즈의 이미지를 로딩하게 되는 것이다. 우선 lazy Loading을 사용하기 위해 라이브러리를 설치한다. https://www.npmjs.com/packag..

💡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..

반응형 구현 후, 모바일로 이것저것 보다가 구글 로그인을 시도했는데 오류가 발생하였다. 내가 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 단 두 개 뿐이다. 데이터를 불러올 때, 여기저기 많이 사용해서 무분별하게 데이터를 많이 불러온다고 생각해서 전체 데이터를 우선적으로 가져온 뒤, 하나의 쿼리키를 사용하고 로컬 로직에서 가공하여 사용하면 어떨까를 생각했다. 하지만 분명 장단점이 있기에 정리를 해보면서 어떻게 사용해야 할지 생각..

검색 기능을 위해 Algoria 써보기로 했었다. (지금은 무산되었다.. 최적화가 우선순위였기에..) 그때 여러가지 firebase tools를 설치했었는데 그 이후로 밑의 사진과 같은 오류가 떴다 Firebase throws an error: "Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds." 정말 많은 여러 문서를 뒤져봤지만 명쾌한 답을 내려준 문서가 없었다.. 하지만 몇몇 문서에서 공통적으로 말하는 것이 있었다 experimentalForceLongPolling를 true로 설정하면 된다고 했다 https://www.youtube.com/watch?v=hJMubeJXkWc 이 영상에서도 똑같이 문제해..

피드백 1. 설정해놓은 비밀번호 정규식에 충족하지 않으면 에러 메세지가 뜨지 않았다. 해결방법 새로운 정규식 표현을 사용했다 기존 : /(?=.\d)(?=.[a-zA-ZS]).{8,}/; ( 8글자 이상 ) 수정 : /(?=.*\d)(?=.*[a-zA-ZS]).{1,}/; (영문자 1글자, 숫자 1글자 이상씩 입력해야함.) 피드백 2. 이메일 및 비밀번호가 틀릴 시에 처음 한 번은 뜨는데 두 번째, 세 번째는 modal창이 뜨지 않았다. 이유는 에러메세지가 바뀜에 따라 modal이 열리도록 구현하고, signIn 함수에서 에러가 발생했을 때, setErrorMsg를 호출하는 로직이 빠져있었다. 기존 코드 useEffect(() => { if (errorMsg) { const onClickSave = ()..

mypage에 탭들이 있는데 이런 탭을 클릭했을 때, 주소창의 내용이 더욱 직관적이게 보이고 링크 공유를 했을 시에 사용자가 원하는 탭이 공유가 될 수 있게끔 하기 위해선 QuertString이 필요했다 QueryString이란 URL의 끝에 위치한 데이터로, 웹 페이지나 애플리케이션에 정보를 전달하는 데 사용된다. 쿼리스트링은 ? 문자로 시작하고, 파라미터와 값의 쌍으로 구성됩니다. 각 파라미터와 값은 & 문자로 구분됩니다. https://heenee.tistory.com/manage/newpost/128?type=post&returnURL=https%3A%2F%2Fheenee.tistory.com%2F128 쿼리스트링을 구현하기 위해선 useLocation이라는 훅이 필요했다 const navigat..

중간 발표 후, 검색 기능이 꼭 필요하다고 느꼈다 main page에서 검색을 하면 searchPage로 이동하여 검색 결과를 보여줄 예정이다. 검색이라는 버튼을 누르면 searchPage로 이동을 해야 하는데 반짝하고 이동했다가 다시 돌아왔다. import React, { useState } from 'react'; import { collection, getDocs, query, where } from 'firebase/firestore'; import { db } from '../shared/firebase'; import { NavLink } from 'react-router-dom'; function Search() { const [searchTerm, setSearchTerm] = useSta..

로그인 시 이메일 또는 비밀번호가 틀릴 시 custom hook을 만들어 에러메세지를 modal창으로 띄워주려고 했다. import { useCallback, useState } from 'react'; const usePrintError = (error: any): [string, (error: any) => void] => { const [errMsg, setErrMsg] = useState(error); const printErr = useCallback((error: any) => { switch (error.code) { case 'auth/user-not-found': return setErrMsg('이메일이 일치하지 않습니다.'); case 'auth/wrong-password': retur..

어느덧 중간 발표까지 시간이 흘렀다! 항상 느끼지만 시간은 너무나도 빠르다. 나는 이번 중간 발표를 맡게 되었고 떨리는 심장을 부여잡고 잘 마무리하였다.. 많이 연습한 덕분이다 발표 후 튜터님의 피드백을 토대로 중간 발표 회고를 작성해보겠다 중간발표 피드백 기록 react-query 관심사 분리 좋음 package.json 중 dev dependency 필요한 거 분리해도 좋을 거 같음 뉴스룸 크롤링 구현해보는 것도 방법 Calendar date를 moment가 아닌 dayjs로 구현 (용량 이슈) 최적화 꼭 필요: Router - lazy loading / Code splitting 등 구현해보기 ** lighthouse로 변경 전/후 사진 찍기 (성능 최적화) 도메인 구매하여 배포 댓글, 글 작성시 ..

내 게시물의 순서가 뒤죽박죽이다 이를 해결하기 위해 정렬이 필요했다. 파이어베이스 orderBy를 사용하면 간편하다. updatedAt을 기준으로 내림차순이 정렬했다 그러나 파이어베이스 에러가 떴다 색인을 설정 안해줘서 생기는 에러였다 에러 문구 옆에 있는 링크를 클릭한다 그럼 이런 창이 바로 뜨는데 그냥 바로 저장 버튼을 누르면 된다 컬렉션을 설정하는 데에 조금 시간이 걸린다 2-3분 ?.. 바로 적용이 되는 걸 확인해볼 수 있다.

이메일과 닉네임의 중복확인 기능을 구현했다 파이어베이스에서 입력한 값이 0보다 크면 '중복' 같으면 사용가능 이메일 or 닉네임! 하지만 닉네임 쪽의 중복확인을 누르면 가입하기가 되었다 가입하기 로직을 주석 처리해놔도 가입하기가 되는 것.. 진짜 2-3시간은 해맨 것 같다. 원인은 button의 onClick이었다. 나는 react-hook-form을 썼었는데 form 태그 안에 있는 버튼의 타입은 기본적으로 onSubmit인 것을 간과했다. button의 타입을 button으로 바꾸어주었더니 해결되었다

setDoc을 통해서 Firebase에 user 정보를 저장하려고 했었다 하 근데 타입스크립트 오류가 발생하였다 타입스크립트 정의하는 건 참 어렵다.. ㅠㅠ 오류가 표시된 곳에 호버를 해봤더니 이런 메세지의 오류가 떴다 (이 호출과 일치하는 오버로드가 없습니다.) 라는 오류가 제일 싫다.. 오류가 났던 이유는 userId가 없을 수도 있어서 타입 정의가 안됐어서 그런 것이었다. undefined가 아니라는 것을 확실히 알려주어야 한다 그래서 userId를 선언해주고 if 문의 인자값으로 넣어주었더니 해결되었다

로그인을 하면 Authentication 뿐만 아니라 Firebase DB에 저장해야 했다. user의 uid를 통해 다른 페이지에서도 활용해야 했기 때문이다. 그래서 단순히 addDoc을 사용했는데 문제점이 발견되었다. 내가 원했던 것은 users 컬렉션의 문서 이름이 uid로 저장이 되어서 uid로 간편하게 정보를 불러오고 싶었던 건데 addDoc으로 여러 방법을 시도해봤지만 되지 않았다. 열심히 서칭해본 결과 setDoc을 사용하면 된다는 것을 알게 되었다. 그럼 addDoc과 setDoc의 차이점이 뭘까? 우선 공식 문서를 살펴보자. https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko Cloud Firestore에 데이터 추..

최종프로젝트에서 마이페이지 쪽을 맡게되면서 또 다시 auth 쪽을 구현하게 되었다 그 대신 이번에는 파이어베이스로! https://firebase.google.com/docs/auth/web/start?hl=ko 웹사이트에서 Firebase 인증 시작하기 | Firebase Authentication Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분 firebase.google.com 파이어베이스 공식문서이다. 공식문서를 보면 쉽게 따라할 수 있다 회원가입 const signUp: SubmitHandler = async ({ email, p..

🔥 React / TypeScript 최종프로젝트🔥 개발 기간 2024.01.04 - 2024.02-07 프로젝트 명 망고(Mango) - 망해가는 지구를 고치자..! 프로젝트 소개 환경오염을 줄이는 다양한 팁과 정보를 제공하고 공유하는 '친환경 라이프' 사이트 환경보호 생활 습관 정보 제공 환경보호 제품 추천/무료나눔 나의 환경보호 습관(실천) 캘린더 관리 웹사이트를 소개하면서 환경오염에 관한 뉴스/영상 등 정보 제공 기술스택 React Firebase Typescript React-query / recoil 👤팀원 소개 및 WBS & Tasks (추후 각자 맡게될 기능을 더 추가할 예정) 리더 : 박혜민(Ashley) Write: 게시글 업로드 에디터 라이브러리를 활용하여 사람들이 게시글을 올릴 때 ..

2023.12.31 - [React/과제] - [React/TypeScript] 팀프로젝트 - 주특기 플러스 심화 / 주제는 자유 웹사이트 제작 [React/TypeScript] 팀프로젝트 - 주특기 플러스 심화 / 주제는 자유 웹사이트 제작 🔥 React / TypeScript 팀프로젝트🔥 요구 사항 : 아래 3가지 중에 한 가지를 반드시 활용해서 만들기 💡상 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용 무한스크롤 기능에 리액트쿼리 heenee.tistory.com 로그인 및 회원가입 페이지 * 토글 버튼을 통한 회원가입, 로그인 가능 메인페이지 * 읽고 있는 책의 progress bar를 통해 진행 상황을 알 수 있다 * 다 읽은 책이 완주 목록에 출력된다 도서검색 페이..

🔥 React / TypeScript 팀프로젝트🔥 요구 사항 : 아래 3가지 중에 한 가지를 반드시 활용해서 만들기 💡상 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용 무한스크롤 기능에 리액트쿼리 useInfiniteQuery 적용 form 유효성검사에 react-hook-form 라이브러리 적용 Yarn Berry 적용하여 깃헙관리 Supabase 적용 위 기능 중 2가지를 적용하여 프로젝트 만들기 💡 중 redux 외의 다른 전역상태관리 라이브러리 적용 debounce 또는 throttle(Lodash) 함수를 사용하여 API 요청이나 이벤트 핸들링 성능 개선하기 json-server-auth 적용 위 기능 중 1가지를 적용하여 프로젝트 만들기 💡하 redux-toolki..

🔥 TypeScript 개인과제 🔥 TypeScript버전으로 react-query를 이용하여 TodoList 만들기 (모든 구현 사항은 Typescript로 작성돼야 한다) Todo 항목 추가 하기 - 사용자가 새로운 Todo 항목을 입력하고 추가 할 수 있는 기능. Todo 항목 목록 표시 기능 - 각 Todo 하목은 고유 식별자를 가짐 Todo 삭제 하기 - 삭제 시 사용자에게 삭제 확인 요청 Todo 완료 상태 표시 기능 - 사용자가 Todo 항목을 완료했음을 표시한다 src > api > todos.ts import axios from "axios"; // 조회 const getTodos = async (): Promise => { try { const response = await axios...

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) 🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주 heenee.tistory.com 로그인 페이지 회원가입 페이지 실시간 유효성 검사 가능! 로그인 만료 기능 메인 페이지 리뷰 창 모달창을 이용한 예약 가능 예약한 곳은 마커가 로고로 바뀌면서 지도상에서 한 눈에 파악이 가능하다 마이페이지 (수정 및 삭제 가능) Keep - 현재 만족하고 있는 ..

⛔ 에러 발생 용용따리를 삭제하고 싶은데 삭제가 되지 않는다 화면엔 남아있고 json-server에는 삭제가 되었다 네트워크도 확인해보니 삭제가 잘 되었다 뭐가 문제였을까? 💡에러 해결 새로고침을 하면 그제서야 삭제가 된다 처음에는 비동기 처리 문제라고 생각했었는데 data값을 useState에 넣어놔서 안됐던 것이다 그래서 useSelector로 값을 불러오니 해결되었다 쿼리 썼으면 수월했을듯 싶다 ⛔ 에러 발생 리액트는 렌더링이 화면에 커멋 된 후에야 모든 함수를 실행하는데 return에서 데이터가 들어오지 않아서 undefined로 정의되어 오류가 나는 것이었다 💡에러 해결 && bookingData를 넣어줘서 해결 true && expression은 expression으로 실행되고 false &&..

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) 🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주 heenee.tistory.com Thunk로 리뷰 CRUD를 구현하는데 갑자기 이상한 에러가 떴다 `createSlice.extraReducers`에 대한 객체 표기법은 더 이상 사용되지 않습니다. 찾아보니 RTK 2.0 이후로는 createSlice에서 extraReducers를 사용할 때 ..

🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주변 병원 정보를 제공하고, 병원에 대한 리뷰를 볼 수 있으며, 작성 또한 가능하다 marker를 표시하고 모달 창으로 병원 스케쥴 관리를 할 수 있다 구현 기능 기획 홈페이지 병원 검색 병원 리뷰 확인 및 작성 스케줄 메모 우리 동네 병원 찾기 로그인 페이지 회원가입 및 로그인 마이페이지 병원 스케쥴 확인하기 나의 리뷰 확인, 수정, 삭제 와이어프레임 내가 맡게 된 기능은 리뷰 댓글 CRUD이다 React-Thunk로 구현 후, Query로 다시 리팩토링을 해볼 예정이다

2023.12.04 - [React/과제] - [React] 리액트 심화주차 개인과제 (인증서비스가 들어간 FanLetter 만들기) [React] 리액트 심화주차 개인과제 (인증서비스가 들어간 FanLetter 만들기) 🔥 React 심화주차 개인과제 🔥 숙련주차 개인과제에서 각자 본인이 작성한 홈화면과 상세화면에 이어서 인증시스템을 적용시켜 리팩토링하기 홈 화면 UI 구현 (Create, Read) 상세화면 구현 (Read, Up heenee.tistory.com [Error/React] Redux TypeError: (...WEBPACK_IMPORTED_MODULE_5__.fanLetters) is not a function ⛔ 에러 발생 redux reducer 정의 시 reducers에서 s 를..

🔥 React 심화주차 개인과제 🔥 숙련주차 개인과제에서 각자 본인이 작성한 홈화면과 상세화면에 이어서 인증시스템을 적용시켜 리팩토링하기 홈 화면 UI 구현 (Create, Read) 상세화면 구현 (Read, Update, Delete) ( 본인이 작성한 팬레터에서만 수정, 삭제 가능 ) 로그인/회원가입 UI 구현 ( 로그인 해야만 팬레터 화면으로 진입 가능 ) 프로필관리 UI 구현 ( 프로필 이미지, 닉네임 변경 기능 구현 ) 팬레터 CRUD 를 위한 API 통신은 json-server 를 이용 인증과 프로필관리를 위한 API 통신은 제공된 jwt인증서버를 이용 fetch API 대신 axios 를 이용해 주세요 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가..