MOLLY

1. Immer2. React에서 State 변형을 권장하지 않는 이유 5가지3. State의 배열 업데이트하는 법4. 금일 소감  오늘은 Study 때 내가 맡지 않았던 React 공식 문서 파트를 읽었다. 약간 밀렸어서 직전 스터디까지의 분량을 후루룩 읽었다. 새롭게 알게 된 부분과 궁금했던 부분에 대한 호기심이 풀려서 그 내용을 위주로 작성해 보려 한다!  1. Immer : React에서 불변성(immutable state)을 관리하기 위한 라이브러리Immer는 상태 업데이트 로직을 간단하고 읽기 쉬운 방식으로 작성할 수 있도록 해, 복잡한 객체의 불변 업데이트를 간단한 방법으로 처리할 수 있다. 기본적인 useState 훅과 유사하게 작동하며, 상태를 불변성을 유지하면서 업데이트할 수 있도록 도..

1. Adding Interactivity | Responding to Events2. Adding Interactivity | State: A Component's Memory3. Adding Interactivity | Render and Commit4. Adding Interactivity | State as a Snapshot5. 금일 소감 1. Adding Interactivity | Responding to Events0. TL;DR이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙이는 것이 일반적규칙에 따라 이벤트 핸들러 prop은 on으로 시작해야 하며 카멜케이스로 작성e.stopPropagation(): 위의 태그에 연결된 이벤트 핸들러의 실행을 중지e.preventDefault(..

1. React Thunk2. Promise3. React Query4. 금일 소감    1. React Thunk : Redux의 *미들웨어로, 비동기 작업(예: API 호출)을 쉽게 처리할 수 있도록 도와줌 Thunk는 액션 크리에이터가 단순히 액션 객체를 반환하는 대신 함수를 반환할 수 있게 해준다.  * 미들웨어?정의: 요청과 응답 사이에서 '중간 역할'을 하는 코드이유: 요청/응답 처리, 코드 재사용, 유지보수성 향상예시: 요청 로깅, 인증, 데이터 검증 등  TL;DR정의: Redux 미들웨어로, 액션 크리에이터에서 함수를 반환할 수 있게 해줌이유: 비동기 작업 처리, 복잡한 액션 로직 분리, 상태와 디스패치 접근 가능사용법: Thunk 설치 및 미들웨어 적용, 비동기 액션 크리에이터 작성, ..

1. 엘리먼트(Element)와 노드(Node)의 차이점2. DOM(Document Object Model) 요소와 React의 작동 원리2-1) DOM(Document Object Model)2-2) React의 작동 원리3. 가비지 컬렉터(Garbage Collector)4. 금일 소감 1. 엘리먼트(Element)와 노드(Node)의 차이점엘리먼트와 노드는 웹 개발에서 중요한 개념이며, 둘은 HTML 문서의 구조와 콘텐츠를 정의하고 설명하는 데 중요한 역할을 한다. 그러나 이 둘은 서로 다른 의미를 가지고 있다.  TL;DR노드(Node): HTML 문서의 기본 단위로, 엘리먼트 노드, 텍스트 노드, *어트리뷰트 노드 등 다양한 종류가 포함됨엘리먼트(Element): HTML 태그로 정의된 문서의 ..

1. Markup(마크업)2. Describing the UI  |  Passing Props to a Component3. Describing the UI  |  Conditional Rendering4. 금일 소감    프로그래밍은 법학처럼 나오는 단어, 단어마다의 의미를 정확히 모르면 이해가 잘 안 가는 듯하다. 같은 내용을 보더라도 저번에 읽었을 땐 분명히 이해했다고 생각했는데, 나중에 다시 보면 정말 기초적인 개념의 의미조차 모르는 경우가 많다.    오늘도 위 사진처럼 공식 문서를 읽다가 나온 개념인 markup이 정확히 어떤 의미인지 모르겠어서 해당 개념을 알아보았다.  1. Markup(마크업) 뜻 : 텍스트를 정의하고 표현하기 위해 고안된 것 하이퍼텍스트 마크업 언어(HyperText M..

1. Describing the UI  |  Your first component2. Describing the UI  |  Importing and exporting components3. 금일 소감  1. Describing the UI  |  Your first component0. TL;DR컴포넌트: UI를 구성하는 코드 단위, 노드: DOM의 기본 구성 요소[React Component vs. DOM Node] Component: ‘재사용 가능’한 UI 조각(’함수’ or 클래스 형태), Node: ‘HTML’ 요소(HTML 덩어리 정도로 이해해도 좋을 듯)즉, 컴포넌트와 노드의 차이는 태그명 맨 앞 글자의 대소문자 차이! 컴포넌트는 대문자, 노드는 소문자로 시작한다. 1. React Compo..

1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')2. This3. Binding(바인딩)4. 고차함수(Higher-Order Function)5. Map과 Set  개념과 차이6. API와 메서드의 차이7. Data Type | 기본형, 참조형8. 얕은 복사(Shallow Copy)9. 유사배열객체(Array-like Object)  1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')  위와 같은 에러가 뜨길래 '엥? 토글 세팅이 뭐가 문제지?' 싶어서 토글 관련 코드를 모두 알아봤다.    위처럼 정말 샅샅이 찾아봤는데..

1. [회고] 4개월 부트캠프, 어떤 일이 있었나?2. [계획] 앞으로는 어떻게 할 것인가3. User Test 전, SPL4. 댓글 작성 시, 실시간 반영 안 됨5. 헷갈리거나 몰랐던 내용 정리(1) 스키마(schema)(2) 클래스와 인스턴스(3) JWT (JSON Web Token)  1. [회고] 4개월 부트캠프, 어떤 일이 있었나?  오늘은 내 얘기를 좀 해볼까 한다. 만으로 4개월 동안 진행된 부트캠프가 종료되며 드디어 끝마쳤다는 시원함과 함께 내가 원하는, 진정 목표로 하는 회사에 입사하기 위해 어떻게 해야 하는가? 에 대한 약간의 불안감이 급습했다. 이미 부트캠프 1개월차부터 지금의 상황을 예상하였고 이를 위해 최종 때 혼자서 개인 프로젝트를 선택한 이유도 있다(최종 프로젝트로 개인 프로젝..

1. 우수 TIL로 선정되었다! 2. 네이버 Map API 사용하다가 카카오 Map API로 전향하여 공부 장소에 따른 Marker 구현 3. POST https://njltrjqccgmfpfdlyldi.supabase.co/rest/v1/user_profiles?on_conflict=email 409 (Conflict) ➡️ if문으로 프로필이 존재하지 않을 경우도 추가해 해결 4. 카테고리 클릭 시, URL에 장소 데이터 저장 (동적 Routing 없이 구현) 5. 카테고리를 클릭했을 때, 바로 장소 정보가 나타나지 않음 ➡️ Loading State를 만들어, 동기적으로 작동하게 해서 해결 6. 카테고리 클릭 시, 깜빡이며 정보 불러옴 & 모든 데이터 불러올 때도 있음 ➡️ 코드를 동기..

1. Warning: Each child in a list should have a unique "key" prop. ➡️ 부모 컴포넌트의 map 돌리는 곳 최상위 태그에서 key prop 전달해 해결 2. [다크모드 Error] Warning: Extra attributes from the server: class,style ➡️ 현재 마운트 상태를 확인하는 State 추가해 해결 3. Encountered two children with the same key, `faded`. ➡️ `faded` key 속성을 제거해 해결 4. commentsData 객체를 Comment[] 타입으로 강제 변환하려 발생한 Error ➡️ runtime에 데이터를 검증하는 코드 추가해 해결 5. GET h..