[개발 도서] 리팩터링 2판 chapter11. API 리팩터링

1. 질의 함수와 변경 함수 분리하기 겉보기에 side effect 가 있는 함수와 없는 함수는 명확히 구분하는 것이 좋다 .이를 위한 한 가지 방법은 '질의 함수(읽기 함수)는 모두 부수효과가 없어야 한다'는 규칙을 따르는 것이다. 이를 명령-질의 분리라 한다. 값

2022년 2월 23일
·
0개의 댓글
·

[개발 도서] 리팩터링 2판 chapter7. 캡슐화

7.1 레코드 캡슐화하기 > 레코드란? 컴퓨터 과학에서 레코드(record, struct)는 기본적인 자료 구조이다. DB나 스프레드시트의 레코드는 보통 로우(row)라고 부른다. 레코드는 각기 다른 자료형에 속할 수 있는 필드의 모임이며, 보통 고정 숫자나 시퀀스로

2022년 2월 7일
·
0개의 댓글
·

[개발 도서] 리팩터링 2판 chapter3. 코드에서 나는 악취

chapter3 에서는 리팩터링을 언제 시작해야 하는지에 대해 다룬다. 총 24개의 악취 요소를 소개한다. 코드를 명료하게 표현하는 데 가장 중요한 요소는 바로 '이름'이다. 그래서 함수, 모듈, 변수, 클래스 등은 그 이름만 보고도 무슨일을 하고 어떻게 사용해야 하는

2022년 1월 19일
·
0개의 댓글
·

컴포넌트 스타일링 _ CSS, Sass, CSS Module, styled-components

컴포넌트를 스타일링 할 때 다양한 방식을 사용할 수 있다. 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식이다. Sass : CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해서 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module : 스타

2021년 12월 13일
·
0개의 댓글
·
post-thumbnail

[react] react-router-dom v6 사용해보기

SPA 의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 다른 주소에 따라 다른 화면을 보여주는 것을 라우팅이라고 한다. 리액트 자체에 이 기능이

2021년 12월 8일
·
0개의 댓글
·
post-thumbnail

[react] 'immer' 로 쉽게 불변성 유지하기💫

immer react에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리이다. ✅ reference Immer 공식 사이트 / inroducing immer! 불변성은 뭘까?🤔 리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우

2021년 12월 8일
·
0개의 댓글
·
post-thumbnail

[react] 리액트 컴포넌트 생명주기_lifecycle method 알아보기

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작해 컴포넌트가 페이지에서 사라질 때 끝난다. 라이프사이클 메서드는 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트 업데이트 전과 후에 작업을

2021년 12월 6일
·
0개의 댓글
·
post-thumbnail

[ react ] Ref : DOM에 이름 달기

ref란? 특정 DOM 요소에 어떤 작업을 해야할 때 해당 Element에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 element를 찾아 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다

2021년 12월 5일
·
1개의 댓글
·
post-thumbnail

React Hooks 사용하기(3)_useCallback, useRef

useCallback useCallbackdms useMemo와 상당히 비슷하다. (이전 포스팅 참고) 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하다. useCallback을 통해 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. Average 컴포넌트 내부

2021년 12월 2일
·
0개의 댓글
·
post-thumbnail

React Hooks 사용하기(2)_useReducer, useMemo

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 값으로 업데이트해 주고 싶을 때 사용하는 hook이다. reducer는 현재 state, 그리고 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는

2021년 12월 1일
·
0개의 댓글
·
post-thumbnail

React Hooks 사용하기(1)_useState, useEffect

react 16.8 버전에 새로 도입된 기능이다. 대표적으로 함수형 컴포넌트에서도 상태 관리를 할 수 이쓴 useState, 렌더링 직후 작업을 설정하는 useEffect 등이 있다. useState 는 가장 기본적인 hook이다. useState의 파라미터로 상태의

2021년 12월 1일
·
0개의 댓글
·