joooii

융합 프로젝트를 진행하면서 현직자 멘토링을 통해 폴더 구조에 대한 피드백을 받았다.FSD 아키텍처로 가는 것이 어떤 지 피드백을 주셔서 FSD 아키텍처에 대해서 알아보고자 한다. FSD 아키텍처란?FSD 아키텍처는 Feature-Sliced Design(기능 분할 설계) 의 약자로, 프론트엔드 애플리케이션 구조를 위한 아키텍처 방법론이다.프론트엔드 개발자는 대부분 모듈 간 느슨한 결합 + 높은 응집력을 제공해야 하며, 쉽게 확장할 수 있는 아키텍처를 필요로 한다.이를 위해 FSD 아키텍처를 도입하는 개발자들이 늘어나게 되었다. FSD는 총 3가지의 개념이 존재한다: Layer, Slice, Segment 레이어 (Layer)레이어는 최상위 디렉토리이자, 애플리케이션 분해의 첫 번째 단계이다.레이어의..

이번 융합프로젝트 주제인 OTT를 구현하기 위해 HLS를 찾아보았다. HLS란?HLS (HTTP Live Streaming)은 Apple에서 개발한 적응형 스트리밍 프로토콜이며, HTTP 기반이다. HLS 특징미디어 콘텐츠를 작은 조각(청크) 단위로 전송네트워크 상태에 따라 적절한 품질의 비디오를 선택할 수 있게 설계방화벽 문제 최소화적응형 비트레이트 (ABR, Adaptive Bitrate) 지원 → 원활한 재생 환경 제공 HLS 장점모든 인터넷 연결 장치가 HTTP를 지원하기 때문에 전용 서버가 필요한 스트리밍 프로토콜보다 간단하게 실행 가능재생에 지장을 주지 않고, 네트워크 상태에 따라 비디오 품질을 높이거나 낮출 수 있음 기존 스트리밍 방식과의 차이점 m3u8m3u8은 HLS가 미디어를 청크 단..

3주 간 진행한 종합 프로젝트에 대한 회고를 해보고자 한다. 이번 프로젝트 주제는 프론트엔드 반 공통적으로 '상담 요약 서비스' 였다. 💼 FE Github GitHub - Ureca3rd-FE/Trillion-FE: 종합프로젝트 1조 FE Repository입니다.종합프로젝트 1조 FE Repository입니다. Contribute to Ureca3rd-FE/Trillion-FE development by creating an account on GitHub.github.com 💼 BE Github GitHub - Ureca3rd-FE/Trillion-BE: 종합프로젝트 1조 BE Repository입니다.종합프로젝트 1조 BE Repository입니다. Contribute to Ureca3rd-F..

앞으로 매일 융합 프로젝트 들어가기 전 React와 Next 공식문서를 빠르게 톺아보려고 한다.프론트엔드 개발자라면 한 번쯤은.. 공식문서를 보는 것이 좋을 것 같아서 react 한글 공식문서를 앞으로 일주일 간 학습해보려고 한다. 1. 첫 번째 컴포넌트React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수이다.export default function Profile() { return ( )} 컴포넌트 빌드 방법Step 1) 컴포넌트 내보내기 (`export default`)Step 2) 함수 정의하기 (` function Component() { } `) - 주의사항: 항상 대문자로 시작해야 한다Step 3) 마크업 추가하기 (`return ( ... )` ) 컴..

이번에 종합 프로젝트의 주제인 '상담 요약 서비스'를 고도화하기 위해 AI를 사용하는 프로젝트를 기획하였다. 이때 STT를 도입하게 되었는데, STT와 쌍둥이인 TTS를 함께 공부해 보았다. STT (Speech To Text) 란? STT는 사람의 음성을 인식해 텍스트로 변환하는 기술이다. 상담, 회의, 인터뷰처럼 음성 데이터가 중심이 되는 서비스에서 핵심적인 역할을 한다. 음성 파일이나 실시간 음성 스트림을 입력으로 받아 발화 내용을 문장 단위의 텍스트로 변환하며, 이후 요약, 키워드 추출, 검색, 분석 등의 후처리 작업이 가능해진다. 우리 프로젝트에서는 상담 음성을 텍스트 데이터로 변환한 뒤 요약 기능을 제공해야 하기 때문에 STT가 필수적인 기술이다. 음성을 그대로 저장하는 것보다 텍스트로 변..

이번 주부터 종합프로젝트를 시작했다.가장 처음으로 세팅한 것은 프로젝트를 슬기롭게 관리하기 위한 서비스인 Jira를 세팅했다.Jira를 세팅하면서 겪었던 문제와 배운 점, 회고를 작성해보고자 한다. 💡 배운 점 (What I Learned)이번 작업을 통해 Jira를 단순히 이슈를 관리하는 도구로 사용하는 것과, 팀의 작업 흐름을 설계하는 도구로 사용하는 것의 차이를 분명히 느낄 수 있었다.특히 자동화를 적용하면서 Jira는 ‘기록용 툴’이 아니라, 현재 팀이 무엇을 하고 있는지 한눈에 보여주는 상태 기반 도구가 되어야 한다는 점을 배웠다.스프린트를 시작하지 않은 상태에서 이슈를 관리하면, 백로그와 실제 진행 중인 작업이 뒤섞여 보드의 의미가 사라진다. 반대로 스프린트를 명확히 시작하고, 이번 스프린..

애자일 방법론을 설명하기 앞서, 대표적인 개발 방법론 중 하나인 워터폴 방법론을 살펴보고자 한다. 워터폴(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을 통해 빠른 이미지 ..