Programming

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.📌 Form Action이란?React 19에서는 처럼 action 속성에 함수를 전달할 수 있습니다. 이때 React는 다음과 같은 동작을 자동으로 수행합니다:preventDefault() 자동 호출 → 직접 막을 필요 없음FormData 객체를 해당 함수에 인자로 전달, 등에 설정된 name 속성을 기반으로 FormData 구성제출이 완료되면 자동으로 폼 초기화 Submit주의: 모든 입력 요소에는 반드시 name 속성을 지정해야 합니다. 그래야 FormData에 포함됩니다. 📌 useActionState 훅useActionState는 폼의 상태와 ..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 리액트나 일반 HTML에서 form을 다룰 때, 생각보다 다양한 문제를 마주치게 됩니다.단순히 "입력값 받아서 제출"하는 걸 넘어, 다음과 같은 고민들이 따라오죠:어떻게 입력값을 깔끔하게 추출할까?유효성 검사는 언제, 어떻게 해야 깔끔할까?입력 후 초기화는 어떻게 해야 할까?리액트에서는 form 제출을 어떻게 다뤄야 할까?이번 글에서는 위의 문제들을 하나씩 정리하고, 실제로 어떤 방식으로 해결하는 게 좋은지 이야기해보겠습니다.📌 1. 입력 데이터 추출 방법폼에서 입력된 값을 가져오는 방식은 상황에 따라 다르게 선택할 수 있습니다.✅ 방법 1: useState로..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. HTML에서 태그는 원래 서버로 데이터를 보내기 위한 용도다HTML에서 태그는 **서버로 데이터를 제출(submit)**하고, 새로운 페이지를 받아오기 위한 구조로 설계됐다. 폼 안에서 버튼을 누르면 브라우저는 기본적으로 다음과 같은 흐름으로 동작한다:🔁 브라우저 기본 동작버튼 클릭 → 폼 제출 (submit 이벤트 발생)입력값을 포함해서 서버로 HTTP 요청 전송서버가 요청을 처리하고 새로운 HTML 페이지를 응답전체 페이지가 새로고침되면서 새 화면이 열린다🎈 왜 이렇게 설계됐을까? (→ SSR 기반 구조)이 흐름은 웹 초창기부터 사용되던 전통적인 방식..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 🎈 바닐라 CSS 스타일 컴포넌트에 스코핑 방법리액트에서 바닐라 CSS를 사용하는 경우, CSS가 리액트 컴포넌트에 스코프가 자동으로 적용되지 않습니다. 이는 CSS가 전역적으로 적용되기 때문에, 컴포넌트가 여러 개 있을 때 스타일이 서로 충돌할 수 있습니다.즉, 같은 페이지에 존재하는 A 컴포넌트와 B 컴포넌트가 존재한다고 할때, A 컴포넌트의 스타일에 필요한 css가 B컴포넌트의 스타일에 영향을 미칠 수 있습니다. 이를 해결하기 위해서 리액트 컴포넌트에 CSS를 스코프(scope)하기 위해 몇가지 방법을 소개해드리겠습니다. 1️⃣ style Prop 사용..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.기존의 class="btn primary" 같은 추상적인 클래스명 대신, class="bg-blue-500 text-white p-4 rounded"처럼 직관적인 유틸리티 클래스들을 조합해서 스타일을 만듭니다.설치 방법프로젝트에 Tailwind 설치 (예: Vite 기준)npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p설정 파일 (tailwind.config.js) 예시module.exports..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. styled-component 는 CSS-in-JS 방식을 사용하는 라이브러리입니다.말 그대로 CSS 코드를 자바스크립트 안에 작성할 수 있게 해줍니다. 그리고 중요한 건, 작성한 스타일이 해당 컴포넌트에만 적용된다는 점입니다.즉, 스타일이 자동으로 스코프(scope)되어 다른 컴포넌트와 충돌하지 않도록 해줍니다.styled-component 설치npm install styled-components사용 방법 예시// Button.jsximport styled from 'styled-components';const StyledButton = styled.butto..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. CSS Modules은 CSS 클래스 이름을 자동으로 고유하게 만들어주는 방법입니다. 이를 통해 각 컴포넌트에서 사용하는 CSS가 전역에 영향을 미치지 않게 할 수 있습니다.create-react-app을 사용하면, CSS Modules는 기본적으로 지원됩니다. .module.css 확장자를 사용하면 됩니다.Button.module.css/* Button.module.css */.button { background-color: green; color: white; padding: 10px;}Button.js// Button.jsimport React fro..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.style Prop을 사용해서 CSS를 자바스크립트 객체로 작성하여 JSX에서 스타일을 적용할 수 있습니다. 이 방법을 통해 간단한 스타일링이나, 동적인 스타일 변경을 할 때 사용 가능 합니다.style Prop 기본 사용법CSS 속성 이름은 camelCase로 작성값은 문자열 또는 숫자로 작성function App() { return ( Click me! );}export default App;동적 스타일링 가능import React, { useState } from 'react';function App() {..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. React를 사용하다 보면 컴포넌트마다 비슷한 로직이 반복되는 경우가 많습니다.예를 들어, 데이터를 가져오기 위해 useEffect 안에서 fetch 요청을 보내고, loading 상태와 error 상태를 관리하는 코드를 여러 컴포넌트에서 반복하게 되기도 합니다.이럴 때 유용하게 사용할 수 있는 것이 바로 "커스텀 훅(Custom Hook)" 입니다. 🎈 먼저, 리액트 훅의 두 가지 규칙부터 다시 복습!리액트 훅은 컴포넌트 함수 또는 다른 훅 안에서만 사용 가능일반 함수에서는 사용 불가능합니다.훅은 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됨 🎈 커스..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 이번 글에서는 React에서 HTTP 요청을 다루는 데 사용되는 기본적인 fetch API와 이를 어떻게 효율적으로 처리할 수 있는지에 대해 알아보겠습니다. 특히, 로딩 상태와 에러 처리를 어떻게 관리하는지를 다룰 예정입니다. ✅ 기본 fetch API 사용법 (GET 요청)1. fetch + .then() 사용useEffect(() => { fetch('') .then((response) => response.json()) .then((resData) => setAvailablePlaces(resData.places));}, []);response..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 이번 글에서는 클래스 컴포넌트의 구조, 생명주기 메서드, 컨텍스트 사용 방식, 그리고 오류 경계까지 정리해봤습니다. ✍️ 🎈 클래스 컴포넌트 기본 구조class MyComponent extends React.Component { render() { return Hello, {this.props.name}!; }}React.Component를 상속받아 정의합니다.render() 메서드 안에서 JSX를 반환해야 합니다.🤔 왜 존재할까?React 16.8 이전에는 state나 생명주기 메서드를 사용하려면 클래스 컴포넌트로 작성해야 했습니다.이후 Hooks..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 🎈 memo 함수memo 함수는 불필요한컴포넌트를 다시 렌더링 하지 않도록 방지하는 함수입니다.import React, { memo } from "react";const MyComponent = memo(function MyComponent(props) { // ...});부모 컴포넌트가 렌더링되면 자식 컴포넌트도 기본적으로 함께 렌더링됩니다. 하지만 자식 컴포넌트의 props가 변하지 않았다면 굳이 다시 렌더링할 필요가 없습니다.이럴 때 memo로 감싸면, props가 이전과 동일할 경우 렌더링을 건너뜁니다. 즉, 컴호넌트 함수가 다시 호출 되지 않게 됩..

