리액트는 폼(Form) 요소의 데이터를 관리하는 방식에 따라 제어 컴포넌트와 비제어 컴포넌트로 구분한다. 1. 제어 컴포넌트 (Controlled Component) 폼 요소의 값을 리액트의 state가 관리하는 방식이다. state가 단일 데이터 출처가 되며 폼 입력 요소의 value 속성은 state에 의해 결정된다. 사용자의 입력이 발생하면 onChange 이벤트를 통해 state를 업데이트한다. import { useState } from 'react';export default function Controlled() {
1. 문제 상황 블로그에서 게시글 목록을 조회하기 위해 JpaRepository의 JPQL을 사용했다. @Query(""" SELECT p FROM Post p WHERE p.status = :status ORDER BY p.createdAt DESC, p.id DESC """)Slice Post findPublishedPosts(@Param("status") PostStatus status, Pageable pageable);실제로 실행된 SQL은 다음과 같다. -- 1. Post 목록 조회
1. 정규표현식 (Regular Expression, Regex) 정규표현식은 특정한 규칙을 가진 문자열의 패턴을 표현하는 형식 언어이다. 주로 문자열 검색 및 치환, 입력값 유효성 검사, 로그 분석 및 텍스트 처리 같은 작업에 사용된다. - 정규표현식의 기본 구성 요소 정규표현식은 일반 문자(Literal)와 특수 문자(Meta Characters)의 조합으로 이루어진다. 일반 문자란 특별한 의미 없이 문자 그대로 매칭되는 문자를 의미한다. ahellocat특수 문자는 정규식에서 특별한 기능을 수행하는 문자를 의미한다. 이 문자
1. Stream API Stream API는 Java 8에서 도입된 기능으로 컬렉션 데이터를 함수형 프로그래밍 스타일로 처리하기 위해 제공되는 API이다. 기존의 for문이나 Iterator를 이용한 외부 반복 방식 대신 내부 반복 방식을 사용하여 코드의 가독성과 유지보수성을 향상시킨다. // for문for (String name : names) { if (name.length() 4) { System.out.println(name.toUpperCase()); }}// Streamnames.stream() .f
1. 기본 자료형 (Primitive Type) 메모리에 실제 데이터 값을 직접 저장하며 주로 스택(Stack) 메모리 영역에 할당된다. 자바에는 총 8개의 기본 자료형이 정의되어 있다. 정수형 byte 1byte의 크기를 가지며 기본값은 0이다. 표현 가능한 값의 범위는 -128 ~ 127이다. short 2byte의 크기를 가지며 기본값은 0이다. 표현 가능한 값의 범위는 -32,768 ~ 32,767이다. int 4byte의 크기를 가지며 기본값은 0이다. 표현 가능한 값의 범위는 -2^31 ~ (2^31 - 1)이다. (약
1. SSH (Secure Shell) SSH는 네트워크 상의 다른 컴퓨터에 안전하게 로그인하고 원격 시스템에서 명령을 실행하거나 파일을 전송하기 위해 설계된 암호화 네트워크 프로토콜이다. 과거 평문 텍스트로 데이터를 전송하여 패킷 스니핑 공격에 취약했던 Telent, rlogin, FTP 등의 프로토콜을 대체하기 위해 개발되었다. 기본적으로 TCP 22번 포트를 사용한다. 원격 접속 방법 SSH를 이용한 원격 접속은 클라이언트에서 서버로 암호화된 연결을 시도하는 방식이다. 일반적인 접속 과정은 다음과 같다. 1. SSH 클라이언트
1. 스택(Stack)이란? 스택은 "쌓는다"는 개념과 가장 잘 어울리는 자료구조다. 데이터를 차곡차곡 쌓아 올리는 형태로 저장하며 가장 마지막에 들어간 데이터가 가장 먼저 제거되는 후입선출(LIFO, Last-In-First-Out) 방식으로 동작한다. 주요 연산 스택은 구조적으로 한쪽 끝(Top)에서만 데이터의 접근, 삽입, 삭제가 이루어진다. push(item): 스택의 맨 위에 새로운 데이터를 추가한다. pop(): 스택의 맨 위에 있는 데이터를 제거하고 그 값을 반환한다. peek() 또는 top(): 스택의 맨 위에 있는
1. 페이징 처리가 필요한 이유 블로그나 커뮤니티 게시판처럼 많은 데이터를 다루는 서비스에서 모든 데이터를 한 번에 내려주는 것은 비효율적이다. 서버에는 불필요한 부하가 발생하고 클라이언트 역시 네트워크 낭비와 렌더링 지연을 겪을 수 있다. 이러한 문제를 해결하기 위해 일반적으로 페이징 처리(Pagination)를 사용한다. 데이터를 일정 단위로 나누어 전달하면 클라이언트는 필요한 페이지만 요청해 효율적으로 화면에 데이터를 표시할 수 있다. Spring Boot에서는 Pageable을 활용해 비교적 간단하게 페이징 처리를 구현할 수
1. Redux란? Redux는 자바스크립트 애플리케이션의 상태를 관리하기 위한 오픈 소스 라이브러리이다. 주로 리액트와 함께 사용되지만 리액트에 의존하지 않기 때문에 다른 프레임워크나 바닐라 자바스크립트에서도 사용할 수 있다. 리액트 애플리케이션의 규모가 커질수록 컴포넌트 간 데이터 전달이 복잡해질 수 있으며 부모 컴포넌트에서 자식 컴포넌트로 여러 단계에 걸쳐 props를 전달해야 하는 현상을 Props Drilling이라고 한다. Redux는 이러한 문제를 해결하기 위해 전역 상태를 하나의 저장소에서 관리하도록 설계되었다. [R
1. Lighthouse Lighthouse는 웹 페이지의 품질을 측정하기 위해 Google에서 개발한 오픈 소스 자동화 도구이다. 주로 웹 개발자가 사이트의 성능과 사용자 경험을 개선하기 위해 사용한다. 웹사이트의 전반적인 품질을 평가하는 데 있어 Lighthouse 점수는 하나의 중요한 기준이 된다. 성능, 접근성, SEO, 사용자 경험 등 다양한 요소를 종합적으로 분석하기 때문에 점수 개선을 위한 지속적인 관리와 최적화가 필요하다. Lighthouse는 Google Chrome의 DevTools(F12)에 포함되어 있으며 Li