솧디의 개발로그

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 로직 분리 전 한 컴포넌트 안에 기능로직과 뷰포..

{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를 사용함..

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