나를 위한 블로그

1. Multi-AZ를 사용하지 않으려 했던 이유 AWS RDS의 프리티어 T2 인스턴스를 사용 중이며, Multi-AZ는 T2에서 지원되지 않습니다. Multi-AZ를 사용하려면 T3 이상 인스턴스로 업그레이드해야 하는데, 이는 추가 비용이 발생합니다. 비용을 절감하기 위해 Spring에서 장애 복구 및 페일오버 로직을 직접 구현하는 방법을 고민하였습니다. 2. 시도했던 해결책과 발생한 문제들 (1) 프라이머리 장애 발생 시, 레플리카를 승격하고 기존 프라이머리를 다시 레플리카로 전환하는 방법 시도한 방법 프라이머리가 장애 발생하면 리드 레플리카를 프라이머리로 승격 기존 프라이머... Read More

AWS RDS 레플리카란? AWS RDS의 레플리카(Replica)는 읽기 성능 향상 및 장애 복구 대비를 위해 데이터베이스의 복제본을 생성하는 기능입니다. 레플리카는 크게 두 가지 유형으로 나뉩니다. 리드 레플리카 (Read Replica) 멀티 AZ (Multi-AZ) 1. 리드 레플리카 (Read Replica) 리드 레플리카는 읽기 작업 부하 분산을 위해 사용되며, 프라이머리 데이터베이스(Primary DB)의 변경 사항을 비동기적으로 복제합니다. 1) 리드 레플리카의 특징 읽기 전용으로 사용되며, 직접 쓰기 작업은 불가능합니다. 비동기 복제 방식으로 이루어지며, 약간의 데... Read More

1. 혼동 행렬 혼동 행렬은 실제값과 예측값의 일치 여부를 시각적으로 표현한 행렬입니다. 2x2 혼동 행렬의 구조는 True Positive (TP): 실제 양성이고 예측도 양성인 경우 False Positive (FP): 실제 음성이지만 예측은 양성인 경우 True Negative (TN): 실제 음성이고 예측도 음성인 경우 False Negative (FN): 실제 양성이지만 예측은 음성인 경우 Confusion Matrix [[TN FP] [FN TP]] 다중 클래스 행렬(3x3 이상)은 클래스별... Read More

1. 개요 평균 절대 오차(MAE), 평균 제곱 오차(MSE), 평균 제곱근 오차(RMSE), 평균 절대 비율 오차(MAPE)를 활용하여 정량적인 분석을 수행합니다. 일반적으로 회귀 평가 지표는 실제 추천 결과와 사용자가 실제로 선택한 행동 간의 관계를 평가하기 위해 사용됩니다. 이를 통해 추천 시스템의 성능을 정량적으로 파악할 수 있습니다. 랜덤 추천은 영화에 무작위로 평점을 부여하고, 이를 기반으로 상위 영화를 추천하는 방식입니다. 본 분석 내용은 무작위 평점과 실제 평점 간의 차이를 평가합니다. 2. 회귀 평가 지표 1) 평균 절대 오차 (Mean A... Read More

1. 문제 상황 처음 ipynb 에서 작성하였습니다. 문제) 정상 작동을 확인 후에 디렉토리화하는 과정에서 스케일이 꼬이거나 빈 이미지를 저장하는 문제가 발생했습니다. 2. 수정 사항 1) visualizations.py에서 열고, 그리고, 저장, 닫기까지 처리 각 시각화 함수 내부에서 plt.show()를 제거하고 plt.figure() → 그래프 그리기 → plt.savefig(save_path) → plt.close() 순으로 수정 이처럼 각 함수가 직접 Figure 생성부터 저장 후 닫기까지 한 번에 처리하도록 합니다. 2) main.py에서는 경... Read More

1. 퍼블릭 IP 1) 정의 퍼블릭 IP는 인터넷을 통해 직접 접근할 수 있는 IP 주소. 2) 장점 설정이 간단: 초기 설정이 쉽고, 어디서든 접근 가능. 다른 네트워크 연결 지원: 서로 다른 네트워크 간 통신에 적합. 3) 단점 보안 위험: 외부 접근이 가능하여 방화벽 설정이 필수. 비용 발생: 퍼블릭 IP 사용 시 데이터 전송 비용 추가. 네트워크 비효율: 같은 VPC 내에서도 인터넷을 경유하게 되어 비효율적. 4) 권장 사례 초기 테스트 환경에서 빠른 설정이 필요할 때. Nginx와 백엔드 서버가 서로 다른 네트워크나 VPC에 있을 때. 2. 프라이빗 IP ... Read More

1. 로드 밸런싱을 위한 환경 구성 EC2 인스턴스를 2개 이상 생성 동일한 백엔드 애플리케이션(Java 등)을 EC2 인스턴스에 배포하고, 포트 8080에서 실행되도록 설정 Nginx에서 각 인스턴스를 로드 밸런싱 대상으로 정의하기 위해 EC2의 프라이빗 IP 또는 퍼블릭 IP를 확인 클라이언트 애플리케이션(React 등 정적 파일)은 Nginx 서버의 / 경로에서 처리하도록 배포 2. Nginx 로드 밸런싱 설정 1) 설정 파일 구성 Nginx 설정 파일에 upstream 블록을 추가하여 백엔드 서버를 정의합니다. 기본 라운드 로빈 방식(요청이 들어오면 나열된 서버로 순차적으로... Read More

1. .value_counts()의 기본 동작 1) 개념과 동작 원리 value_counts()는 Series에서 사용되며, 각 고유 값의 빈도수를 계산하여 내림차순으로 정렬된 Series를 반환합니다. 인덱스는 고유 값, 값은 해당 고유 값의 빈도수로 구성됩니다. 예제 코드 import pandas as pd data = pd.Series(['A', 'B', 'A', 'C', 'B', 'A']) result = data.value_counts() print(result) 실행 결과 A 3 B 2 C 1 dtype: int64 A, B, C: 데이터의 고유 값. 3, ... Read More

1. 개념적 차이 1) JPA (Java Persistence API) Java 표준 ORM(Object Relational Mapping) 기술입니다. 데이터를 객체 지향적으로 처리하며, 데이터베이스 테이블을 자바 클래스(Entity)로 매핑합니다. Hibernate, EclipseLink 등 다양한 구현체가 있으며, 데이터를 객체화해 비즈니스 로직을 작성합니다. 2) MyBatis SQL 중심의 데이터 매핑 프레임워크입니다. XML Mapper 또는 어노테이션으로 SQL을 작성하고 이를 자바 객체와 매핑합니다. SQL을 명시적으로 작성해 데이터 조작을 세부적으로 제어할 수 있습니다... Read More

MyBatis란? MyBatis는 Java의 데이터 매핑 프레임워크로, SQL 쿼리와 자바 객체를 매핑하여 데이터베이스와 애플리케이션 간 데이터를 쉽게 다룰 수 있도록 도와줍니다. Spring Boot와 MyBatis를 함께 사용하면 SQL 중심의 데이터베이스 작업을 간단하고 직관적으로 처리할 수 있습니다. 1. MyBatis 동작 원리 MyBatis는 다음과 같은 과정을 거쳐 데이터를 처리합니다. (1) XML Mapper 파일에서 SQL 쿼리를 정의합니다. (2) 자바의 Mapper 인터페이스와 XML Mapper를 연결합니다. (3) 서비스 계층에서 Mapper 인터페이스를 호출합니다. (4) SQ... Read More

1. 히스토그램 (Histogram) 1) 정의 데이터를 일정한 구간(빈, bin)으로 나누고 각 구간에 포함된 데이터 개수를 시각화하는 막대 그래프 데이터의 빈도를 중심으로 분포를 확인할 수 있음 2) 특징 x축은 데이터의 값 또는 값의 범위를 나타냄 y축은 각 구간(bin)에 포함된 데이터 개수(빈도)를 나타냄 특정 값에 데이터가 몰려 있는지, 또는 고르게 분포되어 있는지 확인 가능 3) 장단점 장점 데이터의 전체 분포를 직관적으로 파악 가능 대량의 데이터를 요약해서 보여줌 단점 빈(bin)의 크기와 개수... Read More

1. 결측치 (Missing Value) 1) 정의 데이터가 존재해야 할 위치에 값이 없는 경우를 말합니다. 2) 원인 데이터 수집 과정에서 누락 입력 실수 특정 조건에서 값이 정의되지 않음 3) 예시 user_id movie_id rating 1 101 4 2 NaN 5 3 103 NaN 4) 처리 방법 데이터를 이해하고 분석 목적에 맞게 결측치 처리 방법... Read More

1. 상수 필드나 열거형의 한계 상수 필드: 단순한 값(변하지 않는 데이터)을 표현하기에 적합. public class Constants { public static final String ROLE_ADMIN = "ADMIN"; public static final String ROLE_USER = "USER"; } 이런 상수는 값 자체를 표현하지만, 값 간의 연산이나 동작을 정의할 수 없음. 불변성은 보장되지만, 상수 값이 가지는 의미나 동작을 캡슐화하기 어렵다. 열거형(Enum): 고정된 값 집합을 표현할 때 적합. pub... Read More

1. DTO와 VO란? 1) DTO(Data Transfer Object) DTO는 데이터를 전송하기 위한 객체로, 주로 클라이언트와 서버 간의 데이터 교환을 목적으로 사용됩니다. 주로 Getter와 Setter만 가지며, 비즈니스 로직을 포함하지 않습니다. 불변성을 보장하지 않아 데이터를 자유롭게 수정할 수 있습니다. 데이터베이스에서 가져온 데이터를 가공하여 클라이언트로 전달하거나, 클라이언트에서 받은 데이터를 처리하기 위해 사용됩니다. 2) VO(Value Object) VO는 값 자체를 표현하는 객체로, 주로 불변성이 중요한 곳에서 사용됩니다. final 클래스와 final 필드... Read More

1. sudo apt install python3-pandas 설명 apt는 Ubuntu/Debian과 같은 Linux 배포판에서 시스템 패키지를 관리하는 도구입니다. 이 명령은 pandas 패키지를 시스템 전체에 설치하며, 패키지 버전은 Ubuntu의 소프트웨어 저장소(Repository)에 등록된 버전을 따릅니다. 특징 설치되는 버전은 안정성을 우선으로 하며, 최신 버전이 아닐 수 있습니다. 시스템 Python 환경에 설치되므로 모든 사용자와 프로젝트에서 공유됩니다. 설치된 pandas는 시스템의 Python 인터프리... Read More

Jupyter Notebook를 사용하면서 GitHub에 push 했는데 .ipynb_checkpoints 도 같이 push됨을 확인하였습니다. 1. .ipynb_checkpoints의 목적 Jupyter Notebook이 자동 저장 기능을 사용할 때 생성하는 디렉터리로, 작업 중 데이터 손실을 방지하기 위한 임시 파일을 저장합니다. 주로 수정된 상태의 체크포인트를 저장하며, 최종 결과물이 아니므로 GitHub에 푸시할 필요가 없습니다. 2. 이미 푸시한 .ipynb_checkpoints 삭제하는 법 (1) .gitignore 설정 루트 디렉터리에 .gitignore 파일을 생성하여 다음 내용... Read More

1. Jupyter Notebook 설치 pip install jupyter 2. 마주친 문제 1) 문제 rpds-py 패키지가 Rust 컴파일러(Cargo 포함)를 필요로 하지만, 현재 시스템에 Rust가 설치되어 있지 않아서 발생한 문제입니다. 2) 원인 설치한 Python은 최신버전인 3.13.0 Jupyter Notebook 최신 버전은 7.x Jupyter Notebook의 7.0 버전부터 Rust 컴파일러를 필요로 하는 의존성이 도입 파이썬과 주피터 노트북을 설치하는 데 Rust가 필수는 아닙니다. 하지만 최신 Jupyter 버전에서 Rust를 사용하는 의존성이 추가된 경... Read More

pip 환경변수 추가로 해결 https://blog.naver.com/jaeyoon_95/222228697034 Read More

Thymeleaf란? HTML과 서버 데이터를 결합하여 동적인 웹 페이지를 생성하는 템플릿 엔진입니다. 스프링 부트와 쉽게 통합되며, 데이터를 HTML 태그에 동적으로 바인딩할 수 있습니다. 1. Thymeleaf를 사용하기 위한 준비 1) 의존성 추가 Thymeleaf를 사용하려면 프로젝트에 spring-boot-starter-thymeleaf 의존성을 추가해야 합니다. build.gradle dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' } pom.xml(Maven) <... Read More

1. 빌더 패턴(Builder Pattern)이란? 빌더 패턴은 복잡한 객체를 안전하고 명확하게 생성하기 위한 디자인 패턴입니다. 필수 값과 선택 값을 구분하며, 메서드 체이닝 방식으로 객체 생성 과정을 간결하게 표현할 수 있습니다. 빌더 패턴의 특징 필수 값 지정: 반드시 필요한 값만 설정할 수 있도록 강제 선택 값 유연성: 선택적으로 설정 가능하며, 설정하지 않으면 기본값이 유지 불변성 보장: 생성된 객체는 필드 값이 변경되지 않도록 설계 가독성 향상: 메서드 체이닝으로 설정 과정을 직관적으로 표현 2. 필수 값과 선택 값의 구분 1) 구분 기준 필수 값: 빌더 클래스의 생성자... Read More

1. 의존성 주입이란? 의존성 주입(Dependency Injection)은 객체 간 결합도를 낮추고 코드를 더 유연하게 만들어주는 설계 방식입니다. 클래스가 필요한 객체를 직접 생성하지 않고, 외부에서 주입받아 사용합니다. 주요 특징 결합도 감소 유연성 증가 테스트 용이성 향상 2. 의존성 주입이 없는 코드 의존성 주입을 적용하지 않은 코드에서는 클래스가 특정 구현체에 강하게 결합되어 있습니다. 이를 통해 문제점을 살펴보겠습니다. 게시글 관리 기능 (BoardService.java) public class BoardService { private final File... Read More

Java의 HashSet과 HashMap은 컬렉션 프레임워크에서 자주 사용하는 데이터 구조입니다. HashSet은 중복을 허용하지 않는 집합(Set) 구조이며, HashMap은 키-값 쌍으로 데이터를 저장하는 맵(Map) 구조입니다. 1. HashSet의 동작과 특징 HashSet은 중복을 허용하지 않으며, 데이터의 순서를 보장하지 않습니다. 내부적으로 해시 테이블(Hash Table)을 사용해 데이터를 저장하며, 빠른 데이터 검색이 가능합니다. 주요 동작 예제 package _08_collection._set; import java.util.HashSet; import java.... Read More

Java ArrayList vs. LinkedList Java의 ArrayList와 LinkedList는 List 인터페이스를 구현한 두 가지 대표적인 컬렉션입니다. 1. ArrayList의 동작과 특징 ArrayList는 내부적으로 배열을 사용하여 데이터를 저장합니다. 크기가 동적으로 변경되며, 인덱스를 통해 빠르게 데이터에 접근할 수 있습니다. 하지만, 중간이나 앞부분에 요소를 추가하거나 삭제하면 나머지 데이터를 재배열해야 하므로 성능이 저하될 수 있습니다. ArrayList 예제 package _08_collection._list; import java.util.ArrayLis... Read More

이전 작성한 Lazy Loading 문제에서 해결 방법 중 한가지의 내용을 다룹니다. JPA(Java Persistence API)는 엔티티의 데이터 로딩 방식을 제어하기 위해 LAZY(지연 로딩)와 EAGER(즉시 로딩)라는 두 가지 방법이 있습니다. 이들의 장단점과 차이점에 대해 알아보겠습니다. 1. LAZY와 EAGER란? 1) LAZY (지연 로딩) LAZY는 연관된 엔티티 데이터를 실제로 사용하는 시점에 데이터베이스에서 조회합니다. (1) 특징 초기에는 프록시 객체를 생성하여 연관 데이터를 로드하지 않습니다. 연관 데이터를 사용할 때 추가 쿼리를 실행하여 필요한 데이터를 로드합니... Read More

