joooii

애자일 방법론을 설명하기 앞서, 대표적인 개발 방법론 중 하나인 워터폴 방법론을 살펴보고자 한다. 워터폴(Waterfall) 방법론이란?워터폴 방법론은 소프트웨어 개발 과정을 단계별로 진행하는 전통적인 개발 방식이다.일반적으로 '요구사항 정의(설계) → 디자인 → 개발 → 테스트 → 배포' 과정이 순차적으로 진행되며, 앞 단계가 완전히 종료된 후 다음 단계를 진행한다. 그렇기에 각 단계가 명확히 구분되어 있다. 장점1️⃣ 전체 개발 흐름이 명확하기 때문에 초기 기획과 일정 관리 쉬움2️⃣ 현재 상황을 추적하고 병목을 파악하기 쉬움3️⃣ 요구사항이 명확하고 변경이 거의 없는 프로젝트에 적합 단점1️⃣ 한 단계가 완전히 종료되면 고객의 추가 요구사항이나 프로젝트의 방향성을 수정하기 어려움2️⃣ 요구사항 변경..

UML이란?UML(Unified Modeling Language)은 소프트웨어 시스템을 시각적으로 표현하기 위한 표준 모델링 언어이다.복잡한 시스템의 구조와 동작을 그림으로 표현함으로써, 개발자·기획자·디자이너 등 다양한 이해관계자가 동일한 관점에서 시스템을 이해할 수 있도록 돕는다.UML은 특정 언어나 프레임워크에 종속되지 않으며, 객체지향 분석·설계(Object-Oriented Analysis & Design)를 기반으로 한다. UML의 목적과 특징📌 UML의 목적시스템 요구사항을 명확히 표현복잡한 구조를 단순화하여 이해도 향상설계 의도를 코드 작성 전에 공유문서화 및 유지보수에 활용📌 UML의 특징표준화된 기호와 규칙 사용시각적 표현 중심정적 구조와 동적 행위를 모두 표현 가능구현 이전 단계뿐..

미니 프로젝트를 진행하면서 프로필 이미지 업로드 / 삭제 기능을 구현하게 되었다.프론트엔드에서는 이미지 파일 관리를 해보았던 경험이 있었으나, Spring Boot에서 이미지 파일을 어떻게 관리하는 것이 적절한지에 대한 정리가 필요했고, 이를 계기로 서버에서의 이미지 관리 방식과 실제 구현까지 정리해 보았다. 서버에서 이미지 파일을 관리하는 일반적인 방식1️⃣ 클라우드 스토리지 사용 (AWS S3, CloudFlare R2 등)이미지를 백엔드 또는 DB 단에서 업로드하지 않고, AWS나 CloudeFlare 등 클라우드 스토리지에 업로드하여 DB에 url을 저장하는 방식이다.이 방식이 가장 일반적인 방식이다. 👍🏻 장점1. DB에는 url만 저장하므로 부담이 적다.2. CDN을 통해 빠른 이미지 ..

XSS (Cross-Site Scripting)XSS는 공격자가 악성 스크립트(주로 JavaScript)를 웹 페이지에 삽입해 브라우저에서 실행시키는 공격이다.이를 통해 쿠키, 세션 정보 탈취, 사용자 계정 도용, DOM 변조 등의 문제가 발생한다. XSS 주요 종류1) Stored XSS (저장형)악성 스크립트가 서버(DB)에 저장주로 게시판/댓글 등에서 발생다른 사용자가 페이지 방문 시 자동 실행2) Reflected XSS (반사형)악성 스크립트가 URL 파라미터에 포함됨서버가 검증 없이 입력을 다시 출력할 때 발생3) DOM-based XSS서버 응답은 문제없지만, JS가 DOM을 안전하지 않게 조작할 때 브라우저에서 스크립트가 실행됨 XSS 방어 전략1) 출력 이스케이프(Escaping)HTML..

