Kirby Dev

플레이브 칼리고 파트2 미공포

얌얌커비 — Tue, 24 Mar 2026 11:42:07 +0900

플레이브 칼리고 파트2 미공포

포토북 미공포 > 블래스트샵

포토카드 미공포 > 위버스샵

아이디카드 미공포 > 올리브영

디자이너와 개발자가 함께 알아야 할 UI 컴포넌트 설계 원칙

얌얌커비 — Mon, 23 Jun 2025 01:34:39 +0900

디자이너와 개발자가 함께 알아야 할 UI 컴포넌트 설계 원칙

웹 또는 앱을 구축하는 과정에서 UI 컴포넌트는 디자이너와 프론트엔드 개발자가 협업하는 가장 핵심적인 단위입니다. 일관되고 재사용 가능한 컴포넌트를 잘 설계하면 개발 속도는 물론 유지보수 효율성까지 크게 향상됩니다. 이 글에서는 2025년 기준 실무에서 요구되는 UI 컴포넌트 설계 원칙과 디자이너-개발자 협업 전략을 소개합니다.

1. UI 컴포넌트란 무엇인가?

UI 컴포넌트는 버튼, 카드, 입력창, 모달 등과 같이 사용자 인터페이스를 구성하는 기능 단위의 시각적 요소입니다. 컴포넌트는 보통 HTML, CSS, JavaScript로 구성되며, 디자이너는 이를 Figma나 Sketch에서 설계하고 개발자는 코드로 구현합니다.

예를 들어 버튼 컴포넌트는 다음과 같은 상태를 포함할 수 있습니다 :

기본(default)
호버(hover)
활성(active)
비활성(disabled)
로딩 중(loading)

2. 디자인 시스템과 컴포넌트의 관계

디자인 시스템은 UI 컴포넌트의 설계 기준이 되는 스타일 가이드와 컴포넌트 라이브러리의 총합입니다. 예를 들어 Material Design이나 Carbon Design System은 전 세계적으로 사용되는 대표적인 디자인 시스템입니다. 디자인 시스템이 정비되면 디자이너와 개발자는 동일한 기준 아래에서 컴포넌트를 제작하고 관리할 수 있습니다.

3. UI 컴포넌트 설계 시 고려할 5가지 원칙

① 일관성 (Consistency)

동일한 컴포넌트는 어떤 페이지에서도 동일하게 보이고 작동해야 합니다. 사용자는 반복되는 요소에 익숙함을 느끼고, 이는 UX 품질에 직결됩니다.

② 재사용성 (Reusability)

컴포넌트는 하나의 기능을 범용적으로 수행해야 하며, 다양한 맥락에서 쉽게 재사용될 수 있도록 설계되어야 합니다. props나 slot 등으로 유연성을 확보하는 것이 중요합니다.

③ 확장성 (Scalability)

기능 추가나 상태 변화가 생겼을 때 구조를 변경하지 않고도 대응할 수 있어야 합니다. CSS 변수, BEM 방식, Atomic Design 접근법이 여기에 도움이 됩니다.

④ 접근성 (Accessibility)

시각, 청각 등 다양한 사용자 환경에서도 컴포넌트가 제대로 작동해야 합니다.

예: 스크린 리더를 위한 ARIA 속성 적용, 키보드 네비게이션 지원 등

⑤ 상태 관리 분리 (State Separation)

컴포넌트 자체와 그 상태는 명확히 분리되어야 합니다. UI 상태는 가능하면 상위 컨테이너에서 관리하고, 컴포넌트는 뷰만 담당하게 해야 유지보수가 용이합니다.

4. 실무에서 자주 발생하는 협업 이슈

디자이너와 개발자 간의 협업에서 자주 발생하는 문제는 다음과 같습니다 :

디자인에서 정의한 컴포넌트가 개발 시 구현 불가능하거나 비효율적인 경우
컴포넌트 상태 정의가 불명확하여 불필요한 수정 반복
각 팀 간 명명 방식이나 UI 기준 불일치

이러한 문제를 해결하기 위해, 아래와 같은 도구와 방식을 사용할 수 있습니다.

5. 협업 효율을 높이는 도구

Figma는 디자이너가 Variants와 Auto Layout을 활용하여 다양한 컴포넌트 상태를 정의하고 공유할 수 있게 합니다. Storybook은 개발자가 실제 코드로 만든 컴포넌트를 문서화하고 테스트할 수 있게 하여, 서로의 작업물을 투명하게 공유할 수 있습니다.

이외에도 Zeroheight, Zeplin, Tokens Studio 같은 도구는 디자인-개발 연결에 효과적입니다.

6. 컴포넌트 중심 사고의 필요성

디자이너와 개발자가 동일한 목표 아래 협업하려면, UI를 단순한 '그림'이 아니라 사용자 경험의 반복 가능한 모듈로 보는 관점이 필요합니다. 컴포넌트 중심의 사고는 유지보수성, 일관성, 확장성을 보장하며, 장기적으로 제품 품질을 크게 향상시킵니다.

성공적인 UI 협업의 핵심은 '컴포넌트 중심 설계'입니다. 오늘부터 팀 내 디자인 시스템 점검과 컴포넌트 재설계를 시작해보세요.

카카오, 새 디지털 서체 '카카오 글씨' 제작 및 무료 배포!

얌얌커비 — Thu, 19 Jun 2025 11:22:59 +0900

카카오 큰글씨 작은글씨 서체 무료배포

카카오가 만든 서체? 기대 이상이었다

최근에 카카오에서 새로운 디지털 서체인 '카카오 글씨'를 공개했는데, 디자인 쪽 일을 하다 보니 자연스럽게 써보게 됐어요. 평소에도 폰트 수집이 취미 같은 저로서는, 이런 소식이 반가울 수밖에 없죠. 더 반가운 건 이 서체가 개인용은 물론 상업적 용도까지 완전 무료라는 점이었습니다.

설치해서 써보니, 생각보다 훨씬 활용도가 높더라고요. 발표 자료, 웹 프로젝트, 심지어 모바일 앱 UI 시안에도 가볍게 어울렸습니다.

'카카오 글씨'의 첫인상과 특징

첫 느낌은 “참 카카오답다”였습니다. 딱딱하지 않고, 그렇다고 너무 장난스럽지도 않은 그 절묘한 균형감.

아래는 제가 직접 써보며 느낀 주요 특징들이에요

부드러운 인상: 둥글둥글한 획이 친근한 분위기를 잘 살려줘요.
가독성 좋음: 디지털 디바이스에서 눈에 잘 들어옵니다. 웹 콘텐츠에도 잘 어울려요.
두 가지 굵기: Regular와 Bold 버전이 제공되어, 콘텐츠 계층을 나누기 좋아요.
제약 없는 라이선스: 기업 로고, 유튜브 썸네일, 광고 배너 등 다양한 상업적 작업에 바로 쓸 수 있어요.

개인적으로는 포트폴리오 사이트 본문 폰트로 적용해도 전혀 위화감 없을 정도로 안정감 있고 예쁩니다.

사용 조건 & 라이선스

카카오는 '카카오 글씨'를 비영리·영리 모두 무료로 사용 가능한 오픈 라이선스로 제공하고 있어요. 다만, 폰트를 수정하거나 재판매하는 건 금지되어 있으니 주의가 필요합니다.

깃허브나 폰트 공유 사이트를 통해 유통되는 비공식 버전도 있던데, 가능하면 공식 경로에서 받는 걸 추천드려요.

카카오 글씨 다운로드 방법

아래 링크에서 카카오 글씨 공식 다운로드 페이지로 바로 이동할 수 있어요. TTF 형식으로 제공되며, 윈도우나 맥 어디서든 설치 가능합니다.

공식 다운로드 링크:
https://www.kakaocorp.com/page/detail/11570

설치 방법이나 사용 예시도 페이지 내에서 친절하게 안내하고 있어서 어렵지 않아요.

포트폴리오에도 어울리는 서체

포트폴리오 블로그나 개인 웹사이트를 운영하는 분이라면, '카카오 글씨'는 진심 추천할 만한 서체입니다. 저는 이 서체로 프로젝트 소개 페이지를 구성해봤는데, 좀 더 부드럽고 편안한 인상을 줄 수 있었어요.

콘텐츠의 분위기를 너무 무겁게 만들지 않으면서도, 정보 전달에는 전혀 문제가 없는 폰트는 흔치 않거든요. 게다가 카카오라는 이름이 주는 신뢰감도 분명한 장점이죠.

혹시 지금 작업 중인 웹/앱 디자인에 어울릴 만한 깔끔하면서 개성 있는 무료 서체를 찾고 계신다면, 한 번 설치해서 써보시길 추천드립니다. 사용해보고 나면 생각보다 자주 쓰게 될지도 몰라요.

이 글은 개인적인 사용 경험과 카카오 공식 자료를 기반으로 작성되었습니다.

Ferralax Scrolling이란? 웹사이트에 생명을 불어넣는 Parallax 스크롤링 기술

얌얌커비 — Thu, 8 May 2025 21:56:35 +0900

Ferralax Scrolling 개요

웹사이트의 사용자 경험(UX)을 극대화하기 위해 많은 개발자와 디자이너들이 다양한 스크롤링 효과를 사용하고 있습니다. 그 중에 패럴랙스 스크롤링은 시각적 몰입감을 극대화해주는 Parallax 효과의 고급 구현체로 프론트엔드 개발 트렌드에서 점점 더 주목받고 있습니다.

Ferralax(패럴랙스)란?

Ferralax는 React(리액트) 기반의 Parallax Scrolling 컴포넌트를 쉽게 구현할 수 있도록 도와주는 라이브러리 입니다.

framer-motion, react-scroll, intersection observer 등을 활용하여 배경과 콘텐츠를 다른 속도로 움직이게 하여 3D처럼 보이는 스크롤 인터랙션을 연출할 수 있습니다.

주요 기능 및 장점

기능	설명
부드러운 스크롤 애니메이션	사용자의 스크롤에 반응하는 자연스러운 움직임
고성능 렌더링 지원	Intersection Observer API 기반으로 렌더링 최적화
커스터마이징 용이	다양한 속도, 방향, 트리거 지점 설정 가능
React 및 Next.js 지원	SSR 환경에서도 안정적 동작

한 가지 팁이 있다면 퍼포먼스를 위해 중요한 콘텐츠는 lazy loading 과 함께 사용하는 것이 좋습니다. lazy loading에 대한 내용은 다음번에 자세하게 다뤄보도록 할게요!

Ferralax Scrolling(패럴랙스 스크롤링) 사용법

1. 설치 방법

npm install ferralax

혹은

yarn add ferralax

를 터미널 또는 파워쉘에 입력해서 다운로드 합니다.

2. 기본 사용 예시 (React)

import {Ferralax} from 'ferralax';

export defalt function HeroSection() {
	return (
    	<Ferralax speed={-0.5}>
        	<img src="/images/background.webp" alt="Background">
        </Ferralax>
    );
}

팁이 하나 있다면 speed의 값은 -1 ~ 1 사이로 조절할 수 있고 음수의 경우 역방향으로 스크롤 되는 점 꼭 참고하세요!

Ferralax Scrolling

SEO 측면에서의 Ferralax(패럴랙스) 고려사항

Parallax 효과는 사용자 경험을 향상시켜줄 수 있지만, 잘못 구현하면 SEO에 부정적인 영향을 줄 수 있습니다.

