MOLLY

0. TL;DR1. 방어적 복사는 원본이 바뀌는 걸 막아준다2. 방어적 복사 구현하는 법3. 방어적 복사를 사용하는 실제 사례4. 카피-온-라이트 & 방어적 복사 비교   Ch7 | 신뢰할 수 없는 코드를 쓰면서 불변성 지키기[들어가며] 이 챕터에서 배울 핵심 내용*레거시 코드나 신뢰할 수 없는 코드로부터 내 코드를 보호하기 위해 방어적 복사 만들기얕은 복사, 깊은 복사의 차이카피-온-라이트 & 방어적 복사를 언제 사용하면 좋을지 🍯 레거시 코드 (legacy code): 오래 전에 만든 것으로, 지금 당장 고칠 수 없어서 그대로 사용해야 하는 코드  0. TL;DR방어적 복사: 신뢰할 수 없는 코드 or 데이터가 안전한 코드로 들어오고 나갈 때마다 복사본을 만듦 → 들여보내거나 내보냄불변성을 구현하는..

0. TL;DR1. [원칙] 암묵적 입력과 출력은 적을수록 좋다.2. [원칙] 설계: 엉켜있는 코드를 푸는 것3. [적용] 함수를 분리해 더 좋은 설계 만들기   0. TL;DR암묵적 입력과 출력은 ‘인자’와 ‘리턴값’으로 바꿔 없애는 게 좋음암묵적 입력: 인자가 아닌 모든 입력암묵적 출력: 리턴값이 아닌 모든 출력‘설계’란 엉켜있는 코드를 푸는(분리하는) 것. 풀려있는 건 언제든 다시 합칠 수 있음코드를 분리해 각 함수가 하나의 일만 하면, 개념을 중심으로 쉽게 구성 가능  들어가기 전, 가벼운 Q&A를 살펴보자.Q1. 코드 라인 수가 적어야 좋은 코드인가?A. 코드 라인 수만으로 유지보수하기 좋은 코드인지 판별하기는 어렵다.측정할 수 있는 여러 가지 지표 중 하나는 ‘함수의 크기’다. 작은 함수는 이..

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;DR1. 컴퓨터2. 전송 매체3. 네트워크 장비4. 정리  오늘은 네트워크의 기초 관련한 좋은 글을 읽게 되어 그 내용을 요약하려고 한다.정말 일목요연하게 핵심 위주로 설명을 잘해두셔서 많은 부분을 그대로 작성하여 재구성하였다. 원본 링크: https://better-together.tistory.com/39   네트워크: 컴퓨터와 컴퓨터를 연결하여 데이터를 보내고(송신) 받을(수신) 수 있게 하는 시스템 (= 데이터 통신, 컴퓨터 통신)  네트워크의 구성 요소 3가지 2대 이상의 컴퓨터 (컴퓨터 아이콘)데이터가 이동하는 통로인 전송 매체 (화살표 아이콘)데이터의 이동을 돕는 네트워크 장비 (클라우드 아이콘): 데이터가 정확한 수신지에 도착할 수 있도록 도와주는 네트워크 장비들로 구성되어 있음..

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..