프론트엔드

문제 : React에서 배열 렌더링 도중 key 속성을 부여했음에도 불구하고 오류가 발생하였다.//오류 코드 { responseData?.map((el, idx)=>{ return( ) }) }원인 : React에서는 리스트를 렌더링할 때, key 속성은 각 요소의 최상위 부모에 부여해야합니다.결론 : fragment element()를 삭제하여 을 최상위로 올려야한다.//해결 코드 { ..

Vercel은 정적 사이트를 배포하는 데 최적화된 플랫폼으로, HTML, CSS, JavaScript로 구성된 프로젝트를 매우 쉽게 배포할 수 있습니다. 아래에 Vercel을 이용해 프로젝트를 빌드하고 배포하는 방법을 단계별로 정리했습니다.1. Vercel 계정 생성 및 CLI 설치계정 생성Vercel 공식 웹사이트에 접속해 회원가입을 완료하세요.GitHub, GitLab, Bitbucket 계정으로 로그인하면 코드 저장소와의 연동이 편리합니다.Vercel CLI 설치터미널에서 아래 명령어를 사용해 Vercel CLI를 설치합니다.npm install -g vercel설치가 완료되면 CLI를 통해 Vercel과 연동할 수 있습니다.2. 프로젝트 준비프로젝트 디렉토리 구성HTML, CSS, JS 파일을 포..

// 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )// // 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )/..

웹 디자인GDWEBhttps://www.gdweb.co.kr/main/index.asp http://www.gdweb.co.kr www.gdweb.co.kr WWIThttps://wwit.design/tag/realestate Lifeplus한국의 UI/UX 모바일 패턴을 수집합니다.wwit.design 웹쟁이https://www.webjangi.com/artwork 웹쟁이 | 모든 웹 작품과 리소스가 한 곳에웹쟁이 | 모든 웹 작품과 리소스가 한 곳에www.webjangi.com 컴포넌트코드펜https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development usi..

깃허브 계정으로 버셀 로그인을 시도하니 자꾸 사이드프로젝트 팀계정으로 로그인되는 버그가 발생했다.몇시간의 삽질 끝에 문제점과 해결방법을 찾았다.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가 렌더링되기 전에 모든 값을 준비할 수 있습니다.   - ..

`@extend`와 `@mixin`은 SCSS에서 스타일을 재사용하기 위한 두 가지 주요 방법입니다. 이 두 가지 방법은 스타일 코드의 유지보수와 재사용성을 높여주지만, 각각의 사용 방식과 성능에 차이가 있습니다. 아래에서 두 방법의 실제 성능 차이와 사용상의 장단점을 비교해 보겠습니다. ### 1. **`@extend`의 특성 및 성능** `@extend`는 선택자 간에 **스타일을 공유**하도록 해줍니다. 이를 통해 중복 코드를 제거할 수 있지만, **CSS의 구조**에 영향을 미칩니다. - **장점**:   - **코드 중복 제거**: 여러 클래스가 동일한 스타일을 공유할 때 중복된 스타일 정의를 피할 수 있습니다.   - **간결한 코드**: `@extend`를 사용하면 특정 스타일을 다른 셀렉터..