접근성과 SEO를 위한 팁

텍스트는 HTML로 렌더링 : 이미지나 애니메이션만 있는 섹션은 Google이 내용을 파악하기 어려워요.
aria-label, alt 태그를 철저히 기입 : 웹접근성을 높여줄 수록 SEO에 효율적입니다! 의미 없는 태그로 남겨두지 말고 aria-label를 꼭 입력하세요!
모바일 최적화 : CSS 속성에 따라 모바일에서 Parallax 효과가 깨질 수 있으므로 테스트 필수
구조화 데이터 (Schema.org) : 주요 콘텐츠는 마크업 구조화로 검색 엔진 이해도 향상

팁이 있다면 Lighthouse(Chrome DevTools 내장도구)를 활용해 렌더링 및 접근성 문제를 체크해보는 것도 추천합니다! (이건 함께 일하던 마케터에게 배운 부분이라 더욱 더 확실합니다!)

Ferralax Scrolling이 적합한 경우

포트폴리오 웹사이트
브랜드 랜딩 페이지
비주얼 중심의 제품 소개 페이지
크리에이티브 에이전시 웹사이트

Ferralax Scrolling은 시각적 스토리텔링을 강화하면서도 사용자의 몰입도를 높이는데 큰 효과가 있는 기능입니다. 다만, SEO 최적화를 병행하는 것이 핵심이고 개발과 ㄷ이자인의 균형을 유지하면서 효과적으로 활용해보세요!

프로세스 스케줄링, 당신의 컴퓨터는 어떻게 일할까?

얌얌커비 — Thu, 13 Feb 2025 20:33:11 +0900

컴퓨터는 동시에 수많은 프로그램을 실행합니다. 하지만 CPU는 한 번에 하나의 작업만 처리할 수 있죠.

그렇다면 여러 프로그램을 마치 동시에 실행하는 것처럼 만드는 마법같은 기술은 무엇일까요?

그것은 바로 프로세스 스케줄링(Process Scheduling) 입니다.

이번에는 운영체제가 프로세스를 어떻게 스케줄링하는지, 어떠한 방식들이 있는지, 각 기법들의 장단점을 알아볼게요!

먼저, 프로세스 스케줄링이란?

프로세스 스케줄링은 운영체제가 CPU를 다양한 프로세스에 적절하게 할당하는 방법을 의미합니다. CPU 스케줄러가 이를 담당하며 효율적인 스케줄링을 통해 시스템의 성능을 극대화할 수 있습니다.

프로세스 스케줄링 이해하는 팁!

스케줄링이 없다면 한 프로그램이 CPU를 독적하며 다른 프로그램이 실행되지 못하는 상황이 발생할 수 있어요
적절한 스케줄링 기법을 선택하면 시스템의 응답속도와 처리량, 공정성이 개선돼요

프로세스 스케줄링의 종류

운영체제에서 사용하는 프로세스 스케줄링은 크게 3가지로 나눌 수 있습니다.

장기 스케줄링 (Long-term)
- 어떤 프로세스를 메모리에 올릴지 결정 (Job Scheduler)
중기 스케줄링 (Medium-term)
- 실행중인 프로세스를 일시 중단하거나 다시 실행 (Swapper)
단기 스케줄링 (Short-term)
- 어떤 프로세스가 CPU를 사용할지 결정 (CPU Scheduler)

스케줄링 종류 쉽게 이해하는 팁!

장기 스케줄링 : "어떤 프로그램을 실행할까?"
중기 스케줄링 : "잠시 대기하거나 다시 실행할까?"
단기 스케줄링 : "지금 당장 CPU를 누가 사용할까?"

이렇게 운영체제는 단계별로 프로세스를 관리합니다

프로세스 스케줄링 알고리즘

CPU 스케줄러가 프로세스를 효율적으로 배분하는데 사용되는 다양한 기법이 있습니다.

1️⃣ 선점형(Preemptive) 스케줄링

CPU를 사용하던 프로세스가 중간에 다른 프로세스에게 CPU를 양보해야하는 방식

(ex. 라운드 로빈) / 선점형 방식은 다중 사용자 환경에서 유용하지만, 문맥 전환(컨텍스트 스위칭) 비용이 발생할 수 있어요!

2️⃣ 비선점형 스케줄링

프로세스가 CPU를 할당받으면 끝날 때까지 실행되는 방식

(ex. FCFS) / 비선점형 방식은 처리 순서를 예측하기 쉽지만, 실행 시간이 긴 프로세스가 있으면 대기 시간이 길어질 수 있어요!

3️⃣ 대표적인 CPU 스케줄링 알고리즘

알고리즘	방식	특징
FCFS (First Come, First Served)	비선점형	먼저 도착한 프로세스부터 실행 (줄 서기 방식)
SJF (Shortest Job First)	비선점형 / 선점형	실행 시간이 짧은 프로세스부터 실행
Priority Scheduling	선점형 / 비선점형	우선순위가 높은 프로세스부터 실행
Round Robin (RR)	선점형	프로세스마다 일정 시간(CPU 타임 슬라이스)를 할당
Multilevel Queue	혼합형	여러 개의 우선순위 큐를 사용하여 프로세스 그룹화

FCFS는 단순하지만 Convoy Effect(호위 효과) 문제로 인해 단점이 있고 SJF는 평균 대기 시간을 줄이지만, 실행 시간을 예측하기 어려워요. 라운드 로빈은 공정하지만, 타임 슬라이스가 너무 크면 FCFS와 비슷해지고 너무 작으면 문맥 전환 비용이 증가합니다.

그럼 어떤 스케줄링이 가장 좋을까?

이 질문에 대한 정답은 없습니다!

각 기법은 특정 상황에서 장점과 단점이 있기에 운영체제는 보통 여러가지 스케줄링 알고리즘을 조합하여 사용합니다.

빠른 반응 속도가 필요하다면? ➡️ 라운드 로빈(RR)

실행 시간 짧은 작업을 우선 처리해야한다면? ➡️ SJF

중요한 작업을 먼저 처리한다면? ➡️ Priority Scheduling

단순한 구조가 필요하다면? ➡️ FCFS

최신 운영체제들은 다단계 피드백 큐와 같은 하이브리드 기법을 사용하여 여러가지 알고리즘의 장점을 조합합니다!

운영체제의 숨은 영웅, 프로세스 스케줄러

CPU 스케줄링은 우리가 사용하는 컴퓨터와 스마트폰에서 보이지 않게 동작하는 필수적인 요소입니다.

최적의 성능을 위해 다양한 기법들이 활용되며 운영체제의 성능을 결정짓는 중요한 요소 중 하나입니다.

JavaScript로 다크모드(Dark Mode) 쉽게 구현하는 방법

얌얌커비 — Wed, 12 Feb 2025 21:37:45 +0900

다크모드가 필요한 이유

눈의 피로 감소 : 어두운 화면은 장시간 사용 시, 밝은화면에 비해 눈이 덜 피곤함
배터리 절약 : OLED 디스플레이에서는 검은색 픽셀이 전력 소모를 줄임
개인화된 사용자 경험 제공

다크모드 적용 방법

1️⃣ CSS 변수 (Custom Properties) 활용

CSS 변수를 사용하면 테마 변경이 매우 간단해집니다.

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-mode {
  --bg-color: #222222;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

2️⃣ JavaScript로 다크모드 토글 기능 구현

const toggleButton = document.querySelector("#darkModeToggle");

toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  // 사용자 설정을 localStorage에 저장
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

// 페이지 로드 시 저장된 테마 적용
window.onload = () => {
  if (localStorage.getItem("theme") === "dark") {
    document.body.classList.add("dark-mode");
  }
};

3️⃣ HTML 버튼 추가

<button id="darkModeToggle">  다크모드 전환</button>

4️⃣ 사용자의 시스템 설정에 따라 자동 적용

CSS prefers-color-scheme 를 활용하면 사용자의 운영체제에 따라 다크모드 설정을 반영할 수 있습니다.

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222222;
    --text-color: #ffffff;
  }
}

이렇게 간단하고 손쉽게 다크모드를 적용해보세요!

CSS Grid vs Flexbox 언제 무엇을 사용하는게 좋을까?

얌얌커비 — Tue, 11 Feb 2025 20:59:45 +0900

✅ Grid 와 Flexbox의 차이를 알아보자!

비교	Grid	Flexbox
레이아웃 유형	2차원 (행 + 열)	1차원 (행 또는 열)
주로 사용하는 경우	전체 페이지 / 큰 구조	작은 UI 요소 정렬
배열 방식	grid-template-rows grid-template-columns	flex-direction 으로 한 방향 정렬
정렬 방식	justify-items align-items	justify-items align-items

❓ 언제 Grid를 사용해야할까?

전체 페이지 레이아웃을 구성할 때
복잡한 카드 UI 레이아웃을 짤 때
행(row)과 열(column)을 동시에 정렬해야할 때

Grid를 적용한 예제코드

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

❓ 언제 Flexbox를 사용해야할까?

버튼 그룹, 네비게이션 바처럼 한 줄 정렬이 필요할 때
콘텐츠를 가운데 정렬해야할 때
동적으로 크기가 변하는 요소들을 정렬할 때

Flexbox를 적용한 예제코드

<div class="flex-container">
  <div class="flex-item">Flexbox</div>
</div>

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.flex-item {
  padding: 20px;
  background-color: coral;
}

Grid와 Flexbox 선택 기준 (기능별 추천 CSS)

기능	추천
전체적인 페이지 레이아웃	Grid
수평 정렬이 필요한 경우	Flexbox
행과 열을 동시에 정렬	Grid
작은 UI 요소 간의 정렬	Flexbox

사실 Grid와 Flexbox를 혼합해 사용하면 더욱 탄탄하게 퍼블리싱할 수 있습니다.

필요한 상황에 따라 적절하게 활용해보세요!

웹 성능 최적화를 위한 필수 체크 리스트!

얌얌커비 — Mon, 10 Feb 2025 23:19:13 +0900

웹 성능이 중요한 이유

웹사이트의 로딩 속도는 사용자 경험(UX), 검색엔진최적화(SEO), 전환율(Conversion Rate)에 큰 영향을 미칩니다.

UX : 3초 이상 소요시 사용자의 50%사 이탈함
SEO : Google은 속도가 빠른 웹사이트를 더 높은 순위에 배치함
전환율 : 로딩 시간이 1초 증가할 때마다 전환율이 7% 감소함

웹 성능을 최적화하려면 불필요한 리소스를 줄이고 효율적인 코드와 설정을 적용해야합니다.

자, 이제 체크리스트를 따라가며 최적화하는 방법을 살펴볼까요?

웹 성능 최적화 체크리스트

1️⃣ 이미지 최적화 : 페이지 속도를 높이는 핵심 요소

웹 페이지의 가장 큰 용량을 차지하는 요소 중 하나가 이미지입니다.

최적화하지 않으면 로딩 속도가 느려지고 사용자 경험이 좋지 않아집니다.

차세대 이미지 포맷(WEBP, AVIF) 사용
- 기존 PNG, JPEG 보다 용량이 25~50% 작기 때문

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="이미지 설명">
</picture>

반응형 이미지 적용 (srcset)
- 화면 크기에 따라 다른 해상도의 이미지를 불러와 성능 최적화

<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="반응형 이미지">

