Dseok의 코딩스터디

React를 개발하다 보면 './../src', './../../css/page/common.css' 이렇게 지저분하게 파일 경로가 작성이 됩니다.이러한 현상을 조금이나마 깔끔하게 정리하고자 기록을 합니다. vite는 복잡한 Webpack을 대체 하는 차세대 프론트엔드 빌드 도구입니다. 서론이 너무 긴 것을 싫어하니,바로 본론으로 들어가겠습니다. vite로 react프로젝트 설치하는 법입니다.vscode 터미널에 원하는 작업 경로에서 아래와 같이 입력을 합니다.npm create vite@latest 프로젝트 이름 마음대로 설정// "프로젝트 이름 마음대로 설정"에는 원하시는 프로젝트 이름을 넣으시면 됩니다. 그러면 터미널에 아래 이미지와 같은 설정 입력이 생깁니다.다양한 프론트엔드 프레임워크를 지원합니..

📌 "단순한 스크롤이 아니라, 경험을 디자인하는 것!"웹사이트를 방문했을 때 첫인상이 가장 중요한 순간입니다.하지만, 그냥 단순히 텍스트와 이미지가 나열된 사이트와,스크롤할 때마다 콘텐츠가 살아 움직이는 사이트 중 어느 쪽이 더 기억에 남을까요?사용자의 시선을 사로잡고, 브랜드를 각인시키는 비밀은 인터랙티브한 스크롤 애니메이션에 있습니다.오늘은 스크롤을 활용한 인터랙티브 웹사이트를 만드는 방법과, 실제로 구현할 수 있는 다양한 아이디어를 소개해드리겠습니다. 🎨🎬 스크롤 인터랙션이란?**스크롤 인터랙션(Scroll Interaction)**은 사용자가 페이지를 아래로 내릴 때 콘텐츠가 자연스럽게 등장하거나, 움직이거나, 변형되는 효과를 의미합니다.✅ 왜 중요한가요?사용자의 몰입도를 증가시켜 브랜드와의..

React에서 백엔드 서버와 데이터를 주고받을 때 가장 많이 사용하는 HTTP 클라이언트가 바로 Axios입니다.특히, 데이터를 서버로 보내는 POST 요청은 회원가입, 로그인, 데이터 저장 등 다양한 상황에서 필수적으로 사용됩니다.오늘은 Axios의 POST 요청을 기본 개념부터 고급 기능까지 완벽하게 마스터할 수 있도록 10가지 이상의 실전 예제를 소개하겠습니다.각 예제마다 어떤 개념이 중요한지도 자세히 설명하겠습니다.바로 시작해볼까요? 🚀 📌 1. Axios POST 요청의 기본 개념▶️ POST 요청이란?POST 요청은 서버에 새로운 데이터를 생성하거나 전송할 때 사용됩니다.예를 들어, 회원가입, 로그인, 댓글 작성, 데이터 추가 등이 이에 해당합니다.요청 데이터를 **Body(본문)**에 포..

오늘은 React에서 널리 사용되는 HTTP 클라이언트 라이브러리인 Axios에 대해 깊이 있게 알아보겠습니다.이 글을 통해 Axios의 기본 사용법부터 다양한 실전 예제, 그리고 네트워크와의 연관성까지 전문가 수준으로 이해하실 수 있도록 도와드리겠습니다. 🚀​📌 목차Axios란 무엇인가?Axios의 주요 특징Axios 설치 및 기본 사용법다양한 HTTP 요청 메서드 사용 예제실전에서 많이 사용되는 Axios 활용 예제Axios와 네트워크의 관계마무리Axios란 무엇인가?Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 이를 통해 개발자는 간단하고 효율적으로 서버와의 비동기 통신을 구현할 수 있습니다. ​Axios의 주요 특..

