솧디의 개발로그

현제 카냐에서 마이페이지를 개발하는 중에 데스크탑 버전을 먼저 만들고 데스크탑부분에서는 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 로직 분리 전 한 컴포넌트 안에 기능로직과 뷰포..

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

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

리액트 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..

React의 컴포넌트는 생명주기가 있고, 라이프 사이클의 순서에 따라 생성되고 업데이트되고 사라진다. 오늘은 컴포넌트의 라이프사이클에 대해 다뤄보고자 한다. LifeCycle 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다. 라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount)로 나눠진다. Mount: 처음 컴포넌트를 불러와서 생성하는 단계 Update: 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) ..

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 보통 돔트리형태를 지니고있어 돔트리라고이야기하기도 한다. DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 한다. 가상 돔 (Virtual DOM )이 나오게 된 이유 ? 기존 렌더링 방식은 1. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를..

컴포넌트란? 리액트에서 사용하는 기본단위라고 생각하면된다. 이 컴포넌트들이 모여 하나의 페이지가 되는것이다. function App() const a = [1,2,3,4,5] return ( {a} ); } 기본적인 형태는 함수의 형태이다. 즉 컴포넌트는 함수이다. 기존에 자바스크립트에서는 html따로 작성하고 js를 적용시켰다면 컴포넌트에선 자바스크립트와 html를 한번에 할 수 가있다. 컴포넌트 사용방법 함수의 형태에서 변수나, 값들을 정해주고 return을 통해 결과값을 HTML로 화면에 나타낼 수 있다. const App = () => { const users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3,..