MOLLY

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때  Effect로 동기화하기 (Synchronizing with Effects)Effect를 사용하면 렌더링 후, 특정 코드를 실행하여 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.  0. TL;DREffect는 특정 상호작용이 아닌 렌더링 자체에 의해 발생코드가 다시 실행되길 원하지 않는 경우, Effect 내부 코드를 수정하여 의존성 배열에 해당 종속성이 필요하지 않도록 만들자Effect를 사용하면 컴포넌트를 외부 시스템(타사 API, 네트워크 등)과 동기화 가능Effect는 모든 렌더링(초기 렌더링 포함) 후에 실행됨Effect가 다시 마운트로 인해 중단된 경우 클..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때 Ref로 DOM 조작하기 (Manipulating the DOM with Refs)React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없다.   그럼 뭐 어쩔 때 사용하냐특정 노드에 포커스를 옮기거나스크롤 위치를 옮기거나위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때⇒ React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에, DOM 노드에 접근하기 위한 *ref*가 필요  0. TL;DR한 컴포넌트에서 하나 이상의 ref를 가질 수 있다.ref는 보통 포커싱, 스크롤..

0. TL;DR1. ref 사용하는 법2. ref와 state의 차이3. refs를 언제 사용해야 할까?   Ref로 값 참조하기 (Referencing Values with Refs)0. TL;DR컴포넌트가 일부 정보를 “기억”하게 하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하고 싶을 때 Ref를 사용하자!ref는 읽거나 변경할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체ref를 변경하더라도, 리렌더링 되지 않는다.렌더링 중에 ref.current를 읽거나 변경하지 말자. 건들면 컴포넌트를 예측하기 어렵게 된다.  1. ref 사용하는 법// (1) useRef를 import 해서 ref 추가import { useRef } from 'react';export de..

0. 수정된 코드 및 과정 요약1. 코드에서 Column name을 수정2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정4. 결론  에..?.. 제가 수척해진 농담곰으로 보이시나요?..  해결은 했지만 6시간 삽질해서 햄듭니다..   한 장소의 스크랩 여부가 다른 장소와도 동일하게 적용되는 문제 해결0. 수정된 코드 및 과정 요약    [원인] 전에 Supabase 컬럼을 설정할 때 id가 user_id와 study_place_id로, 총 2가지가 들어가는데 어떤 id에 기준(u..

1. 노베이스에서 토스 합격까지 (출처: Eddy)2. Managing State  |  Reacting to Input with State3. Managing State  |  Choosing the State Structure4. Managing State  |  Sharing State Between Components5. 금일 소감  1. 노베이스에서 토스 합격까지 (출처: Eddy) https://velog.io/@eddy_song/retrospective 위 글이 꽤 와닿아서 갖고 와봤다. 위 사진은 내가 전에 부트캠프에서 프로그래밍을 배우다가 그만둬야 하나 싶은 생각이 들던, 한창 힘들 때 봤던 내용의 그림이다. 유명한 글이긴 하나, 링크 속 블로그에서도 그 내용이 나와있어서 좀 놀랐다. 글..

1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트2. [프로필 정보] - [유형]이 안 보임  ⮕ NextUI Select의 defaultselectedkeys 속성이 적용되지 않아서 placeholder로 대체해 해결3. 금일 소감  1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트몰랐는데 수정하고 나서 수정되었다는 토스트 알림도 안 뜨고, 수정한 댓글이 새로고침 해야만 반영이 되고 있었다. 토스트 알림은 코드를 작성하지 않아서 안 떴던 것수정한 댓글이 새로고침 해야만 반영되는 건 댓글을 수..

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 태그로 정의된 문서의 ..