Docker와 AWS를 이용한 배포 과정 Docker 이미지를 생성하고 Docker Hub를 통해 AWS에서 배포한 후 발생한 문제와 해결 방안까지 단계별로 설명합니다. 1. Docker 이미지 생성 1) Dockerfile 작성 프로젝트 루트 디렉토리에 다음과 같은 Dockerfile을 생성함. # Gradle 빌드 이미지 FROM gradle:8.10.2-jdk17 AS build WORKDIR /app COPY . . RUN gradle build -x test --no-daemon # 경량화된 JDK 이미지 FROM openjdk:17-jdk-slim COPY --from=build /... Read More

Nginx에서 React 애플리케이션의 CSP(Content Security Policy) 오류 해결 React 애플리케이션을 Nginx로 배포하면서 Spring Boot API 서버와 통신하는 과정에서 CSP(Content Security Policy) 오류가 발생했습니다. 1. CSP란 무엇인가? CSP(Content Security Policy)는 웹 애플리케이션의 보안을 강화하기 위해 특정 출처에서만 리소스를 로드하도록 제한하는 보안 헤더입니다. CSP는 XSS(크로스 사이트 스크립팅) 공격이나 데이터 탈취 같은 보안 위협을 예방하는 데 중요한 역할을 합니다. 하지만 CSP 설정이 누... Read More

Cookie 헤더에서 JWT 추출 오류와 해결 방법 1. 문제 상황 클라이언트가 요청한 HTTP 헤더의 Cookie에서 JWT를 추출하는 과정에서 문제가 발생했습니다. 기존 코드는 Cookie 값만 JWT로 가정했으나, 실제로 여러 쿠키가 함께 전송되면서 올바르게 JWT를 추출하지 못하는 상황이 발생했습니다. 예상된 결과: JWT 값을 올바르게 추출해 인증을 처리해야 함. 실제 결과: JWT 값이 추출되지 않고, 인증 실패로 인해 401 에러가 반환됨. 2. 문제 원인 문제의 코드 기존 코드는 Cookie 헤더의 첫 번째 값만 확인하고, 그것이 jwt=로 시작한다고 가정했습니다. 이로 인해 ... Read More

DTO, @Query, 그리고 EAGER 1. 문제 상황 ChatNotificationService의 unreadNotification 메서드에서 Hibernate의 Lazy Loading 필드에 접근하려 할 때, 트랜잭션 범위가 종료되어 LazyInitializationException 오류가 발생했습니다. 주요 원인 User와 ChatRoom 엔티티가 fetch = FetchType.LAZY로 설정. WebSocket 환경에서는 세션이 짧아, Hibernate가 지연 로딩된 데이터를 로드하려 할 때 트랜잭션 범위가 종료됩니다. 2. Lazy Loading 문제 발생 흐름 ... Read More

Lombok과 JPA에서 boolean 필드 Getter/Setter 충돌 문제 해결하기 1. 문제 상황 boolean 타입 필드를 JPA와 Lombok으로 처리하는 엔티티를 설계할 때, Getter/Setter 메서드에서 충돌 문제가 발생할 수 있습니다. 주요 원인 boolean 필드에 대해 isXxx() 형태의 Getter를 생성. getXxx() 형태의 Getter를 요구. 이러한 불일치로 인해 NoSuchMethodError와 같은 오류가 발생 2. 문제의 원인 boolean 필드가 isBlacklist와 같이 is 접두사로 시작하면, Lombok은 다음과 같은 메서드를 자동 생성... Read More

프록시 객체 직렬화 문제 1. 문제 상황 ChatRoomDTO에서 Hibernate의 Lazy Loading된 필드를 JSON으로 직렬화하는 과정에서 InvalidDefinitionException 오류가 발생했습니다. Jackson이 org.hibernate.proxy.pojo.bytebuddy.ByteBuddyInterceptor와 같은 프록시 객체를 직렬화할 수 없기 때문에 발생한 문제입니다. 특히, meetingCategory와 같은 필드가 Hibernate 프록시 객체로 설정되어 있어 이 필드를 직렬화하려고 할 때 문제가 생겼습니다. 2. ... Read More

PaginationResponseDTO에서 null 값 처리 1. 문제 상황 페이지네이션 응답구조를 위해 PaginationResponseDTO를 오버로딩으로 작성하여, 단일데이터(data), 데이터리스트(dataList) 로 나누어서 응답하도록 작성하였습니다. 기존 구조에서는 PaginationResponseDTO 가 단일데이터(data), 데이터리스트(dataList) 중에 하나를 선택하여 사용하게 되는데, 불필요하게 다른 한쪽이 null 나와 항상 데이터 응답값에 null 이 포함되는 문제가 생겼습니다. 물론 존재한다고하여 문제가 생기는 것은 아니였지만, null 이 반환된다는 부분이... Read More

@SendTo와 SimpMessagingTemplate의 차이점 1. 자동 메시지 전송 (@SendTo) @SendTo는 메서드가 반환한 메시지를 자동으로 지정된 WebSocket 구독경로로 전송. 장점: 간단하고 직관적이며, 특별한 설정 없이 빠르게 메시지를 전송. @MessageMapping 메서드에서 메시지를 처리하고 그 결과를 자동으로 전송. 프로젝트에서는 일반 메세지 처리. (MessageType: CHAT) 2. 세밀한 제어 (SimpMessagingTemplate) SimpMessagingTemplate은 메시지를 특정 목적지로 보내는 데 있어 더 많은 제어를 제... Read More

실시간 통신 기술과 단체 채팅방 구축 실시간 통신을 구현하는 다양한 기술들이 존재하며, 각각의 장단점이 있습니다. 프로젝트의 성격과 요구 사항에 따라 적합한 방식을 선택하는 것이 중요합니다. 모임을 위한 단체 채팅방 프로젝트에서 STOMP와 WebSocket을 사용하게 된 이유를 알아보겠습니다. 1. 실시간 통신을 위한 다양한 기술들 Long Polling 클라이언트가 서버에 요청을 보내고, 서버가 데이터가 준비될 때까지 연결을 유지하는 방식. 장점: 일반 Polling보다 실시간 반응이 우수하여, 간단한 알림 시스템이나 간헐적 업데이트에 적합합니다. 단점: 요청... Read More

기능 기반 vs 레이어드 기반 프로젝트를 진행할 때 디렉터리 구조는 단순한 폴더 구성이 아니라 코드의 유지보수와 개발 효율성을 크게 좌우하는 중요한 요소입니다. 과거 기능 기반 구조로 프로젝트를 진행한 적이 있었고, 이번 프로젝트에서는 레이어드 기반 구조로 프로젝트를 진행해 보았습니다. 아래 두 예시는 각각 기능 기반 구조와 레이어드 기반 구조로 설계된 프로젝트 트리입니다. 1. 기능 기반 구조 (Feature-based Structure) 기능 기반 구조는 각 기능을 중심으로 코드가 구성되는 방식입니다. 아래와 같이 chat, meeting, user 같은 기능별로 최상위 폴더를 나누... Read More

프로젝트 기간 - 2024년 10월 21일 ~ 2024년 11월 08일 프로젝트 명 - Kinderpia 프로젝트 내용 - 부모와 아이들이 함께할 공간을 소개하고 모임을 만들어 함께 할 수 있는 플랫폼 프로젝트 Repo - https://github.com/ymind14563/kinderpia_back KEEP: 잘한 점 자유로운 의견 공유 및 소통 중간 결과물 체크 및 상황 공유 Docker, Jenkins 활용 WebSocket과 STOMP를 활용한 채팅 적절한 역할 분배 세부적인 문서화 PROBLEM: 아쉬웠던 점 향후 팀원 부재에 대한 염려로 프로젝트... Read More

1. 제너릭(Generic)이란? 제너릭(Generic)은 자바에서 데이터 타입을 일반화하여 다양한 타입을 하나의 클래스나 메서드에서 처리할 수 있도록 해주는 기능입니다. 제너릭을 사용하면 타입을 미리 지정하지 않고, 런타임이 아닌 컴파일타임에 타입 안정성을 확보할 수 있습니다. 제너릭의 필요성 타입 안정성: 잘못된 타입의 데이터가 사용될 때 컴파일러가 미리 에러를 감지할 수 있습니다. 코드 재사용성: 여러 타입을 하나의 클래스나 메서드에서 처리할 수 있으므로 코드 중복을 줄이고 재사용성을 높입니다. 타입 변환의 필요성 제거: 제너릭을 사용하면 타입 캐스팅을 할 필요가 없으므로 코드가 간결해집... Read More

1. Wrapper 클래스란? Wrapper 클래스는 자바에서 기본 데이터 타입(Primitive Type)을 객체로 포장할 수 있는 클래스입니다. 자바는 기본적으로 int, char, boolean과 같은 기본 타입과 Integer, Character, Boolean과 같은 참조 타입(객체)을 구분합니다. Wrapper 클래스는 이 두 타입을 상호 변환할 수 있도록 돕는 클래스들입니다. 자바에서 기본 타입은 성능 최적화를 위해 사용되지만, 객체로 다뤄야 할 경우에는 Wrapper 클래스를 사용해야 합니다. 예를 들어, 컬렉션(Collection) 같은 자료 구조에서는 객체만을 저장할 수 있기 때문에 기본 타입... Read More

0. ENUM 사용 선택 분석 결과, 상태 정보가 단순하고 변경 가능성이 낮았습니다. 주로 모임 수락 여부(수락, 거절, 차단)나 활동 상태(활동, 차단)와 같이 고정적인 값들이어서 추가 속성이나 복잡한 구조가 필요하지 않았습니다. 따라서 ENUM을 사용하는 방식이 더 효율적이라고 판단했습니다. 이를 통해 테이블 구조가 간단해졌고, 조인 없이도 빠른 조회가 가능해졌습니다. 또한 상태 정보가 고정적이므로 확장성이 중요한 요구 사항이 아니었기에 ENUM이 적합한 선택이었습니다. 같은 이유로 불리언 타입의 컬럼 또한 별도의 테이블을 생성하지 않고 테이블에 직접 추가해도 문제가 없을 것으로 예상했습니다. 하지만 상... Read More

0. 매핑 테이블에 상태를 포함한 방식의 선택 초기 설계 단계에서는 상태 정보를 별도의 테이블로 분리하여 관리하려 했습니다. 그러나 요구 사항을 분석한 결과, 상태 정보가 단순하고 복잡한 구조가 필요하지 않다는 결론이 나왔습니다. 상태 정보는 주로 차단 여부 및 수락 여부 정도로 제한적이었기 때문에, 상태 정보를 매핑 테이블에 포함시키는 방식이 더 효율적이었습니다. 이 방식을 채택함으로써 데이터 모델이 단순화되었고, 일반적인 조회 및 수정 작업에서 성능이 향상되었습니다. 또한 관계와 상태 정보를 한 곳에서 관리하므로 유지보수도 용이해졌습니다. 하지만, 상태 정보가 복잡하거나 확장 가능성이 높다면 별도의 상태... Read More

1. 인터페이스란? 인터페이스(interface)는 객체 지향 프로그래밍에서 클래스가 구현해야 할 메서드의 틀을 정의하는 역할을 합니다. 인터페이스는 메서드의 선언부만 제공하며, 그 메서드를 구현하는 것은 해당 인터페이스를 구현하는 클래스의 책임입니다. 일관된 동작을 보장하고, 클래스 간의 호환성을 높일 수 있습니다. 인터페이스의 특징 인터페이스는 추상 메서드만 가질 수 있으며, 구체적인 구현은 없습니다. 다중 상속이 가능합니다. 한 클래스는 여러 인터페이스를 구현할 수 있습니다. 인터페이스는 상수 필드를 가질 수 있으며, 이 상수들은 자동으로 public static final로 ... Read More

1. 추상 클래스란? 추상 클래스(Abstract Class)는 공통된 필드와 메서드를 자식 클래스에서 상속받아 사용할 수 있도록 하는 클래스입니다. 추상 클래스는 실체가 없는 클래스로, 인스턴스를 직접 생성할 수 없습니다. 추상 클래스는 일반 메서드와 추상 메서드를 모두 포함할 수 있으며, 자식 클래스에서 추상 메서드를 반드시 구현해야 합니다. 추상 클래스의 특징 new 연산자로 인스턴스를 생성할 수 없습니다. 추상 클래스는 직접적으로 사용할 수 없으며, 자식 클래스에서 상속받아 사용해야 합니다. 공통적인 필드나 메서드를 정의하여, 이를 자식 클래스들이 상속받아 재사용할 수 있습니다.... Read More

1. 상속(Inheritance)이란? 상속(Inheritance)은 객체 지향 프로그래밍에서 기존 클래스로부터 필드와 메서드를 물려받아 새로운 클래스를 정의하는 방식입니다. 이를 통해 코드의 재사용성을 극대화할 수 있으며, 자식 클래스는 부모 클래스의 기능을 그대로 사용하거나 필요한 부분만 수정하여 기능을 확장할 수 있습니다. 상속을 활용하면 코드 중복을 줄이고, 유지보수가 쉬운 구조를 만들 수 있습니다. 상속의 주요 개념 부모 클래스 (Super Class): 공통된 속성과 메서드를 정의하는 클래스. 자식 클래스 (Sub Class): 부모 클래스로부터 상속받아 기능을 재사용하거나 확장하는 클래스... Read More

Java의 final 1. final이란? final 키워드는 변경할 수 없는 값 또는 상수를 정의할 때 사용됩니다. 변수에 final 키워드를 붙이면 그 값은 단 한 번만 할당될 수 있으며, 그 이후에는 변경할 수 없습니다. 1) final의 특징 (1) 값 변경 불가 final로 선언된 변수는 초기화된 후에는 값을 변경할 수 없습니다. 상수 값을 정의할 때 자주 사용됩니다. (2) 클래스와 메서드에도 사용 가능 final 키워드는 클래스나 메서드에도 사용할 수 있습니다. 클래스에 final을 선언하면 상속이 불가능하며, 메서드에 final을 선언하면 오버라이딩이 불가능합니... Read More

Java의 static 1. static이란 무엇인가? Java에서 static 키워드는 클래스의 정적 멤버를 정의할 때 사용됩니다. 정적 멤버는 객체를 생성하지 않고도 클래스 자체를 통해 접근할 수 있으며, 이는 클래스가 로드되면 메모리에 할당되어 객체가 없어도 사용이 가능합니다. 1) static의 특징 (1) 클래스를 통해 접근 static으로 선언된 필드와 메서드는 객체를 생성하지 않고도 클래스 이름과 함께 .(dot) 연산자를 사용하여 접근할 수 있습니다. (2) 클래스 로딩 시 메모리에 할당 static 멤버는 클래스가 메모리에 로딩될 때 한 번 초기화되며, 프... Read More

Java에서의 Singleton 패턴 1. Singleton 패턴이란? 싱글톤 패턴(Singleton Pattern)은 단 하나의 객체만 생성해야 할 때 사용하는 디자인 패턴입니다. 이 패턴을 적용하면 애플리케이션 내에서 여러 곳에서 동일한 인스턴스를 참조할 수 있으며, 프로그램 전반에서 하나의 객체를 전역적으로 관리할 수 있습니다. 1) 싱글톤 패턴의 핵심 개념 (1) 하나의 객체만 생성됨 싱글톤 패턴은 프로그램이 실행되는 동안 딱 하나의 객체만 생성되며, 이 객체는 프로그램 어디서든 동일하게 사용됩니다. (2) private 생성자 사용 외부에서 new 연산자를 사용하여 ... Read More

