솧디의 개발로그

현제 카냐에서 마이페이지를 개발하는 중에 데스크탑 버전을 먼저 만들고 데스크탑부분에서는 outlet처리를 하여 카테고리별 컴포넌트가 나올수있도록 구성하였다. 이 후 미디어쿼리로 모바일 버전을 제작하며 outlet처리한 비지니스로직을 활용하기에 최대한 컴포넌트 재활용을 위해 모바일버전에도 outlet를 살리되 프로필부분을 전역관리해 쓰고자하였다. outlet처리한 로직을 모바일로 바꾸다보니 내가 쓴글을 클릭하면 아래와 같이 프로필과 함께 컴포넌트가 나왔다. 그래서 프로필부분을 전역으로 관리해 카테고리 클릭 시 나오지않게 하도록하였다. boolean타입만 받아오면 되는 로직이라 이것을 현재 사용하는 상태관리 라이브러리인 리덕스에 추가하기위해서는 많은 과정을 걸치게된다. [ REDUX 버전 ] 1. 리덕스 폴..

아래의 코드로 무한 스크롤 구현하니 로그인시 마이페이지 첫 겟요청시 리랜더링 이슈 발생, 새로고침해야 데이터가 캐싱되었습니다. const fetchPostList = async (pageParam) => { const res = await axios.get( `http://localhost:5001/posts?&page=${pageParam}&limit=6`,{ header:{ authorization, }, }, ); const { posts, isLast } = res.data; return { posts, nextPage: pageParam + 1, isLast }; }; function Posts() { const { ref, inView } = useInView(); const { data, s..

import { useQuery, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useDeleteDetailPost } from "../../querys/detail"; import axios from "axios"; import { Box } from "../../components"; import { Board } from "./board"; const MyBoard = () => { const B..

common 폴더를 components 폴더로 폴더명 변경 그에 따른 경로 설정 변경 만약 경로가 너무 복잡하게 엉킬 경우, common으로 되돌리기! componsnts 폴더를 container 폴더로 폴더명 변경 그에 따른 경로 설정 변경 container 폴더 하위에 있는 기능들을 UI로직과 비즈니스 로직으로 나눠 구분 UI로직은 각각 UI에 보여지는 이름으로 폴더명 작명 index.js UI명을 딴(폴더명과 동일한) 컴포넌트(확장자 jsx) styles.js ⭐️참고 구조⭐️ 폰트 사이즈 전체적으로 축소하기 theme.js 에서 폰트 사이즈 수정 모바일 style props명 작명 xl, lg, md, sm, xs 과 유사하게.. ✍🏻 비니지스,UI 로직 분리 전 한 컴포넌트 안에 기능로직과 뷰포..

이번 파이널 프로젝트에서 담당한 부분이 로그인과 회원가입 부분이였습니다. 처음해보는 파트라 항해를 시작하며 처음 접하게 된 상태관리 라이브러리가 Redux였기에 redux를 전 프로젝트부터 사용하던 도중, 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어나고, FE 상태와 BE 상태는 실제로 동기화되지 않고, Redux 를 활용해 프로젝트에서 전역 상태 (state) 를 관리를 할 때 서버 데이터를 활용하려면 반드시 Redux-saga, Redux-Thunk 혹은 RTK-Query 같은 또 다른 미들웨어를 사용해야 하기 때문에 이에 대한 처리는 직접 처리해야 한다는 불편함을 느꼈기에 더 좋은 방법을 찾아보던 도중 React-Que..

{data && data.length > 0 ? ( {data?.map(item = > { return })} ) : (작성한 게시물이 없습니다.) } ); }; 위 와 같이 프롭스를 보낼 때 삼항연산자로 조건을 걸어 데이터가 있으면 하위컴포넌트로 프롭스를 보내려고하였다. 하지만 계속해서 map 을 돌리려 할때마다 data부분이 오류가 났다. 상위컴포넌트에서는 조건을 걸어 사용하는것이 안되고 프롭스로 전체를 넘겨준 후 하위 컴포넌트에서 조건을 걸어 사용해야한다. {nickname}님이 작성하신 댓글입니다. 위 와 같이 전체를 프롭스로 넘기고 하위폴더에서 조건을 걸어 사용해야한다.

🔍 회원가입시 많은 인풋창들을 넣어 정보를 받게되는데 그때 label태그를 이용합니다. ❌ 라벨태그는 for속성을 넣어 인풋의 id같으면 연결되는데 for로 사용하면 오류가발생하였습니다. 여러분의 나이대를 골라보세요. 10대 20대 30대 40대 이상 🔼 위 와 같이 for를 사용했을때 오류화면발생 회원가입 id 😉 for ⇒ htmlFor로 수정하여 사용하여 오류를 해결하였습니다.

react-query react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. #사용하는 이유 저의 경우 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존 하게 됩니다. 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종(?)이 탄생하게 됩니다. (예를 들면 서버에는 이미 패치된 데이터가 클라이언트에서는 패치되기 전 데이터가 유저에게 사용되고 있는 것이라고 볼 수 있습니다.) 그래서 react-query를 사용함..

프론트엔드에서 목데이터로만 작업하여 막연하게 했던 작업을 백엔드와 서버통신을 통해 진짜 개발자가 된 느낌이였다! 처음 딱 서버에 연결이되었을때 팀원 모두 소리지르면 감격했다...!! 잊지모태.......🥹 하지만.. 바로 에러들이 엄청나게 터져버렸다..!!! 그중에서도 제일 화딱지가..직렬화오류..ㅠㅠ 하.... 작업들을 하며 적어놓았던 트러블슈팅 대대공개!!!! 백엔드 서버 연결 후 수정, 삭제 시 서버에 id정보가 가지않아 요청되지않음, 콘솔에서 415,400 error가 뜸 서버에 요청도 가지않음 -현재 415에러는 제이슨형식으로 보내지않아 그렇다고하여 헤드에 "Content-Type": "application/json" 제이슨형식으로 바꿔주는 코드를 넘겨주었으나 되지않음.. 서버연결하는 컴퓨터 껏..

리액트 AXIOS란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다 AXIOS 기능 브라우저 환경: XMLHttpRequests 요청 생성 Node.js 환경: http 요청 생성 Promise API 지원 요청/응답 차단(Intercept) 요청/응답 데이터 변환 취소 요청 JSON 데이터 자동 변환 사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원 AXIOS 설치방법 vs코드 터미널창 입력! yarn add axios api처리할 컴포넌트에 import import axios from 'axios'; AXIOS 사용방법 import axios from "axios"; const BASE_URL = process.en..