분류 전체보기

💡 불변성이 필요한 이유는 무엇일까? 렌더링 최적화 React.memo() useCallback() useMemo() 상태 변경 추적 Redux(immer) Zustand(immer) Recoil(immutable) ✔️ 여기서 immer는 불변성 라이브러리 이다. 1. 렌더링 최적화에 불변성이 필요한 이유 컴포넌트 트리에서 상태, 속성이 변경된 것이 있을 때만 가상 DOM에 대한 렌더링을 해야 한다. 이전 상태 객체와 현재 상태 객체를 비교하여 렌더링 여부를 판단 Deep Compare(X) → Shallow Compare(O) 불변성을 사용하지 않았다면 Shallow Compare 는 불가능 했을 것 ✨불변성 라이브러리를 이용하면 shallow compare로 결정한다. 💡 Deep Compare란?..

💡 이번에 과제 프로젝트를 진행하고 배포는 vercel에서 진행는데요. github page, firebase으로 배포를 해봤는데 개인적으로 vercel에서 배포하는게 제일 쉽고 빨랐던거 같습니다. ✨프로젝트 배포하기 1. vercel 홈페이지 접속하기 → 로그인 Meet our Customers – Vercel Take a look at a showcase of sites our customers create and learn how they use Vercel to build a better web, scale their business, and improve performance. vercel.com 2. add new 버튼 클릭 → project 클릭 3. 내 깃허브 목록에서 내가 배포하고자 하는..

💡 이번에 과제를 진행하면서 API 주소, API KEY와 중요 정보들도 다뤘는데 이때 이러한 값들이 노출되지 않게 하기 위해서는 어떻게 해야 되는지 정리해 봤다. 💻 프로젝트를 진행할 때 해당 프로젝트에서 사용되는 중요한 정보, KEY등과 같이 공개적으로 노출되면 안되는 값들이 있다. 이럴 때 따로 .env 파일을 만들어 그곳에 저장해서 사용할 수 있는 환경 변수를 설정해 줄 수 있다. 1. 환경 변수란? 프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법. 2. 환경 변수 설정하기 1) 루트 폴더에 .env 파일을 생성한다. 2) .env 파일에 변수와 값을 입력해준다. REACT＿APP＿변수 이름 = 값 3) 중요한 정보를 담고 있..

💡 시작하며 벌써 부트캠프를 시작 한지도 2개월 차가 되었네요. 정신없이 커리큘럼을 따라가다 보니 시간이 어떻게 지나갔는지 모를 정도였습니다. 1개월 차에는 HTML과 CSS를 배우고 클론 코딩과제를 진행했고 2개월 차에는 JavaScript 온라인 강의와 심화 실시간 강의 그리고 과제를 진행했습니다. 1개월 차에 비해 올라간 난이도에 조금 어렵기도 했지만 과정을 어떻게 활용했는지 소개해 보려고 합니다. 💻 온라인 강의 일단 패스트캠퍼스 부트캠프는 수강생 시트를 통해 커리큘럼을 확인할 수 있습니다. 수료할 때까지의 커리큘럼을 공유받고 각 주차 별로 들어야 할 온라인강의 범위을 알 수 있습니다. 단, 각 주차 별로 정해진 범위들은 필수적으로 들어야 하는 강의들입니다. 자바스크립트는 시그니처 강의인 Java..

🚨 에러 발생 리액트에서 input type 체크박스를 사용하던 중에 아래와 같은 에러가 발생했다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 해석해보면 checked 속성을 사용하여 값을 지정하지만 해당 값을 변경할 때 처리할 onChange 핸들러가 없어 오류가 난다는 것이다. 따라서 `defaultChecked`를 사용하거나 `onChange` 혹은..

1. Ajax(Asynchronous JavaScript and XML) 란? 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 브라우저가 제공하는 web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 전통적인 방식의 단점 Ajax 등장 이전의 웹페이지는 여러 단점들이 있었다. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화..