Java의 클래스와 객체 1. 클래스란 무엇인가? Java에서 클래스는 객체 지향 프로그래밍의 기본 요소로, 객체를 생성하기 위한 설계도입니다. 클래스는 객체가 가질 속성(필드)과 동작(메서드)을 정의하며, 클래스를 바탕으로 만든 인스턴스를 객체라고 합니다. public class Student { // 필드 (객체의 속성) public String name; public int grade; // 생성자 (객체를 초기화하는 역할) public Student(String name, int grade) { this.name = n... Read More

Java의 예외 처리 (Exception Handling) 예외 처리(Exception Handling)는 프로그램이 비정상적으로 종료되지 않도록 하는 방법입니다. 1. 예외의 종류 일반 예외 (Checked Exception) 컴파일러가 예외 처리 코드를 요구하는 예외입니다. 예외 처리가 되어 있지 않으면 컴파일 에러가 발생합니다. IOException, SQLException 등 실행 예외 (Unchecked Exception) 컴파일러가 예외 처리 코드를 요구하지 않는 예외입니다. 런타임 시에 발생하며... Read More

Java의 ArrayList ArrayList는 크기가 고정된 배열과는 달리 필요에 따라 동적으로 크기가 증가하거나 감소할 수 있습니다. ArrayList는 표준 배열보다 많은 조작이 필요할 때 유용하며, 특히 동적 배열을 구현하는 데 자주 사용됩니다. 1. ArrayList 선언과 생성 ArrayList는 다양한 방식으로 선언할 수 있습니다. 제네릭을 사용하여 특정 타입의 요소만 저장하도록 제한할 수 있습니다. 제네릭을 사용하지 않으면 모든 타입의 객체를 저장할 수 있지만, 타입 안정성이 보장되지 않습니다. // 1. List<E> list = new ArrayL... Read More

Java의 배열(Array) 배열(Array)은 같은 데이터 타입의 여러 값을 저장할 수 있는 고정 크기의 자료 구조입니다. 배열의 크기는 선언 시 정해지며, 한 번 선언한 크기는 변경할 수 없습니다. 배열의 인덱스를 통해 각 원소에 접근합니다. 1. 배열 선언 및 생성 배열 선언에는 두 가지 방법이 있습니다. 일반적으로 첫 번째 방법이 사용됩니다. // 배열 선언하는 방법 int[] arr1; // 추천하는 방식 int arr2[]; // 가능하지만 덜 사용되는 방식 배열을 선언하면 메모리 공간에 참조값이 할당됩니다. 배열에 값을 저장하면서 초기화할 수도 있습니다. /... Read More

Java의 메서드 오버로딩 (With 오버라이딩) 메서드 오버로딩은 하나의 클래스에서 같은 이름의 메서드를 여러 개 정의할 수 있는 기능입니다. 매개변수의 타입, 개수, 순서에 따라 다른 메서드를 호출할 수 있습니다. 이를 통해 동작이 유사한 메서드를 같은 이름으로 정의하여 코드의 가독성과 유지보수성을 높일 수 있습니다. 1. 메서드 오버로딩이란? 메서드 오버로딩은 같은 이름을 가진 메서드를 매개변수의 타입, 개수, 순서를 다르게 하여 여러 개 정의하는 것을 말합니다. 메서드 이름은 같지만, 매개변수의 차이에 따라 컴파일러가 어떤 메서드를 호출할지 결정합니다. public class Met... Read More

Java의 메서드 개념 1. 메서드란? 메서드는 객체가 수행하는 기능을 정의한 코드 블록입니다. 메서드는 코드의 재사용성을 높이고, 프로그램의 구조화와 유지보수성을 향상시키는 중요한 역할을 합니다. 2. 메서드의 종류 static 메서드: 클래스에 속하는 메서드로, 객체를 생성하지 않고도 호출할 수 있습니다. non-static 메서드: 객체에 속하는 메서드로, 객체를 생성한 후에만 호출할 수 있습니다. public class MethodExample { public static void main(String[] args) { hello(); // s... Read More

Java의 조건문과 반복문 조건문을 사용하여 조건에 따라 코드를 실행할 수 있고, 반복문을 통해 동일한 작업을 여러 번 반복할 수 있습니다. 1. 조건문 (Conditional Statements) 1) if-else 문 if-else 문은 조건에 따라 두 가지 실행 경로 중 하나를 선택합니다. 조건이 참일 경우 if 블록이 실행되고, 거짓일 경우 else 블록이 실행됩니다. int number = 10; if (number % 2 == 0) { System.out.println("짝수"); } else { System.out.println("홀수"); } 2) 문자열 비교 시... Read More

Java의 형변환 (Casting) Java에서 형변환(Casting)은 데이터 타입을 변환하는 과정을 의미합니다. 형변환은 크게 묵시적 형변환(Wider Conversion)과 명시적 형변환(Narrow Conversion)으로 나뉩니다. 1. 묵시적 형변환 (Wider Conversion) 묵시적 형변환은 작은 데이터 타입에서 더 큰 데이터 타입으로 자동으로 변환되는 것을 의미합니다. 데이터 손실이 없기 때문에 자동 형변환이 이루어집니다. int smallNumber = 10; System.out.println("smallNumber = " + smallNumber); double bigNumber... Read More

Java의 연산자 (Operator) 1. 산술 연산자 (Arithmetic Operators) Java에서는 기본적인 산술 연산을 수행할 수 있는 연산자들을 제공합니다. 이들 연산자는 숫자형 데이터에 대해서 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산 등을 수행할 수 있습니다. int x = 10; int y = 20; System.out.println("x + y = " + (x + y)); // 덧셈 System.out.println("x - y = " + (x - y)); // 뺄셈 System.out.println("x * y = " + (x * y)); // 곱셈 System.out.pr... Read More

Java의 입력과 출력 (Input/Output) 1. 출력 (Output) Java에서 데이터를 출력할 때는 System.out.print, System.out.println, System.out.printf와 같은 메서드를 사용합니다. 1) print와 println System.out.print: 줄 바꿈 없이 출력을 수행합니다. System.out.println: 출력 후 줄 바꿈을 자동으로 수행합니다. System.out.print("안녕하세요"); System.out.println("저는 김새싹입니다!"); System.out.print("잘 부탁드립니다."); System.ou... Read More

Java의 기본 데이터 타입과 참조 타입 1. 기본 데이터 타입 (Primitive Type) 기본 데이터 타입은 Java에서 가장 기본적으로 제공되는 데이터 타입으로, 객체가 아닌 비객체 타입입니다. 이 타입들은 null 값을 가질 수 없으며 반드시 사용되기 전에 선언되어야 합니다. public class DataTypes { public static void main(String[] args) { // 정수형 변수 선언 int x = 10; // 32bit long y = 1000000000L; // 64bit, long 타입은 'L' 혹은 'l'을... Read More

Redux Toolkit을 통한 상태 관리 개선 Redux Toolkit은 Redux 상태 관리에서 필요한 반복적인 코드를 줄여주고, 효율적으로 상태를 관리할 수 있는 도구입니다. 1. 기존 Redux 방식의 문제점 1) 불필요한 설정 및 코드 반복 기존 Redux 방식에서는 액션 타입 상수, 액션 생성자, 리듀서 함수, 스토어 설정을 따로 정의해야 했습니다. 이 과정에서 반복적인 코드가 많이 발생하게 됩니다. // counterActions.js const PLUS = "counter/PLUS"; const MINUS = "counter/MINUS"; export const plus = (... Read More

Container와 Presentational Component를 통한 상태 관리 개선 컨테이너(Container) 와 프레젠테이셔널(Presentational) 컴포넌트 패턴을 통해 상태 관리와 UI 렌더링을 어떻게 분리할 수 있는지 설명합니다. 1. 기존 방식의 한계 1) 기존 방식 (App2.js) // App2.js import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { plus, minus } from "./store/counterActions"; export default func... Read More

Redux 루트 리듀서를 통한 상태 관리 개선 1. 기존 방식의 한계 하나의 리듀서만을 사용하여 여러 상태를 관리하는 방식은 애플리케이션이 커지면서 유지보수가 어려워질 수 있습니다. rootReducer 없이 각각의 리듀서를 하나의 리듀서로 통합하지 않으면 코드가 매우 복잡해지고 유지보수가 어려워집니다. 1) 기존 방식 코드 (여러 리듀서가 있지만 rootReducer를 사용하지 않은 경우) // counterReducer.js const initialState = { number: 100 }; const counterReducer = (state = initialState, action... Read More

React에서 상태 관리 방법 비교: Props vs 전통 Redux React 애플리케이션에서 상태 관리가 중요한 이유는 여러 컴포넌트에서 동일한 상태를 사용하거나, 상태를 쉽게 업데이트하기 위해서입니다. Props를 통해 상태를 관리하는 방식과 Redux를 사용해 상태를 관리하는 방식을 비교해보겠습니다. 1. Props를 사용한 상태 관리 방식 React에서 가장 기본적인 상태 전달 방식은 부모 컴포넌트에서 자식 컴포넌트로 Props를 사용하는 것입니다. 부모가 가지고 있는 상태를 자식에게 전달하고, 자식은 그 상태를 이용해 화면에 데이터를 보여주거나 변경할 수 있습니다. 하지만 이 방식은 컴포넌트... Read More

React Router에서 사용되는 Link와 Routes 1. React Router란? React Router는 SPA(Single Page Application)에서 페이지 이동을 처리하고, URL을 관리할 수 있습니다. 2. React Router 컴포넌트 1) Link 컴포넌트로 페이지 간 이동 Link는 HTML의 <a> 태그와 유사하지만, 페이지 전체를 새로고침하지 않고도 클라이언트 측에서 페이지 이동을 처리할 수 있습니다. React Router는 이러한 링크를 클릭했을 때 기존 페이지를 유지한 채로 URL을 변경하고, 새로운 컴포넌트를 렌더링합니다. component... Read More

useParams, useSearchParams, useNavigate 1. React Router 훅이란? React Router에서 제공하는 훅(Hook)은 페이지 간 이동과 URL 관련 정보를 쉽게 처리할 수 있도록 합니다. 그 중에서도 useParams, useSearchParams, useNavigate는 URL 경로의 파라미터, 쿼리 파라미터, 페이지 이동에 있어 제어하는데 필수적인 훅입니다. 2. React Router 훅 1) useParams로 URL 경로 파라미터 추출 useParams는 URL 경로에서 동적 경로 파라미터를 추출하는 훅입니다. 예를 들어, /products/:... Read More

프로젝트 기간 - 2024년 8월 26일 ~ 2024년 9월 13일 프로젝트 명 - Smile Hub 프로젝트 내용 - 중고상품 구매 시 새 상품과의 가격 비교를 위한 중고거래 플랫폼 ** **프로젝트 Repo - https://github.com/ymind14563/SimeHub-Backend KEEP: 잘한 점 풀스택 개발 (React와 Node.js) AWS를 활용한 배포 Socket.IO를 활용한 채팅 자유로운 의견 공유 타인의 코드 이해 노력 PROBLEM: 아쉬웠던 점 팀원의 연속적인 부재(5명에서 3명으로) 팀원과의 소통 문제 기능적 아쉬움 ... Read More

React 스타일링: CSS Module, Sass, Styled Components 1. CSS Module 1) CSS Module이란? CSS Module은 CSS 클래스 이름의 충돌을 방지하기 위한 방법입니다. 일반적인 CSS 클래스는 전역적으로 적용되기 때문에, 여러 컴포넌트에서 동일한 클래스 이름을 사용할 경우 스타일이 충돌할 수 있습니다. CSS Module은 각 클래스 이름에 고유한 해시 값을 추가하여 문제를 해결합니다. 2) CSS Module 설정 및 사용 (1) 프로젝트에 CSS Module 적용 React 프로젝트에서 CSS Module을 사용... Read More

? 세션에 담긴 개인정보를 토큰에 담아서 상태를 계속하도록 유지하고 리프레쉬 토큰을 쿠키에 담아서 정보를 보호하고 토큰이 만료되면 쿠키에 담긴 리프레쉬 토큰을 확인해서 다시 재발급 및 반복하는지 여부. 정답 1. 사용자 로그인 및 세션 정보 토큰화 사용자가 로그인하면, 서버는 사용자의 ID, 권한 등 필요한 정보를 포함한 JWT 액세스 토큰을 생성합니다. 이 JWT는 사용자의 인증 상태를 클라이언트 측에서 관리할 수 있도록 합니다. 예를 들어, { userId: 1, role: 'admin' } 같은 정보를 포함할 수 있습니다. JWT는 클라이언트에 전달되어 상태를 유지하는 역할을 ... Read More

React Hook Form을 활용한 폼 관리 1. React Hook Form 라이브러리 설치 npm install react-hook-form 2. useForm 1) 기본 설정 React Hook Form의 핵심은 useForm 훅입니다. 이 훅을 사용하면 폼 상태를 관리하고, 유효성 검사를 처리할 수 있습니다. import { useForm } from 'react-hook-form'; export default function Form() { const { register, // 입력 필드와 연결하고 값의 변경을 감지함 handleSubmit,... Read More

컨트롤드와 언컨트롤드 컴포넌트의 차이점 ( + React Hook Form ) 1. 컨트롤드 컴포넌트 (Controlled Components) 1) 개념 컨트롤드 컴포넌트는 입력 요소의 상태가 React의 상태(state)에 의해 제어되는 방식입니다. 사용자가 입력하는 모든 값이 컴포넌트의 상태로 관리되며, 상태가 업데이트될 때마다 컴포넌트가 리랜더링됩니다. 2) 특징 입력 필드의 값이 컴포넌트의 상태로 관리되며, onChange 이벤트를 통해 상태가 업데이트됩니다. 입력값이 변경될 때마다 컴포넌트가 리랜더링됩니다. 실시간 입력값 검증이나 동적인 입력값 처리 등, 입력값이 즉시 반영되... Read More

React에서 Custom Hook 만들기 1. Custom Hook이란? React에서 Custom Hook은 여러 컴포넌트에서 재사용 가능한 로직을 추출하여 독립적인 함수로 만든 것을 의미합니다. useState, useEffect와 같은 기본 훅을 이용하여 특정 기능을 수행하는 로직을 캡슐화함으로써 코드의 중복을 줄이고, 가독성을 높이는 데 도움을 줍니다. Custom Hook은 특정 문제를 해결하거나 기능을 제공하기 위해 만들어지며, 훅이기 때문에 use라는 접두사를 붙여 이름을 지정하는 것이 일반적입니다. 2. Custom Hook 만들기 과정 1) 훅의 목적 정의 Custom Ho... Read More

useReducer를 이용한 상태 관리 1. useReducer란? useReducer는 useState보다 더 복잡한 상태 관리 로직을 처리하기 위한 React 훅입니다. 특히 상태가 여러 하위 요소로 구성되거나, 상태 변경 로직이 복잡한 경우에 사용됩니다. 이 훅은 컴포넌트 외부에 상태 업데이트 로직을 분리하여 코드의 가독성과 유지보수성을 높일 수 있습니다. 2. 설명 1) 초기 상태와 reducer 함수 정의 // #1. 초기 상태값 정의 const initState = { value: 0 }; // 초기 상태 값 // #2. reducer 함수 정의 // - 이 함수는 현재 상태와 액션... Read More

useCallback을 이용한 성능 최적화 1. useCallback이란? useCallback은 함수 메모이제이션(Memoization)을 통해 컴포넌트가 리랜더링될 때마다 동일한 함수를 반복적으로 생성하는 문제를 해결합니다. 특정 의존성 배열에 기반하여, 의존성이 변경되지 않으면 기존 함수를 재사용합니다. 이를 통해 불필요한 함수 생성과 자원의 낭비를 줄여 성능을 최적화할 수 있습니다. 특히, 자식 컴포넌트에 콜백 함수를 전달하거나, 복잡한 연산을 포함한 함수를 사용할 때 유용합니다. 2. 설명 1) UseCallbackEx 컴포넌트 import React, { useState, useCal... Read More

useMemo를 이용한 성능 최적화 1. useMemo란? useMemo는 메모이제이션(Memoization)을 통해 특정 계산의 결과를 기억해두고, 동일한 계산이 반복되지 않도록 최적화하는 훅입니다. 컴포넌트가 리랜더링될 때마다 계산을 반복하지 않고, 이전에 계산된 값을 재사용함으로써 성능을 개선할 수 있습니다. 특히, 연산 비용이 큰 작업이나 데이터가 많이 변하지 않는 경우 useMemo를 활용하면 불필요한 재계산을 방지할 수 있습니다. 2. 설명 1) UseMemoEx 컴포넌트 import React, { useState, useMemo } from 'react'; // useMemo /... Read More

