[React] 로그인 후 유저 정보를 Redux에 저장하기 (TypeScript)
·
Framework/React
유저가 로그인 후 유저의 정보를 리덕스에 저장하는 예제를 설명하는 글입니다. 이 글을 보기 전 읽으면 좋은 글 https://hulrud.tistory.com/101 [React] 리덕스 알아보기 리덕스가 무엇인지 알아보는 글입니다! 사용 방법은 언급되지 않습니다. 리덕스 리덕스는 리액트 앱의 상태를 관리하는 패키지입니다. 여기서 앱의 상태는 즉 데이터를 말합니다. 다시말해 하 hulrud.tistory.com 리덕스 패키지 설치하기 먼저 리덕스 패키지를 설치합니다. npm i redux @reduxjs/toolkit react-redux 유저 타입 정의하기 src에 types 디렉토리를 만들고 저장할 유저의 타입을 정의합니다. export const LOGIN_SUCCESS = 'LOGIN_SUCCES..
[React] 리덕스 알아보기
·
Framework/React
리덕스가 무엇인지 알아보는 글입니다! 사용 방법은 언급되지 않습니다. 리덕스 리덕스는 리액트 앱의 상태를 관리하는 패키지입니다. 여기서 앱의 상태는 즉 데이터를 말합니다. 다시말해 하나의 애플리케이션에서 다루는 데이터를 관리하는 패키지입니다. 리덕스의 세 가지 원칙 리덕스에는 아래와 같은 세 가지의 원칙이 있습니다. 단일 소스 진실 (Single Source of Truth): 리덕스는 애플리케이션의 상태를 단일 객체로 관리합니다. 이 객체는 애플리케이션의 모든 상태를 포함하며, 이를 스토어(Store)라고 합니다. 모든 컴포넌트에서 이 상태에 접근할 수 있습니다. 상태는 읽기 전용 (State is Read-Only): 리덕스의 상태는 읽기 전용입니다. 이는 상태를 직접 변경할 수 없으며, 대신 상태를..
[DB] 트랜잭션과 ACID, 데이터의 무결성
·
CS
트랜잭션과 무결성에 대해 공부한 내용을 정리한 글입니다. 트랜잭션 트랜잭션은 데이터베이스 시스템에서 수행되는 작업의 단위를 말합니다. 예를 들어 정보를 변경하거나 정보를 삽입할 때 사용되는 여러개의 쿼리를 묶은 단위를 트랜잭션이라고 합니다. 마치 프로그래밍의 함수와도 같습니다. 우리가 트랜잭션을 알아야 하는 이유는 트랜잭션은 데이터베이스에서 데이터의 일관성과 무결성을 유지하는 데에 중요한 개념이기 때문입니다. 트랜잭션은 ACID 속성을 준수함으로써 데이터의 일관성과 무결성을 유지할 수 있습니다. ACID 속성을 요약하자면 다음과 같습니다. 원자성 (Atomicity): 트랜잭션은 모두 실행되거나 모두 실행되지 않아야 합니다. 즉, 트랜잭션의 모든 작업이 성공하면 커밋되고, 하나라도 실패하면 롤백됩니다. ..
[CS] OSI 7계층이란
·
CS
OSI 7계층에 대해 공부한 내용을 정리한 글입니다. OSI 7 계층 OSI 7계층은 OSI 모델을 컴퓨터 네트워크에서 통신 프로토콜의 기능을 7개의 계층으로 나눈 것이고, 각 계층은 특정한 역할을 수행합니다. OSI(Open Systems Interconnection) 모델에서 계층을 나눈 이유는 네트워크 통신을 이해하고 설계하는 데 도움이 되는 구조를 제공하기 위함입니다. 이러한 구조를 통해 통신이 일어나는 과정이 단계별로 파악할 수 있습니다. 각 계층의 역할을 간단히 설명하겠습니다: 물리 계층 (Physical Layer): 데이터를 전송하기 위한 물리적 매체를 다룹니다. 예를 들어, 케이블, 광섬유, 무선 등이 여기에 해당합니다. 데이터 링크 계층 (Data Link Layer): 물리적인 네트워..
[Spring] VO와 BO, DAO, DTO란 무엇인가
·
Framework/SpringBoot
VO, BO, DAO, DTO는 소프트웨어 개발에서 주로 사용되는 용어들입니다. 각각의 용어는 소프트웨어의 다른 층에서 사용되는 객체들을 나타냅니다. 각각의 역할과 특징에 대해 간단히 설명해보겠습니다.요약VO (Value Object):VO는 값을 담는 객체를 나타냅니다. 주로 데이터베이스의 테이블에 대응되는 엔티티의 상태를 나타냅니다.VO는 주로 불변(Immutable)하고, equals() 및 hashCode()와 같은 메서드를 오버라이드하여 객체의 동등성을 비교하는 데 사용됩니다.BO (Business Object):BO는 비즈니스 로직을 처리하는 객체를 나타냅니다. 주로 비즈니스 규칙을 구현하고, 데이터를 처리하며, 다양한 계산을 수행하는 데 사용됩니다.BO는 비즈니스 도메인에서의 객체를 나타내며..
[디자인패턴] 싱글톤 패턴과 의존성 주입
·
CS
싱글톤 패턴에 대해 작성한 글입니다. 디자인패턴이란? 디자인패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 규약 형태로 만들어 놓은 것입니다. 디자인 패턴을 통해 개발자들은 문제를 해결할 때 일관된 방식으로 문제에 접근할 수 있습니다. 싱글톤 패턴 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴입니다. 보통 데이터 베이스 연결 모듈에 많이 쓰입니다. 왜냐하면 데이터베이스 연결은 시스템 전반에 걸쳐 공유되어야 하고, 중복 연결을 피해야 하기 때문입니다. import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLE..
[SpringBoot3] 스프링부트와 Swagger 연결방법
·
Framework/SpringBoot
Swagger가 무엇인지, 스프링부트 애플리케이션과 Swagger의 연결 방법에 대해 작성한 글입니다. Swagger란? Swagger는 API 개발 및 문서화를 위한 도구입니다. Swagger를 사용하면 자동으로 API를 문서화할 수 있습니다. 다음 기능들을 통해서 API를 문서화하고 관리할 수 있습니다. API 문서 자동 생성: Swagger를 사용하면 개발자가 작성한 API 코드를 기반으로 자동으로 API 문서를 생성할 수 있습니다. 이를 통해 API의 엔드포인트, 매개변수, 응답 형식 등에 대한 세부 정보를 쉽게 확인할 수 있습니다. API 스펙 정의: Swagger는 OpenAPI Specification(OAS)을 사용하여 API 스펙을 정의합니다. 이를 통해 API의 구조와 동작 방식에 대한..
[SpringBoot3] 엔티티 상속관계에서 @Builder 적용
·
Framework/SpringBoot
상속관계에서 Builder를 적용했을 때 발생한 이슈에 대해 작성한 글입니다. 발생 배경 엔티티에 @Builder 어노테이션을 사용하였습니다. @Entity @DiscriminatorValue("PRODUCT") @Getter @Builder @AllArgsConstructor @NoArgsConstructor(access = AccessLevel.PROTECTED) public class Product extends Item { @Enumerated(EnumType.STRING) @Column(nullable = false) private ProductStatus status; // ... } 다만 Product의 부모 엔티티인 Item에도 @Builder 어노테이션이 있는데요 @Entity @Inhe..
[CS] HTTP와 HTTPS란 무엇이고 어떤 차이가 있을까?
·
CS
HTTP와 HTTPS HTTP HTTP는 Hypertext Transfer Protocol의 약자로 클러아언트와 서버 간 통신을 위한 통신 규칙입니다. 사용자가 웹 사이트를 방문하면 사용자가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 대응합니다. 즉, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다. HTTPS HTTPS는 Hypertext Tranfer Protocol Secure의 약자로 HTTP에서 보안 레이어가 추가된 프로토콜입니다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 암호화된 연결을 사용합니다. HTTP의 동작 방식 클라이언트 요청: 클라이언트(웹 브라우저 등)가 웹 서버에게 요청을 보냅니다. 이 요청은 보통 웹 주소(예: http:/..
[CS] URL이란 무엇이고 어떻게 구성되어 있을까?
·
CS
URL의 정의와 구성에 대해 알아보는 글입니다. URL이란? URL은 "Uniform Resource Locator"의 약자로, 웹 상에서 특정 자원(웹 페이지, 문서, 이미지 등)의 위치를 나타내는 주소입니다. 따라 이론적으로 각각의 유효한 URL은 고유한 리소스를 가리킵니다. 물론 그 중에서 예외적으로 더 이상 존재하지 않거나, 이동한 리소스를 가리키는 URL도 존재합니다. URL의 구성 "https://www.example.com/search?q=url&lang=en" 위의 예시 URL과 이미지를 참고하여 URL의 구성을 알아보겠습니다. 프로토콜 위 이미지에서 Schema로 표시된 연두색 부분입니다. URL의 첫 번째 부분은 자원에 접근하기 위해 사용되는 프로토콜을 나타냅니다. 가장 흔한 프로토콜은..
[CS] 브라우저에 www.google.com 을 검색하면 일어나는 일
·
CS
브라우저에 www.google.com을 검색했을 때 일어나는 일을 짚어보면서 웹의 통신 흐름을 알아보는 글입니다. 큰 흐름 살펴보기 1. 브라우저 캐시 체크 브라우저 캐시 -> OS캐시 -> 라우터 캐시 -> ISP 캐시에서 google.com과 대응하는 IP 주소를 찾는다 브라우저 캐시에서 google.com에 대한 데이터가 있는지 찾습니다. 브라우저 캐시에 데이터가 없다면 OS캐시를 찾아보게 됩니다. 그 다음 라우터 캐시, ISP(Internet Service Provider)캐시를 확인합니다. 캐시 캐시는 데이터나 정보를 일시적으로 저장하는 장소를 가리킵니다. 컴퓨터 시스템에서 캐시는 빠른 액세스를 위해 사용되며, 데이터에 다시 액세스할 때 더 빠르게 데이터에 접근할 수 있도록 도와줍니다. 라우터 ..
[SpringBoot] application.properties에서 DB 정보 등 민감한 내용 분리하기
·
Framework/SpringBoot
application.properties의 정보들을 분리하여 관리하는 방법에 대해 설명한 글입니다. application.properties란 spring.jpa.defer-datasource-initialization=true spring.datasource.url=jdbc:mysql://localhost:3306/mydb spring.datasource.username=root spring.datasource.password=1234 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.jpa.hibernate.ddl-auto=create application.properties는 자바 기반의 애플리케이션에서 주로 사용되는 설정 파일..