분류 전체보기 (290) 썸네일형 리스트형 회원가입 페이지 README 분석 README DevCamp - Frontend Material 위에 제공된 애플리케이션 코드는 React, TypeScript 및 다양한 커스텀 컴포넌트를 사용하여 2단계 프로세스로 사용자 등록 양식을 생성하도록 설계되었습니다. 이 문서에서는 코드를 단계별로 설명하고 외부 라이브러리, 사용자 정의 COM 사용을 강조합니다. Tech Stacks 이 프로젝트에는 다음 기술과 라이브러리가 사용됩니다. 1. React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. 2. TypeScript: 정적 유형을 추가하는 JavaScript의 상위 집합입니다. 3. React-hook-form: React 애플리케이션에서 양식 상태 및 유효성 검사를 관리하기 위한 라이브러리입니다. 4. zod: .. shadcn/ui, Zod, React Hook Form ✅ shadcn/ui shadcn/ui 라이브러리는 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트로 Next.js에서 컴포넌트의 호환성이 좋으며,앱에 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트 모음. (컴포넌트 자체를 패키지 install 하는 방식의 UI 컴포넌트의 모음) shadcn/ui Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. ui.shadcn.com [참조영상] Build a Reusable Component in React (Shadcn/ui, Tailwind) ✅ Zod Zod 는 schema validat.. 이력서_이현진 미니웹프로젝트_웹플래너, 오늘 뭐하지? 보호되어 있는 글입니다. 트러블슈팅 🖥️ Front-End ✅ 프로젝트에 사용되는 babel-preset-react-app이 @babel/plugin-proposal-private-property-in-object 패키지를 의존성으로 선언하지 않고 사용하고 있어서 경고 발생 // 설치로 해결 yarn add --dev @babel/plugin-proposal-private-property-in-object ✅ Promise가 state에 들어가 있어서 생긴 채널톡 오류. Redux state에는 비동기 작업 또는 Promise와 같은 값이 포함되어서는 안 되기 때문. // 오류 메시지 serializableStateInvariantMiddleware.ts:212 A non-serializable value was detected in th.. 34_이미지 최적화 하는 방법 리액트나 프론트엔드 개발에서 이미지 최적화는 웹 페이지의 성능을 향상시키는 중요한 부분입니다. 이미지 최적화는 웹 페이지의 로딩 속도를 개선하고 사용자 경험을 향상시키는 데 도움이 됩니다. ✅ 이미지 크기 조정: 이미지를 표시할 때 필요한 크기로만 조정합니다. 불필요하게 큰 이미지를 사용하지 않도록 합니다. 예를 들어, 웹에서는 일반적으로 2000px 이상의 너비를 가진 이미지를 사용하지 않습니다. ✅ 이미지 포맷 선택: JPEG, PNG, GIF, WebP 등의 이미지 포맷 중에서 적절한 포맷을 선택합니다. JPEG는 사진과 같은 복잡한 이미지에 적합하고, PNG는 로고나 아이콘과 같은 투명 이미지에 적합합니다. WebP는 고해상도 이미지를 압축하는 데 효과적인 포맷입니다. ✅ 이미지 압축: 이미지를 .. Front-End Convention ✅ Styled-Components 초기 세팅 styled-components 초기 세팅 🌼 내가 쓰려고 미리 만들어둔 styled-components 초기 세팅 boilerplate velog.io [styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider) 🎯 Styled-Components 전역 스타일링 (Global Style) & styled-reset & ThemeProvider createGlobalStyle Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 여러 컴포넌트에 걸쳐 공통된 css를 작업할 때 사용한 lakelouise.tistory.com ✅ BEM 개념 정리.. Git Commit Convention 코드 컨벤션 예시 ✅ 태그 이름설명 Feat 새로운 기능을 추가할 경우 Fix 버그를 고친 경우 Design CSS 등 사용자 UI 디자인 변경 !BREAKING CHANGE 커다란 API 변경의 경우 !HOTFIX 급하게 치명적인 버그를 고쳐야하는 경우 Style 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우 Refactor 프로덕션 코드 리팩토링 Comment 필요한 주석 추가 및 변경 Docs 문서를 수정한 경우 Test 테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X) Chore 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X) Rename 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 Remove 파일을 삭제하는 작업만 수행한 경우 ✅ 코드 컨.. 유저테스트 피드백 반영 📌 유저테스트 결과 리포트 바로가기 (스프레드 시트) 상세 피드백 반영 사항 바로가기 (노션) 🎯 테스트 결과 리포트 📊 운영체제 대체로 데스크탑/모바일 환경에서 테스트가 진행되었고, 운영체제인 윈도우와 맥의 비율은 비등했습니다. 📊 서비스 만족도 회원가입 및 로그인 기능 서비스에서는 7~10점을 주신 사용자 비율이 94%로 긍정적인 의견을 주셨습니다. 펀딩 기능 서비스에서는 7~10점을 주신 사용자 비율이 84.9%로 긍정적인 의견을 주셨습니다. 결제 기능 서비스에서는 7~10점 비율이 93.3%로 긍정적인 의견을 주셨습니다. 📊 사용성(UI/UX) UI/UX 부분에서 7~10점 비율이 81.8%로 대체적으로 만족한다는 응답을 주셨습니다. 📊 사이트 만족도 전체적인 사이트 만족도에서 7~10점 비율이 .. 33_SEO를 진행하는 방법 SEO(검색 엔진 최적화)는 웹사이트나 웹페이지를 검색 엔진의 자연 검색 결과에서 높은 순위로 노출시키는 프로세스를 말합니다. 이는 검색 엔진에서 사용자가 특정 키워드로 검색할 때 해당 웹사이트가 상위에 노출되어 사용자들이 더 많은 트래픽을 유도할 수 있도록 하는 것을 목표로 합니다. SEO를 진행하는 방법은 크게 두 가지로 나눌 수 있습니다. ✅ 내부 SEO: 내부 SEO는 웹사이트 자체의 구조, 콘텐츠 및 메타데이터를 최적화하는 것입니다. 내부 SEO의 주요 요소는 다음과 같습니다. 1️⃣ 키워드 연구: 웹사이트의 목적과 관련된 키워드를 연구하고 선택하여 해당 키워드를 콘텐츠에 자연스럽게 통합합니다. 2️⃣ 메타데이터 최적화: 각 페이지의 제목 태그, 메타 설명 및 URL을 최적화하여 검색 엔진에서 .. 이전 1 2 3 4 ··· 29 다음
