공부하자

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

문제 상황 및 구현해야 할 것이런 느낌의 스크롤을 감지해서 상황마다 버튼이 달라지는 컴포넌트를 만들어야 했다. 스타일은 전부 비슷할 듯 하니 맨 처음에 두겠음import styled, { css } from 'styled-components';export const StyledButton = styled.button` display: flex; align-items: center; justify-content: center; border: none; border-radius: 1000px; color: white; background-color: #2f774d; transition: all 0.3s ease; font-weight: ${({ theme }) => theme.fonts.se..

주소 검색 라이브러리 추천 유명한 주소 검색 라이브러리들은 다음과 같다.Google Places API: 구글의 위치 검색 API를 사용하여 자동 완성 주소 검색 기능을 구현할 수 있습니다.Daum Postcode API: 한국에서 널리 사용되는 주소 검색 API로, 다음(카카오)의 주소 검색 기능을 제공합니다.네이버 지도 API: 네이버의 지도 API를 사용하여 주소 검색 기능을 구현할 수 있습니다.사용자 정의 주소 목록: 사용자가 직접 주소 목록을 선택하거나 입력하도록 할 수 있습니다.장점과 단점을 정리해보자면, Google Places API장점글로벌 적용 가능: 전 세계 어디서나 사용할 수 있는 주소 검색 기능을 제공한다.자동 완성 기능: 사용자가 주소를 입력할 때 자동 완성 기능이 작동하여 빠르..

프론트엔드 프로젝트에서 styled-components와 TypeScript로 디자인 시스템 설정하기 프로젝트를 시작할 때 먼저 설정하면 편한 것들이 있다.prettier, lint 설정이라던지 절대경로 설정이라던지... 그 중 하나인 디자인 시스템 설정을 해보자!프론트로 개발을 할 때 피그마 보고 눈대중으로 값을 지정해서 개발을 하면 절대 안 된다 ㅎ 디자이너가 피그마에서 정해진 색상의 종류, 폰트의 종류를 고려하여 디자인 해야한다! 우리 프로젝트는 밑에 사진처럼 디자인 가이드가 나와있었다. 많이 쓰이는 색상이나 폰트, 크기, 행간을 설정해두고 디자인을 하는 경우거나 자주 사용하는 디자인이 있을 경우 이를 전역에 지정해두고 쓰는 것이 편하다!  이걸 지정해두지 않으면 모든 컴포넌트마다 font-size..