Lazy Loading 적용 (loading="lazy")
- 화면에 보이지 않는 이미지는 미리 로딩하지 않고 필요할 때 로딩되도록 설정

<img src="image.jpg" loading="lazy" alt="지연 로딩 이미지">

2️⃣ CSS 및 JavaScript 최적화 : 불필요한 코드 최소화

CSS 및 JavaScript 파일 압축(Minify)하기
- 불필요한 공백과 주석, 줄 바꿈을 제거하여 파일 크기 최소화
- UglifyJS, Terser, CSSNamo 와 같은 도구 사용
필요한 파일만 로드하기
- async 또는 defer 속성을 사용해 JavaScript 비동기 로딩

<script src="script.js" defer></script>

필요없는 CSS 제거 (PurgeCSS 활용)
- 사용되지 않는 CSS를 제거하여 스타일 파일 크기 축소

3️⃣ 폰트 최적화 : 렌더링 속도 개선

시스템 폰트 사용 (웹 폰트 최소화)

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen;
}

font-display: swap; 속성 추가해 글꼴 지연 로딩 방지

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

4️⃣ 서버 및 네트워크 최적화

브라우저 캐싱 활성화 (Cahe-Control)
CDN(Content Delivery Network) 사용
Gzip/Brotli 압축 적용하여 전송 데이터 최소화

HTML/CSS 퍼블리싱, 이렇게 하면 속도가 2배 빨라진다!

얌얌커비 — Sun, 9 Feb 2025 23:55:52 +0900

프론트엔드 개발에서 퍼블리싱 작업은 단순히 디자인을 코드로 옮기는 것이 아닙니다.

유지보수하기 쉬운 코드와 재사용 가능한 스타일, 빠른 로딩 속도까지 고려해야하죠.

이번 글에서는 HTML/CSS 퍼블리싱을 더욱 효율적으로 작업할 수 있는 핵심 방법들에 대해 소개합니다!

1. CSS 변수 및 SCSS/SASS 활용 : 스타일을 체계적으로 관리하자!

CSS 변수를 활용하면 일관된 스타일을 유지하면서도 유지보수를 쉽게 할 수 있습니다.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}

SCSS/SASS를 함께 사용하면 변수, 믹스인, 중첩 규칙을 활용해 더욱 체계적인 스타일을 관리할 수 있습니다.

$primary-color: #3498db;
$secondary-color: #2ecc71;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: $secondary-color;
  }
}

⚠️ CSS 변수를 활용하면 JavaScript와 연동하여 동적으로 테마 변경도 가능합니다.

2. 모듈화된 CSS : BEM, SMACSS 방식으로 유지보수를 편리하게!

CSS의 가장 큰 문제 중 하나는 클래스 네이밍 충돌과 유지보수의 어려움 입니다.

이를 해결하기 위해 BEM(Block Element Modifier)이나 SMACSS 방식을 활용하면 코드의 가독성과 확장성을 높일 수 있습니다.

BEM 방식 예시

<div class="card card--primary">
  <h2 class="card__title">카드 제목</h2>
  <p class="card__description">카드 내용</p>
</div>

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
}

.card--primary {
  background-color: var(--primary-color);
  color: white;
}

⚠️ 클래스 네이밍 규칙을 통일하면 협업이 쉬워지고 유지보수가 편해집니다!

3. 최적화된 이미지 사용 및 Lazy Loading 적용 : 페이지 로딩 속도 개선

이미지는 웹사이트에서 가장 많은 리소스를 차지하는 요소 중 하나입니다.

이미지의 경우, 최적화를 통해 속도를 높이고 사용자 경험을 향상시킬 수 있습니다.

적절한 이미지 포맷 사용

PNG → 투명도가 필요한 경우
JPEG → 일반 사진이나 그래픽
WEBP → 최신 브라우저에서 지원하는 고효율 포맷

이 중 WEBP를 권장합니다. (투명도가 필요한 경우에도 유지됨)

Lazy Loading 적용

<img src="image.jpg" loading="lazy" alt="최적화된 이미지">

⚠️ WEBP 포맷을 사용하면 이미지 용량을 최대 30~50% 까지 줄일 수 있습니다.

4. 접근성을 고려한 시멘틱 마크업 적용

HTML 태그를 올바르게 사용하면 검색엔진최적화 (SEO)에도 유리하고 화면 리더기 사용자들도 쉽게 웹사이트를 이용할 수 있습니다.

<header>
  <h1>웹사이트 제목</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">서비스</a></li>
    </ul>
  </nav>
</header>

<article>
  <h2>게시글 제목</h2>
  <p>게시글 내용입니다.</p>
</article>

<button aria-label="메뉴 열기">☰</button>

⚠️ <button> 요소를 사용할 때 aria-label 을 추가하면 스크린 리더기 사용자가 더 쉽게 이해할 수 있습니다.

결론 : 작은 습관이 큰 차이를 만든다!

웹퍼블리싱을 더 효율적으로 하는 방법은 어렵지 않습니다.

CSS 변수를 활용해 스타일을 체계적으로 관리하고 모듈화된 네이밍 규칙을 적용하며 이미지 최적화와 시멘틱 마크업을 신경쓰는 것만으로도 퍼포먼스와 유지보수성이 크게 향상됩니다.

타임리프(Thymeleaf) 마스터하기: HTML과 Java의 완벽한 조화

얌얌커비 — Fri, 7 Feb 2025 23:13:05 +0900

1. Thymeleaf란?

Thymeleaf(타임리프)는 Java 기반의 템플릿 엔진으로, HTML을 동적으로 렌더링하는 데 사용됩니다.

Spring Boot에서 가장 많이 사용되는 템플릿 엔진 중 하나로, JSP를 대체할 수 있는 강력한 기능을 제공합니다.

주요 특징

HTML 친화적 : HTML 파일을 그대로 유지하면서 서버에서 동적으로 렌더링할 수 있음
서버-클라이언트 양방향 지원 : 정적 HTML로도 동작하며, 서버에서 데이터 바인딩 가능
Spring과의 강력한 통합 : Spring MVC와 쉽게 연동할 수 있으며, Model 데이터를 HTML에 매핑하기 용이함
템플릿 재사용 가능 : th:replace 및 th:fragment 등을 이용해 HTML 요소를 재사용할 수 있음

2. Thymeleaf 기본 문법

텍스트 출력

<p th:text="${message}">기본 텍스트</p>

message 변수의 값을 태그 안에 출력합니다.

속성 변경

<a th:href="@{/home}">홈으로 이동</a>

조건문

<p th:if="${user != null}">사용자 정보: <span th:text="${user.name}"></span></p>

반복문

<ul>
    <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

3. Spring Boot 프로젝트에서 Thymeleaf 적용

Spring Boot 프로젝트 설정

1. spring-boot-starter-thymeleaf 의존성 추가

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. Controller에서 데이터 전달

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "index";
    }
}

3. index.html 템플릿 생성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${message}">기본 메시지</h1>
</body>
</html>

4. 고급 기능 활용

Fragment (템플릿 재사용)

<!-- header.html -->
<header th:fragment="header">
    <h1>공통 헤더</h1>
</header>

<!-- index.html -->
<div th:replace="header :: header"></div>

Spring Security와 Thymeleaf 연동

<div sec:authorize="isAuthenticated()">
    <p>로그인 사용자: <span sec:authentication="name"></span></p>
</div>

국제화(i18n) 지원

1. messages.properties 파일 생성

welcome.message=환영합니다!

2. 템플릿에서 메시지 출력

<p th:text="#{welcome.message}"></p>

5. 실무에서의 Thymeleaf 활용 팁

템플릿 분할 : th:fragment를 적극 활용해 템플릿 모듈화하기
성능 최적화 : HTML 구조를 단순화하고, 불필요한 반복문 줄이기
AJAX와 조합: Thymeleaf는 정적인 HTML을 관리하고, 동적인 요소는 AJAX를 활용하면 더욱 효과적임

이제 타임리프를 활용하여 효율적이고 유지보수하기 쉬운 템플릿을 만들어보세요!

공통 모듈(Common Module), 왜 중요할까?

얌얌커비 — Thu, 6 Feb 2025 21:43:55 +0900

왜 같은 코드가 여기저기?

공통 모듈의 필요성

개발을 하다보면 같은 기능을 여러 곳에 반복해서 사용하는 경우가 많습니다.

로그인 검증 : 모든 서비스에서 로그인 검증이 필요함
날짜 포맷 변환 : 여러 곳에서 동일한 포맷이 필요함
API 호출 : 공통된 방식으로 API를 호출해야함

이럴 때 코드를 중복해서 작성하면 유지보수가 어렵고 버그가 발생할 확률도 높아집니다. 이런 경우에 공통 모듈이 필요합니다.

공통 모듈이란?

공통 모듈은 여러 곳에서 재사용할 수 있도록 설계된 코드 묶음입니다. 함수, 클래스, 라이브러리 형태로 제공되며 프로젝트의 재사용성을 높이고 유지보수를 편리하게 만듭니다.

공통모듈을 만들 때 고려해야할 점

재사용 가능성 : 특정 기능에 국한되지 않고 다양한 곳에서 활용할 수 있도록 범용성을 고려해야함
유지보수 용이성 : 모듈이 수정될 경우, 다른 코드에 영향을 최소해야함
확장성 : 향후 기능 추가가 용이하도록 설계해야함
의존성 최소화 : 특정 라이브러리나 환경에 의존적이지 않도록 설계하는 것이 중요함

[예제] 공통 유틸리티 모듈 만들기

다음은 JavaScript로 만든 날짜 포맷 변환 공통 모듈 예제입니다.

// utils/dateFormatter.js
export function formatDate(date, format = 'YYYY-MM-DD') {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    
    return format.replace('YYYY', year).replace('MM', month).replace('DD', day);
}

이제 이 모듈을 여러 곳에서 재사용할 수 있습니다.

import { formatDate } from './utils/dateFormatter';

const today = formatDate(new Date());
console.log(today); // 2025-02-06 (예시)

공통 모듈을 관리하는 방법

1. 디렉터리 구조 정리

공통 모듈을 프로젝트에서 효과적으로 관리하려면 디렉터리 구조를 잘 정리해야합니다.

2. 버전 관리 및 문서화

Git을 활용한 버전 관리 : 공통 모듈을 업데이트할 때 각 버전마다 태깅하여 기록을 남김
README 작성 : 각 모듈이 어떤 기능을 하는지 간단한 예제와 함께 설명을 남김
TypeScript 사용 : 타입을 명확하게 정의하여 안정성을 높임

3. 패키지화 후 배포

공통 모듈이 여러 프로젝트에서 사용된다면 NPM 패키지로 배포하는 것 도 좋은 방법!

npm init
npm publish

공통 모듈을 잘 활용한다면?

코드 중복 감소 → 유지보수가 쉬워짐

일관된 코드 스타일 → 가독성이 좋아짐

버그 수정 용이 → 한 번 수정으로 전체 적용 가능

생산성 향상 → 개발 속도가 빨라짐

공통 모듈을 잘 설계하면 좋은 개발 습관을 기를 수 있고 팀 전체의 효율성을 높일 수 있습니다.

UX/UI 디자인 트렌드 2025 : 놓치면 안될 뉴모피즘, 글래스모피즘 그리고 다크모드!

얌얌커비 — Thu, 6 Feb 2025 00:10:31 +0900

