072DATA

타입이란?타입은 값의 속성이나 메서드를 참조하는 방법 주요 타입boolean: 참/거짓을 표현number: 숫자 값string: 문자열 값Array: 배열object: 객체any: 아무거나 -> 치트키 같은 존재 사용하면 사실상 js가 되어버림커스텀 타입 선언타입은 기본 제공 타입 외에도 사용자 정의 타입을 선언할 수 있음 type Profile = { id: string; name: string; age: number; isMarried: boolean;} 함수의 타입 선언함수의 매개변수와 반환 값에도 타입을 선언할 수 있음 function add(a: number, b: number): number { return a + b;}const sum: number = add(1, 2);  타입 별..

타입스크립트란?타입스크립트 -> 자바스크립트를 기반으로 한 정적 타입 언어  타입스크립트의 주요 특징  정적 타입 시스템 -> 프로그램이 실행되기 전에 모든 변수와 함수의 타입을 확인하고 고정하는 방식 컴파일 타임에 모든 변수와 표현식의 타입을 확인하고 고정하여 런타임 오류를 방지함함수의 매개변수와 반환 값에 타입을 명시하여 잘못된 타입의 데이터가 전달될 경우 컴파일러가 이를 감지하고 오류를 발생시킴자바스크립트의 상위 집합:자바스크립트의 모든 기능을 포함하고 있기에 자바스크립트 코드가 타입스크립트에서 그대로 동작함자바스크립트로 트랜스파일되며 모든 브라우저에서 실행될 수 있는 자바스크립트 파일을 생성함향상된 개발 경험:코드 자동 완성, 실시간 오류 감지, 리팩토링 지원 등 다양한 도구를 통해 개발 경험을 ..

Toast란? Toast는 화면의 특정 위치에 잠깐 나타났다가 사라지는 간단한 알림 메시지를 제공하고사용자에게 빠르게 정보를 전달하거나 작업의 피드백을 제공하기 위해 사용됨 특징 일정 시간 동안만 화면에 표시된 후 자동으로 사라짐에러, 성공, 경고 등의 간단한 상태 메시지를 전달하는 데 적합함팝업과 달리 사용자의 작업을 방해하지 않으며 인터랙션이 필수가 아님 커스텀 상단, 하단, 왼쪽, 오른쪽 등 화면의 어느 위치에 표시할지 설정할 수 있음토스트 메세지가 사라지는 시간을 설정할 수 있음필요에 따라 사용자가 수동으로 닫을 수 있도록 닫기 버튼을 추가할 수 있음 사용 예시 성공 메시지: 데이터 저장, 사용자 로그인 등 성공적으로 작업이 완료되었을 때.에러 메시지: 네트워크 오류, 잘못된 입력 등 실패한 작업..

공부하다보니 상태 관리 라이브러리에 대해서 정리하면 도움이 될 것 같아서 정리해보려고 한다  상태 관리의 필요성리액트에서는 컴포넌트의 상태를 props와 state를 통해 관리하는데다음과 같은 상황에서는 효율적인 상태 관리가 어렵다.여러 컴포넌트가 동일한 상태를 공유해야 하거나 상태 구조가 복잡해질 때.컴포넌트 트리 구조에서 상태를 여러 단계에 걸쳐 전달해야 할 때 (prop drilling이라고 함).로그인 정보나 테마 설정 등 전역에서 사용되는 상태를 관리할 때.이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용함각 라이브러리마다 특징과 장단점을 가지고 있고프로젝트에 알맞은 도구를 선택하는 것이 중요하다고 생각한다  Context API Context API는 리액트에 내장된 상태 관리 기능인데..

오늘은 useSuspenseQuery(그리고 React Suspense)와 ErrorBoundary를 사용하여비동기 데이터를 요청할 때 로딩과 에러 처리를 효율적으로 다뤄보겠슨비다. useSuspenseQuery 란..? React Suspense와 Tanstack Query를  함께 사용하여데이터 로딩 상태를 관리하는 훅입니다. useQuery와 비슷하지만 Suspense와 함께 작동합니다.기본적으로 Suspense에서 로딩 상태를처리하고 useSuspenseQuery는  성공적인 응답 데이터를 반환할 때까지컴포넌트의 렌더링을 중단하는 역할입니다!  여기서 React Suspense는 비동기 데이터를 가져올 때 동안 UI를 렌더링하지 않고 대기하는 기능입니다따라서 Suspense를 사용하여 로딩중이라는..

오늘은 팀원분이 구현해주신 로그인 기능에서 로그인된 유저의 정보를 props로 전달하지 않고zustand를 사용하여 유저의 정보를 전역 상태로 관리하는 과정을 기록해볼게요 API 요청export const login = async (userData) => { const response = await axios.post(`${API_URL}/login`, userData); return response.data;}; 로그인 핸들러 const handleLogin = async (formData) => { try { const loginData = await login(formData); localStorage.setItem("accessToken", loginData.acces..

북마크 구현하기  북마크 기능을 구현하기 위해서 유저가 게시물에 북마크를 누르면 해당 게시물에 유저 아이디를 담아서 내가 누른 북마크의 데이터를 불러오고이미 눌러진 북마크에 대해선 UI를 북마크 취소로 변경시켜 UX를 향상 시킬 수 있도록 구현하기로 했다  원래 게시물에 유저의 아이디를 담는 형태가 아닌 유저에 게시물을 담는 형태가 일반적이지만캠프에서 제공되는 데이터 베이스에 유저의 정보를 관리하고 있기 때문에 게시물에 담아북마크 데이터를 관리할 수 있도록 이 방법을 사용했다. 게시물 불러오기const fetchPlaces = async () => { try { const response = await axios.get(API_URL); return response.data; } catch..

안녕 오늘은 리덕스를 사용해 React에서 상태 관리를 어떻게 구현하는지 정리했음리덕스는 중앙 집중식 상태 관리를 가능하게 해주고 컴포넌트 간에 상태를 공유할 수 있게 해줌   리덕스 스토어 설정 리덕스로 상태 관리를 하려면 스토어를 먼저 설정함스토어는 애플리케이션의 모든 상태가 저장되는 공간임import { combineReducers, createStore } from "redux";// 1) rootReducer: 여러 리듀서를 합치는 부분 (현재는 빈 객체)const rootReducer = combineReducers({});// 2) store 조합: rootReducer를 기반으로 스토어 생성const store = createStore(rootReducer);// 3) 스토어 exporte..

안녕하세요 오늘은 팀 프로젝트를 진행하면서 구현했던 무한스크롤 방식을 TIL로 작성해보려 합니다무한 스크롤은 꼭 한 번 구현하고 싶었던 기능이었기 때문에 설레는 마음으로 기능을 구현하였습니다.intersectionObserver을 React에서 사용하고 Supabase로 데이터를 받아왔습니다!1. 상태 변수 설정  const [postLoadingMore, setPostLoadingMore] = useState(true); const [displayedPosts, setDisplayedPosts] = useState([]); const [offset, setOffset] = useState(0); const limitLength = 6; postLoadingMore: 추가 데이터가 있는지에 대한 ..

스타일드 컴포넌트는 React에서  CSS-in-JS 스타일링을간편하게 적용할 수 있는 라이브러리인데요 조건부 스타일링을 통해 컴포넌트의 상태나 props에따라 동적으로 스타일을 변경할 수 있슴다  기본적인 조건부 스타일링 예로 들어 버튼의 활성화 상태에 따라 색상을 변경하는 경우 예시 코드와 같이 작성이 가능해요 코드예시import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; ..