React에서의 Ref와 컴포넌트 생명 주기 1. 컴포넌트 생명 주기(Lifecycle)란? 컴포넌트 생명 주기(Lifecycle)는 React 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정에서 발생하는 단계를 의미합니다. 각 단계마다 특정 메서드나 훅을 통해 작업을 수행할 수 있습니다. 마운트(Mount): 컴포넌트가 처음으로 DOM(Document Object Model)에 삽입될 때 발생합니다. 여기서 DOM은 브라우저가 웹 페이지를 이해하고 구조화하기 위해 사용하는 문서 구조입니다. 컴포넌트가 마운트된다는 것은, DOM 트리에 컴포넌트가 처음으로 추가되어 화면에 보이게 됩니다.... Read More

React에서의 Ref 1. Ref란? React에서 Ref는 DOM 요소나 React 엘리먼트에 직접 접근하고 제어할 수 있는 방법을 제공합니다. 일반적으로 React는 데이터를 기반으로 UI를 선언적으로 업데이트하지만, 특정 상황에서는 DOM 요소에 직접 접근해야 할 필요가 있습니다. 이때 사용하는 것이 바로 Ref입니다. Ref는 컴포넌트가 렌더링된 후에도 특정 DOM 요소에 접근하거나, 이를 제어할 수 있게 해줍니다. 예를 들어, 버튼을 클릭했을 때 특정 입력 필드에 포커스를 설정하거나, 스크롤 위치를 조정하거나, 동영상 플레이어를 제어할 수 있습니다. 이는 상태 관리만으로는 처리... Read More

React에서의 배열 처리 1. 배열 처리 메서드란? React에서는 배열 데이터를 렌더링하거나 필터링하는 작업이 자주 필요합니다. 배열의 각 요소를 순회하며 특정 작업을 수행하거나, 조건에 따라 배열을 필터링하거나, 배열을 결합하는 등의 작업을 할 수 있습니다. 2. map() 1) map() 이란? map() 메서드는 배열의 각 요소를 변형하여 새로운 배열을 생성하는 데 사용됩니다. 이 메서드는 원본 배열을 수정하지 않으며, 변형된 요소들로 구성된 새로운 배열을 반환합니다. map() 메서드는 배열의 각 요소를 순회하며, 주어진 함수(콜백 함수)를 호출하여 그 반환 값을 새로운 배열... Read More

이벤트 핸들러와 이벤트 객체 1. 이벤트 핸들러와 이벤트 객체란? React에서 이벤트 핸들러는 사용자가 특정 UI 요소와 상호작용할 때(예: 클릭, 입력, 마우스 이동 등) 실행되는 함수를 의미합니다. 이 함수는 일반적으로 이벤트 객체(event)를 매개변수로 받아, 발생한 이벤트와 관련된 정보를 처리합니다. 1) 정의 (1) 이벤트 핸들러(Event Handler) 특정 이벤트가 발생했을 때 실행되는 함수입니다. 이 함수는 이벤트 객체를 통해 이벤트에 대한 정보를 접근하고 처리할 수 있습니다. (2) 이벤트 객체(Event Object) 이벤트가 발생한 요소와 관련된 정보를 담고 있... Read More

Event Handling 1. React에서의 이벤트 처리(Event Handling) React에서는 브라우저의 기본 DOM 이벤트를 처리할 수 있는 방법을 제공합니다. 하지만, 브라우저마다 이벤트 처리 방식이 다를 수 있기 때문에, React는 자체적으로 ‘합성 이벤트(Synthetic Event)’라는 개념을 도입하여 일관된 이벤트 처리를 할 수 있도록 합니다. 2. 코드 설명 1) App.js import './App.css'; import ClassBind from './ClassBind'; import Counter from './Counter'; import Synthe... Read More

React 에서의 State(클래스형 vs 함수형 컴포넌트) 1. State란 무엇인가? 1) State란? State는 React에서 컴포넌트가 동적으로 변할 수 있는 데이터를 관리하는 방법입니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 화면에 표시되는 숫자가 증가하는 경우, 이 숫자를 state로 관리합니다. React는 이 state가 변경될 때마다 자동으로 UI를 업데이트합니다. 사용자가 입력한 텍스트, 클릭한 버튼의 카운트, 서버에서 받아온 데이터 등이 모두 state로 관리됩니다. 2) 클래스형 컴포넌트에서의 State 관리 클래스형 컴포넌트에서는 this.state 객체를 통해 ... Read More

클래스형 컴포넌트와 함수형 컴포넌트의 PropTypes와 DefaultProps 1. PropTypes와 DefaultProps란? 1) Props란? Props는 컴포넌트 간에 데이터를 전달하기 위해 사용되는 속성입니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 자식 컴포넌트가 해당 데이터를 사용할 수 있도록 합니다. Props는 읽기 전용이므로 자식 컴포넌트에서 props를 직접 수정할 수 없습니다. Props를 통해 컴포넌트의 재사용성을 높이고, 동적인 데이터를 전달할 수 있습니다. 2) PropTypes와 DefaultProps 리액트에서는 PropTypes와 Default... Read More

클래스형 컴포넌트와 함수형 컴포넌트 1. 클래스형 컴포넌트 클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의됩니다. 이 컴포넌트는 React.Component를 상속받아 상태(state)와 생명주기 메서드(lifecycle methods)를 사용할 수 있습니다. 클래스형 컴포넌트는 주로 복잡한 로직이나 상태 관리를 필요로 하는 경우에 유용합니다. ClassComponent.js /* 이렇게도 작성가능 // import { Component } from 'react'; // class ClassComponent extends Component { } */ import React from 'rea... Read More

리액트 컴포넌트 (React Component) 1. 리액트의 장점 리액트는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. 컴포넌트 기반 구조로 코드의 재사용성이 높고 유지보수가 쉽습니다. 단방향 데이터 흐름을 통해 예측 가능성이 높고 디버깅에 용이합니다. 가상 DOM을 사용하여 성능을 향상시킵니다. 풍부한 생태계를 통해 다양한 라이브러리와 도구가 지원되어 개발 생산성이 높습니다. 2. 리액트 설치 방법 리액트를 설치하려면 Node.js와 npm(Node Package Manager)이 필요합니다. 1) Node.js와 npm 설치합... Read More

Node.js와 Socket.IO로 실시간 채팅방 만들기 1. Socket.IO의 주요 객체 설명 io 객체 Socket.IO 인스턴스를 나타내는 객체로, 전체 소켓 서버를 관리합니다. io.sockets 현재 연결된 모든 소켓들을 관리하는 객체로, 소켓들의 상태를 관리하고 다양한 소켓 관련 작업을 수행합니다. io.sockets.adapter 소켓 서버 간의 상태를 관리하는 역할을 담당하는 객체로, 소켓들의 연결 상태와 방(room) 정보를 관리합니다. io.sockets.adapter... Read More

Node.js와 Socket.IO로 실시간 채팅 만들기 1. Socket.IO 의 기본 메서드 1) emit과 on emit: 이벤트를 발생시키는 메서드입니다. 이벤트와 함께 데이터를 전송할 수 있습니다. 즉, 이벤트를 “발신”하는 역할을 합니다. on: 특정 이벤트가 발생했을 때 실행할 콜백 함수를 등록하는 메서드입니다. 즉, 이벤트를 “수신”하는 역할을 합니다. 2) socket과 io socket: 개별 클라이언트와의 연결을 나타냅니다. 각 클라이언트마다 고유한 socket 객체가 생성됩니다. socket 객체는 클라이언트와의 실시간 통신을 관리합니다. io: 서버 전체... Read More

Node.js에서 비밀번호 암호화 1. 암호화 방식 비교 비밀번호 암호화를 구현할 때 여러 가지 암호화 방식이 있습니다. 여기서는 bcrypt와 crypto 모듈을 사용하는 방법을 비교해보겠습니다. 1) bcrypt 장점: 비밀번호 암호화에 특화되어 있으며, 해시 생성 시간이 비교적 느리기 때문에 무차별 대입 공격에 강합니다. 솔트를 자동으로 생성하고 관리하여 암호화 과정을 단순화합니다.(bcrypt에서 솔트와 해싱 동시 처리) 단점: 양방향 암호화는 지원하지 않으며, 범용성이 떨어집니다. 비밀번호 암호화 외의 용도로 사용하기에는 적합하지 않습니다. 2) ... Read More

세션(Session) 0. 세션(Session)이란? 세션(Session)은 서버에서 클라이언트와의 상태를 유지하기 위해 사용하는 정보 저장 방식입니다. 클라이언트가 서버에 요청할 때마다 특정 세션 ID를 함께 전송하여, 서버가 클라이언트의 상태를 유지하고 식별할 수 있게 합니다. 1. 세션의 동작 원리 1) 세션의 동작 원리 세션은 서버와 클라이언트 간의 상태를 유지하기 위해 중요한 역할을 합니다. (1) 서버가 웹 브라우저(클라이언트)에게 세션 값을 보냅니다. 사용자가 웹사이트에 처음 접속하면 서버는 고유한 세션 ID(sid)를 생성합니다. 이 세션 ID는 클라이언트를 구별할 수 있는... Read More

쿠키(Cookie) 0. 쿠키란? 쿠키는 클라이언트의 웹 브라우저에 저장되는 작은 데이터 조각입니다. 서버에서 클라이언트로 보내져 브라우저에 저장되며, 이후 클라이언트가 같은 서버에 다시 요청할 때마다 함께 전송됩니다. 이를 통해 서버는 클라이언트의 상태를 유지하고, 사용자에게 개인화된 경험을 제공할 수 있습니다. 1. 쿠키의 사용 목적 세션 관리 사용자가 로그인하면 서버는 사용자의 세션 ID를 쿠키에 저장합니다. 이후 사용자가 페이지를 이동하더라도 세션 ID를 통해 로그인 상태를 유지할 수 있습니다. (예시) 로그인 상태 유지, 장바구니 내용 저장 등 ... Read More

Node.js 프로젝트에서 환경 변수 설정하기 .env, .env.development, .env.production 파일을 이용한 환경 변수 설정 방법을 살펴보겠습니다. 다양한 환경에서의 설정을 통해 개발, 테스트, 배포 환경을 보다 체계적으로 관리할 수 있습니다. 환경 변수 파일은 보안과 관리의 측면에서 중요한 역할을 하므로, 실제 프로젝트에서는 .gitignore 파일에 포함시켜 버전 관리에서 제외하여야 합니다. 1. 프로젝트 초기 설정 1) 프로젝트 디렉토리 구조 env-variable/ │ ├── .env ├── .env.development ├── .env.production... Read More

REST Client를 활용한 테스트 테스트 준비 확장프로그램을 검색하여 설치해줍니다. 확장자 .http 나 .rest 인 파일을 생성해 줍니다. (현재 api.http) 위와 같이 Send Request가 나오면 준비 완료입니다. 클릭 시, 오른쪽과 같이 Response가 출력됩니다. 전체 코드 @server = http://localhost:8000 @player_id = 1 @team_id = 1 ### 전체 선수 조회 GET /players ### id로 특정 선수 조회 GET /players/ ### 선수 추... Read More

Sequelize를 이용한 모델 및 다대다 관계 설정 Game과 TeamGame의 Model을 추가합니다. 이전 블로그 글에서 언급한 적이 있는 다 대 다 (N : M) 관계의 테이블을 만들어보겠습니다. 3. 모델 간의 관계 설정 - 2) 만약 N:M 관계가 있는 경우에는? 프로젝트 디렉토리 구조 project/ │ ├── sequelize/ │ ├── models/ │ │ ├── index.js │ │ ├── Profile.js │ │ ├── Player.js │ │ ├── Team.js │ │ ├── Game.js // 추가 │ │ └──... Read More

Sequelize를 이용한 API 추가 앞서 작성한 Sequelize 기본 구조를 토대로 API를 작성해보겠습니다. models의 구조는 그대로 활용하고 controller와 router를 추가합니다. 작성할 API는 Player, Team 관련 CRUD입니다. 프로젝트 디렉토리 구조 project/ │ ├── sequelize/ │ ├── models/ │ │ ├── index.js │ │ ├── Profile.js │ │ ├── Player.js │ │ └── Team.js │ │ │ ├── routes/ │ │ ├── index.js │... Read More

Sequelize를 이용한 모델 및 관계 설정 Sequelize는 Node.js 애플리케이션에서 데이터베이스와의 상호작용을 간편하게 처리할 수 있도록 도와주는 ORM(Object-Relational Mapping) 라이브러리입니다. ORM을 사용하게 되면 SQL문을 쓰지 않고도 CRUD를 할 수 있다는 장점이 있습니다. 프로젝트 디렉토리 구조 project/ │ ├── sequelize/ │ ├── models/ │ │ ├── index.js │ │ ├── Profile.js │ │ ├── Player.js │ │ └── Team.js │ │ │ ├──... Read More

Node.js와 MySQL을 활용한 MVC 패턴 앞서 작성한 생성, 조회, 수정, 삭제의 내용을 전체적으로 살펴봅니다. 1. 프로젝트 구조 16-mvc_mysql/ ├── controller/ │ └── Cvisitor.js ├── model/ │ └── Visitor.js ├── routes/ │ └── index.js ├── views/ │ ├── 404.ejs │ ├── index.ejs │ └── visitor.ejs ├── static/ │ └── visitor.js ├── app.js ├── package.json └── package-lock.json 2... Read More

Node.js와 MySQL을 활용한 MVC 패턴으로 조회, 수정, 삭제 하기 이 글에선 이전에 작성한 postVistor와 getVistors(목록)의 내용과 달리 getVisitor, patchVisitor, deleteVisitor를 알아봅니다. 1.~ 4. 의 내용은 같습니다. 1. MVC 패턴 Model: 데이터와 비즈니스 로직을 처리합니다. View: 사용자에게 데이터를 표시하는 부분입니다. Controller: 사용자 입력을 받아서 처리하고, 모델과 뷰를 연결합니다. 2. 프로젝트 구조 프로젝트를 MVC 패턴으로 구성하기 위해 다음과 같은 디렉토리 구조를 사용... Read More

프로젝트 기간 - 2024년 7월 10일 ~ 2024년 7월 24일 프로젝트 명 - MovieMemo 프로젝트 내용 - 감상한 영화의 리뷰를 작성, 공유하는 사이트 제작 프로젝트 프로젝트 Repo - https://github.com/SeSAC-1st-Project-Team-C/MovieMemo KEEP: 잘한 점 자유로운 의견 공유 타인의 코드 이해 노력 빠른 발표 준비와 괜찮았던 발표 페이지 세세한 부분까지 신경쓰려는 노력 NCP를 활용한 배포 기술적인 선택과 개선방안 문제 해결 과정 발표와 테스트 계정 제공 PROBLEM: 아쉬웠던 점 기능 추가로 인한... Read More

