Programming

이 글은 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 ( ..

🎈Element앱의 UI를 구성하는 가장 단위immutable 객체(불변)화면에 표시할 내용을 기술하는 단순한 객체이며, 실제 DOM 요소를 직접 만들지는 않는다.React.createElement() 함수로 생성되며, JSX를 사용하면 더 쉽게 작성 가능하다.const element = Hello, React!;아래 element는 화면에 Hello, React!를 표현하는 객체일 뿐, 아직 실제 DOM에 반영된 것은 아니다. 리액트는 이러한 엘리먼트를 ReactDOM.render() 혹은 useState, useEffect 등의 업데이트 과정에서 가상 DOM을 통해 실제 DOM으로 변환합니다. 🎈Component리액트 엘리먼트를 반환하는 함수 또는 클래스컴포넌트는 여러개의 엘리먼트들을 조합하여 재..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.🎈Componet재사용이 가능한 구성요소이다.HTML, CSS, 자바스크립트 로직 등을 포함하고 있다.사용하는 이유컴포넌트가 없다면 html 코드가 방대하고 복잡해져 유지보수가 어려워질 수 있다.오류 가능성이 줄어든다.코드를 재활용 하는 방식이기 때문에 한 부분에서 일괄적으로 수정이 가능하다.공통된 기능을 제공하는 유사한 코드가 묶여 작성되어 개발 과정이 단순해진다.각 컴포넌트들 마다 각 기능별로 관심사가 분리되어 작업된다.컴포넌트 저장 및 좋은 프로젝트 구조src - assets - components - Header - Header.jsx - Header.c..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 리액트는 무엇일까?사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리리액트는 자바 스크립트 라이브러리라서 재 로딩 없이 웹페이지와 페이지에 표시되는 사용자 인터페이스를 업데이트 가능하기 때문에 사용자에게 즉각적인 반응과 부드러운 전환 경험을 제공한다.자바 스크립트는 백그라운드에서 실행되기 때문에 로딩이 완료된 페이지를 재로딩 없이 새로운 데이터로 업데이트가 가능하다. 리액트가 자바스크립트 라이브러리라면 왜 자바스크립트가 아닌 리액트를 사용해야 할까?순수 자바스크립트만으로 구현하는 것 보다 쉽고 빠르게 구축하도록 도와주기 때문HTML 코드와 자바스크립트 코드..

SELECT a.TABLE_NAME '테이블명', b.ORDINAL_POSITION '순번', b.COLUMN_NAME '필드명', b.COLUMN_KEY 'KEY', b.COLUMN_TYPE '데이터길이', b.IS_NULLABLE 'NULL값여부', b.COLUMN_DEFAULT '기본값', b.COLUMN_COMMENT '필드설명' FROM information_schema.TABLES a JOIN information_schema.COLUMNS b ON a.TABLE_NAME = b.TABLE_NAME AND a.TABLE_SCHEMA = b.TABLE_SCHEMA WHERE a.TABLE_SCHEMA = '스키마명(수정하세요)' -- AND a.TABLE_NAME = '테이블명..

1. Test DB 생성 및 mariabackup 설치Test DB 생성 -- 데이터 베이스 생성 CREATE DATABASE IF NOT EXISTS test; USE test; -- 테이블 생성 CREATE TABLE IF NOT EXISTS test ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL ); -- 데이터 추가 INSERT INTO test (name) VALUES ('John'), ('Alice'), ('Bob'), ('Emily'), ('Michael'); -- 데이터 확인 SELECT * FROM test;mariabackup 설치 //Centos sudo yum inst..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.이를 계기로 데이터 백업에 대한 중요성을 느꼈으며 백업 작업을 하면서 공부하고 배운 그 과정을 기록하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB3. 논리적 백업도구로 full-backup만 하는 이유우선 논리적 백업의 도구로 mysqldump 를 사용할 수 있다.mysqld..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.상무님께서 데이터 백업작업을 요청하셨고 그 과정을 기록 하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB2. 백업의 방식1. 풀 백업(Full Backup)전체 데이터를 백업 하는 형식으로, 3가지 방식 중에 백업 속도가 가장 느리다.일일 백업 파일이기 때문에 그날의 백업 파일..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.상무님께서 데이터 백업작업을 요청하셨고 그 과정을 기록 하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB1. 백업의 유형데이터베이스를 백업하는 유형에는 크게 물리적 백업과 논리적 백업 두 가지가 있다.물리적 백업은 실제 데이터 파일을 복사하고, 논리적 백업은 CREATE TAB..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다. ✏️ 스프링일반적으로 스프링은 좁은 의미의 Spring Framework를 일컫는다. 그러나 넓은 의미에서의 스프링은 Spring 생태계를 의미한다. 스프링 생태계는 다음과 같이 다양한 프로젝트들을 포함하고 있다.스프링 프로젝트 종류프로젝트설명Spring DataData 연동을 위한 API를 제공, RDBMS와 NoSQL과 연동을 적은양의 코드로 처리 가능Spring Cloud마이크로 서비스 기반의 아키텍처에서 사용되는 모든 검증된 패턴을 구현Spring Security인증과 허가에 대한 기반 프레임워크를 제공하여 보안을 간단한 설정과 코드로 구현 ..

