최종 프로젝트 구현 : 와이어프레임

(1) 선택 기술 스택 * React * Firebase * TypeScript * React-query * recoil (2) 세부 기획 * 작은 것 부터 시작하자 ! (친환경 습관 & 노하우 공유 커뮤니티) (3) 구현 내용 * 콘텐츠 - 인기 게시글 (좋아요 높은 게시글) - 환경 인플루언서 랭킹 top 10 - 카테고리 : 노하우 / 오늘 뭐했다/ 제품추천 - 좋아요 기능 * 마이페이지 - 매일 습관 (해빗 트래커) - 캘린더 : 게시글 + 스티커 - 기프티콘 발행 : 특정 일자 채웠을때 - 내가 올린 게시글 - 프로필 수정 - 관리자 페이지 *About - 만들어진 이유 - 이용안내 - 뉴스룸 (환경 문제 기사) - 지금 시작하기 ( 웹사이트 이용) * 로그인/회원가입 페이지 끝.

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 4.
• textsms

리액트 : 로딩화면 스피너 추가하기

1. 로딩화면 컴포넌트 생성 (Loading.jsx) import React from 'react'; import styled from 'styled-components'; import Spinner from '../assets/imgs/Loading/Spinner.gif'; const Loading = () => { return ( ); }; const ScDivBackground = styled.div` position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; background-color: #ffffffb7; z-index: 999; display: flex; flex-direction: column; align-items: center;..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 29.
• textsms

파이어베이스 + 리코일 오류 : Cannot assign to read-only property 'currentUser' of object '#<AuthImpl>

1. 오류 발생 파이어베이스 사용해서 로그인+로그아웃 기능 구현 => 로그아웃 클릭시 해당 오류 발생 2. 오류 원인 리코일을 사용해서 로그인 상태를 전역관리하였음 => 로그인 시 리코일을 사용해서 저장시 오류 발생 => readonly 형식의 데이터를 다른 데이터로 업데이트 하려고 했던 것 => 얕은 복사로 인한 오류 발생 3. 오류 해결 ★ 리코일의 깊은복사를 해주기 ★ 깊은 복사 방법 : JSON객체 사용 ( JSON은 텍스트로 변환되서 , 아닌 경우 오류 발생) JSON.parse(JSON.stringify(obj)); 문제를 같이 고민하고 해결해준 ㅅㅎ님👍 (+리코일 깊은 복사 내용 공유) https://github.com/firebase/firebase-js-sdk/issues/5722 sig..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 28.
• textsms

form 유효성검사에 react-hook-form 라이브러리 적용

회원가입시 이메일/패스워드/닉네임 유효성 검사로 사용 ▶ 목적 : state가 없어지면서 + 유효성 검사가 가능하여 컴포넌트의 랜더링 횟수를 최소화 시킨다 1) 패키지 설치 : yarn add react-hook-form 2) register, handleSubmit, formState, watch const { register, handleSubmit, watch, formState: {errors}, clearErrors, } = useForm({ defaultValues: { email: '', password: '', nickname: '', }, mode: 'onChange', //실시간 검증 활성화 }); formState ▶ register 함수에 validation 넣어주고, formSta..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 27.
• textsms

리액트 : 심화 프로젝트 기획

1. Code convention 컴포넌트 페이지 컴포넌트 끝에 Page붙이기 ex) HomePage.jsx , LoginPage.jsx 확장자명 .jsx 사용 작성한 styled-component는 컴포넌트 최하단에 위치시키기! styled-component 스타일 컴포넌트 이름 맨앞 글자 Sc로 시작 필요한 경우에만 이름에 기능포함시킨다. ex) => 자바스크립트 파일 카멜케이스로 작성 ex) common.js configStore.js 함수 모든 함수의 이름은 동사형으로 사용하기 ex) addComponent , checkIsDone 함수는 화살표 함수로 통일하기 카멜케이스로 작성 변수 카멜케이스로 작성 상수는 모든 대문자로 사용, 단어 구분이 필요하면 언더바로 작성 ex)const MAX_VALU..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 26.
• textsms

next.js : 리액트를 위한 웹 프레임워크 정리

next.js = 리액트를 위한 웹 프레임워크 1. 라이브리러리 & 프레임워크 구분 * 라이브리러리 : 개발자가 필요한 기능을 선택적으로 사용 + 제어 흐름을 직접 관리 * 프레임워크 : 개발자는 프레임워크의 규칙을 따라 코드를 작성 2. next.js 특징 6가지 (1) 복잡한 설정 필요없이 쉽게 개발 가능 (2) js로 백엔드 + 프론트엔드 가능 (3) 자동 코드스플리팅 + 서버사이드렌더링 가능 (4) 다양하게 data-fetching 가능 (5) 요청사항을 에상 가능하게! (6) 배포는 쉽게 ( vercel에서 만들었기에 가능) 3. 주요렌더링 기법 4가지 -> 면접때 많이 물어봄 (리액트에서만 가능한것. 리액트+넥스트 같이 가능한 것) (1) CSR - Client Side Rendering : ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 22.
• textsms