connecting dots

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

TS 유틸리티 타입객체 데이터에 있는 모든 내용을 선택적으로 만듬interface User { name: string age: number}const user: User { name: 'suhyun'}// 오류 발생// 'age: 85' 없으면 필수인데 없기 때문에 오류 ! Partial을 붙여주면 interface 내용이 필수적이 아니라 선택적으로 설정된 것과 같이 작동 !user에서 name, age를 사용하지 않아도 오류가 발생하지 않음'처음부터 선택적으로 만들면 안되는가 ?'--> 모든 것에 필수여야 하는 경우에 대응하기 힘듬만들 때는 필수 --> 선택적으로 ? 붙여서 사용하는 것이 일반적 !interface PartialUser { name?: string age?: ..

자바스크립트에서의 this 키워드일반함수: 호출 위치에서 this가 정의됨화살표 함수: 선언 위치에서 this가 정의됨일반함수 Function.prototype.call()--> call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다. 화살표 함수this를 가지고 있는 함수를 감싸는 함수가 있는지 봐야 함 !   (1) 방법은 보안에 취약(2) 방법을 통해 안전성을 높여야 함 !우리 프로젝트에서는 Vercel의 Serverless Functions를 사용해서 api 구현 엔드포인트 = {updatedtodo.id}https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/${updatedTodo.id} API 코드서버..

store 코드 수정기존 코드 수정코드 기존 코드의 경우 특정 속성이 다른 속성을 가지고 와서 쓸 수 없기 때문에 밑 사진처럼 함수 안에서 다른 함수를 호출할 수 없음수정 코드의 경우 선언되는 유효범위 안에 다른 함수도 포함되어있어서 호출하는 것이 가능 Vercel프론트엔드 웹 애플리케이션을 배포하고, 관리하기 쉽게 만들어주는 클라우드 플랫폼 1. Hosting Serverhtml, css, js, img, font --> 정적 파일들을 저장(like 하드디스크), 연산이 되지 않음 2. Computing Server (연산 기능이 필요할 때)- Serverless Functions 서버가 없는 데 동작하는 함수(기능)24시간 서버가 켜져있지 않아도 켜져있는 것 처럼 동작 가능  npm i -D verc..