Ella 프론트엔드일지

0. 라이트하우스 성능점수 13점 - 홈페이지 1차 완성을 하고 라이트하우스 측정을 했는데 성능점수가 13점이 나왔다. - 리팩토링 하기 전 성능점수를 끌어올려보자 1. 성능이 낮았던 원인 아래처럼 가이드사항을 알려주었다. public 폴더에 캐러셀 슬라이드에 불러올 이미지를 넣어놨는데. 그 이미지 문제인것 같았다. 이미지의 기본적인 용량은 모두 2MB가 넘었다. 3. 이미지 최적화를 해보자 ✅이미지 최적화 방법 1) 이미지 폭을 조절하자 - 페이지에서 사용되는 이미지는 보통 가로폭이 1000px을 넘지 않는다. 이미지 사이지를 줄여주는 것만으로도 용량을 많이 줄일 수 있다. 2) 최적화된 이미지 포맷을 사용하자 - 이미지 포맷 종류 JPEG는 'Joint Photographic Experts Group..

0. 자동 캐러셀 슬라이드 만들기(feat: 리액트 스타일드 컴포넌트/타입스크립트) 아래 움짤처럼 자동으로 옆페이지로 넘어가며, 페이지네이션 버튼도 적용하려고 한다. 즉, 필요한 것 1) 페이지 네이션 : 버튼을 누르면 옆 슬라이드로 넘어가기 2) 일정 시간이 지나면 자동으로 옆 슬라이드로 넘어가기 1. 코드 1) 먼저 이미지 4장부터 준비하고, public 폴더에 넣는다. ✅ public 폴더에 이미지를 넣는 경우는? 1) public 폴더는 이미지를 정적 자원으로 처리하기 위함이다. 리액트로 개발을 끝내면 build라는 작업(지금까지 짰던 코드를 한파일로 압축) 을 한다. src 폴더에 있던 코드와 파일은 다 압축이 되는데, public 폴더에 있는 것들은 그대로 보존해준다. 그래서 형태를 보존하고 ..

0. 버그 현황 버그 2개 발생 1) console.log(loading) 반복 렌더링 이슈 2) if 문 조건절안에 status 상태값 변경되었으나, navigate 적용 안되는 이슈 - loginSlice.ts 에서 status 값(비동기 통신 여부에 따라 'loading','succeeded','fail' 을 받아와서 LoginForm.tsx 에서 status 값을 불러옴. - 로그인 버튼을 누르면 handleSubmit 함수가 발동돼서 통신이 성공할 경우 loading 에서 succeeded로 상태가 변하는데(콘솔창 캡처 참고) - 상태가 succeeded로 변하면 페이지로 이동할 줄알았는데 이동이 되지않음. console.log(stats)를 해보면 succeeded는 그대로 출력됨 즉, 콘솔창..

1️⃣첫번째 버그 0. 버그 현황 - 아이디 input 값에 이미 사용중인 아이디를 입력하고 중복확인 버튼을 클릭했을 때 이미 사용중인 아이디입니다. 라고 에러메세지가 정상적으로 렌더링 된다. - input 값을 수정해서 또 이미 사용중인 아이디를 입력하고 중복확인 버튼을 클릭했을때는 에러메세지가 렌더링이 되지 않음 1. 버그 코드 - 기존에는 useEffect 를 써서 errorMsg 상태값이 변할 때마다 에러메세지를 렌더링 하는 코드로 짰었음 function JoinForm() { const [toggleType, setToggleType] = useState("buyer"); const [isJoinValid, setIsJoinValid] = useState(false); const [idCheck..

0. 버그 현황 아이디 input 값에 20자 이내의 영문,소문자,대문자,숫자만 사용가능하다고 유효성 검사 처리를 react-hook-form 으로 적용. 하지만, 한글을 누르고 중복확인 버튼을 누르면 멋진 아이디네요 :) 라고 성공했다는 메세지가 나온다. react-hook-form 으로 유효성 검사를 하고 중복확인 버튼 적용이 안되게 해야한다. 1. 기존 코드 - 전체 코드 중 id 관련된 코드만 추출하였음 const { register, handleSubmit, getValues, setError, watch, formState: { errors }, } = useForm({ mode: "onChange" }); // id 중복 확인 검증 const handleCheckId = async ( id:..

✅ 글을 쓰게 된 이유 - 버튼 컴포넌트를 만드려고 하는데 타입스크립트에서 theme을 어떻게 설정해야할지 몰라서 정리해본다. ✅ GlobalStyle VS theme 그동안 프로젝트에서 GlobalStyle 에서 아래와 같이 :root를 이용해서 색상을 사용했었다. :root { --main-color:#FFB6B0; --main-disabled-color:#c8beab; --main-text-color:#ffffff; --sub-text-color:#767676; --border-color:#bdbdbd; } 보통은 GlobalStyle에는 reset 또는 공통적으로 사용(box-sizing과 같은 base Css규칙) 하는 css 가 들어가고, theme 에는 공통적으로 사용되는 스타일(media ..