리펙토링을 진행하게된 계기 방치하고 있던 프로젝트가 있었다. 이 프로젝트를 진행할 때 꽤나 공을 들인 프로젝트였는데 코테준비다, 시간이 없다 등 지금 생각하면 배부른 핑개를 대며 프로젝트를 방치했었다. 하지만, 최근 원티드 프리온보딩을 통한 좋은 코드와 SOLID 원칙에 대한 강의를 듣고 프로젝트의 코드들을 전체적으로 살펴봤다. 지금 보니 아주 난장판이였다. import { ReactComponent as GamaldaSVG } from 'assets/svg/gamaldalogo.svg'; import naverLogin from 'assets/png/naver_login.png'; import { useEffect, useRef } from 'react'; import { Link } from 'rea..
순수 함수
1. 함수란? 함수는 자바스크립트에서 가장 중요한 핵심이다. 스코프, 실행 컨택스트, 클로저, 메서드, this, 프로토타입, 모듈화, 생성자 함수에 의한 객체 생성 등이 모두 함수과 관련되어있다. 함수는 동작하고자 하는 동작을 미리 만들어둔 기계와 같다. 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아 출력하게 된다. 이때 입력으로 인수를 매개변수로 받게된다. 출력은 반환값을 출력하게 된다. 함수는 함수 정의를 통해 생성한다. 위의 사진은 함수 선언의 예시이며, 다양한 방법으로 함수를 선언할 수 있다. 함수는 정의한뒤 함수 호출을 통해 함수를 실행하게된다. 함수를 호출하면 코드를 실행하게된다. 이때 ..
코드가 복잡해지는 이유 이번 강의에서는 우리의 코드가 복잡해지는 이유는 액션과 계산의 분리가 되지 않았음에 초점이 맞춰있다. 계산과 액션을 구분하라 식(Expression): 값을 생성하며 이를 반환함. 또한 다른 식의 일부가 될 수 있음. 문(Statement): 프로그램의 행동을 지시하며 값을 반환하지 않음. 의미론적으로는 코드의 흐름을 제어하거나 변수를 선언하는 등의 역할을 수행함. 1. 순수 함수 / 부수 효과 순수 효과란 입력에 대해 항상 동일한 값을 반환하며, 부수 효과가 없는 함수이다. const add = (a, b) => a + b 부수 효과란 함수의 핵심 목적에서 벗어나 외부 세계에 영향을 주는 행위가 포함된 함수이다. const asyncCall = async () => { retur..