프론트엔드122 Supabase 최종 수정 : 2024-05-13 (계속 작성 및 수정 중) 공부하기로 정한 이유프로젝트를 하면서 Swagger로 API를 연동하는데, 개인적으로 어려움을 겪었다. 우선적으로 API 연동하는 방법을 모른 탓도 있고, 기존에 주어진 데이터가 없는 상황에서 POST를 보낸 후에 GET하는 방식이라 귀찮았다. 솔직히 귀찮았다는 표현이 맞는 것 같다. 그러면서 개인적으로는 Supabase나 GraphQL에 대해 공부하고 싶은 열망이 있었는데, 이번 프로젝트를 겪으면서 그냥 하나 만드는 게 더 나을 것 같은데? 라는 생각이 들었다. 그래서 공부를 시작하고 있다. 어렴풋이 듣기만 했던 것을 직접 만져보고 싶었다. "하면 좋지"에서 "직접 만들고 싶다"라는 단계로 마음과 생각이 옮겨졌다. 함께 공부에 대한 열의가 있.. 2024. 5. 8. npm install [-option] 최종 수정 : 2024-05-04 NPMNode Package Manager의 줄인 표현으로, 자바스크립트 패키지 매니저이다. node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. dependencies에 등록되는 것과 devDependencies에 등록되는 것의 차이는 무엇인가? --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미이며, npm@5 부터는 --save 옵션을 기본 옵션으로 저장한다.-P (--save-prod)dependencies에 패키지를 등록한다. 프로젝트가 배포 시 사용될 의존성 모듈을 정의하고 설치한다.(default) -D (--save-dev)devDependen.. 2024. 5. 4. useId() 최종 수정 : 2024-05-03useId()접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하기 위한 React Hook입니다.어떤 매개변수도 받지 않는다.주의할 점useId()를 리스트의 key를 생성하기 위해 사용해서는 안 된다. Key는 데이터로부터 생성해야 한다. 페이지에서 컴포넌트는 몇 번이고 렌더링 될 수 있지만 ID는 고유해야 한다. ID를 직접 입력하는 대신 useId를 활용해서 고유한 ID를 생성할 수 있다.import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); return ( Password: Th.. 2024. 5. 3. 컴폰넌트 설계 - 관심사의 분리 최종 수정 : 2024-05-01관심사의 분리컴퓨터 프로그램을 관심사 별로 구별해서 분리하는 설계 원칙을 말한다. 단순히 시스템을 분리되지 않는 파트들로 조각내는 것이 아니라 시스템을 반복하지 않고 각각의 책임을 가진 요소들로 구성하는 것을 목표로 한다. 여기서 말하는 책임은 특정 코드가 수행해야 하는 동작이라고 생각하면 된다. 분리를 위해서는 기준이 필요한다. 그 기준은 주어진 책임을 설명하는 논리적이거나 물리적인 제한을 의미한다. 소스 구성에 대한 프로젝트, 폴더 구조를 포함하기도 한다.효과컴포넌트의 불필요한 반복이 없어지고, 책임이 단일화되기에 전체 시스템을 유지보수하기 쉬워진다.시스템 전체의 유지보수성이 향상되므로 더 안정적이게 된다.각각의 컴포넌트가 단일 책임으로 자신의 관심사만 집중해서 확장 .. 2024. 5. 1. 스토리지(Storage) 최종 수정 : 2024-05-01세션 스토리지와 로컬 스토리지사이트마다 클라이언트에서만 사용하고 싶은 데이터를 저장해 놓고 싶을 때 사용한다. 세션 스토리지(Session Storage)현재 탭에서만 유요한 저장소이다.탭을 닫으면 데이터가 사라진다.다른 탭과 데이터는 공유되지 않는다.// 값을 저장const data = inputElement.value;sessionStorage.setItem('draft', data);// 값을 참조하여 사용const draftData = sessionStorage.getItem('draft');// 값 지우기sessionStorage.removeItem('draft');로컬 스토리지(Local Storage)해당 사이트에서 유요한 저장소이다.탭을 닫거나 브라우저를 닫.. 2024. 5. 1. 이전 1 2 3 4 ··· 25 다음