유저 정보 수정 기능에서 리렌더링이 발생하지 않아 저장하기가 활성화가 되지 않고 선택된 정보가 완전히 적용되지 않는 버그가 있었다.상위 컴포넌트인 마이페이지에서 변화된 상태를 읽지 못하고 렌더링이 발생시키지 못해 일어나는 일이었다.그래서 zustand를 사용하여 하위

최적화 전 최적화 후 / 마지막 사진은 최적화 전이다. 같은 사진 최적화 전후 / 왼쪽이 최적호 된 이미지 / 오른쪽이 최적화 전 이미지

Login => pocketbase 업데이트 => zustand authUserData 컴포넌트 => zustand일반 컴포넌트기준1\. Zustand authUserData를 체크2\. 데이터가 있다면 => 로그인3\. 데이터가 없다면 => 로그인 안되어 있음.Zus

로그인하고 메인페이지로 넘어올 때 로그인한 유저 정보가 바로 넘어오지 않는 버그를 발견하였다.그래서 코드를 뜯어보다 기존 코드의 storageData가 변하지 않아서 리렌더링이 발생하지 않아 생기는 문제라고 판단하여 버그를 해결하기 위해 생각해보았다.그래서 생각해낸 결

변ㄴ경후중복되는 코드를 정리하고 가독성을 높이기 위해 코드를 정리했다.prop-types을 정의해서 팀원들이 컴포넌트를 사용할 떄 어떤 타입을 사용하면 되는지 명시해놧다.닉네임이 수정되지 않는 버그를 수정하였다입력양식이 충족되지 않을 때에 저장하기 버튼을 disable

위에서 언급했듯이 URL 검색 매개변수를 사용하여 검색 상태를 관리하게 됩니다. 클라이언트 측 상태를 사용하는 데 익숙하다면 이 패턴이 생소할 수 있습니다.북마크 및 공유 가능한 URL : 검색 매개변수가 URL에 있으므로 사용자는 검색 쿼리 및 필터를 포함한 애플리케

스트리밍은 경로를 더 작은 '청크'로 나누고 준비가 되면 서버에서 클라이언트로 점진적으로 스트리밍할 수 있는 데이터 전송 기술입니다.스트리밍을 사용하면 느린 데이터 요청으로 인해 전체 페이지가 차단되는 것을 방지할 수 있습니다. 이를 통해 사용자는 모든 데이터가 로드될

✅ 클라이언트에서 데이터를 가져오는 경우클라이언트에서 데이터를 가져올 때 데이터베이스를 직접 쿼리하면 데이터베이스 비밀이 노출될 수 있으므로 데이터베이스를 직접 쿼리해서는 안 됩니다.기본적으로 Next.js는 성능을 개선하기 위해 경로를 미리 렌더링하는데, 이를 정적

📌 글꼴 및 이미지 최적화 next/font로 사용자 정의 글꼴을 추가하는 방법. next/image로 이미지를 추가하는 방법. Next.js에서 글꼴과 이미지가 최적화되는 방법. 글꼴을 최적화하는 이유는 무엇인가요? 글꼴은 웹사이트 디자인에서 중요한 역할을 하

next 파일 구성 CSS 스타일링 📌 애플리케이션에 전역 CSS 파일 추가하는 방법 /app/ui폴더 안을 살펴보면 global.css. 이 파일을 사용하여 CSS 재설정 규칙, 링크와 같은 HTML 요소에 대한 사이트 전체 스타일 등과 같은 CSS 규칙을 애플리

Untitled훅은 최상위 레벨에서만 훅을 호출해야 한다컴포넌트 내에서만 사용가능훅은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 렌더링되어야 한다초기값 설정시 무거운 계산이 동반되는 경우 콜백함수로 작성!렌더링될 때마다 실행첫번째 렌더링 시에만 실행첫 렌더링 + 특정

엔트리레벨 - 특정 기능의 코드를 작성하는 법 주니어레벨 - 코드 작성 , 테스트, 개발 지원

일급객체 일급 객체(First-class object) • 변수, 배열 엘리먼트, 다른 객체의 프로퍼티에 할당될 수 있다. • 함수의 인자로 전달될 수 있다. • 함수의 결과 값으로 반환될 수 있다. • 리터럴로 생성될 수 있다. • 동적으로 생성된 프로퍼티를 가질

깃허브 페이지스레 프로젝트 배포하기! https://www.npmjs.com/package/gh-pages 여기 주소를 비트에 알려준다.

23.08.19 useEffect를 사용하는 이유 useEffect를 사용하는 이유는 데이터를 가져오기 위해서가 아니라 리액트는 프라미스와 에러에 대응할 수 없기 때문이다. useEffect 안에 직접 async 함수를 사용하는 것은 권장되지 않는 이유 비동기 함수와

서버와 통신해서 데이터를 가져오고 상태에 따라 화면에 렌더링되는 훅 생성AbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.AbortController와 그것의 signal은 웹 플랫폼에서 제공하는 기능으로, 네트워크 요청이나 다른

리버스 후 맵을 하면 될 줄 알았더니 이상한 결과가 나왔?다 리약트에서는 같은 원본을 파고ㅣ 하는 문법을 사용하면 문제가 발생한다. ![](https://velog.velcdn.c

리액트 앨리먼트 같은 결과를 출력한다. JSX를 사용한 문법이 훨씬 더 간결하고 코드를 더 이해하기 쉽다. 리액트 앨리먼트 뜯어보기 리액트 앨리먼트는 리액트 애플리케이션에서 UI를 표현하는데 사용되는 객체 리액트 앨리먼트는 가상 DOM(Virtual DOM)의 구성