MOLLY

0. TL;DR1. ~ (Bitwise NOT 연산자)2. ~~ (Double Bitwise NOT 연산자)3. >>> (부호 없는 오른쪽 시프트 연산자)   코딩 테스트 문제를 풀고 다른 사람의 풀이는 어떨지 궁금해서 봤다. 위와 같이 처음 보는 연산자를 사용해서 문제를 풀었길래 신기해서 ~~ 연산자에 대해서 공부해봤다.   0. TL;DR~: 비트 단위 NOT 연산을 수행하여 비트를 반전시킴~~: 숫자의 소수 부분을 제거하고, 정수 부분만 반환함~와 ~~ 연산자는 비트 연산과 관련된 특정 작업이나 최적화된 정수 변환 등에 유용하게 사용될 수 있음 >>>: 피연산자의 이진 표현을 오른쪽으로 시프트하며, 부호에 상관없이 빈 자리를 0으로 채움부호 없는 정수로 처리하여 음수도 양수처럼 시프트함주로 부호를 ..

0. TL;DR1. 액션, 계산, 데이터를 나눠서 생각하기2. 쿠폰 보내기 예제3. 액션의 다양한 형태    0. TL;DR함수형 프로그래머는 액션, 계산, 데이터를 구분액션: 외부 세계에 영향을 주거나 받는 것 [함수]계산: 입력값을 출력값으로 만듦. 어떤 걸 결정, 계획함 [함수]데이터: 이벤트(일어난 일)에 대해 기록한 사실 [기본 데이터 타입]액션 순서로 선호하기  1. 액션, 계산, 데이터를 나눠서 생각하기액션: 외부 세계에 영향을 주거나 받는 것 [함수]실행 시점이나 횟수 혹은 둘 다에 의존함수형 프로그래밍에서 가장 중요!순서(언제 실행되는지), 반복(얼마나 실행되는지)액션을 부르는 함수가 있다면 그 함수도 액션이 됨 ⇒ 액션이 코드 전체로 퍼져나감순수하지 않은 함수, 부수 효과 함수라고도 ..

0. TL;DR 1. Custom Hook: 컴포넌트 간 로직을 공유할 때 사용 2. 컴포넌트로부터 Custom Hook 추출하기 3. 작명 규칙 4. Custom Hook은 state 자체를 공유하는 게 아니라 state 저장 로직을 공유함 5. Custom Hook 작명법 6. Custom Hook으로 Effect를 감싸는 것이 종종 유용한 이유 헐 이게 대체 뭐야?! 아아.. 모르는가? 이건 바로 'Custom Hook’이라고 하는 것이다. Custom Hook 최고!!!!! 0. TL;DRCustom Hook을 사용하면 컴포넌트 간 로직을 공유할 수 있음Custom Hook의 이름은 use 뒤에 대문자로 시작되어야 함Custom Hook은 state 자체가 아닌 state 저장 로직만 공유함Cus..

0. TL;DR1. 불필요한 Effect를 제거하는 방법2. 비용이 많이 드는 계산 ⇒ 캐싱 처리3. prop 변경 시 모든 state 초기화4. prop이 변경될 때 일부 state 조정5. 이벤트 핸들러 간 로직 공유6. 데이터 Fetching할 때 고려할 점   Effect가 필요하지 않을 수도 있다 (You Might Not Need an Effect)외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우), Effect가 필요하지 않다.  0. TL;DR비용이 많이 드는 계산을 캐시하려면 useEffect 대신 useMemo를 추가하자전체 컴포넌트 트리의 state를 초기화하려면 다른 key를 전달하자컴포넌트가 표시되..

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. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트몰랐는데 수정하고 나서 수정되었다는 토스트 알림도 안 뜨고, 수정한 댓글이 새로고침 해야만 반영이 되고 있었다. 토스트 알림은 코드를 작성하지 않아서 안 떴던 것수정한 댓글이 새로고침 해야만 반영되는 건 댓글을 수..