// 리팩토링 전 useEffect(() => { const fetchData = async () => { const allPokemonData = []; for (let i = 1; i name.language.name === "ko"); allPokemonData.push({ ...response.data, korean_name: koreanName.name }); } const needData = lodash.shuffle(allPokemonData).map((el) => { return { src: el.sprites.front_default, name: el.korean_name, ..
전체 글
깃허브 계정으로 버셀 로그인을 시도하니 자꾸 사이드프로젝트 팀계정으로 로그인되는 버그가 발생했다.몇시간의 삽질 끝에 문제점과 해결방법을 찾았다.1. 사이드프로젝트 팀의 vercel 계정에서 My Account > setting > Authentication 에 나의 깃허브 개인 계정이 로그인 연동 되어있었다. 이로 인해 vercel에 접속하여 깃허브 연동 로그인을 시도하면 팀계정으로 로그인 되었던 것이었다.-> 팀계정에서 내 개인 깃허브 로그인 연동을 삭제했다. 2. 깃허브 계정 로그인을 하니 가입된 계정이 없다는 오류가 발생했다. 이는 내가 이전에 깃허브의 인증 이메일을 변경했기 때문이었다.깃허브 가입 -> 버셀 가입 -> 깃허브 이메일 변경 -> 버셀에서 깃허브 연동 로그인 시 이메일을 찾지 못해 오..
1. PC (데스크탑)평균 너비: 1280px ~ 1920px평균 높이: 800px ~ 1080px화면 비율은 대부분 16:9나 16:10을 따릅니다.2. 태블릿평균 너비: 768px ~ 1024px평균 높이: 1024px ~ 1366px태블릿은 가로/세로 모드 모두 고려해야 하며, 가로 모드에서 반응형이 어떻게 보이는지도 중요합니다.3. 휴대폰 (스마트폰)평균 너비: 360px ~ 414px평균 높이: 640px ~ 896px최근 스마트폰은 5인치 이상의 대화면이 많아졌지만, 360px ~ 414px 정도의 너비가 여전히 많이 사용됩니다. 높이는 기기마다 다양하지만 세로 길이는 평균적으로 640px 이상입니다.미디어 쿼리 사용 시 대략적인 기준PC: 너비 1024px 이상태블릿: 너비 768px ~ 1..
useEffect`는 **렌더링 후에 실행**되고, `useMemo`는 **렌더링 중에 실행**됩니다. 이 차이는 여러 가지 중요한 결과를 가져오는데, 구체적으로 살펴보겠습니다. ### 1. **렌더링 중 실행 (`useMemo`)** - **의미**: 컴포넌트가 렌더링되는 동안(`render phase`)에 값을 계산하고, 해당 계산을 메모이제이션합니다. - **결과**: 렌더링이 끝나기 전에 `useMemo`에 의해 계산된 값이 즉시 컴포넌트의 렌더링 결과에 반영됩니다. 즉, **화면이 그려지기 전에** 미리 계산된 값을 얻을 수 있습니다. - **영향**: - 렌더링 과정에서 값을 계산하고 그 값을 바로 렌더링에 사용합니다. 따라서 UI가 렌더링되기 전에 모든 값을 준비할 수 있습니다. - ..
Peer Dependencies란 무엇인가? Peer dependencies는 특정 패키지가 정상적으로 동작하기 위해 다른 패키지의 특정 버전이 프로젝트에 존재해야 하는 경우에 사용됩니다. 보통 라이브러리나 플러그인이 **호스트 패키지**(예: React)와 긴밀하게 연결되어 있을 때 필요합니다.Peer dependencies는 해당 패키지가 독립적으로 설치되지 않고, **호스트 패키지와의 버전 호환성을 사용자에게 맡기는 것**이 특징입니다. 예시로 이해하기:`custom-cursor-react`라는 패키지가 있다고 가정해 봅시다. 이 패키지는 React를 기반으로 작동하므로, 개발자는 프로젝트에 React가 설치되어 있어야 한다고 가정합니다.이때, `custom-cursor-react`는 자신이 **R..
`@extend`와 `@mixin`은 SCSS에서 스타일을 재사용하기 위한 두 가지 주요 방법입니다. 이 두 가지 방법은 스타일 코드의 유지보수와 재사용성을 높여주지만, 각각의 사용 방식과 성능에 차이가 있습니다. 아래에서 두 방법의 실제 성능 차이와 사용상의 장단점을 비교해 보겠습니다. ### 1. **`@extend`의 특성 및 성능** `@extend`는 선택자 간에 **스타일을 공유**하도록 해줍니다. 이를 통해 중복 코드를 제거할 수 있지만, **CSS의 구조**에 영향을 미칩니다. - **장점**: - **코드 중복 제거**: 여러 클래스가 동일한 스타일을 공유할 때 중복된 스타일 정의를 피할 수 있습니다. - **간결한 코드**: `@extend`를 사용하면 특정 스타일을 다른 셀렉터..
1. 세션(Session)이란?정의세션은 사용자가 웹사이트를 방문하고 있는 동안 서버에서 사용자 정보를 저장하는 방법입니다.세션은 서버에 저장되며 사용자가 로그인하거나 특정 동작을 수행할 때, 서버는 세션을 사용해 사용자를 식별하고 유지합니다.특징서버 측 저장 : 세션 정보는 서버에 저장되므로 보안성이 높습니다.유효 시간: 세션은 일정 시간이 지나면 만료됩니다. 이 유효 기간은 서버 설정에 따라 다릅니다.식별자 : 세션 ID는 클라이언트 측(브라우저)에 저장되고, 이 세션 ID를 통해 서버는 클라이언트의 세션 정보를 조회합니다.로그인 상태 유지 : 주로 로그인 상태 유지와 같은 사용자 상태를 관리하는 데 사용됩니다.작동 과정 1. 사용자가 웹사이트에 접속하여 로그인 시도. 2. 서버는 사용자를 인증..
코드HTML 1 2 3 4CSS.scroll-container { height: 100vh; /* 부모 컨테이너가 화면 전체의 높이를 차지하도록 설정 */ overflow: auto; /* 스크롤이 가능하도록 설정 (세로 방향 스크롤) */ scroll-snap-type: y mandatory; /* 세로 방향(y축)으로 스냅 효과를 강제 적용 (페이지처럼 넘기기) */}.scroll-area { scroll-snap-align: start; /* 각 스크롤 섹션이 스냅될 때 시작 지점에서 정렬되도록 설정 */} 참고문서 🎨 스크롤을 부드럽게 - Scroll Snap 속성CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치..