개발 블로그

CSS Modules는 CSS 클래스 이름을 컴포넌트 단위로 고유하게 만들어주는 방식 다음과 같은 CSS가 있다고 가정.btn { color: white; background: tomato;}빌드 후 실제 브라우저에서 사용되는 클래스 이름은 이런 형태로 바뀜Button_btn__3X7a9즉 클래스 이름에 파일 정보와 랜덤 문자열이 붙어서 고유한 이름이 됨 사용방법1. CSS 파일 생성CSS Module은 파일 이름에 .module.css를 붙여야함Button.module.css.btn { color: white; background: tomato;} 2. 컴포넌트에서 importimport styles from "./Button.module.css"; 여기서 styles는 CSS 클래스 이..

HTML 요소에 CSS 클래스를 추가, 제거, 확인할 때 자주 쓰는 것이 classList 자주 사용하는 메소드classList.contains('클래스명') : 특정 클래스가 있는지 확인 (true / false 반환)classList.add('클래스명') : 클래스 추가classList.remove('클래스명') : 클래스 제거classList.toggle('클래스명') : 클래스가 있으면 제거, 없으면 추가 toggle로 간단하게토글 contains + add/remove로 toggle 구현토글 toggle을 사용하면 편하지만 contains + add/remove로도 구현이 가능하다.

웹 개발을 하다 보면 쿠키(Cookie), 세션(Session), 로컬 스토리지(Local Storage)를 사용하는 경우가 많습니다. 이 세 가지는 모두 클라이언트와 서버 간의 상태를 유지하거나 데이터를 저장하는 방식이지만, 각기 다른 특성과 사용 목적이 있습니다. 1. 쿠키(Cookie)쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각입니다. 서버가 사용자 브라우저에 쿠키를 생성해 저장하면, 이후 요청마다 브라우저는 해당 쿠키를 함께 전송하여 사용자를 식별할 수 있습니다.주요 특징:주로 로그인 정보나 사용자 선호 설정 등을 저장합니다.만료 시간을 설정할 수 있으며, 지정된 시간이 지나면 자동으로 삭제됩니다.용량이 작으며, 브라우저당 약 4KB로 제한됩니다.HTTP 요청마다 쿠키가 자동으..

DNS(Domain Name System)란?인터넷을 사용하다 보면 누구나 www.example.com 같은 도메인 이름을 입력하게 됩니다. 그런데 컴퓨터는 이런 도메인 이름을 이해하지 못하고, 실제로는 IP 주소를 통해 통신합니다. 여기서 DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. 쉽게 말해, 사람이 이해하기 쉬운 도메인 이름을 입력하면, DNS는 해당 서버의 IP 주소로 변환해 줍니다. DNS는 우리가 인터넷을 쉽게 사용할 수 있게 도와주는 핵심적인 역할을 합니다. DNS의 주요 역할도메인 이름을 IP 주소로 변환: 사용자가 브라우저에 www.example.com을 입력하면, DNS는 이를 해당 서버의 IP 주소(예: 192.168.1.1)로 변환..

CSR(Client-Side Rendering)이란?CSR은 클라이언트(사용자의 브라우저)에서 웹페이지를 렌더링하는 방식입니다. 웹사이트에 처음 접속하면 빈 HTML 파일과 JavaScript 파일을 다운로드한 후, JavaScript가 브라우저에서 실행되면서 콘텐츠를 화면에 그리게 됩니다. 대표적으로 React나 Vue와 같은 프론트엔드 프레임워크들이 CSR 방식을 사용합니다.작동 방식: 서버에서 기본 HTML 파일과 필요한 JavaScript를 보내고, 클라이언트에서 JavaScript가 실행되면서 데이터를 받아 페이지를 구성합니다.예시: SPA(Single Page Application) 구조의 웹앱이 대표적인 CSR 방식입니다.CSR의 장점빠른 상호작용: 페이지를 처음 로드한 이후에는 브라우저 내..

Lazy Loading이란?Lazy Loading은 웹 페이지에서 화면에 나타나기 전까지 이미지나 비디오 같은 리소스 로딩을 지연시키는 기술입니다. 이 기법은 처음부터 페이지의 모든 리소스를 불러오는 대신 사용자가 스크롤할 때 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라지고, 사용자 경험이 개선됩니다. Lazy Loading의 장점빠른 페이지 로딩: 초기 로딩 시 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라집니다.데이터 절감: 사용자가 보지 않는 리소스는 로딩되지 않기 때문에 불필요한 데이터 사용을 줄일 수 있습니다.사용자 경험 개선: 빠른 페이지 로딩은 이탈률을 줄이고 사용자 경험을 향상시킵니다. 구현 방법1. HTML 속성 활용HTML5의 loading="lazy" 속성으로 ..

트랜잭션이란?트랜잭션은 데이터베이스에서 이루어지는 일련의 작업들을 하나의 단위로 묶어주는 것을 의미합니다. 여기서 중요한 개념은 트랜잭션이 "모두 성공하거나, 모두 실패해야 한다"는 것입니다.즉, 트랜잭션의 모든 단계가 성공했을 때만 최종적으로 커밋(commit)되어 데이터베이스에 반영되고, 중간에 문제가 발생하면 트랜잭션 시작 전으로 되돌아가(롤백, rollback) 데이터의 일관성을 유지합니다. 친구에게 500원을 송금하는 과정을 예로 들어 설명해 보겠습니다.트랜잭션 시작내 계좌에서 500원 감소친구 계좌에서 500원 추가트랜잭션 완료 후 커밋이 과정에서 트랜잭션은 내 계좌에서 500원을 감소시키고 친구의 계좌에 500원을 더하는 모든 작업이 완벽히 이루어졌을 때만 완료됩니다.중간에 문제가 생기면?그..

헤더 메뉴 본문 푸터article { color: #fff; height: 300px; display: grid; grid-template-areas: "header header" "nav main" "nav footer"; grid-template-columns: 150px 1fr; grid-template-rows: 50px 1fr 50px;}header { background: #24c0a5; grid-area: header;}nav { background: #4011c5; grid-area: nav;}main { background: #b42809; grid-area: main;}footer { background: #24c0a5;..

OFFSET과 LIMIT을 사용한 SQL 페이징 예제데이터베이스에서 많은 양의 데이터를 한 번에 가져오는 것은 비효율적일 수 있습니다. 이를 해결하기 위해 페이징(paging) 기법을 사용하여 필요한 만큼의 데이터만 가져오도록 할 수 있습니다. 이번 포스트에서는 OFFSET과 LIMIT을 사용하여 페이징을 구현하는 방법을 설명하겠습니다.페이징의 기본 개념페이징은 데이터를 여러 페이지로 나누어 한 페이지에 일정 개수의 데이터만 보여주는 방식입니다. 이를 통해 데이터베이스에 과부하를 줄이고, 사용자에게 더 나은 경험을 제공합니다.OFFSET과 LIMIT의 역할LIMIT: 한 번에 가져올 데이터의 최대 개수를 설정합니다. 예를 들어, 한 페이지에 10개의 데이터를 보여주고 싶다면 LIMIT 10을 사용합니다...

User와 Role테이블이 있다고 가정 User는 id, username, passwordRole은 id, name User는 여러 Role을 가질 수 있고 Role은 여러 User를 가질 수 있으니 Many-to-Many관계이다.@Entitypublic class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String username; private String password; @ManyToMany(fetch = FetchType.EAGER) @JoinTable( name = "user_role", joinColumns..