최근 UX/UI 디자인 트렌드는 단순한 미적 요소를 넘어서 사용자 경험을 극대화하는 방향으로 발전하고 있습니다. 그 중에서도 뉴모피즘(Neumorphism), 글래스모피즘(Glassmorphism), 그리고 다크모드(Dark Mode) 지원 강화는 2025년에도 중요한 디자인 요소로 자리 잡고 있습니다. 이번 글에서는 이 세가지 트렌드를 깊이 있게 살펴보고 실제 디자인에 적용하는 방법과 응용 사례를 소개하겠습니다.

1. 뉴모피즘(Neumorphism): 부드러운 입체감을 활용한 디자인

뉴모피즘이란?

뉴모피즘은 ‘뉴(New) + 스큐어모피즘(Skeuomorphism)’의 합성어로,

기존의 사실적인 디자인(Skeuomorphism)과 미니멀리즘(Flat Design)의 중간 형태를 띠는 스타일입니다.

뉴모피즘 디자인은 부드러운 그림자와 은은한 입체감을 활용하여 인터페이스 요소들이 마치 배경에서 자연스럽게 떠오르는 듯한 효과를 주어 심플하면서도 직관적인 디자인을 구현할 수 있습니다.

뉴모피즘 디자인의 특징

부드러운 그림자 효과 : 요소가 배경과 자연스럽게 어우러짐
입체적이고 미니멀한 UI : 둥글고 따뜻한 느낌을 줌
낮은 대비(low contrast) : 사용성을 고려한 적절한 색상 배합 필요

뉴모피즘 적용 시 고려할 점

명암 대비가 너무 약하면 가독성이 떨어질 수 있음
다크모드와의 조합이 어려울 수 있음
사용성이 높은 버튼 및 입력 필드에서 혼동을 줄 가능성이 있음

️ 뉴모피즘 UI 예제 및 쉽게 적용하는 팁

Neumorphism.io

Neumorphism/Soft UI CSS shadow generator

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

neumorphism.io

위의 사이트를 이용하면 쉽게 적용해볼 수 있습니다!

2. 글래스모피즘(Glassmorphism): 유리 같은 투명한 UI 디자인

글래스모피즘이란?

글래스모피즘은 마치 반투명한 유리 패널을 겹쳐 놓은 듯한 효과를 주는 UI 디자인 스타일입니다.

이 스타일은 2020년대 초반부터 유행했으며, Apple의 macOS 및 Windows UI에서도 자주 사용되었습니다.

글래스모피즘 디자인의 특징

반투명한 블러 효과 : 유리 느낌을 강조
빛 반사와 그림자 효과 : 입체감을 더해 생동감 있는 디자인 구현
컬러 그라데이션 활용 : 투명한 요소들이 자연스럽게 어우러짐

글래스모피즘 적용 시 고려할 점

지나치게 많은 블러 효과는 성능 저하를 유발할 수 있음
가독성을 높이기 위해 배경과 텍스트의 명확한 대비 필요
UI 요소들이 겹쳐 보일 가능성이 있어 사용성 테스트 필수

️ 글래스 모피즘 간편하게 구현하는 팁!

css.glass

Glassmorphism CSS Effect Generator - Glass CSS

Copy and paste this Glassmorphism CSS snippet into your frontend project for an amazing CSS glass effect.

css.glass

위의 사이트를 이용하면 쉽게 적용해볼 수 있습니다!

3. 다크모드(Dark Mode) 지원 강화

다크모드란?

다크모드는 기존의 밝은 배경 대신 어두운 배경을 활용하여 사용자 경험을 향상시키는 디자인 방식입니다.

최근 많은 웹사이트와 앱에서 다크모드를 기본적으로 지원하고 있으며, 이는 사용자 피로도를 줄이고 배터리 효율을 높이는 데 기여합니다.

다크모드 디자인의 특징

눈의 피로 감소 : 어두운 환경에서의 가독성이 높아짐
배터리 절약 효과 : OLED 및 AMOLED 화면에서 전력 소모 감소
미니멀하고 세련된 느낌 : 현대적인 UI 트렌드와 잘 어울림

다크모드 적용 시 고려할 점

대비가 너무 강하면 가독성이 떨어질 수 있음
텍스트와 배경의 명확한 컬러 조합 필요
다크모드와 라이트모드를 쉽게 전환할 수 있도록 UI 설계

디자인 트렌드를 현명하게 활용하는 방법

2025년 UX/UI 디자인의 핵심은 '사용자 경험을 극대화하는 비주얼 스타일'입니다.

뉴모피즘은 부드러운 입체감과 미니멀리즘을 결합한 UI를 제공합니다.
글래스모피즘은 반투명하고 미래지향적인 유리효과를 적용할 수 있습니다.
다크모드는 시각적 편안함과 에너지 효율성을 극대화하는 디자인 요소로 자리잡고 있습니다.

소박한 한마디

글래스모피즘은 2023년에도 핫하게 떠올라 Nike에서도 많이 사용했던 기억이 납니다. (그에 맞춰 저도 활용해보았기에)

이러한 UX/UI 트렌드에 대해 빠르게 알고 싶다면 Dribbble, Behance, Google Material Design Guide, Pinterest 등에 접속해 다양한 사례를 살펴볼 수 있습니다.

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

Gaming landing, page web UI design

dribbble.com

https://www.behance.net/

Search Projects :: Photos, videos, logos, illustrations and branding :: Behance

www.behance.net

해킹을 탐지하는 법! 침입 탐지 및 모니터링 가이드

얌얌커비 — Tue, 4 Feb 2025 21:21:59 +0900

1. 침임 탐지란?

침입 탐지(IDS, Intrusion Detection System)는 네트워크 또는 시스템에서 악의적인 활동을 감지하고 경고하는 보안 기술입니다. 이를 통해 해킹 시도를 조기에 발견하고 대응할 수 있습니다.

침입 탐지 시스템 유형

유형	설명
네트워크 기반 IDS (NIDS)	네트워크 트래픽을 감시하여 공격을 탐지함
호스트 기반 IDS (HIDS)	운영체제 및 애플리케이션 로그를 감시

2. IDS vs IPS 차이점

많이 혼동하는 개념이 IDS와 IPS(침입 방지 시스템)입니다.

IDS는 감시 카메라처럼 감지 후 경고만 하지만, IDS는 도둑이 문을 열자마자 자동으로 잠그는 시스템과 같습니다.

IDS (Intrusion Detection System)

단순 탐지 및 경고

IPS (Intrusion Prevention System)

탐지 후 차단까지 수행

3. IDS의 주요 탐지 방식

기업 환경에서는 시그니처 기반과 이상 탐지를 조합하여 활용하는 것이 효과적입니다.

시그니처 기반 탐지
- 알려진 공격 패턴(시그니처)을 비교하여 탐지
- 빠르고 정확하지만 새로운 공격에 취약함
- 예시도구 : Snort, Suricata
이상 탐지
- 정상적인 트래픽과 비교하여 이상 패턴 감지
- 신종 공격 탐지 가능하지만 오탐 가능성 존재함
- 예시도구 : Zeek(Bro), OSSEC
오용 탐지 기법
- 시그니처 기반(Signature Base) : 알려진 공격 패턴을 데이터베이스와 비교하여 탐지
- 지식 기반(Knowledge Base) : 공격 지식을 기반으로 하는 규칙을 적용하여 탐지
이상 탐지 기법
- 행동 기반(Behavior Detection) : 정상적인 행동 패턴과 비교하여 이상 여부 판단
- 통계 기반(Statistical Detection) : 통계적으로 정상과 비정상을 분석하여 탐지

4. IDS 실전 실습 : Snort 설정하기

IDS를 운영할 때는 너무 많은 경고가 발생하지 않도록 적절한 룰 튜닝이 필수입니다.

sudo apt update && sudo apt install snort -y
snort -A console -i eth0 -c /etc/snort/snort.conf -l /var/log/snort/

위 명령어를 실행하면 Snort가 네트워크 인터페이스 eth0 의 트래픽을 감시하며 로그를 남깁니다.

5. IDS의 효과적인 설치 위치

네트워크 경계 : 외부와 내부 네트워크 사이의 트래픽 감시
서버 앞단 : 중요한 서버로 향하는 트래픽을 감시
엔드포인트 장치 : 개별 호스트의 이상 징후 탐지

6. IDS 로그 분석 및 대응 전략

IDS 로그 예제

[**] [1:1000001:0] SQL Injection Attempt Detected [**]
[Priority: 1] {TCP} 192.168.1.100:5000 -> 10.0.0.5:80

공격 유형 : SQL Injection

공격자 IP : 192.168.1.100

타겟 서버 : 10.0.0.5

대응 방법

해당 IP를 방화벽에서 차단
웹 애플리케이션 방화볍(WAF) 설정 강화
해당 요청과 관련된 다른 로그 분석

7. 클리핑 레벨 (Clipping Level)

클리핑 레벨은 네트워크 또는 시스템에서 너무 많은 이벤트가 발생하는 것을 방지하기 위해 설정하는 임계값입니다. 경미한 이벤트를 무시하고 중요한 이벤트만 탐지하여 보안관리의 효율성을 높일 수 있습니다.

클리핑 레벨을 적절히 설정하면 불필요한 경고를 줄이고 중요한 이벤트에 집중할 수 있습니다.

8. 보안 감사 (Audit Trailing)

보안 감사는 시스템 및 네트워크의 활동을 기록하고 분석하여 침입 시도를 조사하는 과정입니다. 이를 통해 보안 사고 발생 시 증거를 확보하고 추후 대응 전략을 수립할 수 있습니다.

보안 감사 로그는 법적 증거로 활용될 수도 있으므로 안전하게 저장하고 관리하는 것이 중요합니다.

9. 침입 차단 시스템 (IPS, Intrusion Prevention System)

IPS는 IDS의 탐지 기능을 넘어서 실시간으로 공격을 차단하는 역할을 수행하는 보안 시스템입니다. 공격을 탐지하면 자동으로 방화벽 룰을 조정하거나 악성 트래픽을 차단하여 네트워크를 보호합니다.

IPS는 보안 정책과 연계하여 설정해야 하며 오탐이 발생하지 않도록 신중한 튜닝이 필요합니다.

10. 허니팟 (Honeypot)

허니팟은 해커를 유인하여 공격 패턴을 분석하는 가짜 시스템입니다. 이를 통해 실제 시스템을 보호하고 해커의 전략을 연구하여 보안 정책을 개선할 수 있습니다.

허니팟을 운영할 때에는 실제 네트워크와 완전히 분리하여 설정해야 합니다. 그렇지 않으면 해커가 허니팟을 이용해 내부 시스템을 공격할 수도 있습니다.

11. 통합 보안 관리 시스템 (Enterprise Security Management, ESM)

ESM은 IDS, IPS, 방화벽, SIEM 등 다양한 보안 시스템을 통합하여 중앙에서 관리하는 솔루션입니다. 모든 보안 이벤트를 한 곳에서 모니터링하고 대응할 수 있습니다.

기업 환경에서는 ESM을 도입하여 IDS, IPS, 방화벽을 통합 관리하면 보안 운영의 효율성을 극대화할 수 있습니다.

