joooii

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

지난번에 미니프로젝트 핏로그의 백엔드 부분이 끝나고, 최종적으로 프론트엔드 작업을 시작하게 되었다. 💼 FE Github GitHub - FitLog-ureca/FE: FitLog FE 레포지토리입니다.FitLog FE 레포지토리입니다. Contribute to FitLog-ureca/FE development by creating an account on GitHub.github.com 📌 주제하루의 운동 목표를 투두리스트 형태로 계획하고 완료 여부를 기록하며, 운동 기록을 잔디형 시각화로 제공해 성취감을 높이는 운동 관리 웹 프로젝트 ⚙️ 프론트엔드 기술스택React `^19.2.1`Next.js `^16.0.7`TypeScript `^5`Tailwind css `^4`Redux Toolkit ..

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..

🚧 문제 상황⚙️ 발생한 환경 및 프로그램`next.js ^16.0.7` 🎯 문제 상황 정의로그인에서 ``를 사용하여 비밀번호 UI를 개발할 때, input 내부의 값이 안 보이는 오류가 발생했다. ``일 때는 값이 정상적으로 보였으나 type이 password일 때만 보이지 않았다. 🔥 발생한 문제 및 에러password 값이 표시되지 않음🧭 해결방안 및 과정💼 해결하기 위한 노력 및 시행착오1️⃣ text의 색상을 변경→ 여전히 표시되지 않았다. 2️⃣ 동일한 문제가 있는지 구글링→ 구글링을 통해 동일한 문제를 겪은 뒤 해결한 블로그를 발견하였다. 💡 근본 원인 파악본 프로젝트의 font를 나눔스퀘어로 지정했었는데, 나눔스퀘어 폰트에서 기호(*)를 지원하지 않아서 생긴 문제였다. 💫..

🚧 문제 상황⚙️ 발생한 환경 및 프로그램`Next ^15.4.4` 🎯 문제 상황 정의CERT-IS 프로젝트의 Lighthouse 성능을 개선하기 위해 리팩토링을 진행하는데, SEO 항목의 점수가 계속 90점이 나왔다.그러나 이미 우리 프로젝트에서 `layout.tsx`, `page.tsx`에 이미 메타데이터를 구현한 상태였다.개발자도구 - [Elements] 탭에서 meta 태그가 정상적으로 보였다. 그럼에도 불구하고 Lighthouse는 meta description이 없다고 판단하고 있었다. 🔥 발생한 문제 및 에러`Document does not have a meta description` 🧭 해결방안 및 과정💼 해결하기 위한 노력 및 시행착오1️⃣ `/app/layout.tsx` ,..

웹 시큐리티(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와 달리 브라우저에서 실행하려면 파일을 한 번 변환해 주어야 하는데, ..