connecting dots

1. 개요패스트캠퍼스 데브캠프: 김민태의 프론트엔드 개발 1기비기너반 프로젝트로써 진행한 영상공유 SNS 플랫폼 개발 프로젝트 소개 및 회고를 해보겠습니다. 2. 깃허브 주소https://github.com/Dev-FE-1/Toy_Project_3_BeginAgain GitHub - Dev-FE-1/Toy_Project_3_BeginAgainContribute to Dev-FE-1/Toy_Project_3_BeginAgain development by creating an account on GitHub.github.com 3. 팀원소개 및 역할분담 처음에는 7명으로 시작했던 비기너반이 최종적으로는 4명이 되어 프로젝트를 진행하였습니다. 특히나 프로젝트가 시작되고 기획 및 디자인 단계에서 두 분이나 개인..

User Story(사용자 스토리)Team의 컨센서스(합의)를 맞추기 위해서 필요, 모두가 다른 생각을 할 수 있기 때문하나의 스프린트에 여러 유저 스토리가 있을 수 있음IPM (iteration/sprint planning meeting) = weekly meeting, 다음주에 뭐 할지에 대한 회의 ?유저스토리(예: 사용자는 ~~할 수 있다)에 대한 피드백을 잘 주는 것이 필요2주 단위로 회의를 하는 것은 프로덕트 팀의 생산성을 측정하면서 스토리 포인트라는 것을 준다 ! 테스트스모크 테스트: PM이 진행, 결제나 회원가입 중 중요한 기능 테스트 회의 방식- daily scrum (stand up)어제 진행한 업무, 오늘 진행할 업무, 이슈나 도움이 필요한 사항을 공유매일 진행한다 (회사마다 월수금 등..

json-servernpm i -D json-server concurrently// json-server랑 vite 서버 동시에 켜기 위해서 concurrently pakage.json"scripts": { "watch:json-server": "json-server db.json --port 1234", // db.json 파일을 실행 "watch:vite": "vite", "dev": "concurrently npm:watch:*", db.json데이터 베이스 직접 만들기{ "todos": [ { "id": "abc", "title": "hello world", "done": false } ], "users": [], "posts": ..

개발 요구사항 정리무작정 시작하는 게 아니라 요구사항 정리를 먼저 !요구사항 정리: 프로젝트가 완성되기 위해서, 개발자가 구현해야 하는 기능을 정리한 것 1. 프로젝트(서비스) 기획어떤 기능부터 개발할지는 상황별로 너무 달라서 딱 뭐 부터 ! 할 수는 없음 - 할 일 목록을 출력하는 서비스- 할 일을 추가하는 기능버튼을 클릭했을 때 추가되는 기능엔터키를 눌렀을 때 추가되는 기능- 할 일 목록을 출력하는 기능- 할 일 항목을 수정하는 기능- 할 일 항목을 삭제하는 기능- 할 일 목록을 재정렬하는 기능 2. 핵심 기술(main 기술, 모르면 프로젝트 투입이 불가능)- Next.js(SSR)- SPA(CSR)- RESTful API- Vite.jsnpm create vite@latestESLint, Prett..

todo 리스트에 필터 기능 추가 실습전체 원본 todo 리스트는 가지고 있고, 필터링을 할 때 완료 전/완료 후 배열을 다시 만들어서 띄워줘야 됨 버튼을 누르면 value 바뀌도록 액션 설정  버튼을 누르면 각 버튼에 따라 active가 붙는 화면 clsx 라이브러리클래스를 여러 개 적용하고 싶을 때 !npm i clsx 기존 코드 setFilterStatus(filter.value)}> {filter.text} clsx 적용 코드.btn { border: none; padding: 10px;}.active { background-color: royalblue; color: white;} subscribeWithSelector 미들웨어 사용subscribeWithSelector는 zustand..

4-1. async와 awaitcallback hell & Promise hell을 개선하기 위해 사용/* Callback Hell */getData (function (x) { getMoreData (x, function (y) { getMoreData (y, function (z) { ... }); });});/* Promise Hell */fetch('https://example.com/api') .then(response => response.json()) .then(data => fetch(`https://example.com/api/${data.id}`)) .then(response => response.json()) .then(data => fetch(`http..

2-1. 리액트에서는 단일요소가 return 되어야 한다 '단일 요소여야 한다'=return 문에서 JSX를 반환할 때, 반드시 하나의 최상위 요소로 감싸야 한다 리액트 컴포넌트는 JSX를 반환할 때, 여러 요소를 반환할 수 있지만, 이 요소들을 하나의 부모 요소로 감싸야 한다.그렇지 않으면 위와 같은 에러가 발생한다. 해결 방법1) 단일 부모 요소로 감싸기function MyComponent() { return ( Hello This is a paragraph. );} 2) React Fragement 사용부모 요소가 필요 없지만 여전히 다수의 요소를 반환해야 한다면, React.Fragment 또는 빈 태그(...)를 사용할 수 있다.function MyCompon..

1. 직렬화(Serialization)란? 직렬화(Serialization)는 데이터를 전송하거나 저장하기 위해, 객체나 데이터 구조를 일련의 문자열로 변환하는 과정을 말합니다. 예를 들어, 자바스크립트의 객체를 네트워크를 통해 전송하거나 파일에 저장하고 싶을 때, 이 객체를 텍스트 형태로 변환하는 것이 바로 직렬화입니다. 2. JSON.stringify()란?JSON.stringify()는 자바스크립트에서 객체를 JSON 형식의 문자열로 직렬화하는 방법입니다.  • JSON(JavaScript Object Notation)은 데이터 교환 형식으로 널리 사용되는 텍스트 기반의 형식입니다. • JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환해 줍니다.const user = { ..