코드 분석 객체 디스트럭처링(destructuring)을 사용하여 verifyToken 함수가 반환한 객체의 속성을 개별 변수에 할당하는 과정입니다. 이를 이해하려면 verifyToken 함수의 동작을 먼저 살펴볼 필요가 있습니다. verifyToken 함수 const jwt = require('jsonwebtoken'); const verifyToken = (req) => { const authorHeader = req.headers.authorization; if (!authorHeader) { return { error: true, message: "토큰이 없습니다."... Read More

Node.js와 MySQL을 활용한 MVC 패턴으로 추가, 조회 하기 1. MVC 패턴 Model: 데이터와 비즈니스 로직을 처리합니다. View: 사용자에게 데이터를 표시하는 부분입니다. Controller: 사용자 입력을 받아서 처리하고, 모델과 뷰를 연결합니다. 2. 프로젝트 구조 프로젝트를 MVC 패턴으로 구성하기 위해 다음과 같은 디렉토리 구조를 사용합니다: 16-mvc_mysql/ ├── controller/ │ └── Cvisitor.js ├── model/ │ └── Visitor.js ├── routes/ │ └── index.js ├── views/ │... Read More

Node.js와 MVC 패턴으로 간단한 웹 구현 1. MVC 패턴이란? MVC는 Model-View-Controller의 약자로, 애플리케이션을 세 부분으로 나누어 개발하는 소프트웨어 디자인 패턴입니다. Model: 데이터와 비즈니스 로직을 처리합니다. View: 사용자에게 데이터를 표시하는 부분입니다. Controller: 사용자 입력을 받아서 처리하고, 모델과 뷰를 연결합니다. 2. 프로젝트 구조 프로젝트를 MVC 패턴으로 구성하기 위해 다음과 같은 디렉토리 구조를 사용합니다. 15-mvc/ ├── controller/ │ ├── Cmain.js │ └── Cuser.... Read More

MySQL DDL, DCL, DML 명령어 정리 1. DDL (Data Definition Language) DDL은 데이터베이스와 테이블의 구조를 정의합니다. 데이터베이스와 테이블을 생성, 수정, 삭제하는 데 사용됩니다. 1) 데이터베이스 관련 명령어 (1) 데이터베이스 생성 CREATE DATABASE codingon CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 이 명령어는 codingon이라는 이름의 데이터베이스를 생성합니다. 여기서 CHARACTER SET utf8mb4는 데이터베이스가 사용할 문자 집합을 utf8mb4로 설정하는 것입니다. u... Read More

Node.js와 Multer를 이용한 동적 파일 업로드 구현 1. 동적 파일 업로드를 위한 기본 설정 동적 파일 업로드를 구현하기 위해 필요한 모듈들을 설정합니다. 기존 설정에 이어, public 디렉토리와 정적 파일에 관련된 것을 설정합니다. const express = require('express'); const app = express(); const multer = require('multer'); // 파일 업로드를 위한 Multer 모듈 불러오기 const path = require('path'); // 파일 및 디렉토리 경로 작업을 위한 Path 모듈 불러오기 const PO... Read More

Node.js와 Multer로 파일 업로드 구현하기 1. 기본 모듈 설치 파일 업로드 기능을 구현하기 위해 먼저 필요한 모듈들을 설치해야 합니다. Express와 Multer 모듈을 사용하며, EJS를 템플릿 엔진으로 사용합니다. // package.json { "dependencies": { "ejs": "^3.1.10", "express": "^4.19.2", "multer": "^1.4.4" // Multer } } 여기서 multer의 버전을 1.4.4로 설정한 이유는 최신 버전인 1.4.5-LTS.1에 한글 관련 버그가 있기 때문입니다. 2. 서버 설정 및 ... Read More

Axios 1. Axios 란? Axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트입니다. 비동기적으로 데이터를 주고받을 때 주로 사용됩니다. 2. 동적 폼 작성 (EJS 템플릿 구성) - Axios CDN 사용 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> AJAX 요청을 보내기 위한 동적 폼을 EJS 템플릿으로 작성합니다. <!DOCTYPE html> <html lang="ko"> <head&... Read More

Fetch API 1. Fetch API란? Fetch API는 네트워크 요청을 처리하기 위해 브라우저에서 제공하는 표준 API입니다. XMLHttpRequest의 대체로, Promise 기반으로 작동하여 비동기적으로 데이터를 주고받을 수 있습니다. 2. 동적 폼 작성 (EJS 템플릿 구성) - Fetch API CDN 사용 여부 Fetch API는 브라우저 내장 API이기 때문에 별도의 CDN을 사용하지 않습니다. jQuery나 Axios와는 달리, Fetch API를 사용하기 위해 추가적인 라이브러리를 로드할 필요가 없습니다. 모든 최신 브라우저에서 기본적으로 지원합니다. ... Read More

AJAX 1. AJAX란? AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있게 만들어 줍니다. 2. 동적 폼 작성 (EJS 템플릿 구성) - AJAX CDN 사용 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> jQuery 라이브러리를 사용하여 AJAX 요청을 처리합니다. (jQuery CDN minified) AJAX 요청을 보내기 위한 동적 폼을 EJS 템플릿으로 작성합니다. <!... Read More

직렬화와 역직렬화 1. 직렬화와 역직렬화 (1) 직렬화(Serialization) 직렬화는 객체나 데이터를 통신에 적합한 형식으로 변환하는 과정입니다. JavaScript 객체를 JSON 형식의 문자열로 변환하는 것이 대표적인 예입니다. 이를 통해 데이터를 쉽게 전송하거나 저장할 수 있습니다. (2) 역직렬화(Deserialization) 역직렬화는 직렬화된 데이터를 다시 원래의 객체나 데이터 구조로 변환하는 과정입니다. 서버로부터 받은 JSON 데이터를 JavaScript 객체로 변환하여 사용할 수 있게 합니다. 2. 직렬화와 역직렬화 처리 (1) 객체와 JSON 예제 // Ob... Read More

Express에서 body-parser와 폼 데이터 처리하기 1. body-parser란? body-parser는 Express에서 요청(request) 객체의 본문(body) 데이터를 쉽게 추출할 수 있도록 도와주는 미들웨어입니다. 클라이언트가 폼을 제출하면 데이터는 서버로 전송되고, 이 데이터를 파싱하여 쉽게 접근할 수 있도록 해줍니다. 요청(request)과 응답(response)의 중간에서 작업합니다. express에서는 app.use()로 등록해야 합니다. 1) 주요 기능 URL-encoded 데이터 파싱: HTML 폼에서 보내는 urlencoded로 파싱된 body를 요청합니다. ... Read More

비동기 처리: 전체 통합 0. 왜 비동기 처리가 필요한가? JavaScript는 기본적으로 동기적으로 작동합니다. 즉, 코드가 위에서 아래로 순차적으로 실행됩니다. 이러한 동기적 실행은 다음과 같은 문제를 일으킬 수 있습니다. 오래 걸리는 작업이 실행되는 동안 웹 페이지의 UI가 멈추게 됩니다. (UI 멈춤) 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면 사용자는 웹 페이지가 응답하지 않는다고 느낄 수 있습니다. (사용자 경험 저하) 동기적 코드가 계속해서 차례로 실행되므로, 병렬로 실행할 수 있는 작업도 순차적으로 실행되어 성능이 저하됩니다. ( 성능 저하) 간단히 말해 동기적... Read More

비동기 처리: async/await async/await 1. 개념 async/await는 Promise를 더 간결하고 동기적으로 보이게 작성할 수 있는 문법입니다. async 키워드는 함수 앞에 붙여 해당 함수가 Promise를 반환하도록 하고, await 키워드는 Promise가 해결될 때까지 기다립니다. await 키워드는 async 함수 내에서만 사용할 수 있습니다. 2. 실행 순서 async 함수가 호출됩니다. 함수 내에서 await 키워드로 비동기 작업을 기다립니다. 비동기 작업이 완료되면 다음 코드가 실행됩니다. 3. 예제 코드 function goMart() { ... Read More

비동기 처리: Promise Promise 1. 개념 Promise는 비동기 작업의 성공 또는 실패를 처리하는 객체입니다. then 메서드로 작업이 성공했을 때의 결과를 처리하고, catch 메서드로 실패했을 때의 에러를 처리합니다. Promise는 작업이 성공(resolve)하거나 실패(reject)하는 경우를 설정하여 처리합니다. 2. 실행 순서 Promise 객체가 생성됩니다. 비동기 작업이 실행됩니다. 작업이 성공하면 resolve가 호출되고, 실패하면 reject가 호출됩니다. then 또는 catch 메서드로 결과를 처리합니다. 3. 예제 코드 function goM... Read More

비동기 처리: callback 콜백 함수 (Callback Function) 1. 개념 콜백 함수는 다른 함수의 인수로 전달되어 특정 작업이 완료된 후 실행되는 함수입니다. 비동기 작업이 끝난 후에 어떤 작업을 수행하도록 콜백 함수를 전달합니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되어 그 결과를 처리합니다. 2. 실행 순서 주 함수가 실행됩니다. 콜백 함수를 인수로 받는 비동기 함수가 호출됩니다. 비동기 함수는 작업이 완료되면 콜백 함수를 호출합니다. 콜백 함수가 실행됩니다. 3. 예제 코드 function goMart() { console.log('마트에 가... Read More

전자정부 표준프레임워크 후기 2024년 6월 10일 부터 16일까지, 약 일주일간의 전자정부 표준프레임워크 및 공통컴포넌트 개발자 실무 과정을 마쳤습니다. 처음 교육 신청한게 얼마 안된거 같은데 벌써 교육을 다 듣고 수료증까지 받았네요. Maven으로 Spring은 처음 접하는 데다가 기간도 짧아서 많은 내용을 한번에 소화하려니 예상대로 쉽지는 않았습니다. 과목마다 강의도 2개에서 4개까지 있으니 시간적으로도 여유가 있지 않았습니다. 하지만 다행히도 과목 당 3 ~ 4개씩, 총 25여개쯤 되는 과제 제출도 성공적이었고 걱정과 달리 시험도 무사히 통과했습니다. 강의는 과목마다 다른데 단순히 PDF 읽... Read More

클래스와 상속 (Class와 Inheritance) 1. 클래스의 기본 개념 1) 클래스 정의와 인스턴스 생성 클래스는 class 키워드를 사용하여 정의합니다. 클래스는 생성자 메서드(constructor)를 통해 객체의 초기 상태를 설정하며 여러 메서드를 정의할 수 있습니다. class House { constructor (year, name, window) { // 생성자 this.year = year; this.name = name; this.window = window; } getAge() { console.log(`... Read More

구조 분해 할당, 스프레드 연산자, 논리 연산자 1. 구조 분해 할당 (Destructuring Assignment) (1) 배열 구조 분해 기본 구조 예시 const arr1 = [1, 2, 3, 4, 5]; const [one, two, three, four, five] = arr1; console.log(one, two, three, four, five); // 1 2 3 4 5 값이 없는 경우 undefined가 할당됩니다. const arr2 = ['a', 'b', 'c']; const [x, y, z, alpha] = arr2; console.log(x, y, z, ... Read More

Static 활용 Static (정적 파일) 개념 및 특징 1. 정적 파일이란? 정적 파일(Static Files)은 서버에서 클라이언트로 전송될 때 변경되지 않는 파일을 의미합니다. 일반적으로 HTML, CSS, JavaScript, 이미지, 폰트 파일 등이 정적 파일에 포함됩니다. 이러한 파일들은 요청이 들어올 때 서버에서 특별한 처리 없이 그대로 클라이언트에 전송됩니다. 서드파티 라이브러리나 프레임워크 파일(jQuery, Bootstrap 등)을 로드하는데도 사용될 수 있습니다. 2. 정적 파일 사용 코드에서 public 디렉토리에 있는 모든 파일을 정적 파일로 서빙하고 있습니다. co... Read More

Express 활용 1. Express 설정 (1) 기본 설정 먼저 Express를 설치하고 기본 설정을 합니다. npm init // package 초기 설정 npm init -y // package 초기 설정, 질문은 Y로 미리 설정 npm install express // express 설치 npm install ejs // ejs 설치 npm i express ejs // i 는 install 약자 //express, ejs 동시 설치 // app.js const express = require('express'); const app = express(); const PORT = 800... Read More

Express와 EJS 1. Express와 EJS 1) Express 란? Express는 Node.js 환경에서 웹 애플리케이션을 개발할 때 주로 사용되는 웹 프레임워크입니다. Express는 API를 제공하여 HTTP 요청과 응답을 처리할 수 있게 합니다. (1) 간단한 라우팅 Express는 HTTP 메서드(GET, POST 등)와 URL 경로에 따라 요청을 처리할 수 있습니다. app.get('/', (req, res) => { res.send('Hello, World!'); }); (2) 미들웨어 지원 미들웨어는 요청과 응답 사이에 실행되는 함수로, 유... Read More

모듈(Module) 종류 1. path 모듈 (1) 주요 메서드 path.join(): 여러 인자를 넣어 하나의 경로로 합쳐줍니다. path.resolve(): 절대 경로를 반환하며, path.join()과 비슷하지만 차이점이 있습니다. path.parse(): 파일 경로를 root, dir, base, ext, name으로 구분합니다. path.format(): path.parse()로 구분한 객체를 다시 파일 경로로 합칩니다. path.basename(): 파일의 기본 이름을 반환합니다. path.extname(): 파일의 확장자를 반환합니다. 참고 path.j... Read More

모듈(Module) 기초 1. 모듈이란? 모듈은 코드를 재사용 가능하게 만들고, 각 파일이 독립적으로 동작할 수 있도록 합니다. 모듈에는 사용자 만든 모듈, 시스템 모듈, 빌드인 모듈 등이 있습니다. 2. 모듈의 형태 모듈은 각 파일이 독립적인 스코프를 갖도록 하기 위해 즉시 실행 함수로 감싸져 있습니다. (function(exports, require, module, __filename, __dirname){ // 코드 내용 })() 파일이 로드될 때 즉시 실행되며, exports, require, module, __filename, __dirname 등의 변수를 사용할 수 있게 해... Read More

HTTP 서버 생성하기 Node.js HTTP 모듈로 서버 시작하기 Node.js에서 HTTP 서버를 만들기 위해 http 모듈을 사용합니다. 가장 기초적인 서버를 만들어 보겠습니다. const http = require('http'); // http 모듈을 사용해 서버를 생성합니다. const server = http.createServer(); server.listen(8000, function() { console.log('8000 포트에서 서버 실행 중'); }); 위 코드는 http 모듈을 불러와서 createServer 메서드로 서버를 생성한 후, 8000 포트에서 서버를 실행합니... Read More

서버 반납이란 ? 더 이상 사용하지 않는 경우 의미 없는 과금 방지를 위해 서버를 반납합니다. 반납 단계 1) 서버 정지 2) 반납 3) 반납 보호 (설정된 경우) 서버 반납하기 1) 서버 정지를 우선 클릭해줍니다. 2) 정지하더라도 요금은 청구되니 반납을 해줍니다. 3) 반납을 클릭해줍니다. 4) 공인 IP도 함께 반납합니다. 5) 설정 된 경우 반납 보호을 알려줍니다. 6) 반납 보호 설정으로 갑니다. 7) 반납 보호를 해제합니다. 8) 다시 반납 버튼을 클릭합니다. 9) 반납 중으로 변경됩니다. 10)... Read More

들어가면서 0) Windows는 PUTTY와 FileZilla, Mac은 terminal과 FileZilla를 이용합니다. (Mac 접속 방법은 블로그 하단 참고) 1) PUTTY 란? PuTTY는 오픈 소스 터미널 에뮬레이터, 직렬 콘솔 및 네트워크 파일 전송 응용 프로그램입니다. 주로 Windows 환경에서 사용되며, Linux와 같은 다양한 운영 체제에서도 실행할 수 있습니다. 2) FileZilla 란? FileZilla는 오픈 소스 파일 전송 프로토콜(FTP) 클라이언트 및 서버 응용 프로그램입니다. 주로 FTP를 통해 파일을 업로드하고 다운로드하는 데 사용됩니다. 3) Apach... Read More

NCP(NAVER CLOUD PLATFORM) 네이버 클라우드 플렛폼 네이버에서 제공하는 클라우드 기반 인프라 제공 서비스 입니다. 들어가면서 1) VPC 란? VPC는 Virtual Private Cloud의 약자로, 클라우드 환경에서 가상의 네트워크를 생성하여 사용할 수 있게 하는 서비스입니다. VPC를 사용하면 사용자는 자신만의 독립된 네트워크 환경을 구성할 수 있습니다. 2) Subnet 이란? 서브넷은 VPC 내에서 더 작은 네트워크 구역으로 나누는 것입니다. 서브넷은 IP 주소 범위로 구분되며, VPC 내에서 논리적으로 네트워크를 분할하여 사용합니다. 예를 들어, 퍼블릭 서... Read More

CSS 단위(절대 단위와 상대 단위) 1. 절대 단위와 상대 단위 절대 단위 (Absolute Units) 특정한 물리적 길이를 나타내며, 고정된 크기를 의미합니다. 주로 인쇄 매체에서 사용됩니다. 예: 픽셀(px), 포인트(pt), 인치(in), 센티미터(cm) 등. 상대 단위 (Relative Units) 다른 길이 값에 상대적인 크기를 지정합니다. 반응형 디자인에서 매우 유용합니다. 예: 백분율(%), em, rem, 뷰포트 너비(vw), 뷰포트 높이(vh) 등. 2. CSS ... Read More