IDS는 네트워크와 시스템을 보호하는 핵심 기술이며 효과적인 탐지를 위해 다양한 탐지 기법과 도구를 조합하여 활용하는 것이 중요합니다. 실전에서는 Snort, Suricata, Zeek 등의 오픈소스 도구를 적극적으로 활용하며 로그 분석을 병행해야 합니다.

구독자님의 회사나 개인 프로젝트에서는 어떤 IDS를 사용하고 계신가요? 댓글로 의견을 남겨주세요!

모듈화와 응집도/결합도 완벽 정리 (+ 코드 예제)

얌얌커비 — Fri, 31 Jan 2025 19:30:45 +0900

소프트웨어 개발에서 좋은 설계를 만드는 핵심 요소 중 하나는 '모듈화(Modularity)' 입니다.

모듈화가 잘된 소프트웨어는 유지보수성이 뛰어나고 재사용성이 높으며 협업에도 유리합니다!

이 글에서는 모듈화의 개념, 응집도(Cohesion)와 결합도(Coupling)의 관계, 그리고 좋은 설계를 위한 원칙과 코드 예제까지 자세히 설명해드리려고 합니다.

1. 모듈화란?

✅ 모듈화(Modularity)의 정의

모듈화란 프로그램을 독립적인 여러 개의 모듈로 나누어 개발하는 기법입니다.

하나의 모듈은 특정한 기능을 수행하며, 다른 모듈과 최소한의 상호작용만을 갖도록 설계됩니다.

✅ 모듈화를 적용하면 좋은 점

유지보수성 향상 : 특정 모듈만 수정하면 되기에 변경이 용이함
재사용성 증가 : 다른 프로젝트에서도 재사용이 가능함
개발 생산성 향상 : 여러 개발자가 동시에 작업이 가능함
디버깅 용이 : 오류 발생 시 특정 모듈만 점검하면 됨

2. 응집도(Cohesion)와 결합도(Coupling)

✅ 응집도(Cohesion)란?

응집도는 모듈 내부 구성 요소들이 얼마나 밀접하게 연관되어 있는지를 나타내는 지표입니다.

높은 응집도 = 모듈 내부의 기능이 하나의 목적을 위해 강하게 결합

✅ 결합도(Coupling)란?

결합도는 다른 모듈과의 의존성이 얼마나 강한지를 나타내는 지표입니다.

낮은 결합도 = 모듈이 독립적으로 동작할 수 있음

✅ 좋은 소프트웨어 설계를 위한 원칙

응집도는 높이고 결합도는 낮춘다.
각 모듈이 독립적으로 동작하도록 설계해야 유지보수가 용이함
모듈 간 인터페이스를 최소화하여 변경 영향을 줄임

응집도 높은 코드 / 응집도 낮은 코드

3. 코드 예제로 이해하는 응집도와 결합도

나쁜 예시: 낮은 응집도, 높은 결합도

class OrderProcessor:
    def __init__(self):
        self.logger = Logger()
    
    def process_order(self, order):
        self.logger.log("Processing order...")
        # 주문 처리 로직
        print("Order processed: ", order)

문제점

OrderProcessor 클래스가 Logger 클래스에 직접 의존함 (높은 결합도)
주문 처리와 로깅 기능이 하나의 클래스에 포함됨 (낮은 응집도)

✅ 개선 예시: 높은 응집도, 낮은 결합도

class Logger:
    def log(self, message):
        print(f"LOG: {message}")

class OrderProcessor:
    def __init__(self, logger):
        self.logger = logger  # 의존성 주입 (Dependency Injection)
    
    def process_order(self, order):
        self.logger.log("Processing order...")
        print("Order processed: ", order)

# 사용 예시
logger = Logger()
order_processor = OrderProcessor(logger)
order_processor.process_order("#1234")

개선점

Logger 모듈을 외부에서 주입하여 결합도 감소
OrderProcessor는 주문 처리에 집중하여 응집도 증가

4. 모듈화를 잘하는 팁

✅ SOLID 원칙 적용

SRP(단일 책임 원칙) : 하나의 클래스는 하나의 책임만 가져야 한다.
OCP(개방 폐쇄 원칙) : 기존 코드를 수정하지 않고 기능을 확장할 수 있어야 한다.
DIP(의존 역전 원칙) : 상위 모듈이 하위 모듈에 직접 의존하지 않도록 인터페이스를 활용한다.

✅ 좋은 모듈 구조 설계

기능별로 모듈을 분리 (ex. UserModule, OrderModule, PaymentModule 등)
API 설계 시 인터페이스를 활용하여 결합도를 낮춘다.
공통 모듈은 별도 패키지로 관리하여 재사용성을 높인다.

결론. 좋은 모듈화가 좋은 코드로 이어진다!

모듈화를 잘하면 유지보수와 확장이 쉬운 소프트웨어를 만들 수 있습니다.

✅ 요약

응집도는 높이고 결합도는 낮춘다.
SOLID 원칙을 적용하여 모듈 설계를 개선
의존성 주입(DI) 등을 활용하여 모듈 간 결합도 최소화

모듈화가 잘된 소프트웨어는 협업과 유지보수가 쉬워지고 코드 품질이 크게 향상됩니다.

[Spring] Spring에서 JDBC와 JPA: 차이점과 선택 기준 알아보기

얌얌커비 — Wed, 22 Jan 2025 20:14:13 +0900

데이터베이스와의 상호작용, 제대로 이해하고 선택하자!

JDBC와 JPA는 각각 다른 방식으로 데이터베이스와 상호작용합니다.
Spring 애플리케이션에서 데이터 접근 계층을 설계할 때, 이 둘 중 무엇을 선택해야 할지 고민하는 분들을 위해 준비했습니다.

이 글에서는 JDBC와 JPA의 주요 차이점, 장단점, 그리고 적절한 선택 기준을 살펴봅니다.

"더 빠른 성능을 원하시나요?
아니면 생산성이 더 중요한가요?"

JDBC와 JPA의 정의 및 역할

JDBC (Java Database Connectivity)
- 정의: Java 표준 API로, 데이터베이스와의 직접적인 상호작용을 담당
- 역할: SQL을 직접 작성하고 실행하며, 결과를 처리하는 저수준 API
- 특징:
  - SQL에 대한 완전한 제어 가능
  - 코드량이 많고 반복 작업이 많음
  - Spring JDBC Template 같은 도구로 생산성 보완 가능

JPA (Java Persistence API)
- 정의: ORM(Object Relational Mapping) 표준 스펙으로, 데이터베이스와 객체 지향적으로 상호작용
- 역할: 데이터를 객체(Entity)로 매핑하여 SQL 작성을 줄이고 생산성을 높임
- 특징:
  - 데이터베이스 독립적인 코드 작성 가능
  - Hibernate가 대표적인 구현체

JDBC와 JPA의 주요 차이점

이 섹션에서는 두 기술의 차이를 구체적으로 비교합니다.

구분	JDBC	JPA
SQL 작성방식	직접 작성	SQL 자동 생성 또는 JPQL 사용
복잡도	높음 (수작업 필요)	낮음 (자동화 수준 높음)
성능 최적화	개발자에게 전적으로 의존함	지연로딩 (Lazy Loading), 캐싱 등 자동화 기능 제공
데이터베이스 독립성	낮음 (DB 변경 시 SQL 수정 필요)	높음 (Hibernate가 DB 변경 시도 지원)
학습 곡선	상대적으로 짧음	상대적으로 가파름

JDBC의 장단점

장점:
- 직접적인 SQL 제어로 복잡한 쿼리를 효율적으로 실행 가능
- 모든 DBMS에서 사용할 수 있는 보편적인 방식
단점:
- 코드의 양이 많아 유지보수가 어려움
- 반복적인 작업이 많아 생산성이 낮음

JPA의 장단점

장점:
- 객체 지향적인 데이터베이스 접근 방식 제공
- SQL 작성 감소로 생산성 향상
- 캐싱 및 지연 로딩 등 고급 기능 제공
단점:
- 학습 곡선이 가파름
- 성능 최적화가 어렵거나, 잘못 사용할 경우 오히려 성능 저하 가능

어떤 상황에서 어떤 기술을 선택할 것인가?

JDBC를 선택해야 하는 경우:
- 프로젝트가 단순하며, SQL 쿼리가 이미 작성된 경우
- 데이터베이스 제어를 세부적으로 직접 하고 싶은 경우
- 데이터 모델이 단순하고, 복잡한 매핑이 필요 없는 경우
JPA를 선택해야 하는 경우:
- 객체 지향적인 설계를 선호하며, 생산성을 중시하는 경우
- 복잡한 데이터 모델과 매핑이 필요한 경우
- 데이터베이스 변경 가능성이 높거나, 여러 DBMS를 지원해야 하는 경우

짧은 개발 기간에 높은 생산성이 중요하다면 JPA를,
이미 성능이 중요한 레거시 시스템이라면 JDBC를 추천합니다.

마무리 및 결론

JDBC와 JPA는 각각 고유의 강점과 단점을 가진 도구입니다.
프로젝트 요구 사항과 팀의 역량에 따라 적합한 기술을 선택하는 것이 중요합니다.

JDBC 코드 예제

String sql = "SELECT * FROM users WHERE id = ?";
try (Connection connection = dataSource.getConnection();
     PreparedStatement ps = connection.prepareStatement(sql)) {
    ps.setInt(1, userId);
    try (ResultSet rs = ps.executeQuery()) {
        if (rs.next()) {
            System.out.println(rs.getString("name"));
        }
    }
}

JPA 코드 예제

User user = entityManager.find(User.class, userId);
System.out.println(user.getName());

추가로 JPA 학습을 원하신다면
Hibernate의 공식 문서를 참고하거나 Spring Data JPA를 활용해 보세요!

[ KPT 회고 ] 개발의 민족 / 딜리버리 서비스

얌얌커비 — Mon, 13 Jan 2025 18:27:24 +0900

개발의 민족 프로젝트 발표 PDF 일부

Keep : 만족하며 지속하고자 하는 점

Pull request 시 2인 이상 코드리뷰 후, 본인 외 Merge
도메인 별 브랜치 작업 : main, develop, feature#1, 2, 3 ... : 각 기능별 정리
프로젝트 시작 전, 컨벤션 규칙 정리
code with me 와 같은 페어프로그래밍

Problem : 불편하기에 개선이 필요하다고 생각되는 점

브랜치 전략
- 브랜치 작업 관련해서 미리 대화를 나눴지만, 사실 현재 작업한 우리의 브랜치를 살펴보면 각자 개인의 스타일이 담겨있다. 예를 들어 폴더 구조 안에 브랜치를 생성하거나, 폴더 구조 없이 브랜치를 생성하는 등 개인의 차이가 있었다.

API 명세와 실제 작업의 차이
- 시간적 여유가 없는 상황에서 이 부분까지 수정하기에 번거롭지 않을까 싶어서 살짝 넘기고 지나간 부분이 있다. '수정' 기능의 API를 만들 때 API 명세에는 PATCH로 작업했는데 실제 작업물에는 PUT으로 작업되어있는 점을 확인할 수 있다.

API 명세 예시

PUT으로 설정된 예시 코드

Try : Problem의 해결책 또는 실행가능한 점