✏️ 스프링 프레임워크Java 기반 어플리케이션 개발을 지원하는 오픈소스 어플리케이션 프레임워크Core ContainerData Access/IntegrationWebAOP, Aspects, Instrumentation, Messaging, Test 1. Core Container서블릿의 생명 주기를 관리하는 서블릿 컨테이너와 비슷하게 bean의 생성과 관리를 해주는 컨테이너 역할을 한다. 설명모듈/아티팩트Spring CoreCore 모듈은 DI와 IoC 패턴을 적용할 수 있는 기본적인 클래스들을 포함하며 항상 직간접적으로 Spring Core에 대한 종속성을 가지게 된다.spring-coreSpring BeansBean 모듈은 모든 bean 객체의 생명주기를 관리한다..빈 팩토리(BeanFactory)..

✏️ 핵심 관심사항(core concer)과 공통 관심사항(cross-cutting concer) 핵심관심사항 예) 은행서비스, 계좌서비스 , 소비자 소비스 등등 공통관심사항(부가기능) 예)보안, 트랜잭션, 로그인 인증 ✏️ AOP (Aspect Oriented Programming - 관점 지향 프로그래밍) 핵심 로직과 부가 기능을 분리하여 애플리케이션 전체에 걸쳐 사용되는 부가 기능을 모듈화하여 재사용할 수 있도록 지원하는 것 기존 oop는 함수로 뺄 수 없는 공통적으로 처리하는 부가 기능 로직이 중복되는 한계가 있어 이를 해결하기 위해 AOP가 등장하게 되었다. 이런 로직을 어스펙트(Aspect)라는 모듈 형태로 만들어서 설계하고 개발하는 방법이다. 즉 핵심적인 기능에서 부가적인 기능을 분리하는 것..

✏️ H2 데이터베이스 자바 기반의 오픈소스 관계형 데이트베이스 관리 시스템 스프링 부트가 지원하는 인메모리 관계형 데이터베이스 인메모리 특징 : 검색이 빠름, 휘발성(전원이 꺼지면 데이터 삭제) 브라우저 기반의 콘솔 프로그램 적은 용량으로 설치 가능 Embedded mode(내장모드) & Server mode(서버모드) 지원 Embedded mode(내장모드) : Application 서버 실행 종료시 데이터 모두 휘발 Server mode(서버모드) : Application 서버 종료시에도 지속적으로 해당 데이터를 사용 로컬환경이나 테스트 환경에서 많이 사용됨. ✏️ 순수 JDBC JDBC(Java Database Connectivity) 자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API J..

✏️ 스프링 빈(Bean) 빈(Bean)이란 스프링 컨테이너에 의해 재사용 가능한 소프트웨어 컴포넌트이다. 즉 스프링 컨테이너에 의하여 생성되고 관리하는 자바 객체를 뜻하며, 하나 이상의 빈(Bean)을 관리한다. Spring Framework에서는 ApplicationContext.getBean() 등의 메서드로 직접 자바 객체를 가져올 수 있다. IntelliJ 에서는 Bean 인 경우 아래 사진처럼 왼쪽에 아이콘으로 표시된다. 스프링에서 스프링 빈을 인지하는 2가지 방법 스프링은 약속되어 있는 어노테이션이 붙어있는 클래스를 자동으로 인지한다. @Component어노테이션이 붙어있다면, 스프링이 자동으로 인지할 수 있게 된다. → 컴포넌트 스캔을 이용한 방식 Bean Configuration File..