CSS 미디어쿼리 1. 미디어쿼리란? 미디어쿼리는 특정 조건에 따라 CSS 스타일을 적용할 수 있도록 해주는 규칙입니다. 주로 화면 크기, 해상도, 방향 등과 같은 미디어 특성에 따라 다른 스타일을 적용할 때 사용됩니다. 반응형 웹과 적응형 웹 반응형 웹 (Responsive Web) 다양한 기기와 화면 크기에 적응하여 웹 페이지의 레이아웃이 유동적으로 변하는 웹 디자인 방식입니다. 사용자 경험(UX)을 최적화하고 다양한 기기에서 일관된 사용성을 제공하는 것이 주요 목표입니다. 적응형 웹 (Adaptive Web) 사전에 정의된... Read More

JS DOM: addEventListener 자바스크립트에서 이벤트 핸들러를 등록하는 주요 방법은 두 가지가 있습니다. HTML 속성(onXXX 속성)을 사용하는 방법 자바스크립트의 addEventListener 메서드를 사용하는 방법 1. HTML 속성으로 사용 <h1 onclick="clickH1()">JS 이벤트</h1> function clickH1() { alert('제목 클릭! 함수 이용'); } h1 요소를 클릭할 때 clickH1 함수가 실행되어 alert이 실행됩니다. 2. addEventListener 사용 1) 버튼에 이벤트리스너 ... Read More

전자정부 표준프레임워크 (v4.2) 2024년 6월 10일 ~ 6월 16일 (7일간) 전자정부 표준프레임워크 및 공통컴포넌트 개요 표준프레임워크 소개(아키텍처, 프레임워크, 오픈소스) 개발환경 구성, 실행환경(공통기반, 화면처리, 데이터처리) 공통컴포넌트 소개 및 적용 방법 템플릿 프로그램 실습 프레임워크 : 모바일 표준프레임워크 개요 및 실행/개발환경 클라우드 네이티브-(동영상 ‘2시간’ 분량) ​​​​​​​템플릿 및 MSA 소개 (개요) ​​​​​​​템플릿 개발환경 구성 템플릿 구성 실습​​​​​​​(Backend와 Frontend) 시험점수 60점 이상 (... Read More

JS DOM: 요소 다루기 1. 요소 내용 변경 1) 텍스트 내용 변경하기 div1.innerText = '텍스트 내용'; div1.textContent = '텍스트 내용'; 2)HTML 구조 변경하기 div1.innerHTML = '새로운 <b>HTML</b> 내용'; 3) innerHTML과 textContent 예시 innerHTML는 사용자에게 보여지는 그대로 출력합니다. textContent는 html 태그를 무시하고 내용 전부를 출력합니다. <body> <h1>JS 요소 다루기</h1> <div id... Read More