이 프로젝트는 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 강의 일부의 연습 프로젝트 입니다. 📋 React Quiz App이 프로젝트는 사용자가 문제을 읽고 시간 제한 내에 답안을 선택하는 퀴즈 앱 입니다. 주어진 문제를 다 풀면 결과 페이지를 제공합니다. 단순히 문제를 풀기만 하는 UI가 아닌, 상태 관리와 퀴즈 흐름에 초점을 맞춰 구현했습니다. 이를 통해 React에서 컴포넌트를 어떻게 효율적으로 설계하고, Context API와 상태 관리를 어떻게 활용할 수 있는지에 대한 경험을 쌓을 수 있었습니다.특히, 각 문제의 상태(문제 풀이 중, 정답 확인, 시간 초과 등)를 어떻게 처리할지에 대한 고민과, 시간 제한 및 문제 흐름을 어떻게 자연..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.https://github.com/An0401na/React_Study/tree/main/11-Side-Effects-useEffec React_Study/11-Side-Effects-useEffect at main · An0401na/React_StudyContribute to An0401na/React_Study development by creating an account on GitHub.github.com   🎈 Side Effect(부수 효과)란?Side Effect(부수 효과)란 컴포넌트가 렌더링되는 과정과는 직접적인 관련이 없지만, 애플리케이션이 ..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.https://github.com/An0401na/React_Study/tree/main/10-Advanced-State-Managemen-with-Context-useReducer React_Study/10-Advanced-State-Managemen-with-Context-useReducer at main · An0401na/React_StudyContribute to An0401na/React_Study development by creating an account on GitHub.github.com 🎈Prop DrillingReact에서 상태나 함수를..

BackEnd 공부를 하다가 최근 React 공부를 시작하게 되어 IntelliJ에서 React 환경을 구축하였다.코딩하는 과정에서 저장시 코드 정렬이 되지 않아 Prettier 플러그인 재설치 하였으나 그래도 안되더라 …아래 명령어를 사용해 해당 프로젝트에 프리티어를 설치한다.npm i --save-dev prettier그 다음 File > Setting > Languages & Frameworks > JavaScript > Prettier 들어간다. Automatic Prettier configuration 체크 후 Run on Save 까지 체크하고 적용하면 저장 시에 코드가 자동 정렬된다!만약 이렇게 해도 적용이 안된다면 Manual Prettier configuration을 선택하여 Pretti..

