그날의 공부기록

seokachu's Front-End Archive 🙂

📚 이론정리/React & Next.js

React-hook-form 라이브러리React-hook-form 라이브러리는 폼을 효율적으로 관리하게 하게 해주는 라이브러리다. 주로 폼 상태 관리나 유효성 검사, 폼 제출 처리에 최적화 되어있다. 기본 React 상태 관리를 사용할 때 보다 좀더 간결하게 작성할 수 있다. 함수형 컴포넌트와 hook을 사용하는 경우, 가장 사용하기 쉽고 성능적으로 좋은 폼이 react-hook-form 이다. react-hook-form의 장점이전에 사용했던 폼 유효성 검사 방식은 onChange를 만들어 setState를 해주고 바인딩 해주는 방법이었는데, state가 변화할때마다 렌더링이 되기때문에 불필요한 렌더링이 지속적으로 일어나서 굉장히 비효율 적이었다. 또한 변화한 state를 받아서 다시 넣어주고 렌더링 ..

2024. 10. 29.

📚 이론정리/JS & TS

open api를 사용하던 중 cors가 "no"로 제공되는 애들이 있다.CORS 정책에 의해 막혔다고 나오는 것을 종종 볼 수 있다.CORS가 뭐고, 어떻게 흘러가는지 알아보자결론은 무료api기 때문에 CORS가 `no`로 되어있어도 사용 가능하다!    그래서 CORS가 뭔데?CORS를 이해하기전에 SOP에 대해 이해해야 할 필요가 있다.   SOP(Same Origin Policy) - 같은 출발지 정책CORS (Cross Origin Resource Sharing)    SOP방식 SOP방식은 이미지로 쉽게 설명하자면 다음 브라우저와 다음 백엔드 컴퓨터만 사용 가능하다.즉, 다른 브라우저들은(네이버 구글)등 다음의 백엔드 컴퓨터를 사용할 수 없다. (유연하게 사용할 수 없다)같은 회사의 백엔드 컴..

2024. 9. 26.

📚 이론정리/JS & TS

이벤트 버블링은 `디폴트`로 생각하면 편하다`이벤트버블링` 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다.  버블링은 위로 버블버블 올라간다고 생각하면 훨씬 이해하기 쉽다. `버블링` : 자식 → 부모`캡처링` : 부모 → 자식 버블링이 디폴트고, 캡처링은 따로 선언해 주어야 한다.    예시 코드 P  위와 같은 구조에서 를 클릭하면 `p`→`div`→`form` 순서로 3개의 경고창을 나타나게 된다.목록의 제목이나 내용에 `onClick`함수가 있는것이 아닌 전체를 감싸주는 박스에 `onClick`함수가 있을 경우 발생하게 된다.이러한 경우 `event.target.id`가 아닌 `event.currentTarget.id` 를 사용..

2024. 9. 26.

📚 이론정리/JS & TS

유틸리티 타입이란?어떤 타입이 있고, 내 마음대로 요리할 수 있도록 다른 타입으로 만드는 것이 유틸리티 타입이다.   예시interface Profile { name: string; age: number; school: string; hobby?: string;} 먼저 하나의 타입을 만들었다고 가정  1. Partial 타입type aaa = Partial; 파셜타입은 전부 타입들이 있어도 되고, 없어도 되는 타입으로 지정할 수 있다.   2. Required 타입 type bbb = Required; 모두가 다 필수요건인 타입이다.    3. Pick 타입type ccc = Pick; name과 age만 뽑아서 다른 타입으로 쓰고싶을 때    4. Omit 타입type ddd = Omit; sc..

2024. 9. 20.

📚 이론정리/React & Next.js

구글맵 api를 사용하게 되면서 어떻게 사용하는지 세팅을 먼저 기록하면서 적어보려고 한다.       Google Maps Platform - Location and Mapping Solutions mapsplatform.google.com 링크로 들어가면 위에 첨부했던 이미지가 나오는데, 오른쪽 상단에 get started 버튼을 클릭해준다.      새로운 이름을 입력해주고, 다음을 클릭해준다.        간단하게 세팅하고 나면 `api 및 서비스`를 클릭해주고 api키를 발급받아주면 된다.         번외로 솔루션 라이브러리를 들어가면 라이브러리 리스트들을 확인해 볼 수 있다.                   공식문서 Docs 개요  |  Maps JavaScript API  |  Google..