브랜치 전략 재수립
- 문제가 되는 부분은 아니지만, 통일성이 부족해보여서 폴더구조에 넣거나 폴더구조를 이용하지 않는 등에 대한 부분을 미리 확실하게 규칙을 정해두고 작업을 시작하는 것이 좋다고 생각되었다.
API 명세 리마인드
- API 명세를 코드에 맞춰 변경하기보단, API 명세에 맞춰 코드를 작성하는 것을 연습하는 편이 실무에 도움이 될 것이라는 생각이 들었다. 기획자가 만든 요구사항을 변경하는 일은 쉽지 않을 것이라 생각되었기에, 미리 대화를 나눠 API 명세를 수정하고나서 개발을 진행하거나 요구사항대로 진행하는 편이 좋을 것 같다고 생각되었다.

개발의 민족 딜리버리 서비스 GitHub 바로가기

↓↓↓↓↓↓

GitHub - delivery-6/delivery-app

Contribute to delivery-6/delivery-app development by creating an account on GitHub.

github.com

개발자가 더 큰 성장을 이루는 방법 (Feat. 교육자 관점)과 나의 성장 목표와 다짐

얌얌커비 — Sun, 29 Dec 2024 00:16:51 +0900

다양하고 많은 신입·예비 개발자분들과 '우아한형제들(배달의 민족)'의 서준수 연사자님의 세션을 공유하고 싶어서 적어보게 되었습니다.

(세션 내용 중에 개발자들은 공유하는 것을 좋아한다는 내용도 있었는데 듣고 오! 하면서 좋아했답니다)

메타인지를 통한 성장 마인드셋 갖추기!

메타인지란 생각에 대한 생각으로 '학습자가 자신의 학습 방법이 효과적이지 않다는 것을 인식하는 것' 이라고 합니다.

효과적이지 않은 학습방법을 개선하려면 '성장 마인드셋'이 필요합니다. (성장 마인드셋의 반대는 고정 마인드셋)

서준수 연사자님은 주변에 존재하는 재능있는 사람들을 보고 '나는 그런 부류가 아니다' 생각되어

나의 모자람을 늘 인지했기에 학습에 대한 필요성을 느끼게 했다고 합니다. (메타인지와 성장마인드셋)

주변에 있는 좋은 동료에게 배우는 것도 좋지만, 학습할 수 있는 분위기의 회사인지도 중요하며 그런 분위기가 아닐 경우,

내게 주어진 환경을 바꿔 외부의 스터디나 커뮤니티를 알아보는 것을 권장했습니다.

SI업체는 개발자의 무덤이다?

요즘 몇몇 분들이 SI업체는 개발자의 무덤이라 더이상 성장하지 못한다고 말합니다.

하지만, 다루는 기술의 종류가 다를 뿐, 개발이 아닌 것이 아니기 때문에 폄하되어서는 안됩니다.

속히 말하는 네·카·라·쿠·배·당·토 만이 교육을 잘 받을 수 있는 곳인 것이 아닙니다.

업무 자체에서 배울 수 있는 것에 집중해야 합니다.

또한, 물경력 탓만 하고 바뀌려고 해서는 바뀌는 것이 없을 것이며 성장하기 어려운 환경이라 느끼면 별도의 노력을 해야합니다.

환경 탓만 하는 것은 본인이 열심히 하지 않을 핑계일 뿐이고 뭐라도 할 수 있는 것은 해보려고 해야합니다.

연사자님의 경우, 나랑 관련있는 언어니까 한 번 해볼까? 싶어서 사용해본 후, 블로그에 글을 남겼는데 출판사에서 연락이 왔다고 합니다.

내적 동기 부여 찾기

공부한 것을 그냥 블로그에 적는 것은 재미가 없을 수 있습니다. 누군가 봐준다면 재밌게 적어서 올릴 수 있을 것 같아서 아무도 안보더라도 개발자 커뮤니티에 올려보기 시작했습니다. 내용이 전문적이지 못하더라도 용기를 내서 올려보았고, 역시나 글을 읽어주지 않았습니다. 하지만, 공유를 한다는게 '헬퍼스 하이' 현상으로 통해 기분이 좋아져 계속 하게 되었습니다.

헬퍼스 하이 현상이란 : 사람들은 보통 타인에게 도움을 주거나 도움을 주었다고 생각할 때 기분이 좋아진다고 합니다. 그러한 현상을 말함

과거의 나를 돕는다는 생각으로 시작하게 되었는데

검색, 책을 통해 얻는 정보는 모두 누군가의 발자취
후발대에게 조금 더 좋은 길로 안내하고자 하는 마음
그러한 행동은 모두 내적동기에 의한 것일 가능성이 높음
내가 잘하는 사람이 아니기 때문에 나와 같은 고통을 겪지 않길 바라는 마음
결국 나에게도 복습이 되며 공부가 되기에 스스로에게도 도움이 되는 선순환

개발자들은 공유를 참 좋아한다고 생각하는데

타인을 경쟁자가 아닌 함께 성장하는 동료로 보는 것 (경쟁자라고 생각하면 성장 마인드셋이 갖춰진 것이 아니다)
개발자들은 공유 문화에 아주 익숙하다 (오픈 소스와 각종 개발자 모임, 행사를 보면 알 수 있다)

기술적인 부분에 포커스를 맞춘 성장보다 이렇게 하는 성장이 더 좋다!

커리큘럼 설계

본인이 학습하던 때를 생각해보자
학습 목록 작성
모르는 영역이기 때문에 커리큘럼을 만들기가 쉽지 않음
잘짜인 커리큘럼의 도움을 받음 (책이나 강의 등)
커리큘럼을 직접 만들어보기
본인의 강점과 약점 파악 가능

누군가를 위한 커리큘럼 설계

본인이 학습할 때보다 다른 점은 책임감이 부여됨 (그들의 시간을 뺏는 느낌이 들어서 더욱 알차게 만들게 됨)
기술 트렌드 파악 (각각 현업의 개발자에게 물어보며 조사하게 됨)
효율적이고 효과적인 방법에 대해 고민하게 됨 (주어진 시간에 효과적으로 해야한다는 생각이 들게 됨)

이러한 생각 자체가 나 자신을 성장 시키기도 하고 누군가를 가르치는 것은 자신을 가르치는 최고의 방법이라고 합니다.

'교육자'의 관점으로 보면 혼자 학습할 때에는 간과하기 쉬운 부분과 교육하기 쉽지 않다고 느껴지는 포인트를 발견할 수 있습니다.

관성에서 벗어나기

논리적인 프로그래밍에 암묵지가?
경험을 통해 자신도 모르게 축적됨
초보자 입장에선 : ????????????
그렇게 되면 나도 : ???????????
의식적으로 챙겨야만 합니다.

상대방이 물어봤을 때 난 대답할 수 있는가? → 교육을 하기 위한 노력을 해라 → 결국 내가 더욱 잘 성장하게 된다.

난이도 조절

개구리 올챙이적 생각 못한다.
교육생 수준은 모두 다르다.
어느 기준에 맞출지, 필요한 난이도는? 이걸 지금 알아야할까? 이건 어디까지 알아야할까?
어디까지 설명해야할지에 대해서 고민하는 것도 굉장한 능력이다. (핵심을 찾아내는 능력)
예비 개발자를 교육할 때 '지금 이걸 알아야할까?' 라는 고민을 굉장히 많이 하게 된다.

개인 역량 강화

한 사람이 모든 것을 알 수 없다.
아는 것만 가르칠 수 없다.
새로운 기술은 계속 등장한다.

그래서 교육하는 것만으로도 역량이 강화되며 개발자가 교육을 하면 개발자의 성장이 됩니다.

내가 스터디를 열어 강사를 해보면 분명히 성장의 요인이 될 것입니다.

피드백 주고받기

교육생에게 피드백 주고 받기
누군가는 피드백을 두려워한다. (동료에게 먼저 받아보자. 동료가 두렵다면 두려워하지 않을 노력을 해보자)
혼자서는 피드백을 받을 수 없다.

피드백은 성장을 위한 훌륭한 밑거름이 되기에 반드시 필요합니다.

효과적인 학습법

도전적인 학습 범위

많은 학습자들이 실수를 실패로 받아들인다.
실수를 피하기 위해 감당할 수 있는 것만 하려고 한다.
실수를 바로 잡아주는 피드백과 병행이 필요하다.
바람직한 어려움이 중요하다. (너무 어려우면 완전한 좌절을 만들어내기 때문에 그 사람이 할 수 있는 수준이지만 어려운 정도로 시작해야한다.)
결론 : 난이도 있는 과제와 코드리뷰가 중요합니다.

지식인출

학습한 내용을 기억해내는 과정
기억하는 것보다 기억을 인출하는 과정이 중요하다.
'일단 해보기'는 인출할 지식이 없다.
지식 쌓기와 병행햐아하는 이유를 알아야한다.
반복이 중요하다.

가장 효과가 큰 인출 연습은 나중에 그 지식을 가지고 진짜 하게될 일을 반영해보는 연습입니다.

(반복하면서 기술로 쌓은 것을 다시 인출하는 것을 반복해야만 함)

실제 교육 방식

티칭보다는 코칭을
미션 기반의 야생적인 학습
토론 문화 : 집단 지성의 힘
인터뷰
쓰고 말하고
페어 프로그래밍
코드 리뷰
회고
팀 프로젝트 : 협업

셀프 교육자가 되어보자

지금까지의 내용을 자신에게 적용해보는 것을 권장합니다.

효과적으로 가르치는 방법은 효과적으로 학습하는 방법이기 때문에 관점을 바꿔서 공부를 해보는 것을 추천합니다.

지금까지는 성장하는 방법에 대해 고민했다면, 앞으로는 무엇을 위한 성장을 할 것인가에 대한 고민이 필요합니다.

나의 성장 목표와 다짐

앞으로는 무엇을 위한 성장을 할 것인가에 대하여 고민을 하다보니, 개발자의 꿈을 키우며 목표로 삼았던 몇가지가 떠올라 적어봅니다.

아버지가 한 쪽 눈을 실명하셔서 시각 장애인이신데 뇌경색이 찾아오면서 남은 한 쪽 눈 마저 안보이는 경우가 종종 생기기 시작했습니다. 아버지는 밭에서 작물을 키워 성장하는 모바일 게임과 중국 무협 영화 시청, 인터넷으로 레시피와 아이쇼핑, 글로 정리하는 것을 정말 좋아하시는데 양쪽 눈이 안보이는 날이 오면 이전의 삶과 확연히 다른 삶을 마주하며 힘들어하실 모습을 떠올리게 되었고, 한 쪽 눈으로라도 볼 수 있던 지금과 다르지 않은 평범한 날을 살아가실 수 있도록 개발하는 사람이 되고자 시작하게 되었습니다.

뇌경색이 찾아오기 전에도 남은 눈의 시야가 흐려진다는 이야기를 종종 들었는데 그 때에는 함께 점자 공부를 해보려는 생각만 있었고 다른 방법은 떠오르지 않았습니다. 하지만 html과 css, 스크린 리더기를 접하며 스크린 리더기 사용법을 함께 배우며 스크린 리더기 하나만으로도 사이트를 이전과 유사하게 사용할 수 있다는 것을 알게 되어 각 태그를 올바르게 사용하는 방법에 대해 고민하며 공부하게 되었습니다.