웹 시큐리티(Web Security)를 학습하면서 웹 보안에서 사용하는 인증 방식인 JWT에 대해 알아보고자 한다. JWT란?JWT(Json Web Token)는 인증에 필요한 정보들을 암호화시킨 JSON 포맷을 이용하여 유저를 인증하고 식별하기 위한 토큰(Token) 기반의 인증 방식이다. 이때 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별한다. JWT는 JSON 데이터를 Base64 URL-safe Encode를 통해 인코딩하여 직렬화한 것이며, 토큰 내부에는 위변조 방지를 위해 개인키를 통한 전자서명도 포함되어 있다. JWT 구조JWT는 `.`을 구분자로 나누어지는 세 가지 문자열의 조합이다.`.`을 기준으로 좌측부터 Header, Payload, Signa..

Zustand란?Zustand는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리로, 간결한 코드 패턴이 핵심이다. 이때 상태 관리(Store)란 애플리케이션의 여러 상태(state)를 중앙에서 관리하는 패턴이다.이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 데이터 변경을 감지해 자동으로 렌더링할 수 있다. 기본적인 상태 전달 방식 (Props)컴포넌트 간 공유해야 하는 데이터가 있다면 기본적으로 props를 통해 부모 → 자식 컴포넌트 간 데이터 전달이 가능하다.그러나 이러한 방식은 컴포넌트 중첩이 깊어질 수록 props를 불필요하게 전달하는 컴포넌트가 발생할 수 있으며, 이때 Props Drilling*이 발생하게 된다.* Props Drilling : pro..

TypeScript란? 타입스크립트(TypeScript)는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트 기반으로 정적 타입 문법을 추가하여 코드의 안정성과 유지보수성을 높이는 것을 목표로 하는 언어이다. 왜 JavaScript가 아닌, TypeScript를 사용할까? TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다. 이때 컴파일이란 사람이 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정이다.TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 한 번 변환해 주어야 하는데, ..

React Hooks이란?React Hooks는 v16.8에서 새로 도입되어 함수형 컴포넌트에서도 상태 관리를 가능하게하는 라이브러리이다.함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용이 가능하다. Hook 규칙1. Hook은 최상위 레벨에서만 호출해라Hook은 반복문, 조건문, 중첩 함수, try/catch/finally 블록 내부에서 호출하면 안된다. 그렇기에 React 함수의 최상위 레벨에서 호출하고, Early Return (함수에서 조건문을 만족할 때 일찍 반환하는 것) 이전에 사용해야 한다.function Counter() { // ✅ Good: 함수 컴포넌트의 최상위 레벨에서 사용 const [count, setCount] = useState(0); // ...}fu..

React란SPA(Single Page Application)을 자바스크립트 라이브러리로 주로 사용자 인터페이스(UI)를 개발하는 데 중점을 두고 있다. React 특징1. 가상돔 (Virtual DOM) 활용리액트는 렌더링이 발생될 상황이 생기면 새로운 화면에 들어갈 내용이 담긴 가상돔을 생성한다. 가상돔을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용하게 된다. 이는 실제 DOM의 가벼운 사본이라고 생각하면 된다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 아래 3가지 절차를 거치게 된다. 1) 데이터를 업데이트하면, 전체 UI를 Virtual DOM에 렌더링한다. 2) 이전 Virtual DOM에 있던 내용과 현재 ..

CX (Customer Experience) 디자인사용자 경험을 의미하는 UX (User Experience)는 많이 들어보고, CX는 조금 생소했다. 그래서 CX의 정의, UX와의 차이점을 알아보았다. CX (Customer Experience) 란?CX는 '고객 경험'으로, 최초 만남부터 시작된 전체 고객 여정에서 브랜드(기업)와의 상호작용을 토대로 축적된 브랜드에 대한 고객 인상으로 정의된다. 여기서 '고객 경험'은 경험과 관련한 고객의 느낌, 인상, 견해이다. CX와 UX 뭐가 다를까?UX는 단일 제품 또는 서비스에 초점을 맞추고, 이와 상호작용하는 사용자들이 편리한 경험을 하도록 하는 것이 핵심이다. 이렇게 보면 CX의 정의가 UX보다 조금 더 넓은 개념인 것을 알 수 있다. CX는 브랜드(기..