나의 개발일지

검색 기능을 위해 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..

웹폰트를 사용할 때 고려해야 할 점을 말씀해주세요. WOFF2 : 용량 적음 Pre-Loader : 미리 불러오기 제일 좋은 방법은 OS 시스템 폰트 사용하기 리액트 프래그먼트에 대해 아시나요? React.Fragment는 React의 컴포넌트 구조에서 매우 중요한 역할을 합니다. React에서는 컴포넌트를 반환할 때, 그 컴포넌트는 반드시 하나의 부모 요소로 감싸져야 합니다. 하지만 때로는 불필요한 div나 다른 HTML 요소로 감싸는 것이 원치 않을 때가 있습니다. 이럴 때 React.Fragment를 사용하면 됩니다. React.Fragment는 그룹화된 자식 요소들을 반환할 수 있게 해주지만, 실제 DOM에는 별도의 노드로 나타나지 않습니다. 따라서 불필요한 마크업 없이 여러 요소를 렌더링할 수 ..

중간 발표 후, 검색 기능이 꼭 필요하다고 느꼈다 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로 변경 전/후 사진 찍기 (성능 최적화) 도메인 구매하여 배포 댓글, 글 작성시 ..

공통 질문 1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요? DOM(Document Object Model)은 웹페이지의 구성요소들을 트리구조로 표현한 것이며 가상 돔은 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 가상DOM을 이용하면, 실제 DOM을 조작하는 것보다 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가볍고 효율적입니다. 또한 가상DOM에서 batchupdate가 가능해졌는데, 예를 들어 인스타그램의 좋아요를 누를 때, 실제 DOM에서는 좋아요 하나를 바꾸기 위해 여러 개의 엘리먼트가 변경되어 여러 번의 갱신이 필요하지만, 가상 DOM에서는 모든 변경을 한 번에 모아서 한 번만 갱신하기 때문에 성능이 훨씬 향상될 것입니다. 2...

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

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