개발일지/React10

• Spring Boot 애플리케이션에서 CORS 설정하는 방법 1. CORS란 무엇인가요?CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행 중인 웹 애플리케이션이 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근할 수 있도록 하는 메커니즘입니다. 브라우저는 기본적으로 보안상의 이유로 다른 출처에 대한 HTTP 요청을 제한하는데, 이것을 '동일 출처 정책(Same-Origin Policy)'이라고 합니다.예를 들어, http://localhost:3000에서 실행 중인 React 애플리케이션이 http://localhost:8080에서 실행 중인 Spring Boot API에 데이터를 요청할 때 CORS 제한이 발생합니다.2. 왜 CORS 설정이 필요한가요?현대 웹 개발 환경에서는 프론트엔드(React, Vue, Angular.. 개발일지/React 2025. 3. 7.

• "React 훅(Hooks) 10개 완벽 가이드: React 19 버전 기준" 1. useState - 상태 관리의 기본useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 가장 기본적인 훅입니다.개념컴포넌트의 상태(state)를 관리상태 변경 시 자동으로 리렌더링 트리거상태와 상태를 변경하는 함수를 배열 형태로 반환예시 코드import { useState } from 'react';function Counter() { // [상태값, 상태 변경 함수] = useState(초기값) const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 setCount(count - 1)}>감소 setCount(0)}>초기화 .. 개발일지/React 2025. 3. 6.

• 2025년 React.js: 프론트엔드 개발의 중심과 그 중요성 React의 시장 지배력 - 현대 웹 개발의 표준React.js는 2025년 현재 프론트엔드 개발 생태계의 절대 강자로 자리매김했습니다. Meta(전 Facebook)가 개발한 이 JavaScript 라이브러리는 웹 개발 분야에서 압도적인 점유율을 보이고 있습니다.산업 표준화: 전 세계 70% 이상의 기업들이 React를 활용한 웹 애플리케이션 개발에 투자대형 기업 채택: Netflix, Airbnb, Spotify, Microsoft, Instagram이 모두 React 기반 애플리케이션 운영지속적인 성장: 매년 15% 이상의 개발자 커뮤니티 확장으로 안정적인 생태계 유지React는 단순한 JavaScript 라이브러리를 넘어 현대 UI 개발의 표준 방법론으로 발전했습니다.취업 시장에서 React 개발.. 개발일지/React 2025. 3. 6.

• Create React App 사용법 가이드 1. Create React App 소개안녕하세요! 이번 장에서는 Create React App을 사용하여 React 애플리케이션을 만드는 방법을 배워보겠습니다. Create React App은 React.js 애플리케이션을 만드는 가장 효율적인 방법입니다.이전에는 React 스크립트를 직접 가져와서 모든 설정을 수동으로 해야 했지만, Create React App을 사용하면 이 과정이 훨씬 간단해집니다.Create React App의 주요 장점:사전 구성된 개발 환경: 많은 스크립트와 설정이 미리 준비되어 있음개발 서버: 로컬에서 앱을 쉽게 테스트할 수 있는 개발 서버 제공자동 새로고침(Hot Reload): 코드 변경 시 자동으로 브라우저 새로고침CSS 지원: CSS 파일을 바로 임포트하여 사용 가능.. 개발일지/React 2025. 3. 6.

• ReactJS에서 useEffect 훅 완벽 이해하기 1. useEffect의 기본 개념useEffect는 React 컴포넌트에서 부수 효과(side effects)를 처리하기 위한 훅입니다. 부수 효과란 데이터 가져오기, 구독 설정, 수동 DOM 조작과 같은 작업을 말합니다.useEffect(() => { // 실행할 코드}, [의존성 배열]);2. useEffect의 필요성React 컴포넌트에서는 상태(state)가 변경될 때마다 컴포넌트가 재렌더링됩니다. 그러나 API 호출과 같은 작업은 매번 실행되면 불필요한 네트워크 요청이 발생할 수 있습니다. useEffect를 사용하면 이러한 작업의 실행 시점을 제어할 수 있습니다.3. useEffect의 작동 방식첫 렌더링에만 실행하기빈 의존성 배열([])을 사용하면 컴포넌트가 처음 마운트될 때만 코드가 실.. 개발일지/React 2025. 3. 6.

• React 앱을 GitHub Pages에 배포하는 완벽 가이드: 최신 방법과 팁 목차1. 소개2. GitHub Pages 이해하기3. 배포 준비하기3.1. gh-pages 패키지 설치3.2. package.json 설정하기4. 프로젝트 빌드 및 배포4.1. 빌드 프로세스 이해하기4.2. 배포 명령어 실행하기5. 해시 라우터(HashRouter) 사용하기6. 웹사이트 확인 및 문제 해결7. 배포 자동화 (2025년 최신 방법)7.1. GitHub Actions를 사용한 자동 배포7.2. GitHub Pages와 커스텀 도메인8. 유지보수 및 업데이트9. 추가 리소스 및 팁1. 소개GitHub Pages는 GitHub 저장소에서 직접 웹사이트를 호스팅할 수 있는 무료 서비스입니다. 이 가이드에서는 React로 만든 웹사이트를 GitHub Pages에 배포하는 방법을 상세히 알아봅니다. .. 개발일지/React 2025. 3. 5.

• React Router 동적 URL 처리 가이드: v6와 v7의 차이점 및 구현 방법 목차1. 기본 개념2. React Router v6로 동적 URL 구현하기2.1. 동적 경로 설정하기2.2. useParams로 URL 파라미터 추출하기2.3. 동적 링크 생성하기2.4. URL 파라미터로 API 요청하기2.5. 영화 상세 정보 렌더링하기2.6. 전체 구현 예시3. React Router v7로 동적 URL 구현하기3.1. 데이터 라우터 설정하기3.2. 로더 함수로 데이터 불러오기3.3. 동적 링크 생성하기3.4. useLoaderData로 데이터 사용하기3.5. 전체 구현 예시4. v6와 v7의 주요 차이점5. 정리 및 결론1. 기본 개념동적 URL이란 경로의 일부가 변수처럼 작동하여 다양한 데이터를 표시할 수 있는 URL을 말합니다. 예를 들어, /movie/1, /movie/2와 같.. 개발일지/React 2025. 3. 5.

• React Router 사용법 가이드: v6와 v7의 차이점 및 구현 방법 목차React Router v61. 설치 및 기본 설정2. 라우터 종류3. 기본 라우팅 설정4. Routes와 Route 컴포넌트5. Link 컴포넌트로 페이지 이동6. 컴포넌트 구조 재구성7. 동적 URL 설정React Router v71. 설치 및 기본 설정2. 라우터 종류3. 컴포넌트 기반 라우팅4. 데이터 라우터 사용하기5. Link 컴포넌트로 페이지 이동6. 컴포넌트 구조 재구성7. 동적 URL 및 데이터 로딩v6과 v7의 주요 차이점React Router v61. 설치 및 기본 설정 (v6)React Router v6를 설치하려면 다음 명령어를 사용합니다:npm install react-router-dom@6# 또는yarn add react-router-dom@6기본 컴포넌트를 import 하.. 개발일지/React 2025. 3. 5.

• React Router 사용법 가이드 다음 요소들을 좀 더 자세히 다룰 예정입니다:React Router 소개 및 설치 과정 더 자세히라우터 종류 및 차이점 상세 설명라우팅 설정 방법 확장 예제Switch와 Route 컴포넌트의 동작 원리 상세 설명Link 컴포넌트 사용법 및 장점컴포넌트 구조 재구성 과정 자세한 설명더 많은 코드 예제 제공단계별 구현 과정 설명동적 URL 설명 추가실제 사용 사례와 팁 제공마크다운으로 한번에 출력하기 위해, 정보를 구조적으로 잘 정리하고 코드 블록을 포함하여 전체적인 내용을 강화할 것입니다.```markdownReact Router 완벽 가이드목차1. React Router 소개2. 설치 및 기본 설정3. 라우터 종류와 차이점4. 라우팅 설정 기본 구조5. Switch와 Route 컴포넌트6. Link 컴포.. 개발일지/React 2025. 3. 5.

• 컴포넌트 분리의 필요성 1. 컴포넌트 분리의 필요성React의 주요 장점 중 하나는 컴포넌트를 재사용할 수 있다는 것입니다. 코드가 한 파일에 너무 많이 모여있으면 유지보수가 어려워지므로, 기능별로 컴포넌트를 분리하는 것이 좋습니다.Movie 컴포넌트 분리 과정:영화 정보를 보여주는 코드를 별도의 Movie.js 파일로 분리컴포넌트는 함수로 정의하고 export default Movie로 내보내기원래 App.js에 있던 영화 렌더링 관련 코드를 Movie.js로 이동2. Props 활용하기컴포넌트가 분리되면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 합니다. 이때 props를 사용합니다.// App.js에서 Movie 컴포넌트로 데이터 전달Props 이름 지정:API에서 받는 데이터의 이름(medium_cover_im.. 개발일지/React 2025. 3. 5.