⚡️etc.10 퍼널 패턴 적용기: 잘못 구현된 페이지 흐름 개선하기 https://youtu.be/NwLWX2RNVcw?si=MXMWsc5Fb821aJjn 저는 최근 두잇투게더라는 프로젝트에 사용자의 청소 성향을 수집하는 온보딩 파트 부분을 담당했습니다. 총 4단계로 이루어진 설문조사였는데요, 처음에는 단계마다 페이지를 파고 사용자가 고르는 답변을 전역으로 관리했습니다.그리고 결과페이지에서 모든 답변을 불러와 청소 성향을 return하는 API를 호출했습니다. 근데 문득, 이렇게 하는 방법이 과연 효율적인가? 실무에서도 이렇게 개발을 하는가? 라는 의문이 들었습니다.그러다가 토스의 퍼널 패턴에 대해 알게 되었는데요. 퍼널 패턴이란, 단계를 지역 상태로 관리하고 한 페이지에서 단계 별로 컴포넌트를 띄워주는 방법이었습니다.흩뿌려져있던 상태와 페이지를 이렇게 하나로 모으다니!.. 2025. 1. 26. 👋두잇투게더만의 온라인 협업을 위한 컨벤션을 정리해보자(Git, Code, 폴더 구조 및 네이밍) 안녕하세요. 성공적으로 '두잇투게더'를 끝마치고 저희 팀이 열심히 정한 컨벤션을 정리하기 위해 오랜만에 블로그에 글을 적습니다.두잇투게더는 무려 프로젝트 1등, 인기 프로젝트 1등을 했는데요. 노력한만큼 결과가 너무 좋아서 정말 기분이 좋았습니다. Git ConventionGit Branch 전략https://s2ylvia.tistory.com/26 우리 프로젝트에 제대로 된 Git 브랜치 전략을 세우는 게 어때요?안녕하세요. 이 포스트는 제가 프론트엔드 개발자로 참여 중인 가사분담 플랫폼 '두잇투게더'의 Git 브랜치 전략을 팀원들과 함께 세우기 위해 정리한 내용입니다. 나, 지금까지 Git branch를 어떻s2ylvia.tistory.com CommitGitmoji를 사용하여 시각적으로 구분을 .. 2024. 12. 19. 우리 프로젝트에 제대로 된 Git 브랜치 전략을 세우는 게 어때요? 안녕하세요. 이 포스트는 제가 프론트엔드 개발자로 참여 중인 가사분담 플랫폼 '두잇투게더'의 Git 브랜치 전략을 팀원들과 함께 세우기 위해 정리한 내용입니다. 나, 지금까지 Git branch를 어떻게 사용했더라Git과 GitHub에 대해 잘 몰랐던 제가 처음으로 브랜치를 사용했던 프로젝트는 2022년에 진행한 반려 식물 돌봄 매칭 서비스, planter였습니다. 그때는 develop 브랜치를 default 브랜치로 설정하고, 새로운 기능을 추가하거나 버그를 수정할 때마다 별도의 브랜치(feature, design, fix)를 만들어 작업을 했습니다. 작업이 끝난 후에는 PR(Pull Request)을 생성해 develop 브랜치에 병합했고, 최근 프로젝트에서도 같은 방식으로 진행했었습니다. 그 덕분에.. 2024. 11. 24. [chart.js/react-chartjs-2] React 프로젝트에 chart.js 적용해보자👋(+Typescript, 반응형) 최근 React로 프로젝트를 하고 있는데 API를 활용해서 그래프를 구현하기로 했다.그래서 가장 유명한 차트 라이브러리인 Chart.js를 선정했다.근데 어떻게 쓰는거지? 1. 설치하기React에서 chart.js를 사용하려면 chart.js뿐만 아니라 react-chartjs-2도 설치를 해줘야한다.npm install react-chartjs-2 chart.js 2. 예시 가져오기설치가 완료되었으면, react-chartjs-2 공식 사이트에서 제공하는 차트 컴포넌트를 사용하면되는데,문제는 지금 사이트가 터졌는지 들어가지지가 않는다. 그래서 나는 그냥 구글링해서 다른 분들이 올려준 코드를 긁어서 썼다. ✅ Bar Chart(.tsx)import { Chart as ChartJS, Categor.. 2024. 9. 27. [GitHub Pages] gh-pages 라이브러리를 활용하여 배포하기 GitHub Pages란?GitHub Pages는 GitHub에서 제공하는 무료 호스팅 서비스로, 개인, 프로젝트, 또는 조직의 웹사이트를 쉽게 호스팅(서버에 저장)할 수 있도록 해줍니다. GitHub Pages는 정적 웹사이트를 호스팅하는 데 최적화되어 있으며, 주로 HTML, CSS, 자바스크립트 파일을 사용하여 웹사이트를 구축하는 데 사용됩니다. Vite로 생성한 React 프로젝트를 활용하여 배포하기1.프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행npm install gh-pages --save-dev 2.vite.config.js 파일을 열고 base 옵션을 추가import { defineConfig } from 'vite'import react from '@vitejs/plugin.. 2024. 9. 2. Axios와 Promise에 대해 알아보자 Axios란?프로젝트를 할 때 백엔드와 프론트는 API를 통해서 데이터를 요청하고 응답하면서 통신을 한다. 프론트가 주로 사용하는 React는 UI를 만드는 자바스크립트 라이브러리이기 때문에,통신을 하기 위해서는 따로 라이브러리가 필요한데 그 역할을 하는게 Axios다. 즉, Axios는 Promise 기반 HTTP 비동기 통신 라이브러리이다. 비동기로 HTTP 통신을 하게 해주고 REST API에 데이터를 요청할 때, 응답이 오면 promise 객체로 return 해주기 때문에 후속 처리도 간편하다. 그럼 Promise는 뭔데?Promise는 콜백 지옥을 벗어나기 위해 등장한 비동기 연산의 상태를 나타내는 객체이다.비동기 처리가 진행중이면 pending, 성공할 경우에는 fullfied, 실패하면 .. 2024. 6. 19. 이전 1 2 다음