2024. 9. 14.

📚 이론정리/React & Next.js

TanStack Query를 공부하다가 useQuery에 대해서 좀더 작성해 보려고 한다.useQuery는 데이터를 불러올때 가져오는 속성인데, 대부분 프로젝트에서 `queryKey`와 `queryFn`정도로만 사용했었다.하지만 프로젝트를 하면서 더 추가로 enabled와 retry 속성에 대해서 공부를 해보았다.     enabled초기 상태 관리: 처음 페이지를 로드할때 정보를 불러오지 않는다.ex) 사용자가 로그인한 이후에만 유저 정보가 필요한데, 사용자가 로그인한 이후에만 유저정보를 가져오려고 할때 활용할 수 있다.     retry데이터가 false로 실패한 쿼리는 다시 시도하지 않는다.ex) 사용자 데이터를 불러오고 정보가 실패했으면, 다음 실패한 쿼리는 시도하지 않는다.     useQuer..

2024. 9. 10.

📚 이론정리/JS & TS

2024. 9. 10.

✨ 기억보다 기록을/프로젝트

다시 리마인드....✨이번에는 React + axios 통신의 투두리스트를 만들어보았다!  `배포` : 클릭`깃허브` : 클릭  Next.js만 사용하다가 다시 React로 넘어와서 사용해보니 React-router-dom 설치와 라우터 설정도 따로 해줬어야 했던 점에서, 확실히 Next.js가 편하다는 생각이 들었다😂너무 Next.js에 편해졌었나보다...익숙함에 속아 소중함을 잃을뻔... 하지만 React버전으로 다시 만들어보면서 이렇게 했었지 라는 리마인드를 가지면서 두고두고 자주 봐야지! 라는 생각으로 만들어보았다.이번에는 혼자서 이전에 짰던 코드 안보고 작성해보려고 노력했지만,, 아직은 한번에 쭉 만들기 힘들었고 최대한 안보고 짜려고 노력했다. 특히 이번에는 검색부분을 추가해서 전역관리로 Zu..

2024. 9. 5.

📚 이론정리/React & Next.js

json-server로 배포하는 방법은 여러가지 있지만나는 Render을 사용하여 배포를 진행해보기로 했다. json-server를 활용해서 배포를 하려면,레포를 별도로 생성해야하는데 지원해주는 다른 타 사이트들은 내 레포지토리를 `Public`으로 설정해야했다🥲json-server레포는 `Private`로 진행하고 싶었는데 Render 사이트는 레포지토리를 Private로 설정해도 접속이 가능하다!   ✨ 준비할 내용클라이언트는 `vercel`로 배포를 진행했다 (하던대로 진행)json-server용 레포지토리가 필요하다 (✨NEW) 즉, 클라이언트용, 서버용 두개의 레포지토리가 필요하다.    ❌ 주의사항Render로 배포를 진행하려면 json-server서버 레포지토리를 이전 버전의 json-se..

2024. 9. 5.

📚 이론정리/React & Next.js

🔥 useState는 비동기이다!페이지를 구성하는 데는 많은 state들이 존재한다. 하나하나의 state 변화에 리랜더링을 발생시킨다면, 성능저하가 발생 될 것이다.이를 해결하기 위해서 React는 setState가 연속으로 호출되면 배치(batch)처리를 통해 한번에 리랜더링 하게 된다.수많은 setState를 연속으로 사용해도 배치 처리로 인해 랜더링은 한번만 된다.리액트의 state는 `객체`이고, 객체이기 때문에 동일한 key에 대해 이전의 값을 덮어 씌우기 때문에 결국 마지막 명령어만 수행하게 된다.   배치(batch)란?React가 성능을 위해 여러개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다.React는 16ms 단위로 배치를 진행한다. 즉, 16ms동안 변경 된 상..

2024. 8. 28.