이후 세상에 영향력을 끼칠 수 있는 사람이 되려면, 아버지와 유사한 불편함을 느끼고 있거나 느끼게 될 불특정다수를 위한 서비스를 만들고자 합니다. 그러기 위해서는 많은 정보를 알아야하고 다양한 경험이 필요합니다. 단순히 시각장애에 국한된 서비스가 아닌 여러 방면으로 도움을 줄 수 있는 서비스를 기획하고 만들어낼 수 있는 사람이 되고자합니다. 도움이 되는 서비스를 만드려면 웹, 게임, 앱 모두 어느정도 지식을 갖춰야 프로젝트 구성을 할 수 있으리라 생각하기에 최대한 닿는데까지 노력하여 이뤄내고 싶습니다.

차별받는 경우나 사람없이 모두가 똑같진 않더라도 유사하게, 행복을 느끼고 누릴 수 있는 세상이 되도록 돕는 사람이 되고 싶습니다.

그런 사람이 되기 위한 과정이 블로그에 많이 올라갈 예정이오니 많은 관심과 응원 부탁드립니다

DevFest Songdo/Incheon 2024

얌얌커비 — Sat, 21 Dec 2024 23:37:26 +0900

GDG Devfast Incheon / Songdo 2024 다녀오다!

IT, 전자, 개발 관련 세션이나 세미나, 페스티벌, 전시 등에 대한 정보를 찾아보고 직접 다녀온 것은 이번이 2번째랍니다!

이전에는 한국전자전 KES2024에 다녀왔는데 해당 내용은 다른 블로그에 남겨놓아서 여기에도 다시 적어보도록 하겠습니다.

가는 길에 수시로 도로사정이 안좋아져서 13시 45분에 도착하게 되어 2차 세션 부터 듣게 되었습니다!

1차 세션에서는 '컨테이너 친화적인 자바 어플리케이션 만들기'였는데 GDG측에서 강연자님께 여쭤보고 장표 제공이 가능하다면 보내주신다고 하셔서 아쉬운 마음을 뒤로하고 2차 세션 중 '엄마, Dokerfile 없이 컨테이너 이미지 만들 수 있대요!' 를 듣고 3차 세션은 '개발자가 더 큰 성장을 이루는 방법 (Feat. 교육자 관점)' 을 선택했습니다. 4차 세션은 듣고 싶던 세션이 따로 있었지만, 신청하지 않은 멘토링에 해당되어 '스프링 시큐리티 로그인 7일 실무 적응기'를 선택했습니다.

프로젝트 과제를 앞두고 다녀오게된 세미나라서 부담감이 조금 느껴졌지만, 굉장히 도움되고 많은 인사이트를 받게 되어 좋은 경험이 되었다고 생각합니다.

DevFest 2024.12.21(토)

송도 컨벤시아 2층과 3층에서 진행한다는 내용만 있어서 회의장과 전시장 중에서 어디로 가야할지

조금 어려웠지만 GDG 단체카톡방에 여쭤보고 무사히 잘 도착할 수 있었습니다 !

지금 생각해보니 전시장보다는 회의장이 적합한데 왜 어려워했는지.. 많이 당황했던 것 같습니다.

개발자의 한 해 마무리는 DevFest에서!

길을 따라 들어가려던 차, 전광판 내용이 바뀌어서 후딱 찍어봤습니다

다양한 개발 경험을 가진 연사자분들의 세션들과 시니어 멘토분들의 소그룹 멘토링까지! 정말 많은 인사이트를 얻어온 것이 다시 한 번 떠오르네요!

각 회의실 마다 진행되는 일정을 다시 확인할 수 있도록 배너를 설치해주신 덕에 실수없이 들어갈 수 있었습니다!

저는 전 날 밤에 어떤 세션을 들을지 회의실 호수를 메모장에 적어놓아서 세션 끝나자마자 다음 세션이 진행될 회의실로 이동했습니다.

그렇게 움직이지 않으면 자리가 없어서 곤란한 상황이 발생하는 것을 깨닫고 바로 바로 움직이게 되었습니다

첫 세션은 Microsoft사의 유저스틴 연사자님의 '엄마! Dokerfile 없어도 컨테이너 이미지 만들 수 있대요!'.

세션을 듣다가 알게된 것은 첫 페이지 우측에 연사자님의 사진이 큼지막하게 들어간다는 것입니다.

뭔가 귀엽기도하고 잊을 수 없게하는 요소인 것 같다고 느꼈습니다 하핫

유저스틴 연사자님의 세션은 Doker를 이해했을 때 직접 활용해보고 글을 다듬어서 공유드리려고 합니다!

아직 Doker를 사용해보지 않았기에 미리 알아보자! 하는 마음으로 참여했는데 Doker를 사용해보지 않은 개발자도 충분히 이해하기 쉽게끔 이야기해주셔서 감사한 마음으로 들으며 열심히 노션에 적어내렸습니다. ‍

(꼭 찍어가야한다고 말씀주신 내용은 바로 찹찹 찍어왔습니다! 기대해주세요!)

두번째 세션은 우아한형제들(배달의 민족)의 서준수 연사자님의 '개발자가 더 큰 성장을 이루는 방법 (feat. 교육자 관점)'.

오늘 참여한 3가지 세션 중, 예비 백엔드 개발자로서 가장 인상깊고 깊은 울림을 주셨던 기억이 강하게 남습니다.

연사자님의 강의를 듣고 앞으로 배울 커리큘럼에 있는 '코틀린'은 반드시 서준수 연사자님의 강의와 책을 봐야겠다는 확신이 들었습니다.

자세한 내용은 연사자님의 강연 내용을 정리해서 내일 공유드려보려고 합니다. 정말 끝내주니까 꼭 기다려주시길 바랍니다 !

두번째 세션에서는 '이렇게 생각하면 더욱 탄탄하게 성장하겠구나', '공부방향이나 방식이 많이 틀렸었구나'를 깨달았기에 조금 부끄럽지만, 한 층 더 성장할 수 있었다고 생각합니다. 요즘 가장 많이 힘들어하는 부분이 있었는데 연사자님의 마인드셋과 방식을 적용해보면 좋겠다는 생각이 강하게 들었고 모두에게 공유하면 좋겠다는 생각이 강렬해서 세세하게 적어서 공유드려볼 예정입니다 ✍️ (오늘은 예고편이랍니다)

세번째 세션은 에어프레미아랩스의 송수혁 연사자님의 'Spring Security 로그인 7일 실무 적응기'.

원래 참여하려던 세션이 신청하는 것을 잊었던 멘토링 세션이라 2순위로 설정해놓았던 세션에 참여하게 되었습니다. Spring Boot를 배우고 있고 현재 작업 중인 프로젝트에서 회원탈퇴 API를 담당하고 있기에 관심이 있었습니다!

하지만 아직 능력치가 한참 낮은 저로선 이해하기 어려운 내용이 많아서 열심히 녹음하면서 필기했습니다. 사람들이 기록하겠다며 사진촬영을 할 때에는 저도 함께 찍어놓고 현재 공부하는 내용에서 순서가 찾아오면 다시 들어보며 이해해보려고 합니다.

이번주에 Filter에 대한 기본 개념을 배웠기에 조금 귀가 트였던 부분입니다.

Spring Security에서 Filter는 우측에 표시된 3가지만 기억해도 된다고 하셔서 후딱 찍어두었습니다.

아마 Doker보다 일찍 이해하게될 부분이 아닐까 싶어서 유심히 보며 놓치지 않고 들었지만, 조금 어려웠습니다 하하하..

내일은 오후3시에 팀원들과 함께 프로젝트 목표 항목을 모두 작업해보기로 했기에 밀린 강의를 들어야해서 마지막 세션은 Skip하고 집으로 돌아갔습니다

아쉬운 마음이 컸지만, 집까지 가는 길이 멀고도 많이 막히는 이슈를 확인하고 호다닥 달려나왔답니다..

티켓을 구매하고 DevFest에 참여하면 티셔츠와 스티커 굿즈를 주시는데 생각보다 예뻐서 놀랐습니다!

늦게 도착하면 평균적으로 많이 입는 사이즈가 없으니 꼭 참고하시는 편이 좋습니다. 저는 L를 신청했는데 M, 2XL, 3XL만 남아서 M으로 받았습니다!

(M이 오히려 편안하게 맞아서 조금 크게 나오는 것 같다는 생각이 들었습니다.)

원하는 사이즈가 없어서 죄송한 마음에 티셔츠 한 장 더 주신다고 하셨는데.. 감사히 받을 걸 그랬나 싶을 정도로 너무 편안하고 좋습니다!

2025년에도 진행했으면 좋겠는데 2024년이 마지막 DevFest라고 합니다

2025년 01월에는 서울과학기술대학교에서 진행되는 개발자 페스티벌 후기로 돌아오겠습니다!

(서준수 연사자님의 세션부터 공유해보겠습니다 하핫)

[ InteliJ ] 인텔리제이 단축키를 알아보자

얌얌커비 — Fri, 20 Dec 2024 00:22:21 +0900

인텔리제이를 사용한다면 반드시 확인해야할 단축키 목록!

개발하는 시간을 단축하며 효율을 높이고 싶다면 꼭 확인해보는 것을 권장합니다.

기초 필수 단축키 목록

	윈도우 (Windows)	맥 (MacOS)
복사하기	Ctrl + C	Cmd + C
잘라내기	Ctrl + X	Cmd + X
붙여넣기	Ctrl + V	Cmd + V
주석 토글	Ctrl + /	Cmd + /
전체 선택	Ctrl + A	Comd + A
현재 파일에서 찾기	Ctrl + F	Cmd + F
전체 파일에서 찾기	Ctrl + Shift + F	Cmd + Shift + F
현재 파일에서 바꾸기	Ctrl + R	Cmd + R
전체 파일에서 바꾸기	Ctrl + Shift + R	Cmd + Shift + R
줄 복사	Ctrl + D	Cmd + D

응용 필수 단축키 목록

	윈도우 (Windows)	맥 (MacOS)
실행	Shift + F10	^ + R
디버그 모드로 실행	Shift + F9	^ + D
리팩터링	Shift + Ctrl + Alt + T	^ + T
테스트 생성 / 이동	Shift + Ctrl + T	Cmd + Shift + T
사용하지 않는 임포트문 삭제	Ctrl + Alt + O	^ + Option + O

인텔리제이 단독 단축키 목록

	윈도우 (Windows)	맥 (MacOS)
통합 검색 (파일, 작업, 심벌, 도구 창 또는 설정을 빠르게 찾을 수 있음)	double Shift	double Shift
강조 표시된 오류 및 경고에 대한 빠른 수정이나 코드개선	Alt + Enter	Option + Enter
최근에 연 파일 리스트	Ctrl + E	Cmd + E
프로젝트 전체에서 코드 요소가 사용된 모든 위치를 표시	Alt + F7	Option + F7

내 마음대로 단축키 수정하는 법

내가 원하는 단축키로 변경하고 싶거나 단축키 자체를 추가하고 싶다면 단축키 변경 기능을 사용하면 됩니다.

설정 탭 → Keymap

메뉴에서 원하는 기능을 찾은 뒤 Add KeyBoard Shortcut을 선택해 변경하거나 추가할 수 있습니다.

검색하려는 단축키를 모르는 경우 검색 바 오른쪽에 있는 돋보기 모양 아이콘을 눌러서 찾을 수 있습니다.

[ Git ] 좋은 Commit Message 작성하는 법!

얌얌커비 — Thu, 19 Dec 2024 16:31:27 +0900

커밋 메세지를 작성할 때마다 이전에 정리해놓은 글을 참고하며 파파고를 사용했는데

