메로그

도입 이유아래와 같이 개발 프로세스를 짠 이유는 스프린트 진행시, 개발팀은 기획 또는 디자인을 기다려야하고, 프론트엔드는 백엔드를 기다려야 하는 문제들이 다수 발생되기 시작했습니다.그래서 기다릴 필요가 있나?? 라는 생각을 하게 되었고 디자인은 기다리지 않고 와이어 프레임시 MVP 만 개발하고 프론트엔드에서 API 설계를 진행하면 동시 다발적으로 업무를 진행할 수 있다고 판단하였습니다. 그래서 정리된 것은 아래와 같습니다. 실제 시작은 초기 기획 및 와이어 프레임 제작부터 이며, 선택에 맞춰 생략하여 진행하여도 됩니다. 브레인 스토밍 (선택)핵심 도메인 기준에 브레인 스토밍 → 지식 공유 라는 도메인을 가지고 가자.프로덕트 초기 기획 (실 - 기획자)사업 목표 및 요구 사항 정의주요 기능 및 사용자 요구..

애자일 도입 템플릿애자일을 도입하게 되면, 어떤 식으로 진행하면 좋을지 고민을 하게 된다.여러 경험을 통해 효율적인 애자일 템플릿을 아래와 같이 만들어보았다.일정 산정 및 스프린트 계획스프린트 주기스프린트 목표 설정스프린트 플래닝 미팅스토리 포인트 및 작업 산정스토리 포인트: 스프린트 내에서 진행할 업무에 대한 볼륨 측정작업 추정: 1, 2, 3, 5 까지 정하며 스프린트가 15일이면 15일 중에 작업이 진행되는게 몇일 정도인지만 적으면 됨. (언제부터 언제까지 일정x, 워킹 데이 기준, (교육, 휴가 등)에 대한 일정은 빼줌.)백로그 관리백로그에서 → 스프린트 백로그 이동해서 진행합니다.프로덕트 백로그: 제품의 모든 요구사항과 기능을 포함한 리스트입니다. 프로덕트 오너가 우선순위를 정하고 유지 관리합니..

야무지게 Axios 사용하기클라이언트와 서버가 통신하기 위해 사용되는 대표적인 라이브러리 중 하나입니다.Axios 인스턴스를 사용하여 API 클라이언트 설정하기우선 야무지게 axios 를 사용할라면, 그냥 쓰지 말고 axios.create를 사용하여 axios 에 대한 커스텀 셋팅을 해줍시다.요청에 대한 baseURL 과 요청마다 자동으로 인증 코드를 추가하는 인터셉터, 타임 아웃 기능을 추가해줍시다.Axios 인스턴스 생성우선, axios.create를 사용하여 기본 설정을 가진 Axios 인스턴스를 생성합니다. 이 인스턴스는 기본 URL과 헤더를 설정하여 모든 요청에서 일관된 설정을 유지할 수 있게 해줍니다.import axios from 'axios'const apiClient = axios.cre..

리액트 프로젝트를 진행하다 보면, 여러 리액트 프로젝트 구조를 상상하게 된다.가장 우리가 기본적으로 나열하는 components 와 pages 폴더를 만들어서 나열하는 구조가 있지만, 이러한 구조는조금만 규모가 커지거나 훅, 상태 관리 등이 들어오게 되면 가독성이 확연하게 떨어지게 된다. 그래서 features 기반으로 그룹화(페이지, 컴포넌트, 훅, 스토어 등)하여 사용하게 되는데, 이를 기반으로 React 프로젝트 구조를 아래와 같이 구축해보자. Vue 도 마찬가지로 다를게 없다고 생각한다. 리액트 프로젝트 구조 구축하기기본적으로 요즘 유행하는 vite 기반의 react 프로젝트를 만들어서 프로젝트를 먼저 구조화 해보자.먼저 yarn create vite 를 이용해서 react 프로젝트를 생성해줍니다..

스토리북8.x이상 에서 React Router v6 이상 버전을 사용시에 스토리북에 있는 공통 컴포넌트들에서 라우팅 사용 관련 에러가 발생하는 경우가 있습니다. // 에러 문구 useNavigate() may be used only in the context of a component.에러가 발생하는 원인은 무엇인가?1. React Router 의 훅들을 사용하기 위해서는 라우터가 필요합니다. 2. 스토리북은 파일 서버 기반의 환경과 컴포넌트를 독립적으로 사용하는 특성으로 인해 라우터를 제공하지 않습니다. 3. 이를 해결하기 위해 createMemoryRouter 를 이용하여 메모리 라우터를 별도로 만들고 스토리북에 직접 라우터를 제공합니다. 이를 이용하면, 브라우저의 URL 을 변경하지 않아도 메모리에..

우리는 이제 세상을 살면서 AI 모델과 함께 하는 세상에 살고 있습니다.chat gpt, gemini, 뤼튼 등 다양한 AI 모델이 있는데 이번에 새롭게 출시된 Calude 3.5 Sonnet 을 소개해볼까 합니다.https://www.anthropic.com/news/claude-3-5-sonnet Claude 3.5 Sonnet 은?기존에 Claude 3 Opus 라는 모델을 가지고 있었는데, 해당 모델을 뛰어넘는 모델이라고 합니다. 그리고 Claude 3.5 Sonnet 을 출시하면서 Claude Artifact 라고 하는 ai 기반으로 코딩하면서 옆에 별도의 콘텐츠창을 두고 사용자가 실시간으로 말을 하면서 코딩을 하는 기능이라고 합니다.이미 커뮤니티에서는 많은 사람들이 해당 기능을 기반으로 간단한..