이 포스팅은 저자 김민준 님의 ‘리액트를 다루는 기술’을 참고하여 작성되었습니다. React 프로젝트에서 Redux를 이용한 상태관리 리액트에서 리덕스를 사용할 때 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컨포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동된 컴포넌트로, 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 한다. 카운터 컴포넌트 만들기 숫자를 더하고 뺄 수 있는 카운터 컴포넌트 생성 components/Counter.js import React from 'react'; const Counter = ({ number, o..

리덕스란? JavaScript(자바스크립트) 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. 리덕스를 사용하는 이유? 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스의 세 가지 규칙 1. Single source of truth(단일 스토어) 하나의 애플리케이션 안에는 하나의 스토어가 있다. 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only(읽기 전용 상태) 상태를 업데이트 할때는 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다...

프로젝트에 라우터 적용 $ yarn add react-router-dom 명령어 실행하여 라이브러리 설치 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); BrowserRouter라는 컴포넌트를 이용하여 App를 감싸면 라우터가 적용이 된다. 로 특정 주소에 컴포넌트 연결 Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의할 수 있..

1. useMemo 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. Memoization된 값을 return 해주는 hook이다. memoization이란? 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술 UseMemo 사용법 function Component({a, b}) { const result = compute(a, b) return {result} } 만약 위에서 복잡한 연산을 수행하는 compute라는 함수가 있을때 사용할 수 있다. function Component({a, b}) { const result = useMemo(() => compute(a, b), [a..

JPA에서의 연관관계를 알아볼때 목표 객체지향적인 패러다임과 관계형 DB가 지향하는 패러다임의 차이를 이해해야 한다. 객체의 참조와 테이블의 외래 키를 매핑 용어 방향(Direction) : 단방향, 양방향 다중성(Multiplicity) : 다대일(N:1), 일대다(1:N), 일대일(1:1), 다대다(N:M) 연관관계의 주인(Owner) : 객체 양방향 연관관계는 관리 주인이 필요하다. 객체와 테이블 연관관계 사이의 차이 테이블의 경우 select * from member m join team t on m.team_id = 1 두개의 테이블을 조인하는 경우에는 join 쿼리문 하나로 간단하게 할 수 있다. 객체의 경우 Team team = new Team(); team.setName("TeamA"); ..

기본 키 매핑 어노테이션 @Id 와 @GeneratedValue 직접 할당 : @Id만 사용 자동생성(@GeneratedValue) IDENTITY : 데이터베이스에 위임, MYSQL SEQUENCE : 데이터베이스 시퀸스 오브젝트 사용, ORACLE → @SequenceGenerator 필요 TABLE : 키 생성용 테이블 사용, 모든 DB에서 사용 → @TableGenerator 사용 AUTO : 방언에 따라 자동 지정, 기본값 IDENTITY 기본 키 생성을 데이터베이스에 위임 주로 MySQL, PostgreSQL, SQL Server, DB2에서 사용 JPA는 트랜잭션 커밋 시점에 INSERT SQL 실행 하지만, AUTO_INCREMENT는 데이터베이스에 INSERT SQL을 실행한 이후에 ID..

JPA - 필드와 매핑 어노테이션 정리 매핑 어노테이션 @Column : 컬럼 매핑 @Temporal : 날짜 타입 매핑 @Enumerated : enum 타입 매핑 @Lob : BLOB, CLOB 매핑 @Transient : 특정 필드를 컬럼에 매핑하지 않음 @Entity public class Member { @Id private Long id; @Column(name = "name") private String username; private Integer age; @Enumerated(EnumType.STRING) private RoleType roleType; @Temporal(TemporalType.TIMESTAMP) private Date createdDate; @Temporal(Tempor..

JPA - 스키마 자동생성 옵션 및 DDL 생성 기능 데이터 베이스 스키마 자동 생성 DDL을 애플리케이션 실행 시점에 자동 생성 개발할때 객체에 매핑을 해놓으면 필요한 테이블을 자동 생성해준다. DB 방언을 활용해서 데이터 베이스에 맞는 적절한 DDL 생성(h2 인경우 varchar로 생성, Oracle인 경우 varchar2 로 생성을 자동으로 해준다) 생성된 DDL은 개발 장비에서만 사용 생성된 DDL은 운영서버에서는 사용하지 않거나, 적절히 다듬은 후 사용 스키마 자동생성 속성 hibernate.hbm2ddl.auto 속성에 값을 지정 스키마 자동생성 주의할점 운영 장비에는 절대 create, create-drop, update 사용하면 안된다. 개발 초기 단계는 create 또는 update 사..

VPC(Virtual Private Cloud)란? 사용자가 정의하는 가상의 네트워크이다. AWS가 채택한 네트워킹 방식 중 하나이며, 이를 사용하는 모든 서비스는 VPC 보안 통제 대상이다. VPC를 통해 인스턴스가 속하는 네트워크를 구분하여 각 네트워크에 맞는 설정을 부여할 수 있다. 또한, 인스턴스가 속하는 네트워크를 구분하여 시스템 복잡도가 낮아진다. VPC의 구성 요소 구성 요소를 마을에 비교해보자. 우리집 - 인스턴스 마을 - 인스턴스가 모인 서브넷 동 - 서브넷이 모인 VPC 본인 - 인스턴스에서 나온 패킷 or 트래픽 초등학교, 중학교 - 인스턴스와 통신할 서비스 등교 - 통신 같은 마을(VPC)에 위치한 초등학교는 길을 건널 필요가 없다 → 서브넷 내부 서비스 간의 통신에서는 라우팅이 필..

애자일(Agile) 방법론이란? Agile은 사전적 의미로 기민한, 날렵한 이란 뜻으로 좋을 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을 통칭하는 말이다. 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해나가는 프로세스 모델 방식이다 미리 정해진 몇개의 단계에 따라 엄격한 순서대로 이루어지는 폭포수 프로세스와는 반대의 개념이다 → 처음부터 완벽한 계획이 아닌 간소한 계획과 유연한 대처를 추구하는 방법론 애자일 선언문 공정과 도구보다 개인과 상호작용을 포괄적인 문서보다 작동하는 소프트웨어를 계약 협상보다 고객과의 협력을 계획을 따르기보다 변화에 대응하기를 애자일 방법론의 장점, 단점 장점 프로젝트 계획에 걸리는 시간을 최소화할 수 있..