1️⃣ Supabase 프로젝트 생성하기 일단 supabase에 새로운 프로젝트를 생성해준다. 기존 존재하던 조직에 무로 플랜 프로젝트를 하나 추가할 수 있어서 만들어주었다! 2️⃣ 내 프로젝트와 연결하기 이후 위의 Connect 버튼을 눌러 Supabase 키와 url을 .env에 저장해줬다. React + vite를 사용한 프로젝트라 잘 설정해주고, .env 내부 키는 절대 유출되지 않게 보관해준다. Supabase 패키지를 설치해주고, 클라이언트를 만들자 패키지 설치 클라이언트 생성 후 내보내기 이전(아마 25년 10월 이전)에는 supabaseKey가 였는데, 12월 이후로 로 명칭이 변경된 것 같다! 사이트 내에 있는대로 따라해주자. 이제 supabase의 기능을 사용하고자 할 때는 아래와 같이 선언한 후 사용하면 된다! supabase 에서 제공해주는 예시 3️⃣ 이메일 회원가입 허용하기 supabase는 기본적으로 이메일 회원가입을 enable 시켜놓지만, 자잘한 설정을 다시…

💡 졸업프로젝트, 절반의 성공 졸업 프로젝트로 국내 주식 백테스트 서비스를 개발했다. 초기 팀 구성은 프론트엔드 1명(나), 백엔드 2명. 우리는 야심차게 종목 조회부터 백테스팅, 그리고 결과 저장의 기능을 만들고자 했다. 하지만, 백엔드 1명이 갑작스런 휴학을 선언하며 팀을 이탈하게 되었고, 남은 백엔드 친구 혼자 백테스팅 엔진을 만들기도 벅찬 상황이었다. 선택과 집중을 해야했고 핵심 기능인 백테스팅 기능만 구현, 회원가입 + 저장은 포기했다. 졸업 프로젝트는 무사히 마무리했지만, 아쉬움이 계속 남았다. 🤔 이거 다시 입력하기 너무 귀찮네.. 서비스를 사용할 때마다 크게 불편한 점이 있었다. 백테스트를 한 번 돌리려면 날짜, 금액, 리밸런싱 주기, 종목 비중 등 입력해야 할 값이 너무 많았다. 이 생각이 들 때마다 똑같은 값을 다시 입력하는 건 고문이었다. 결과 저장 기능이 절실했다. 하지만 같이 고생했던 백엔드 친구는 이미 번아웃이 온 상태. 더 이상 부탁할 수는 없었다. …

💡 메인페이지 디자인, 이대로 괜찮을까? 졸업 프로젝트로 주식 포트폴리오 백테스팅 웹 서비스를 개발 중이다. 초기 단계에서 메인페이지를 구성했지만, 실제로 적용해보니 여러 가지 문제점이 눈에 띄기 시작했다. 📸 기존 디자인 백테스트 중심의 서비스임에도, 핵심 기능이 눈에 잘 띄지 않음 설명이 너무 길어, 사용자가 읽다가 흥미를 잃고 이탈할 가능성이 있음 디자인이 단조롭고, 동적인 느낌이 부족함 전체적인 구성의 우선순위가 명확하지 않아 사용자 흐름이 어색함 그리고 무엇보다 .. 너무 구려 🛠️ 현재 디자인으로의 전환 문제들을 정리한 후, 가장 중요한 정보에 집중하고, 시각적으로 반응형 요소를 추가하기 위해 메인페이지 디자인을 전면 수정했다. 특히 “시장 지수 카드” 영역은 정보를 한눈에 파악할 수 있도록 구조를 단순화했고, 지수 변동을 색상과 간단한 애니메이션으로 시각화해 전달력을 높였다. 📸 새로운 디자인 처음 들어왔을 때 백테스트 기능을 강조하는 문구와 바로가기를 통해 사용자에게 …

🔁 타입이 바뀌면 return도 바꿔야죠 : 유니언 타입 확장에 대응하는 안전한 처리법 앞선 포스트에서 타입을 함수 매개변수로 재사용하는 법을 소개했다. 그런데 이렇게 타입만 바꿔준다고 과연 충분할까? 🧩 문제 상황 아래는 타입이다. direction이 혹은 일 때, 색상을 다르게 보여주기 위해 조건문으로 처리하고 있다. 지금은 문제가 없어 보이지만, 나중에 direction 값이 “neutral”처럼 하나 더 추가되면 어떨까? 이 경우 함수는 여전히 “up”과 그렇지 않은 케이스만 처리하기 때문에, neutral과 down은 같은 결과를 낼 것이고, neutral 타입 추가의 의미가 없을 것이다. 🛠️ 해결 방법: Switch문 적용하기 이런 식으로 switch 문을 만들어두면 나중에 direction에 새로운 타입이 추가되어도 기존 코드의 큰 변경 없이 새로운 타입에 대한 return문만 고쳐주면 된다. (OCP원칙 ..?) ✅ 장점 타입 확장에 안전하게 대응 예외 케이스를…

🔁 TypeScript에서 타입을 재사용하는 법 : 객체 타입의 특정 프로퍼티 타입 가져오기 졸업 프로젝트를 하던 중, 이미 정의해둔 타입에서 특정 속성만 재사용하고 싶어 방법을 고민하다가 알게 되었다. 🧩 문제 상황 아래는 MarketIndex 라는 타입이다. kospi/kosdaq 지수 렌더링을 위해 정의해둔 타입이다. 그리고 차트를 렌더링 하려는데, direction에 따라 색상을 바꾸고 싶었다. 상승(”up”)일 땐 빨간색, 하락(”down”)일 땐 파란색으로 .. direction 값을 받아서 색상을 리턴하는 함수를 정의하는데 매개변수 타입 정의 중 고민이 들었다. 단순히 “up”|”down” 타입으로 지정할 수도 있겠지만 먼 훗날 MarketIndex 타입이 변경된다면(예를들면 direction: boolean) 이라거나 … 함수들의 값을 모두 변경해야할 것 같아 유지보수성이 좋지 않을 것 같았다. 그래서 direction 속성을 색상 변경 함수의 매개변수 타입으로 재사…

👉 시연 영상 바로가기

프로젝트 초기 세팅 (ESLint + Prettier) 졸업프로젝트 기획을 하고 본격적으로 구현에 들어가기 전, 프로젝트 세팅을 제대로 해두면 생산성이 올라갈 것 같아 여러 글들을 찾아보았다. Vite를 이용해 기본 React + TypeScript 프로젝트는 생성하였고 코드 품질과 가독성을 위해 ESLint와 Prettier를 설정하려고 한다. ✏️ ESLint ESLint는 코드를 정적 분석하여 문법 오류나 코드 규칙을 검사해주는 도구다. 팀마다 일관된 코드를 유지할 수 있도록 도와준다. (예: 변수 선언하지 않았음, 대신 써라 등) ✏️ Prettier Prettier는 코드를 자동으로 포맷팅해주는 도구로, 들여쓰기, 세미콜론, 따옴표 같은 형식을 자동으로 정리해준다. 코드 스타일을 일관적으로 맞춰주기 때문에 가독성을 높여준다. 쉽게 말하면 ESLint는 “이건 잘못된 코드야” Prettier는 “형식 좀 예쁘게 정리할게” 라고 얘기해주는 도구다. 🔍 왜 ESLint + Pr…