[Ez to Play / Function] 23.06.30 1주차 멘토링

FE 1주차 멘토링 내용 추천 스택 Next.js (리액트에서 SSR 하기 위해, 서버컴포넌트 이해하면 좋음 근데 어려움) Typescript zustand recoil vercel(배포) 추천 발표 주제 react-hook-form 이러한 라이브러리가 생긴 이유 이 라이브러리를 선택한 이유 Github Actions 서버컴포넌트 지도 마커 이쁘게 꾸며서 띄우기 (네이버 지도 맡은 사람이 하기) 지도 선택(의사결정과정 - 카카오, 구글, 네이버 중 왜 이걸 선택했는가) 스토리북 지금은 빠듯, font color input textarea 만들어놓아도 충분 zustand 모바일 퍼스트 (mobile first) PC 뷰포트보다 모바일을 우선으로 하여 구현 반응형으로 설계하여 태블릿, PC까지 커버하기 ..

• format_list_bulleted Function
• · 2023. 7. 12.
• textsms

[CSS] filter: blur() 와 backdrop-filter:blur()

css를 만지다가 배경을 블러처리 해야 하는 일이 생겨서 filter 와 backdrop-filter를 써보게 되었다. 내가 만들 것과 팀원분이 만든 것의 디자인이 비슷하기 때문에 코드를 복사한 후 div박스에 backgroundImage를 주고 전체를 감쌌다. backgroundImage를 인라인 스타일로 준 이유는 나중에 props를 뚫기 쉽게 하기 위해서다. (추후 이미지가 계속 변경되어야 함) 처음엔 백그라운드 이미지에 바로 filter: blur() 처리를 했고 결과는 이랬다. 안에 있는 모든 요소가 블러처리 된다. 찾아보니 많이 사용되는 요소 중에 backdrop-filter라는게 있었다. 블러처리할 요소 바로 안쪽 태그에 backdrop-fliter를 주면 배경만 블러 처리 할 수 있다. 백..

• format_list_bulleted HTML&CSS
• · 2023. 7. 12.
• textsms

[Ez to Play / Error Note] React Hook Form 사용중 xxx.current에서 타입에러

Type 'string' is not assignable to type 'HTMLInputElement' typescript와 react hoor form을 사용하는데 비밀번호 현재값을 input_password.current에 담으려 하자 아래와 같은 타입에러를 만났다. 상황: 비밀번호 확인(재입력)란에서 현재 입력된 비밀번호와 재입력된 비밀번호가 같은지 확인하기 위해 현재 입력된 비밀번호를 useRef 함수가 담긴 변수 input_password의 .current에 담음. useRef에 타입을 지정해줬어야 했는데, 에러문구를 보고 다짜고짜 useRef() 이렇게 string으로 타입을 지정해주면 이번엔 current에서 에러가 난다. 훅의 초기값을 null로 줘놓고 null 타입을 안 주는 만행을 저..

• format_list_bulleted Error Note
• · 2023. 7. 8.
• textsms

[Ez to Play / Error Note] ESLint - 'process' is not defined

'process' is not defined React Hook Form을 설치했더니 갑자기 pwa를 설치하면서 생긴 service-worker.js 파일과 serviceWorkerRegistration.js파일에 에러가 났다. process를 node 속성이 아닌 일반적인 변수로 인식해서 생기는 오류라고 한다. .eslintrc 파일의 env에 node 속성을 추가하면 해결된다고 해서 해보았고 잘 해결되었다. 참고자료 https://www.univdev.page/posts/process-eslint-issue/

• format_list_bulleted Error Note
• · 2023. 7. 8.
• textsms

[Ez to Play / Error Note] React Hook Form 사용시 ref={register}에서 에러나면

Type 'UseFormRegister' is not assignable to type 'LegacyRef | undefined' Type 'UseFormRegister' is not assignable to type '(instance: HTMLInputElement | null) => void'. Types of parameters 'name' and 'instance' are incompatible. Type 'HTMLInputElement | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. React Hook Form을 사용해보는데 input에 register를 주는 부분에서 에러가 났..

• format_list_bulleted Error Note
• · 2023. 7. 8.
• textsms

[Error Note] Prop 유효성 검사 missing in props validation

missing in props validation 이라는 처음 보는 에러가 나타났다. eslint에서 일어나는 문제인 것 같다. props를 전달해주다가 나온 에러인데 내가 봤을 땐 코드에는 별다른 문제가 없는 것 같다. chatGPT를 잘 쓰지 않지만 이번 기회에 이 에러가 뭔지 한 번 물어보았다. 아래는 답변 내용. The error message "missing in props validation" indicates that there is a missing prop validation for the 'MainCarousel' component. In React, it is good practice to validate the props passed to a component to ensure th..

• format_list_bulleted Error Note
• · 2023. 7. 6.
• textsms