생각보다 복잡스러운 글의 구조로 인해 불편해서 조금 더 빠르고 쉽게 알아볼 수 있도록 정리했습니다.

좋은 커밋 메세지를 작성해야하는 이유

팀 프로젝트의 경험이 많지 않았다면 좋은 커밋메세지 작성의 중요성에 대해 깨닫기 어려웠을 것이라고 생각됩니다.

(저 또한 그렇게 생각해왔고, 앞으로 함께할 팀원과의 좋은 소통을 위해 작성방법에 대해 공부하게 되었습니다 )

협업을 하는 과정에서 가장 중요한 부분이 소통입니다.

소통을 원활하게 하려면 한 눈에 알아볼 수있는 내용으로 정확하게 전달해야합니다.

한 눈에 알아볼 수 있는 내용으로 정확하게 전달해야한다면, 커밋 규칙(Clean Commit Message)에 대해 알아야합니다.

✏️ Clean Commit Message 커밋규칙

제목과 본문을 한 줄 띄어서 분리해 작성
제목은 50자 이내 작성 (영문 기준, 소문자로 시작)
제목 작성 후 끝에 . 마침표 특수문자 사용 금지
제목은 가급적이면 명령조로 작성
본문 72자 마다 줄바꿔 작성 (영문 기준, 가급적 72자 이내 작성)
본문은 무엇을, 왜 에 맞춰 작성 (어떻게 보다 무엇과 왜에 대한 부분이 중요함)

✔️ 커밋 컨벤션 규칙에 대해 알아보자

커밋 규칙과 함께 커밋 메시지 컨벤션(Commit Message Convention)이라는 일관된 형식의 커밋 메시지 작성을 위한 규칙이 있습니다.

여러 개발자 사이에서 통용되는 가이드라인이 있지만, 프로젝트에 따라 별도의 규칙을 만들기도 한다고 합니다. (기업마다 차이가 있는 부분)

Angular 커밋 스타일 가이드

첫번째 줄의 ' 타입() : 간단한 내용 (명령문 형태로 작성) ' 부분은 필수로 입력해야 하고

두번째 줄의 ' 상세 내용 ' 과 세번째 줄의 ' 이슈 번호 또는 브레이킹 체인지에 대한 내용 ' 부분은 필요할 때에만 입력하면 됩니다.

타입() : 간단한 내용(명령문 형태로 작성)
==== 한 줄 띄우고 ====
상세 내용
==== 한 줄 띄우고 ====
이슈 번호 또는 브레이킹 체인지에 대한 내용

타입(Type)에 입력하는 용어

타입은 변경사항의 성격을 나타낼 수 있도록 입력해야 합니다.

feat : 새로운 기능 추가
fix : 버그 수정
ci : 관련 수정에 대한 커밋 타입
docs : 문서 수정
style : 코드 스타일 변경
refactor : 테스트 추가 또는 수정
test : 테스트 추가 또는 수정
build : 빌드 관련 파일 수정에 대한 커밋 타입
chore : 빌드/배포 관련 작업 및 패키지 관리 작업 등
perf : 성능 개선
hotfix : 긴급 버그 수정
security : 보안 관련 수정
revert : 커밋 되돌리기
deps : 의존성 관련 작업
config : 설정 파일 관련 작업
merge : 브랜치 병합
init : 프로젝트 초기화
ui : 사용자 인터페이스 관련 작업
cleanup : 코드 정리
prototype : 시제품 또는 실험적 작업
analysis : 분석 및 로깅 작업 ( )
localization : 다국어/로컬화 관련 작업 ( )
logging : 로그 추가/수정 ( )

타입 옆 괄호에 입력하는 용어

타입 옆 괄호에는 변경된 기능이나 모듈의 범위를 나타내어야 합니다.

auth : 새로운 기능 추가
⚙️ config : 설정이나 시스템 관련 기능 추가
ui or art : UX/UI 개선이나 디자인 추가
utils : 도구나 유틸리티 추가
app : 모바일 관련 기능 추가
api : API 관련 작업
db : 데이터베이스 또는 데이터 추가

✔️ 깃모지 사용 전, 알아야 할 3가지

깃에 사용되는 이모지를 깃모지라고 부르는데 깃모지를 이용하면 커밋 내역을 더욱 직관적으로 확인할 수 있습니다.

하지만, 깃모지를 사용하고자 한다면 알고 있어야하는 부분이 3가지 있습니다.

일관성 유지 : 팀에서 자주 사용하는 이모지 리스트 또는 정해져있는 이모지 리스트 확인
가독성 관리 : 메시지의 가독성을 해치지 않도록 맨 앞 부분에 간결하게 사용
너무 많은 아이콘 사용은 혼란을 줄 수 있어서 상황에 맞게 1~2개까지만 사용

깃모지와 클린 커밋 규칙, 커밋 컨벤션 규칙을 활용해보자!

커밋 메시지를 작성하는 것이 아직 습관화되지 않았다면 아래 내용을 참고해보면 좋은 습관을 들일 수 있습니다.

이전에 작성한 글은 하나 하나 확인해야해서 불편함을 느끼고 경우에 따라 사용할 수 있도록 정리했습니다.

feat : 새로운 기능 추가

< 추천 깃모지 >
  - 새로운 기능의 추가를 강조할 때
✨ - 새로운 기능이나 개선된 기능 추가
  - 새로운 것을 도입할 때
  - 기능 아이디어를 구현할 때
  - 주요 기능 출시나 초기 단계 구현
 ️ - 새로운 기능을 위한 준비 작업

커밋 메시지 예시

// 사용자 프로필 편집 기능 추가
✨ feat(auth) : add user profile editing feature

fix : 버그 수정

< 추천 깃모지 >
  - 버그 수정
  - 간단한 문제 해결

커밋 메시지 예시

// API 응답 파싱 오류 수정
  fix(api) : resolve issue with API response parsing

ci : CI 관련 수정

< 추천 깃모지 >
⚙️ - CI 설정 관련 작업
  - CI 빌드 설정 업데이트

커밋 메시지 예시

// 자동화된 테스트를 위한 GitHub Actions 추가
⚙️ ci(actions) : add GitHub Actions for automated testing


// 스테이징 환경에서 CI 파이프라인 문제 수정
  ci(pipeline) : fix CI pipeline for staging environment

docs : 문서 수정 (ex. README 변경)

< 추천 깃모지 >
  - 문서 작성 및 수정
  - 문서화 작업

커밋 메시지 예시

// 설치 가이드 추가를 위해 README 수정
  docs(readme) : update README with installation instructions

style : 코드 스타일 변경 (ex. 공백, 들여쓰기 수정)

< 추천 깃모지 >
  - 코드 포맷팅, 스타일 변경
  - UI 또는 CSS 스타일링 작업

커밋 메시지 예시

// 코드 가독성을 위해 포맷 변경
  style(lint) : reformat code for better readability

refactor : 코드 리팩토링 (ex. 기능 변경 없음)

< 추천 깃모지 >
♻️ - 리팩토링 작업
  - 코드 구조 변경

커밋 메시지 예시

// 확장성을 고려한 폴더 구조 재구성
♻️ refactor(folder) : reorganize folder structure for scalability

test : 테스트 추가 또는 수정

< 추천 깃모지 >
✅ - 테스트 추가 및 수정
  - 실험적 테스트

커밋 메시지 예시

// 로그인 기능에 대한 단위 테스트 추가
✅ test(login) : add unit tests for login functionality

build : 빌드 관련 파일 수정

< 추천 깃모지 >
 ️ - 빌드 구성 변경
  - 패키지 관련 작업

커밋 메시지 예시

// 프로덕션 최적화를 위해 Webpack 설정 업데이트
 ️ build(webpack) : update webpack config for production optimization

chore : 빌드/배포 관련 또는 패키지 관리

< 추천 깃모지 >
  - 간단한 설정 작업
 ️ - 불필요한 파일 또는 코드 정리

커밋 메시지 예시

// 의존성 최신 버전으로 업데이트
  chore(deps) : update dependencies to the latest version

perf : 성능 개선

< 추천 깃모지 >
  - 성능 최적화 작업
⚡ - 빠른 로딩 또는 실행 개선

커밋 메시지 예시

// 렌더링 프로세스를 최적화하여 로드 속도 개선
⚡ perf(render) : optimize rendering process for faster load times


// 개선된 캐싱 전략으로 서버 부하 감소
  perf(cache) : reduce server load with enhanced caching strategy

hotfix : 긴급 버그 수정

< 추천 깃모지 >
  - 중요한 문제나 버그 긴급 수정

커밋 메시지 예시

// 모바일 장치에서 발생하는 앱 크래시 긴급 수정
  hotfix(ui) : fix app crash on mobile devices

security : 보안 관련 수정

< 추천 깃모지 >
  - 보안 취약점 해결
 ️ - 보안 강화 작업

커밋 메시지 예시

// 비밀번호 해싱 과정에서 발생한 취약점 수정
  security(auth) : fix vulnerability in password hashing


// 공용 API에 대한 요청 속도 제한 기능 추가
 ️ security(api) : implement rate limiting for public APIs

revert : 커밋 되돌리기

< 추천 깃모지 >
⏪ - 이전 커밋 복구

커밋 메시지 예시

// 사용자 인증 기능 추가 커밋 되돌림
⏪ revert(auth) : revert "add user authentication feature"

deps : 의존성 관련 작업

< 추천 깃모지 >
  - 의존성 추가 또는 수정
  - 라이브러리 업데이트

커밋 메시지 예시

// axios를 1.2.0 버전으로 업그레이드
  deps(axios) : upgrade axios to 1.2.0

config : 설정 파일 관련 작업

< 추천 깃모지 >
⚙️ - 설정 파일 업데이트
 ️ - 환경 구성 변경

커밋 메시지 예시

// 환경별 설정 파일 추가
⚙️ config(env) : add environment-specific configuration files

merge : 브랜치 병합

< 추천 깃모지 >
  - 브랜치 병합 작업
  - 주요 병합 이슈 해결

커밋 메시지 예시

// feature/login 브랜치를 develop 브랜치에 병합
  merge(feature) : merge feature/login into develop


// 핫픽스 병합 중 발생한 충돌 해결
  merge(hotfix) : resolve conflicts during hotfix merge

init : 프로젝트 초기화

< 추천 깃모지 >
  - 초기 커밋
 ️ - 프로젝트 초기 설정

커밋 메시지 예시

// 기본 구조로 프로젝트 초기화
  init(project) : initialize project with base structure

ui : 사용자 인터페이스 관련 작업

< 추천 깃모지 >
  - UI/UX 스타일 개선
 ️ - UI 디자인 작업

커밋 메시지 예시

// 탐색성을 향상시키기 위해 헤더 컴포넌트 디자인 변경
  ui(header) : redesign header component for better navigation

cleanup : 코드 정리

< 추천 깃모지 >
  - 불필요한 코드 제거
✂️ - 리소스 최적화

커밋 메시지 예시

// 사용되지 않는 임포트와 불필요한 코드 제거
  cleanup(code) : remove unused imports and dead code

prototype : 시제품 또는 실험적 작업

< 추천 깃모지 >
  - 실험적 기능 구현
  - 진행 중인 작업

커밋 메시지 예시

// 새로운 대시보드 기능의 프로토타입 구현
  prototype(dashboard) : create prototype for new dashboard feature