꾸준하게 거북이처럼

소감최근 까지 팀 프로젝트를 우선적으로 신경쓰느라 2주간 프리코스는 그저 구현에만! 집중했습니다. ㅠㅠ 객체 지향적으로 class를 나누고 파일 분리도 했으면 좋았을걸 아쉽습니다. 3주차부터는 공부하면서 적용할 예정이에요!!!마감 시간 전에 제출을 하고, 오늘 다른 분들의 코드를 구경했는데 엄청 깔끔하고 파일 구조도 MVC패턴으로 나누어 구현하신 분이 많았습니다. 테스트 코드도 정말 신경을 많이 쓰신게 보였습니다. 어쩜 저렇게 코드를 보기 좋게 만드실까..저는 아주 오랜만에 class를 사용했고 어색해서 함수만 나누는데에 집중하느라 파일 구조는 고려하지 않았네요.. ㅠ이렇게 멋진 코드를 읽으며 참고해서 3주차 과제는 MVC를 적용하거나 파일을 분리해서 코드를 설계해보겠다고 다짐했습니다!!!!! 이렇게 참..

문제 상황 무한 스크롤을 구현했는데 문제가 있었다. 처음 렌더링이 되자마자 page가 setState에 의해 +1 증가가 되어서, 뒷 페이지가 먼저 렌더링 되었다. 여러 블로그글을 찾아본 결과, isLoading라는 상태값을 추가해서 페이지가 로딩 중이면 page+1 가 되지 않도록! 코드를 아래처럼 수정했다. import React, { useState, useEffect, useRef, useCallback } from "react"; const MainPage = () => { //... const [postList, setPostList] = useState([]); const [page, setPage] = useState(1); //.. const [isLoading, setIsLoading]..

head나 body 태그 중 어디에 script 태그 넣느냐에 따른 차이를 알아 보았다. 추가로, script 태그에 속성으로 defer,async가 있는데, 이 친구들이 어떤 역할을 해주는지 알아보자. 1. head 태그에 포함시킬 경우 - HTML 파싱하던 중에 JS 파일을 받아오고 실행한뒤, 다시 HTML을 파싱을 한다. - JS 파일 크기가 클 경우 렌더링이 오래 걸려서 사용자가 페이지를 보기까지 너무 오래 걸릴 것이다. - DOM 객체 생성 전에 HTML을 조작하려고 문제 발생 가능. script가 존재하지않는 dom을 건드리는 dom API을 사용한다면 에러가 발생할 수 있다. 2. body에 포함시킬 경우(body 내 하단에 추가) - HTML 파싱을 먼저 진행한 후 JS파일을 받아오고 실행..

let과 const 는 실제로 변수 호이스팅이 발생하지 않는 것 같지만 발생 한다고 Modern JS Deep Dive 책에 나와있다. 참고로 호이스팅은, 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 현상이다. console.log(foo);// ReferenceError: foo is not defined let foo; 위의 예제에서는 var일 때와 달리, 에러가 나버려서 마치 호이스팅이 일어나지 않는것 같아 보일 수 있다. 교재를 읽어보았지만, 정확하게 let, const도 변수 호이스팅이 발생한다고 말할 수 있는 이유는 무엇일까? 더 예제를 찾아보았다. name = 'hello' // ReferenceError: Cannot access 'name' before initializati..

문제라고 느낀 계기 find, sort, skip, limit 를 가지고 페이지 추가로 불러오는 기능을 구현하려던 중, 이상하게 sort가 제대로 안된다는 느낌을 받았다. 더 불러오기 버튼을 누르니, 이어서 불러오는 것이 아닌, 이전에 불러왔던 것도 겹쳐져서 불러오고, 이상했다. 문제의 원인 이유는 바로 sort 기준이 명확하지 않아서다.✨ 나는 글을 인기순으로 정렬을 댓글 개수로 기준을 정했는데, 댓글 개수가 0인 글이 여러개여서(중복) 정렬 기준이 명확해지지 않았던 것이 이유였다. 아래 공식 문서를 보면 한 field를 기준으로 sort할 때, 중복되면 any order return 한다고 한다. 문제 해결 위의 공식 문서에서 말하듯, 기준이 명확해지지 않는 경우에 이럴 때는 mongoDB에서 자동으..

고민했던 것 useMutate를 이용해서 자동으로 댓글 업데이트가 되도록 구현을 했지만, 이후에 '댓글 수정이 완료되었습니다!' alert같은 이벤트 이후 처리 부분을 어떻게 할지 고민했다. 해결한 방법 useMutate에서 제공하는 isSuccess를 이용해서 useEffect로 이후 처리를 했다. 하지만 이 방법은 먼가 코드가 깔끔하지 않았다.. 더 찾아보니 mutateAsync 를 제공해서 이걸 사용하여 이벤트가 발생하면, 비동기 처리함수로 이후 동작을 처리할 수 있을 것 같았다. 개선해보기✨ 이전 코드 const { mutate: editMutate, isSuccess: isEditSuccess, isError: isEditError, } = useEditComment(comment.postId,..

사용하게 된 계기 🧐 개인 프로젝트를 하다가, 댓글을 입력한 뒤에 새로고침없이! 자동으로 업데이트 된 댓글 목록을 불러오게 하고 싶었다. 그래서 react query를 이용해서 useQuery, useMutate를 이용해서 데이터 가져오기, 수정 및 삭제 API 요청 용도로 사용해보기로 했다.! 1. react-query 설치 npm i @tanstack/react-query 2. 앱 최상단에 provider로 감싸주기 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient();// => queryClient 선언해주기 const root = ReactDOM.cre..

useRef를 이용해서 모달 외부 화면 클릭시, 모달이 사라지도록 구현해보고자 한다. 1. ref = useRef() 2. modalCloseHandler() 정의 3. useEffect 내에서 addEvenlistener, removeeventlistener 사용. 4. 모달 감싸는 element tag에 ref 적용. const Comment = () => { const ref = useRef();//***** useRef 사용. const [modalFlag, setModalFlag] = useState(false); const modalCloseHandler = ({ target }) => { // 모달이 열려있고, ref 영역이 아닌 영역클릭시, 모달 닫기. if (modalFlag && !re..

populate을 사용하면 objectId가 참조하는 다른 document를 조회할 수 있다. (document가 모이면 collection) 예를들어, 게시판 글 상세보기에서, 해당 글에 대한 글쓴이 정보가 필요할 때, populate 기능을 사용해볼 수 있다. populate를 사용하려면 먼저, 아래와 같이 post스키마를 author 필드를 정의한다. Schema import mongoose from "mongoose"; const postSchema = new mongoose.Schema( { title: String, content: String, author: {// ** 이부분 ** type: mongoose.Schema.Types.ObjectId, ref: "User", }, }, { co..

🤔 이 두가지의 차이점은 뭘까? 1. useState는 state의 값이 달라질 때마다 컴포넌트가 리렌더링 됨. 2. useRef는 ref값이 변한다고 컴포넌트가 리렌더되지 않는다. useRef 특징 - DOM 엘리먼트 가리키는 용도로만 사용되지 않음 ( 지금까지 그렇게만 사용해 봤다..) - state와 달리 값의 변화에 의한 리렌더링이 발생하지 X - current 속성을 통해 어떤 값이라도 들고 있을 수 있는 저장 역할해줌. => 컴포넌트의 고유한 값을 저장할 방법으로 useRef를 이용할 수 있음. 📌 결론 1. state는 컴포넌트의 생명 주기와 밀접한 연관이 있는 요소를 저장하는 것이 적합하다. 2. ref는 렌더링과 관련이 없는 값을 저장하게에 적합하다. 참고 [React.js] useRef..