📋 Project ManageReact 기반 프로젝트 관리 애플리케이션 🚀💡 프로젝트 개요이 프로젝트는 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 강의 일부의 연습 프로젝트 입니다.📌 프로젝트 소개이 프로젝트는 사용자가 여러 프로젝트를 생성하고, 각 프로젝트에 대한 작업(Task)을 추가하고 관리할 수 있는 프로젝트 관리 애플리케이션입니다. 각 프로젝트에는 제목, 설명, 마감일을 설정할 수 있고, 작업(Task)을 추가하여 관리할 수 있습니다. 또한, 사이드바를 통해 프로젝트를 선택하고 선택한 프로젝트의 세부 정보 확인, 작업 입력 및 관리, 중복 방지, 모달 경고 등의 기능이 포함되어 있습니다. 프로젝트가 선택되지 않았을 때는 적절한 ..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 빈 스코프란?스코프는 빈이 존재할 수 있는 범위를 의미한다.싱글톤: 기본 스코프, 스프링 컨테이너의 시작과 종료까지 유지되는 가장 넓은 범위의 스코프이다.프로토타입: 스프링 컨테이너는 프로토타입 빈의 생성과 의존관계 주입까지만 관여하고 더는 관리하지 않는 매우 짧은 범위의 스코프이다.웹 관련 스코프request: 웹 요청이 들어오고 나갈때 까지 유지되는 스코프이다.session: 웹 세션이 생성되고 종료될 때 까지 유지되는 스코프이다.application: 웹의 서블릿 컨텍스트와 같은 범위로 유지되는 스코프이다컴포넌트 스캔 자동 등록@Scope(..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 빈 생명 주기 콜백스프링 어플리케이션 시작 시점에 필요한 연결을 미리 해두고 어플리케이션 종료 시점에 연결을 모두 종료하는 객체 초기화 작업과 종료 작업이 필요하다.package hello.core.lifecycle;public class NetworkClient { private String url; public NetworkClient() { System.out.println("생성자 호출, url = " + url); connect(); call("초기화 연결 메시지"); } pub..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.다양한 의존 관계 주입 방법에 대해서는 “이전 게시물”을 확인해주세요.이전 게시물 - 의존관계 자동주입 1✏️ 자동 주입 대상을 옵션으로 처리주입할 스프링 빈이 없어도 동작해야 할 때가 있다.그런데 @Autowired 만 사용하면 required 옵션의 기본값이 true 로 되어 있어서 자동 주입 대상이 없으면 오류가 발생한다. 이를 해결하기 위해서는 아래와 같이 3가지 방법을 가지고 옵션처리하여 해결할 수 있다.아래 예시에서 Member 는 스프링 빈이 아니다.@Autowired(required=false) : 자동 주입할 대상이 없으면 수정자 메서..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 자동으로 스프링 빈을 등록해 → 컴포넌트 스캔(@ComponentScan, @Component)컴포넌트 스캔이란 ?지금까지의 과정에서 자바 코드의 @Bean 이나 XML의  를 통해서 직접 스프링 빈을 등록상당히 귀찮고 누락할 수 있는 가능성이 높다는 문제점을 지닌다.이를 해결하기 위해 컴포넌트 스캔이라는 기능을 통해서 스프링 빈을 자동으로 등록할 수 있다.컴포넌트 스캔 사용하기컴포넌트 스캔을 사용하려면 먼저 @ComponentScan 을 설정 클래스에 붙여준다.기존의 AppConfig와는 다르게 @Bean으로 등록한 클래스가 하나도 없다!Aut..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 싱글톤 패턴을 사용하는 이유스프링 없는 순수한 DI 컨테이너를 가진 어플리케이션을 사용자에게 배포 했다고 생각해보자.그 어플리케이션이 대박이 나서 동시 접속자수가 만명이 넘는다.그러면 만명 사용자가 동시다발적으로 서버에 요청을 보내게 된다.이 어플리케이션에서의AppConfig 는 아래와 같다package hello.core;import hello.core.discount.DiscountPolicy;import hello.core.discount.RateDiscountPolicy;import hello.core.member.MemberReposit..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 스프링 컨테이너AppConfigpackage hello.core;import hello.core.discount.DiscountPolicy;import hello.core.discount.RateDiscountPolicy;import hello.core.member.MemberRepository;import hello.core.member.MemberService;import hello.core.member.MemberServiceImpl;import hello.core.member.MemoryMemberRepository;import hello..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다.✏️ 비즈니스 설계 Remind  ✏️ DIP, OCP 위반 상황 설명 지난 시간에는 정액 할인 정책만 구현하여 의존해두었는데 요구 사항이 정률 할인 정책으로 변경되었다.변경에 따라 RateDiscountPolicy를 구현하고 할인 정책을 변경하려면 클라이언트인 OrderServiceImpl코드를 고쳐야 한다.public class OrderServiceImpl implements OrderService { // private final DiscountPolicy discountPolicy = new FixDiscountPolicy(); priva..

이번 블로그 글에서는 GitHub Pages를 사용해 특정 폴더 안에 있는 리액트 프로젝트를 배포하는 방법에 대해 다룹니다. 배포한 프로젝트는 https://username.github.io/repository-name/ 형식으로 접근할 수 있게 됩니다. 저는 레포지토리 안의 디렉토리에 배포 파일이 존재하기 때문에, 아래와 같은 URL로 접근할 수 있도록 설정했습니다.https://an0401na.github.io/React_Study/08-Refs-Portals/ Refs & PortalsThe Almost Final Countdown Stop the timer once you estimate that time is (almost) upan0401na.github.io제가 위와 같이 설계했던 이유는 리..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.👉 useRef를 이용하여 만든 Timer Challenge 방문하기https://an0401na.github.io/React_Study/08-Refs-Portals/ Refs & PortalsThe Almost Final Countdown Stop the timer once you estimate that time is (almost) upan0401na.github.io  🎈Refs (참조) 란?Refs(References)는 React에서 특정 DOM 요소나 클래스형 컴포넌트의 인스턴스에 직접 접근할 수 있도록 도와주는 기능입니다. 🎈 상태 vs 참조 ..

🎯 React에서 children을 활용한 유연한 컴포넌트 만들기React에서 컴포넌트를 만들다 보면, 내부에 어떤 내용이 들어올지 모르는 컨테이너 역할의 컴포넌트를 만들 일이 많다. 예를 들어, Sidebar, Dialog, Card 같은 컴포넌트들은 내부에 들어갈 요소가 정해져 있지 않다.이럴 때 React의 children prop을 활용하면 꽤 유연하게 컴포넌트를 만들 수 있다. 하지만 children 외에도 특정 prop으로 컴포넌트를 직접 전달하는 방식도 있는데, 이 방법을 활용하면 더 구조적으로 UI를 구성할 수도 있다.이번에 children과 특정 prop을 활용해 재사용 가능한 컴포넌트를 어떻게 만들고 활용할 수 있는지 직접 예제를 통해 정리해 보자.children prop이란?chil..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 💡 프로젝트 개요자세한 코드는 여기로 👉 https://github.com/An0401na/React_Study/tree/main/01-starting-project이번 프로젝트에서는 React를 활용한 투자 계산기를 개발했다.사용자가 입력한 데이터를 기반으로 연간 투자 금액, 예상 수익률, 투자 기간을 계산하여매년 누적된 투자 금액과 이자를 시각적으로 보여주는 기능을 구현했다.React: 컴포넌트 기반 UI 개발useState: 사용자 입력값을 상태로 관리map(): 배열 데이터를 테이블 형식으로 렌더링Intl.NumberFormat: 숫자를 화폐 단위로 ..

🎈 속성(props) 전달에서 발생하는 문제와 해결 방법리액트에서 커스텀 컴포넌트에 속성을 전달할 때, HTML의 기본 속성인 id나 className 같은 속성이 정상적으로 전달되지 않는 문제가 발생할 수 있습니다. 이 문제를 해결하는 방법과 함께, Forwarded Props를 이용해 어떻게 이러한 속성들을 전달할 수 있는지 설명해 보겠습니다.  1. 기본 코드 예시먼저, 아래와 같은 기본 코드를 봅시다:function UserProfile({name, age, children}) { return ( {name} {age} years old {children} {/* 자식 요소 출력 */} );}function App() { return ( ..

일반적인 함수에서 return 값을 두 개 가질 수 없듯이 함수형 컴포넌트에서도 여러 개의 요소를 반환 할 수 없다.리액트 컴포넌트는 반드시 하나의 요소를 반환 해야한다. 이와 같이 리액트의 함수형 컴포넌트의 return 값에는 몇가지 조건이 있다.✅ 1. 반드시 하나의 리액트 엘리먼트(React Element)를 반환해야 한다.❌잘못된 예시 (여러 개의 요소를 반환)function Welcome() { return Hello React!; // 오류 발생 ❌}그러나 화면의 UI를 구성하기 위해서 하나의 엘리먼트로는 부족한 경우가 많다. 이를 해결하기 위해 불필요한 로 감쌀 수 있다.⭕ 올바른 예시 (하나의 부모 요소로 감싸기)function Welcome() { return ( ..