📌 useMemo란?React의 useMemo는 컴포넌트가 리렌더링될 때 불필요한 연산을 방지하고 성능을 최적화하는 Hook입니다. 비싼 연산(heavy computation)이나 의존성이 변경되지 않는 데이터를 메모이제이션(memoization)하여 저장하고, 불필요한 재계산을 방지합니다.✅ 기본 문법import { useMemo } from "react";function Component({ value }) { const computedValue = useMemo(() => { return value * 2; // 계산된 값 저장 }, [value]); return 계산된 값: {computedValue};}useMemo(() => { 연산 }, [의존성]) → 의존성이 변경될 때만 ..

📌 useRef란?React의 useRef는 DOM 요소나 값의 변화를 감지하지 않고 유지할 수 있는 참조(ref)를 생성하는 Hook입니다. 렌더링과 관계없이 데이터를 저장할 수 있으며, 컴포넌트가 리렌더링되어도 초기화되지 않는 값을 관리하는 데 유용합니다.✅ 기본 문법import { useRef } from "react";function Component() { const myRef = useRef(initialValue); return Hello;}useRef(initialValue): 초기값을 설정할 수 있으며, current 속성을 통해 접근 가능ref={myRef}: DOM 요소에 ref 속성을 설정하여 직접 참조 가능📌 useRef의 주요 활용 사례DOM 요소 직접 조작값을 저장하지만..

useEffect란? React는 UI를 구축하기 위한 라이브러리로, 컴포넌트의 상태(state)와 속성(props)에 따라 화면을 렌더링합니다. 그러나 **데이터 가져오기, 수동으로 DOM을 조작하기, 구독 설정 등과 같은 부수 효과(side effects)**를 처리해야 할 때가 있습니다. 이러한 부수 효과를 관리하기 위해 React는 함수형 컴포넌트에서 useEffect Hook을 제공합니다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 도와줍니다. 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하며, 함수형 컴포넌트에서도 이러한 생명주기 메서드의 기능을 구현할 수..

React의 useState는 함수형 컴포넌트에서 상태(state)를 관리하는 가장 기본적인 Hook입니다. 이를 사용하면 컴포넌트 내부에서 동적인 값을 저장하고 업데이트할 수 있습니다. 예를 들어, 버튼 클릭 횟수, 입력 폼 데이터, 체크박스 상태 등을 관리할 때 사용됩니다. 화살표 함수가 아닌 function 함수로 사용한 이유가 있습니다!!급하시면 복사붙혀넣기 해도 좋지만, 직접 따라치면서 function 함수를 화살표 함수로 바꿔보시라는 취지로 넣었습니다!! ✅ useState란?useState는 React의 내장 Hook 중 하나로, 컴포넌트의 상태를 추가할 수 있도록 도와줍니다. 기본적으로 useState는 배열을 반환하며, 첫 번째 요소는 상태 값, 두 번째 요소는 상태를 변경하는 함수(se..

📌 개요React.js(프론트엔드)와 Express.js(백엔드)를 연결하는 방법을 단계별로 설명합니다.기본적인 개념과 프로젝트 폴더 구조, 설정 방법, API 요청 처리 방식까지 모두 다룹니다.📌 1. 프로젝트 폴더 구조React와 Express를 함께 사용하려면 아래와 같은 폴더 구조로 설정하는 것이 일반적입니다./my-app ├── /client (React 프로젝트) ├── /server (Express 프로젝트) ├── package.json/client → React 프론트엔드 (React 앱이 들어감)/server → Express 백엔드 (API 서버 구현)package.json → 전체 프로젝트 관리 📌 2. 프로젝트 생성✅ 1) 프로젝트 폴더 생성 및 이동 (Windows)mk..

이미지 관리하기방법은 2가지로 나뉜다.assets폴더에서 관리이미지가 몇개만 필요할 때 assets폴더에서 관리한다.이유는 assets폴더에서 관리를 하게 되면 서버에서 그때그때 다운로드 받을 필요 없이 웹브라우저 메모리에 저장된 이미지를 바로바로 꺼내 쓸 수 있어 웹 속도에 영향을 미치지 않는다. 다운로드를 최초 1회만 진행하기 때문에 웹 로딩 속도에 개선을 줄 수 있다.import img1 from "./assets/img1.jpg";const App => () = { return ( )}export default App 위와 같이 이미지를 불러오면 각 파일마다 import img1 from "./assets.img.jpg"를 작성해줘야한다. 이와 같은 번거로움을 제거하기..