💻 개발/toy project17 프로젝트 기록 2 - ERD 설정과 프로젝트 세팅 오늘은 프로젝트 2일차! database의 schema를 도식화하고, 공통 컴포넌트를 나누어 구현한 내용에 대해 말해보겠다!팀으로 작업한 내용은 데이터베이스 스키마 설계 & ERD 구조화하였고, 프로젝트를 세팅하였다. 데이터베이스 스키마 설계Supabase Auth 활용프로젝트의 기본적인 회원가입/로그인 기능은 Supabase의 Auth를 활용하기로 결정했다.간단한 회원가입부터 비밀번호 관리를 해준다는 장점이 있다.또한 로그인 되어있을 때 onAuthStateChange라는 트리거를 제공해준다! users 테이블기본적인 회원가입/로그인 기능은 supabase를 사용하지만 닉네임 등 meta-data는 public.users 테이블로 관리하기로 결정했다.auth 테이블에 기본적으로 meta-data가 존재.. 2025. 2. 14. 프로젝트 기록 1 - 프로젝트 기획 및 와이어 프레임 구현 오늘은 스파르타 프론트엔드 엔지니어 양성과정 9기의 2번째 팀 프로젝트가 진행되었다.새로운 프로젝트를 시작하면서 아이디어 구상 및 와이어 프레임 작성, 사용기술 스택에 대해 살펴보겠다! 📜 프로젝트 주제 선정브레인스토밍 과정처음 프로젝트를 시작하면 팀원들끼리 어떤 프로젝트를 구현할 지 주제를 정해야한다!원활한 진행을 위해 팀원들 서로서로 1개씩 주제를 말하기로 했다. 흥미 & 관심사와 관련된 주제로 글을 작성하는 사이트스파르타 프론트엔드 9기의 TIL 및 인사이트 등의 블로그 글 공유 사이트향수등 여러 제품에 대해서 사용자가 리뷰를 작성할 수 있는 사이트코드에 대한 궁금증을 올리고 다른 사용자에게 코드 리뷰를 받을 수 있는 사이트트위터와 인스타그램 같이 오늘 일을 작성하고 공유할 수 있는 사이트집 주위.. 2025. 2. 13. React 프로젝트 이벤트 위임을 통한 리렌더링 최적화 오늘은 React 프로젝트에서 이벤트 위임을 통해 렌더링 최적화를 하였고 성능 개선하였는지 말해보겠다. 이벤트 위임이란?자신의 이벤트를 상위 또는 하위의 요소에 위임하는 것이다.주로 하위 요소 각각에 이벤트 핸들러를 붙이는 대신, 그들의 부모 요소에 하나의 이벤트 핸들러를 붙여서 하위 요소들의 이벤트를 관리한다.이렇게 하위 요소의 이벤트가 상위 요소로 퍼지는 방식은 이벤트 버블링(Event Bubbling)을 이용한 개념이다. 반대로 상위 요소의 이벤트를 하위로 위임하여 하위 요소에서 이벤트를 관리할 수도 있다.이처럼 상위 요소의 이벤트가 하위 요소로 퍼지는 방식이 이벤트 캡쳐링(Event Capturing)이라고 한다. 따라서 하나의 자신을 대신할 요소가 "대표자" 역할을 하면서 연관된 요소들의 이벤.. 2025. 2. 10. 자연스러운 UX: 뒤로 가기에서 스크롤 위치 유지하기 웹 애플리케이션을 사용하다보면 리스트 페이지에서 특정 아이템의 상세 페이지로 이동했다가 다시 돌아올 때, 스크롤 위치가 맨 위로 초기화되는 경험을 하곤한다. 이는 사용자 경험을 지해하는 요소 중 하나로, 오늘은 React-router-dom과 window.scrollTo 메서드를 활용해 이 문제를 해결한 방법에 대해 작성해보겠다! 상황 구성하기먼저 세로 스크롤이 긴 / 페이지와 특정 아이템의 상세 내용을 볼 수 있는 /item가 있다고 하자.// Home.tsximport { Link } from "react-router-dom";export default function Home() { const items = Array.from({ length: 30 }, (_, i) => i); return (.. 2025. 2. 4. Vite + React + TS 프로젝트에서 절대 경로 설정하기 오늘은 Vite + React + TS 프로젝트에서 절대 경로를 설정하는 방법에 대해서 알아보겠다 Alias 설정Alias는 프로젝트 내에서 특정 경로를 짧고 간단하게 표현하기 위해 사용하는 별칭이다.예를 들어, '../../components/Button' 같은 상대 경로 대신 '@/components/Button' 같은 간단한 경로를 사용할 수 있다. Vite TypeScript 기반 프로젝트에서 절대 경로를 설정한다면 다음 두 가지 주요 파일을 수정해야한다. 1. vite.config.tsVite 설정 파일을 관리하기에 앞서 @types/node 패키지를 설치해주어야한다.@types/node 패키지는 Node.js의 기본 모듈 (path, fs 등)에 대한 타입 정의를 제공하는 패키지로, 절대 경.. 2025. 2. 3. React + TS 프로젝트에서 코드 리뷰 오늘은 React + TS로 간단한 useState 응용 프로젝트에서 받은 코드 리뷰 공유 및 리펙토링 과정을 설명하겠다! 주요 내용을 아래와 같다.Enum 대체와 성능 최적화Enum의 Tree Shaking 문제점대안: const object 또는 union type 사용제어문 선택과 가독성객체/타입 기반 분기 처리시 switch문 활용실제 코드 예시와 개선된 가독성 비교타입 안정성 강화함수 반환값 타입 처리 방식Generic 활용 vs 타입 단언목적별 함수 분리 전략 프로젝트 소개간략하게 프로젝트 소개를 먼저하고 가겠다. 프로젝트는 올림픽 메달 트랙커로 특정 국가에 대한 메달 기록을 추가/갱신할 수 있는 웹 어플리케이션이다.위 링크를 통해 배포된 사이트로 접속할 수 있다. 국가들의 매달 기록을 저장하.. 2025. 1. 27. 이전 1 2 3 다음