JS DOM: 요소 가져오기 1. getElement, getElements 1) getElementById 특정 id를 가진 요소를 선택합니다. 해당 ID를 가진 요소가 없으면 null을 반환합니다. console.log(document.getElementById('green')); console.log(document.getElementById('red')); 2) getElementsByClassName (HTMLCollection) 특정 class를 선택하여 HTMLCollection을 반환합니다. 해당 클래스를 가진 요소가 없으면 빈 컬렉션을 반환합니다. console.log(docume... Read More

JS Object 1. JS 값과 참조의 전달 1) 값에 의한 전달 (Pass by Value) 원시 타입(primitive type)은 값(value)이 복사되어 전달됩니다. 함수로 전달될 때, 변수의 값이 복사되어 함수의 매개변수로 전달됩니다. 따라서 함수 내에서 매개변수의 값을 변경하더라도 원본 변수의 값은 변하지 않습니다. 왜냐하면 함수 내에서 사용되는 변수는 함수 내에서만 유효한 지역 변수이기 때문입니다. x가 num의 값의 복사본을 가지고 있기 때문입니다. let num = 1; let num2 = num; console.log(num,... Read More

비전공자에다가 시험준비를 오래 하지 못해서 떨렸는데 다행히 합격했습니다. 요즘은 CBT 시험으로 바뀌면서 시험 결과를 당일에 알 수 있었는데 호옥시나 하는 마음에 필기발표일까지 기다렸다가 글 써봅니다. 기출문제만 풀면 합격하는 시기는 지나간 거 같습니다. CBT 방식으로 바뀌면서 시험지가 사람마다 다르긴 한데 일단 제가 풀땐 20%? 많이 쳐줘야 30% 정도.. 그래도 합격했으니까 다행ㅠㅠ 다시 필기 공부 했던거 떠올리면서 실기 공부 시작. 이미 좀 시작하긴했는데 별로 진도가 안나가서 안한거랑 마찬가지 블로그 글쓴 계기로 다시 시작해보겠습니다. 근데 실기 합격률 실화냐 Read More

JS 배열에서의 반복문 1. for 문 1) 기본 for 문 const fruits = ['사과', '배', '포도', '망고', '바나나']; for (let f = 0; f < fruits.length; f++) { console.log(fruits[f]); } 2) for…of 문 배열의 요소를 직접 참조하므로 인덱스를 사용할 필요가 없습니다. 순서가 있는 구조 반복에 적합합니다. const alphabets = ['a', 'b', 'c', 'd']; for (let alpha of alphabets) { console.log(`alpha > `, alp... Read More

JS 내장 메서드 1. 내장 메서드 내장 메서드란 프로그래밍 언어나 프레임워크에서 기본적으로 제공되는 메서드를 말합니다. 이러한 메서드는 따로 설치하거나 추가 설정할 필요 없이 바로 사용할 수 있습니다. 2. 문자열 관련 내장 메서드 1) 문자열 인덱싱 문자열은 각 문자의 위치를 나타내는 인덱스를 가지고 있으며, 이 인덱스를 사용하여 특정 문자를 가져올 수 있습니다. let str = `Happy Birthday`; console.log(str[0]); // H console.log(str[0] + str[12]); // Ha // 조금 더 복잡한 인덱싱 console.log(str[0] + st... Read More

JS 반복문 1. for문 for문은 반복 횟수가 정해져 있을 때 주로 사용됩니다. 기본적인 for문 for (let i = 0; i < 10; i++) { // i가 0에서 9까지 총 10번 반복합니다. console.log("안녕", i); } 5부터 1까지 출력하기 ( i-- ) for (let i = 5; i >= 1; i--) { console.log(i); } 1부터 n까지의 합 구하기 let n = 10; let sum = 0; for (let i = 1; i <= n; i++) { sum += i; console.log(`현재 ... Read More

JS 조건문 1. if문 if문은 조건이 참일 때 특정 코드를 실행하도록 합니다. else if와 else를 사용하여 여러 조건을 처리할 수 있습니다. 기본적인 if문 if (5 > 3) { console.log("집가고 싶다"); } 여러 조건을 처리하는 if-else문 if (number > 10) { console.log("입력한 수는 10보다 크다."); } else if (number === 10) { console.log("입력한 수는 10이다."); } else { console.log("입력한 수는 10보다 작다."); } 중첩 if문 le... Read More

JS 함수 1. 함수 정의와 호출 함수 정의 (선언) 함수를 생성하는 것. 함수 호출 함수를 사용하는 것. 2. 함수 선언 방식 1) 명시적 함수 선언 (함수 선언문) 함수 이름과 매개변수를 명시하고 함수의 본문을 중괄호로 감쌉니다. 함수 선언문은 스크립트 어디에서든 호출할 수 있습니다. function 키워드를 사용하여 함수를 선언하는 방식입니다. function helloWorld() { // 함수 정의 console.log('Hello, World'); } helloWorld(); // 함수 호출 function helloWorld2() { return 'Hell... Read More

JS 연산자 1. 대입 연산자 변수에 값을 할당할 때 사용하는 연산자입니다. ( = ) let a = 5; let b = 2; 2. 산술 연산자 사칙연산: +, -, *, / 나머지 연산: % 거듭제곱 연산: ** console.log(a + b); // 7 console.log(a - b); // 3 console.log(a * b); // 10 console.log(a / b); // 2.5 console.log(a % b); // 1 console.log(a ** b); // 25 3. 비교 연산자 1) 동등 비교 동등: ==, === 부등: !=, !== ==와... Read More

JS 자료형 (data type) JavaScript 데이터 타입 정리 데이터 타입은 크게 원시 타입(Primitive)과 객체 타입(Object) 두 가지로 나눌 수 있습니다. 1. 원시 타입 (Primitive) 1) 문자열 (String) 문자열은 텍스트 정보를 나타내며, 따옴표로 감싸야 합니다. 숫자나 특수문자가 포함되어 있어도 따옴표 안에 있으면 문자열로 취급됩니다. let text = "안녕하세요"; let text2 = "하이!"; let gender = "남성"; console.log(text); // 안녕하세요 console.log(text2); // 하이! console.log(tex... Read More

JS 변수 선언과 할당 HTML 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS 기초 학습</title> </head> <body> <h1>Javascript를 배워봅시다~!</h1> <script src="./index3.js"></... Read More

JS 참조 방식 대화상자 표시방식 HTML 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS 시작!</title> <script> alert("여기는 head 내부 ~ !"); console.log("여기는 head 내부에 위치한 코드"); <... Read More

CSS Viewport HTML 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>viewPort</title> <style> .vw { width: 100vw; height: 50vw; background-color... Read More

CSS Animation HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation</title> <link rel="stylesheet" href="./index13.css"> </head> <body> <h1>CSS Animati... Read More

CSS 숨기는 속성 3가지 HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>요소를 숨기는 3가지 속성</title> <link rel="stylesheet" href="./index12.css"> </head> <body> <h1>CSS 속성 3형... Read More

CSS flex HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Flex</title> <link rel="stylesheet" href="./index11.css"> </head> <body> <h1>Flexbox와 친해지기</h1&... Read More

CSS display HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index10.css"> <title>CSS - display</title> </head> <body> <h1>CSS display 속... Read More

CSS transform HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index9.css"> <title>CSS - transform</title> </head> <body> <h1>CSS transf... Read More

CSS overflow HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index8.css"> <title>Overflow</title> </head> <body> <h1>CSS overflow에 대해 배... Read More

CSS Z-Index HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index7.css"> <title>CSS - z-index</title> </head> <body> <h1>CSS z-index에 대... Read More

CSS Position HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index6.css"> <title>Position</title> </head> <body> <h1>CSS Position에 대해 배... Read More

I. 웹 폰트 적용 HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자주 쓰이는 CSS 속성</title> <link rel="stylesheet" href="./index5.css"> <!-- #1. google fonts : link 로 바꾸기--> &... Read More

가상 클래스 선택자 HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>가상 클래스 선택자</title> <link rel="stylesheet" href="./index4.css"> </head> <body> <div class="div1"> ... Read More

I. 기본선택자 HTML 코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 선택자</title> <link rel="stylesheet" href="./index2.css"> </head> <body> <h1>기본 선택자 연습해보기.</h1>... Read More

CSS는 HTML 요소를 스타일링하는 데 중요한 역할을 합니다. 1. 인라인 스타일링 참조방식 인라인 스타일링은 style 속성을 사용하여 개별 HTML 요소에 스타일을 직접 적용하는 방법입니다. <h1 style="color: blue;">CSS 사용법을 익혀봅시다!</h1> <h2 style="font-size: larger;">Hello World~!</h2> 2. 내장 스타일링 참조방식 내장 스타일링은 HTML 문서의 <head> 섹션 내에 <style> 태그 내에 CSS 스타일을 추가하는 것을 말합니다. <ul>... Read More

기본 테이블 테이블은 행과 열로 이루어져 있으며, 각 셀에 데이터를 넣어서 정보를 구조화합니다. border="1": 이 속성은 테이블의 테두리를 그릴 때 사용됩니다. 숫자는 테두리의 두께를 나타냅니다. 0으로 설정하여 없앨 수도 있습니다. width="150" height="150": 테이블의 너비와 높이를 설정합니다. bgcolor="skyblue": 테이블의 배경색을 설정합니다. <table border="1" width="150" height="150" bgcolor="skyblue"> <caption>My First Table</caption> ... Read More

1. form 태그 form은 화면에 드러나지 않는 추상적인 태그이며, 양식에 불과합니다. form 요소: 폼 태그 안에 있는 사용자의 입력 값을 받는 요소입니다. input, textarea, select… 태그들에는 name 속성을 가질 수 있습니다. action 속성: 사용자가 폼에 입력한 값을 전달할 주소를 지정합니다. method 속성: 사용자가 폼에 입력한 값을 전달하는 방법을 지정합니다. 서버와 관련된 내용입니다. <form action="/submit" method="post"> <!-- 폼 요소들 --> </form> ... Read More

제목 태그 제목 태그는 문서의 제목과 소제목을 정의합니다. <h1>이 가장 크고 <h6>이 가장 작습니다. <h7>는 존재하지 않으므로 <div> 와 같은 사이즈로 출력됩니다. <h1>가장 큰 제목</h1> <h2>두 번째로 큰 제목</h2> <h3>세 번째로 큰 제목</h3> <h4>네 번째로 큰 제목</h4> <h5>다섯 번째로 큰 제목</h5> <h6>여섯 번째로 큰 제목</h6> 본문 태그 본문 태그는 문서의 주요 내용을 담는 ... Read More

HTML 기본 구조 및 요소 소개 HTML 문서의 기본 구조 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문서 제목</title> </head> <body> <!-- 내용이 여기에 들어갑니다 --> </body> </html> <!DOCTY... Read More

CLI 명령어 정리 CLI(Command Line Interface)는 터미널에서 사용되는 명령어를 통해 컴퓨터에 명령을 내리는 인터페이스입니다. 기본 명령어 pwd (print working directory) 현재 작업 중인 디렉토리의 경로를 출력합니다. ls (list segments) 현재 위치에서 디렉토리와 파일의 목록을 확인합니다. -a: 숨김 파일까지 확인 가능한 옵션 -l: 파일/디렉토리 정보를 자세히 표시하는 옵션 clear 화면의 출력 내용을 지웁니다. cd (change directory) 디렉토리의 위치를 변경합니다. ..: 부모 폴더를 의미합니다. .: 현재 폴... Read More

JWT 의존 라이브러리 추가 build.gradle ... ... dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-validation' implementation 'org.springframework.boot:spring-boot-starter-web' testImplementation 'org.springframework.boot:spring-boot-starter-test' co... Read More

JWT(JSON Web Token) JWT(JSON Web Token)는 데이터를 안전하고 간결하게 전송하기 위해 고안된 인터넷 표준 인증 방식으로써 토큰 인증 방식에서 가장 범용적으로 사용되며 JSON 포맷의 토큰 정보를 인코딩 후, 인코딩 된 토큰 정보를 Secret Key로 서명(Sign)한 메시지를 Web Token으로써 인증 과정에 사용합니다. 액세스 토큰(Access Token) 리프레시 토큰(Refresh Token) 클라이언트 로그인 및 토큰 인증 과정 클라이언트 로그인 요청 클라이언트가 서버에 아이디/비밀번호를 담아 로그인 요청을 보냅니다. 서버는... Read More

Spring Security 다양한 유형의 사용자 인증 기능 적용 폼 로그인 인증: 사용자가 아이디와 비밀번호를 입력하여 로그인하는 방식 토큰 기반 인증: 서버가 발급한 토큰을 클라이언트에게 전달하고, 클라이언트는 이 토큰을 이용하여 인증하는 방식 OAuth 2 기반 인증: 다양한 서비스에서 제공하는 OAuth 2.0 프로토콜을 사용하여 사용자를 인증하고 권한을 부여하는 방식 LDAP 인증: Lightweight Directory Access Protocol을 사용하여 중앙 집중식 디렉토리 서비스를 통해 사용자 인증을 수행하는 방식 애플리케이션 사용자의 역할(Role)에 따른 권한 레벨 적용... Read More

Mockito Mock 객체가 진짜처럼 동작하게 하는 역할입니다. Spring Framework 자체적으로도 지원하고 있는 Mocking 라이브러리는 바로 Mockito입니다. Mockito의 Mocking 기능을 이용해서 테스트하고자 하는 대상에서 다른 영역(다른 계층 또는 외부 통신이 필요한 서비스 등)을 단절시켜 오로지 테스트 대상에만 집중할 수 있습니다. 슬라이스 테스트에 Mockito 적용 package com.codestates.slice.mock; import com.codestates.member.dto.MemberDto; import com.codestates.member.entit... Read More

JPA JPA(Java Persistence API)는 Java 에서 사용하는 ORM(Object-Relational Mapping) 기술의 표준 사양(또는 명세, Specification)입니다. JPA vs Hibernate ORM vs Spring Data JPA JPA (Java Persistence API): 엔터프라이즈 Java 애플리케이션에서 관계형 데이터베이스를 사용하기 위한 표준 스펙(사양 또는 명세, Specification)입니다. API를 직접 사용할 수 있는 것이 아니라, 데이터베이스와의 상호 작용 방법을 정의한 명세로서, “어떻게 구현해야 하는가”에 대한 규격을 제공합니다.... Read More

들어가기 전 용어 정리 DDD(Domain Driven Design) 도메인 주도 설계, 의미 그대로 도메인 위주의 설계 기법을 의미합니다. 도메인(Domain): 비즈니스 영역을 나타내는 클래스나 객체를 의미합니다. 주로 데이터베이스와의 상호작용이나 비즈니스 로직을 담당하며, 애플리케이션의 핵심 부분을 형성합니다. 이러한 도메인 객체들은 주로 엔터티(Entities)로 표현되며, 애플리케이션의 비즈니스 요구사항을 표현하고 데이터를 저장하고 처리하는 역할을 수행합니다. 애그리거트(Aggregate): 비슷한 업무 도메인들의 묶음입니다. 애그리거트 루트(Aggregate Root): 애그리거트에는 해당 애그리거트... Read More

JDBC JDBC는 “Java Database Connectivity”의 약자로, 자바 언어를 사용하여 데이터베이스에 접속하고 상호 작용하기 위한 자바 API입니다. JDBC는 데이터베이스에 대한 연결, 쿼리 실행, 결과 검색 및 업데이트와 같은 데이터베이스 작업을 수행할 수 있는 기능을 제공합니다. JDBC를 사용하면 자바 애플리케이션을 다양한 데이터베이스 시스템과 통합할 수 있습니다. 이를 통해 데이터베이스에 대한 표준화된 방법으로 접근할 수 있으므로, 어떤 데이터베이스 시스템을 사용하더라도 동일한 JDBC 코드를 유지보수하고 재사용할 수 있습니다. Spring Boot Starter 추가 dep... Read More

Mapper 이전 Service 에서의 문제점 MemberController의 핸들러 메서드가 DTO 클래스를 엔티티(Entity) 클래스로 변환하는 작업까지 도맡아서 하고 있다. 엔티티(Entity) 클래스의 객체를 클라이언트의 응답으로 전송함으로써 계층 간의 역할 분리가 이루어지지 않았다. -> 해결방안 DTO 클래스를 엔티티 클래스로 변환하는 작업을 핸들러 메서드가 하지 않고, 다른 클래스에게 변환해 달라고 요청하면 됩니다. 클라이언트의 응답으로 엔티티 클래스를 전송하지 말고, 이 엔티티 클래스의 객체를 DTO 클래스의 객체로 다시 바꿔주면 됩니다. ... Read More

MemberController(MemberService 작성 전) @RestController @RequestMapping("/v1/members") @Validated public class MemberController { @PostMapping public ResponseEntity postMember(@Valid @RequestBody MemberPostDto memberDto) { return new ResponseEntity<>(memberDto, HttpStatus.CREATED); } @PatchMapping("/{member-id}") ... Read More

DTO(Data Transfer Object) 클라이언트의 요청 데이터를 하나의 객체로 모두 전달받을 수 있어 코드가 간결해지고 유지보수가 편해집니다. DTO 클래스가 바로 요청 데이터를 하나의 객체로 전달받는 역할을 해줍니다. DTO 적용 전 후 차이 @RestController @RequestMapping("/v1/members") public class MemberController { @PostMapping public ResponseEntity postMember(@RequestParam("email") String email, ... Read More

Controller 1. 클래스 설계 및 구조 생성 import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController // (1) @RequestMapping("/v1/coffees") // (2) public class CoffeeController { } (1) @RestController Spring MVC에서는 특정 클래스에 @RestController를 추가하면 해당 클래스가 REST API의 리소스(자원, ... Read More

MVC Model Spring MVC 기반의 웹 애플리케이션이 클라이언트의 요청을 전달받으면 요청 사항을 처리하기 위한 작업을 합니다. 이렇게 처리한 작업의 결과 데이터를 클라이언트에게 응답으로 돌려줘야 하는데, 이때 클라이언트에게 응답으로 돌려주는 작업의 처리 결과 데이터를 Model이라고 합니다. View Model 데이터를 이용해서 웹브라우저 같은 클라이언트 애플리케이션의 화면에 보이는 리소스(Resource)를 제공하는 역할을 합니다. public class JsonExample { public static void main(String[] args) { Cof... Read More

POJO (Plain Old Java Object) Java나 Java의 스펙(사양)에 정의된 것 이외에는 다른 기술이나 규약에 얽매이지 않아야 한다. 특정 환경에 종속적이지 않아야 한다. POJO 프로그래밍이 필요한 이유 특정 환경이나 기술에 종속적이지 않으면 재사용 가능하고, 확장 가능한 유연한 코드를 작성할 수 있다. 저수준 레벨의 기술과 환경에 종속적인 코드를 애플리케이션 코드에서 제거함으로써 코드가 깔끔해진다. 코드가 깔끔해지기 때문에 디버깅하기도 상대적으로 쉽다. 특정 기술이나 환경에 종속적이지 않기 때문에 테스트 역시 단순해진다. 객체지향적인 설계를 제한 없이 적용할 수 있다... Read More

SQL 데이터베이스 명령어 테이블 생성 CREATE DATABASE 데이터베이스_이름; 데이터베이스 사용 USE 데이터베이스_이름; 테이블 생성 CREATE TABLE user ( id int PRIMARY KEY AUTO_INCREMENT, name varchar(255), email varchar(255) ); 테이블 정보확인 mysql> describe user; +-------+--------------+------+-----+---------+----------------+ | Field | Type ... Read More

시간 복잡도(Time Complexity) 시간 복잡도는 알고리즘이 실행되는 동안 소요되는 시간의 총량을 나타내는데, 이는 입력 크기에 따라 어떻게 증가하는지를 나타내는 척도입니다. 알고리즘의 효율성을 평가하는 중요한 지표 중 하나입니다. 빅 오 표기법(Big O Notation) 빅 오 표기법은 알고리즘의 시간 복잡도를 나타내는 수학적 표기법 중 하나입니다. 주어진 함수의 상한을 나타내며, 알고리즘의 성능을 최악의 경우로 표현합니다. Array의 시간 복잡도 접근(O(1)): 배열은 인덱스를 통해 직접적으로 요소에 접근할 수 있습니다. 따라서 인덱스를 이용한 요소의 읽기와 쓰기는 상수 시간... Read More

Linked List 배열(Array): 연속된 메모리 공간에 요소들이 저장되며, 각 요소는 고유한 인덱스를 가집니다. 인덱스를 사용하여 데이터를 읽거나 쓸 수 있습니다. 데이터를 삽입하거나 삭제할 때는 해당 요소를 다른 위치로 옮겨야 합니다. 링크드 리스트(Linked List): 연속된 메모리 공간이 아니라 노드들이 흩어진 공간에 저장됩니다. 각 노드에는 데이터와 다음 노드를 가리키는 포인터가 있습니다. 노드들은 이 포인터를 통해 서로 연결되어 있습니다. 데이터를 삽입하거나 삭제할 때 데이터 이동이 필요 없습니다. 마지막 노드는 다음 노드를 가리키는 포인터로 null 값... Read More

1. Tree 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리 구조라고 부릅니다. 노드(Node) : 트리 구조를 이루는 모든 개별 데이터 루트(Root) : 트리 구조의 시작점이 되는 노드 부모 노드(Parent node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 가까운 노드 자식 노드(Child node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 먼 노드 리프(Leaf) : 트리 구조의 끝 지점이고, 자식 노드가 없는 노드 Tree 의 장점 효과적인 계... Read More

1. Stack 자료 구조 Stack의 특징은 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근에 있습니다. LIFO(Last In First Out) 혹은 FILO(First In Last Out) 특징을 가지고 있습니다. Stack에 데이터를 넣는 것을 ‘PUSH’, 데이터를 꺼내는 것을 ‘POP’이라고 합니다. 데이터는 하나씩 넣고 뺄 수 있습니다. ex) 일렬 주차장 Stack 자료 구조의 장점 스택은 후입선출(LIFO) 구조를 가지기 때문에, 스택에 저장된 데이터를 가져오는 속도가 매우 빠릅니다. Stack 자료 구조의 단점 크기 제한이 없다. Stack ... Read More

JVM JVM은 자바로 작성한 소스 코드를 해석해 실행하는 별도의 프로그램입니다. JVM에 Java 프로그램이 로드되어 실행될 때 특정 값 및 바이트코드, 객체, 변수 등과 같은 데이터들이 메모리에 저장되어야 합니다. 런타임 데이터 영역이 바로 이러한 정보를 담는 메모리 영역이며, 크게 5가지 영역으로 구분되어 있습니다. |Method Area |Heap Area |Stack Area| PC Register| Native Method Stack| Stack 영역 맨 마지막에 들어온 데이터가 가장 먼저 나가는 자료 구조를 스택이라고 하며, LIFO는 이러한 스택의 데이터 입출력 순서를 나타내는 원칙... Read More

1. 람다식 람다식은 함수(메서드)를 좀 더 간단하고 편리하게 표현하기 위해 고안된 문법 요소입니다. // 기존 방식 void example1() { System.out.println(5); } // 람다식 () -> {System.out.println(5);} // 기존 방식 void example3(String str) { System.out.println(str); } // 람다식 (String str) -> { System.out.println(str);} // 기존 방식 int sum(int num1, int num2) { return num1 + num2; } // 람... Read More

애너테이션 애너테이션은 소스 코드가 컴파일되거나 실행될 때 컴파일러 및 다른 프로그램에게 필요한 정보를 전달해 주는 문법 요소입니다. 표준 애너테이션 : JDK에 내장된 일반적인 애너테이션입니다. 메타 애너테이션 : 다른 애너테이션을 정의할 때 사용하는 애너테이션입니다. 1. 표준 애너테이션 @Override @Override는 메서드 앞에만 붙일 수 있는 애너테이션으로, 선언한 메서드가 상위 클래스의 메서드를 오버라이딩하거나 추상 메서드를 구현하는 메서드라는 것을 컴파일러에게 알려주는 역할을 수행합니다. class SuperClass { public void... Read More

컬렉션 프레임워크 컬렉션 프레임워크는 특정 자료 구조에 데이터를 추가하고, 삭제하고, 수정하고, 검색하는 등의 동작을 수행하는 편리한 메서드들을 제공해 줍니다. 1. List List는 데이터의 순서가 유지되며, 중복 저장이 가능한 컬렉션을 구현하는 데에 사용됩니다. ArrayList, Vector, Stack, LinkedList 등이 List 인터페이스를 구현합니다. 1-1. ArrayList ArrayList에 객체를 추가하면 객체가 인덱스로 관리된다는 점에서는 배열과 유사합니다. 그러나 배열은 생성될 때 크기가 고정되며, 크기를 변경할 수 없는 반면, ArrayList는... Read More

예외처리 컴파일 에러 주로 세미콜론 생략, 오탈자, 잘못된 자료형, 잘못된 포맷 등 문법적인 문제를 가리키는 신택스(syntax) 오류로부터 발생하기 때문에 신택스 에러(Syntax Errors)라고 부르기도 합니다. 런타임 에러 런타임 에러는 주로 개발자가 컴퓨터가 수행할 수 없는 특정한 작업을 요청할 때 발생합니다. try - catch문 예외 처리란 잠재적으로 발생할 수 있는 비정상 종료나 오류에 대비하여 정상 실행을 유지할 수 있도록 처리하는 코드 작성 과정을 의미합니다. public static void main(String[] args) { try { ... Read More

제네릭 타입을 구체적으로 지정하는 것이 아니라, 추후에 지정할 수 있도록 일반화해 두는 것을 의미합니다. 즉, 작성한 클래스 또는 메서드의 코드가 특정 데이터 타입에 얽매이지 않게 해 둔 것을 의미합니다. class Basket { private String item; Basket(String item) { this.item = item; } public String getItem() { return item; } public void setItem(String item) { this.item = item; ... Read More

Enum 기존 방식 class Seasons { public static final Seasons SPRING = new Seasons(); public static final Seasons SUMMER = new Seasons(); public static final Seasons FALL = new Seasons(); public static final Seasons WINTER = new Seasons(); } class Frameworks { public static final Frameworks DJANGO = new Frameworks(); p... Read More

추상화 추상화는 반대로 기존 클래스들의 공통적인 요소들을 뽑아서 상위 클래스를 만들어 내는 것입니다. abstract 제어자 주로 클래스와 메서드를 형용하는 키워드로 사용되는데, 메서드 앞에 붙은 경우를 ‘추상 메서드(abstract method)’, 클래스 앞에 붙은 경우를 ‘추상 클래스(abstract class)’라 각각 부릅니다. 추상 메서드는 충분히 구체화되지 않은 ‘미완성 메서드’이며, 미완성 메서드를 포함하는 클래스는 ‘미완성 클래스’를 의미하는 추상 클래스가 됩니다. 추상 클래스 추상 클래스는 앞서 설명한 대로 미완성 설계도이기 때문에 메서드 바디가 완성되기 전... Read More

다향성 하나의 객체가 여러 가지 형태를 가질 수 있는 성질을 의미합니다. 다형성은 한 타입의 참조 변수를 통해 여러 타입의 객체를 참조할 수 있도록 만든 것을 의미합니다. 상위 클래스 타입의 참조 변수를 통해서 하위 클래스의 객체를 참조할 수 있도록 허용한 것이라 할 수 있습니다. 오버라이딩과 메서드 오버로딩 또한 다형성의 한 예시라 할 수 있습니다. public class FriendTest { public static void main(String[] args) { Friend friend = new Friend(); // 객체 타입과 참조 변수 타입의 일치 ->... Read More

캡슐화 캡슐화란 특정 객체 안에 관련된 속성과 기능을 하나의 캡슐(capsule)로 만들어 데이터를 외부로부터 보호하는 것입니다. 첫째는 데이터 보호의 목적이고, 둘째로 내부적으로만 사용되는 데이터에 대한 불필요한 외부 노출을 방지하기 위함입니다. 외부로부터 객체의 속성과 기능이 함부로 변경되지 못하게 막고, 데이터가 변경되더라도 다른 객체에 영향을 주지 않기에 독립성을 확보할 수 있습니다. 패키지 패키지(package)란 특정한 목적을 공유하는 클래스와 인터페이스의 묶음을 의미합니다. 패키지는 클래스들을 그룹 단위로 묶어 효과적으로 관리하기 위한 목적입니다. 계층 구조 간 구분은 점... Read More

상속 상속이란 기존의 클래스를 재활용하여 새로운 클래스를 작성하는 자바의 문법 요소를 의미합니다. 상위 클래스의 멤버(필드, 메서드, 내부 클래스)를 하위 클래스와 공유하는 것을 의미합니다. 여기서 우리는 이 두 클래스를 서로 상속 관계에 있다고 하며, 하위 클래스는 상위 클래스가 가진 모든 멤버를 상속받게 됩니다. 두 클래스 간 상속 관계를 설정할 때 사용하는 extends 키워드 자체가 “~클래스로부터 확장되었다”는 표현이 그 역할과 기능을 생각했을 때 더 적절한 표현입니다. 코드를 재사용하여 보다 적은 양의 코드로 새로운 클래스를 작성할 수 있어 코드의 중복을 제거할 수 있습니... Read More

내부 클래스 내부 클래스(Inner Class)는 클래스 내에 선언된 클래스로, 외부 클래스와 내부 클래스가 서로 연관되어 있을 때 사용합니다. 객체지향의 중요한 핵심 원칙인 캡슐화(encapsulation)를 달성하는 데 유용합니다. class Outer { // 외부 클래스 class Inner { // 인스턴스 내부 클래스 } static class StaticInner { // 정적 내부 클래스 } void run() { class LocalInner { // 지역 내부 클래스 } } } 멤버 내부 클래스 인스턴스 내부 클래스와 정적 내부클래... Read More

생성자 객체를 생성하는 역할을 하는 클래스의 구성 요소로서, 인스턴스가 생성될 때 호출되는 인스턴스 초기화 메서드라 정리할 수 있습니다. 생성자는 메서드와 비슷한 구조를 가지고 있지만 크게 두 가지 부분에서 큰 차이를 가집니다. 1) 생성자의 이름은 반드시 클래스의 이름과 같아야 합니다. 만약 클래스 이름과 생성자의 이름이 다르다면 그 메서드는 더 이상 생성자로서의 기능을 수행할 수 없습니다. 2) 생성자는 리턴 타입이 없습니다. 하지만 메서드에서 리턴 값이 없을 때 표시하는 void 키워드를 사용하지 않습니다. 무언가를 ‘리턴하... Read More

1. 필드 자바에서 변수는 크게 클래스 변수(cv, class variable), 인스턴스 변수(iv, instance variable), 그리고 지역 변수(lv, local variable)로 구분됩니다. 필드는 클래스 변수와 인스턴스 변수이며, 이 둘은 다시 static 키워드의 유무로 구분할 수 있습니다. static 키워드가 함께 선언된 것은 클래스 변수, 그렇지 않은 것은 인스턴스 변수입니다. 그리고 이 두 가지 변수 유형에 포함되지 않고 메서드 내에 포함된 모든 변수를 지역변수라 부릅니다. 필드 변수와 지역 변수의 차이점은 초기값에 있습니다. 직접 초기화하지 않으면 값을 출력할 때에 오... Read More

1. 클래스 클래스는 객체를 생성하는 데 사용되며, 반대로 객체는 클래스에 정의되고 설계된 내용 그대로 생성됩니다. 클래스는 객체 그 자체가 아니라 단지 객체를 생성하는 데 사용되는 하나의 틀입니다. 클래스는 객체 그 자체가 될 수 없습니다. 클래스를 통해 생성된 객체를 우리는 해당 클래스의 인스턴스(instance)라 부릅니다. 클래스로부터 객체를 만드는 과정을 우리는 인스턴스화(instantiate)라 지칭합니다. 객체와 인스턴스의 차이 객체는 모든 인스턴스를 포괄하는 넓은 의미를 가지고 있는 반면, 인스턴스는 해당 객체가 어떤 클래스로부터 생성된 것인지... Read More

1. 배열 7월 한 달 동안의 일별 최고 기온을 저장할 때 → 7월은 총 31일 → 총 31개의 변수가 필요합니다. 매우 비효율적입니다. 배열이란, 동일한 타입의 값들을 하나의 묶음으로 묶은 자료 구조를 의미합니다. 배열을 사용하여 값을 저장하는 경우, 연속적으로 값들이 모여서 저장됩니다. 배열을 초기화하지 않을 경우 요소는 null입니다. double[] temperatureOfJuly = { 27.4, 30.1, ..., 31.8 }; 2. 1차원 배열 1차원 배열을 선언할 때에는 다음과 같이 타입 뒤에 대괄호를 붙여서 선언하고 초기화할 수 있습니다. double[] temperatureOfJ... Read More

1. for문 for문은 조건식이 참인 동안 주어진 횟수만큼 실행문을 반복적으로 수행합니다. public class Main { public static void main(String[] args) { int sum = 0; // for (초기화; 조건식; 증감식) for(int num = 0; num < 10; num++) { sum += num; } System.out.println(sum); // 1~9의 합인 45가 출력됩니다. } } 향상된 for 문 public class EnhancedForLoop { public static void... Read More

1. if 문 boolean 값으로 평가될 수 있는 조건식을 넣어주고, 중괄호 안의 실행 블록에는 조건식이 참일 때 실행합니다. 2. if…else문 public class Main { static Scanner myInput = new Scanner(System.in); public static void main(String[] args) { System.out.println("정수를 입력하세요:"); int number = myInput.nextInt(); if (number > 0) { System.out.println(... Read More

1. 콘솔 출력 출력하기 : System.out.print() 출력하고 줄 바꾸기 : System.out.println() 형식대로 출력하기 System.out.printf() System.out.printf("%s%n", "Hello JAVA"); // 줄 바꿈 System.out.printf("%s%n", "Kim" + "Coding"); System.out.printf("%d%n", 3+6); System.out.printf("지금은 %s입니다", 2022 + "year"); // 자동 타입 변환 System.out.printf("나는 %c%s입니다", '김', "코딩"); ... Read More

1. 산술 연산자 int num1 = 1; int num2 = num1 + 2; // num2 -> 3 int num3 = num2 - 1; // num3 -> 2 int num4 = num3 * 3; // num4 -> 9 int num5 = num4 / 2; // num5 -> 4 int num6 = num5 % 3; // num6 -> 1 나눗셈 연산자와 나머지 연산자를 사용할 때는 우항에 0이 위치할 수 없습니다. 즉, 어떤 수를 0으로 나눌 수 없습니다. 나눗셈 연산자를 사용할 때, 좌항과 우항이 모두 int형이면 그 결과도 int형이기 때문에 소수점 이하의 값은 ... Read More

String String 타입의 변수는 String 변수명; 으로 선언할 수 있다. 선언한 변수에 문자열을 할당하는 방법은 두 가지가 있다. 문자열 리터럴을 할당하는 방법 : 변수 = “문자열”; String 클래스의 인스턴스를 생성하여 할당하는 방법 : 변수 = new String(”문자열”); String name1 = "Kim Coding"; String name2 = "Kim Coding"; String name3 = new String("Kim Coding"); String name4 = new String("Kim Coding"); boolean comparison1 = name1 ==... Read More

논리타입 논리 타입의 종류는 boolean형 한 가지뿐입니다. boolean isRainy = true; boolean isAdult = false; 문자타입 문자 타입은 2byte 크기의 char형 한 가지뿐입니다. char letter1 = 'a'; char letter2 = 'ab'; // 에러 : 단 하나의 문자만 할당할 수 있습니다. char letter3 = "a" // 에러 : 작은따옴표를 사용해야 합니다. 자바는 유니코드로 문자를 저장합니다. char letter = 65; System.out.print(letter); // 출력 결과 : A 타입 변환 boolean을 ... Read More

정수 타입 정수 타입은 숫자를 나타내는 타입으로, byte, short, int, long의 총 4개의 타입으로 분류합니다. byte < short < int < long // 각 데이터 타입의 표현 범위에 맞는 값을 할당하고 있습니다. byte byteNum = 123; short shortNum = 12345; int intNum = 123456789; long longNum = 12345678910L; // 각 데이터 타입의 표현 범위에 벗어난 값을 할당하고 있어 에러가 발생합니다. byte byteNum = 130; short shortNum = 123456; i... Read More

타입 타입은 어떤 값의 유형 및 종류를 의미합니다. 값이 차지하는 메모리 공간의 크기 예를 들어, 정수형 타입의 데이터는 4byte, 문자형 타입의 데이터는 1byte입니다. 값이 저장되는 방식 타입은 저장하고자 하는 값을 그대로 저장하는 기본 타입과, 저장하고자 하는 값을 임의의 메모리 공간에 저장한 후, 그 메모리 공간의 주소를 저장하는 참조 타입으로 분류됩니다. 타입의 종류 기본 타입 값을 저장할 때, 데이터의 실제 값이 저장됩니다. 정수 타입(byte, short, int, long), 실수 타입(float,... Read More

매서드 public class Main { … } 접근 허용 범위가 public인 Main이라는 이름의 클래스를 정의하겠다. public static void main(String[] args) { } 반환_타입 메서드_이름(매개변수_타입 매개변수_이름) { 메서드_바디 } 변수(Variable) : 값이 변할 수 있는 데이터를 임시로 저장하기 위한 수단 변수명은 일반적으로 카멜 케이스(camelCase)를 사용합니다. class Main { public static void main(String[] args) { int num1 = 1; int num2 = 2; int num3 = 3; ... Read More

1. JVM (Java Virtual Machine) 자바는 컴파일러(Compiler)를 통해 기계어(Machine Language)로 변환되는 언어입니다. JVM은 자바 프로그램을 실행시키는 도구이며 바이트코드를 운영체제에 맞는 기계어로 변환해 줍니다. 2. JDK (Java Development Kit) JRE (Java Runtime Environment): JVM + 표준 클래스 라이브러리 “Runtime”, 즉 실행과 관련된 무언가입니다. JDK (Java Development Kit): JRE + 개발에 필요한 도구 “Developmen... Read More

자바의 주요 특징은 다음과 같습니다: 운영체제에 독립적 자바는 JRE(Java Runtime Environment)가 설치되어 있는 모든 운영체제에서 실행될 수 있습니다. 이전의 언어들과는 달리 특정 CPU나 OS에 종속되지 않으며, 이는 자바의 큰 장점 중 하나입니다. 객체 지향 언어(Object Oriented Programming, OOP) 자바는 객체 지향 프로그래밍(OOP)의 개념을 사용합니다. 객체 지향적인 접근 방식은 프로그램을 모듈화하고 유지보수를 쉽게 하며, 재사용성을 높입니다. 함수형 프로그래밍... Read More

Git의 각 영역은 크게 온라인과 로컬로 나뉩니다. 온라인 : Remote repository(원격 저장소) 로컬 : Work space(작업 공간), Staging area(스테이징 영역), Local repository(지역 저장소) git init : git 초기화 git config --global init.defaultBranch main : 기본브렌치명 main으로 변경 git branch -m main : 브렌치명 main으로 변경 Work space(작업 공간) Staging area(스테이징 영역) Lo... Read More

SSH 키 ssh-keygen ssh 키는 비대칭키로 구성되며, 두 개의 키가 서로 대칭이 되지 않는 형태로 존재합니다. 명령어를 프롬프트에 입력하고, ssh 키 페어(쌍)를 생성하세요. 명령어를 입력 후 Enter 키를 몇 번 입력하면, ssh 키 페어가 생성됩니다. ssh-keygen 명령어는 경로 ~/.ssh./ 에 두 파일 id_rsa와 id_rsa.pub를 생성합니다. 이 두 파일은 ssh 키 페어라고 하며, id_rsa.pub는 누구에게나 공개해도 되는 공개키(Public Key)라고 합니다. id_rsa는 공개되면 안 되고 나만 보관하고 있어야 하는 키라고 하여 개인키(Private... Read More

Git 설치는 구글검색하면 잘 나와있습니다. $ git config --global user.name "나의 사용자 이름" $ git config --global user.email "내 이메일 주소" $ git config –global user.name만 입력하면 지금 설정된 name을 알 수 있습니다. 참고: https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%B5%9C%EC%B4%88-%EC%84%A4%EC%A0%95 Read More

Windows에서 환경 변수를 설정하는 방법은 다음과 같습니다. 먼저, 시작 메뉴에서 “시스템 환경 변수 편집”을 검색하여 해당 항목을 선택하여 환경 변수 설정 창을 엽니다. 열린 창에서 “환경 변수” 버튼을 클릭합니다. 환경 변수 창에서는 두 가지 종류의 변수를 설정할 수 있습니다. 사용자 변수(User variables): 특정 사용자에게만 적용되는 지역 변수입니다. 시스템 변수(System variables): 모든 사용자에게 적용되는 전역 변수입니다. 환경 변수를 추가하려면 “새로 만들기” 버튼을 클릭하고, 변수 이름과 값을 입력합니다. 변경사항을 저장하려면 “확인” 버튼을 클릭합니다. 변경사항이... Read More

mkdir linux nano hello.java 파일과 폴더를 생성하고 (mkdir, touch 혹은 nano에디터 사용 중일 경우 nano) 명령어 ls -l을 프롬프트에 입력하고 Enter를 누릅니다. 파일 hello.java는 -rw-r–r–이라고 출력되었고, 폴더 linux는 drwxr-xr-x라고 출력되었습니다. 이 표현의 첫 시작인 -와 d는 각각 not directory와 directory를 나타냅니다. 즉, 폴더이면 d로, 파일이면 - 로 나타납니다. 이어지는 r, w, x는 각각 read permission, write permission, execute permission으로 읽기 권한, ... Read More

Unix 기반 운영체제에서는 Ctrl + C 키는 작업을 취소하고, 터미널의 사용자 입력을 다시 되찾아오는 역할을 합니다. apt 패키지 목록 갱신: apt update(관리자 권한 필요) 패키지를 다운로드할 수 있는 여러 저장소의 최신 정보를 업데이트합니다. 새로운 저장소를 추가하거나, 패키지를 설치하기 전, 최신 정보를 갱신합니다. 설치된 프로그램이 새로운 버전으로 변경되지 않습니다. 업그레이드 가능한 패키지 목록을 출력: apt list -—upgradable 전체 패키지 업그레이드(버전 업): ap... Read More

AWS, Ubuntu, git 어디에서나 사용할 수 있습니다. 홈 디렉토리(~)에서 시작해 주세요. 터미널을 열고 다음 명령어를 입력하여 현재 위치를 홈 디렉토리로 변경합니다. 프롬프트(Prompt) 터미널은 CLI(Command-Line Interface)입니다. CLI에서는 명령어를 통해 컴퓨터와 소통합니다. 터미널을 실행하면 명령어를 입력할 수 있는 프롬프트가 나타납니다. 여러분은 프롬프트에서 명령어를 입력하고 실행하여 원하는 작업을 수행할 수 있습니다. CLI에서 프롬프트는 키보드 입력을 받는 공간이며, 여러분이 입력한 명령어를 처리하고 결과를 출력합니다. pwd: 현재 위치 확인하기 GUI(Gra... Read More

안적어도 될 것 같지만 혹시나 싶은 마음에 적어 놓습니다. Windows에서 리눅스 터미널을 사용하기 위해선 WSL2(Windows Subsystem for Linux 2)를 설치해야 합니다. WSL2는 Windows에서 리눅스 터미널을 실행할 수 있게 해주는 프로그램입니다. 다음은 WSL2를 설치하는 과정입니다. 주의사항: 설치 방법을 정확히 따라야 합니다. Windows 업데이트 먼저 Windows를 최신 버전으로 업데이트합니다. 업데이트가 완료되면 다음 단계로 진행합니다. Windows Terminal 설치 및 설정 1) Windows + s를 눌러 검색창을 ... Read More

https://codesandbox.io/p/sandbox/html-cssgico-rur0eq?file=%2Findex.html Read More

사용자 인터페이스(UI)는 웹 애플리케이션과 사용자 간의 상호작용을 위한 중요한 요소입니다. UI는 사용자가 서비스를 효과적으로 이용할 수 있도록 도와주며, 사용자가 서비스를 사용하는 과정에서 느끼는 편의성과 만족도를 결정짓는 요소 중 하나입니다. UI의 설계는 사용자 경험(UX)에 직접적인 영향을 미치며, UI가 사용자 친화적이고 직관적일수록 UX가 개선될 가능성이 높습니다. 예를 들어, UI가 깔끔하고 직관적으로 구성되어 있다면, 사용자는 웹 페이지에서 필요한 정보를 쉽게 찾을 수 있고, 기능을 원활하게 활용할 수 있습니다. 반면에, 혼잡하고 복잡한 UI는 사용자의 집중력을 흐트러뜨리고, 원하는 정보를 찾는 ... Read More

부트 캠프가 끝났다. 짧은 기간에 많은 양을 배웠기에 제대로 배운 것은 아니라고 생각한다. 그래서 복습하는 차원에서 블로그를 전체적으로 정리해서 다시 써보려한다. 잘해보자 !! Read More