리팩터링 기법에서 처음 소개되는 기법은 함수 추출하기이다. 한 마디로 어떤 코드 블록을 찾아서, 독립적인 함수로 추출하고 적절한 이름을 붙여주는 것이다. 그럼 언제해야하나? 1. 길이를 기준으로 삼을 수도 있고, 2. 재사용성을 기준으로 할 수도 있다. (2번이상 사용될 코드는 함수로 만드는 등) 3. 하지만 저자가 추천하는 방법은, "목적과 구현을 분리" 하는 것이 가장 합리적이라고 말한다. 코드를 보고, 무슨일을 하는지에 대해 한참이 걸린다면, 그 부분을 함수로 추출한 뒤에, 무슨일에 대한 걸맞는 이름을 짓는 것이다. 이렇게하면, 나중에 코드를 다시 읽을 때, 함수의 목적이 눈에 확 들어오고, 본문 코드에 대해서는 더 이상 신경 쓸일이 거의 없어진다. 즉, 슈도코드만큼 코드가 무슨일을 하는지 읽힐정도..
함수 추출하기는 마틴 파울러가 가장 많이 사용하는 리팩터링 중 하나이다. 코드 조각을 찾아 무슨일을 하는지 파악한 다음, 독립된 함수로 추출하고, 목적에 맞는 이름을 붙인다. 코드를 언제 독립된 함수로 묶어야 할지에 관한 의견은 수없이 많다. 먼저, 길이를 기준으로 삼을 수 있다. 가령 함수 하나가 한 화면을 넘어가면 안 된다는 규칙을 떠올릴 수 있다. 재사용성을 기준으로 할 수도 있다. 두번이상 사용될 코드는 함수로 만들고, 한 번만 쓰이는 코드는 인라인 상태로 놔두는 것이다. 하지만 저자는 "목적과 구현을 분리"하는 방식이 가장 합리적인 기준이라고 한다. 코드를 보고 무슨일을 하는지 파악하는데 한참이 걸린다면, 그 부분을 함수로 추출한 뒤, 무슨 일에 걸맞는 이름을 짓는다 이렇게 해두면 나중에 코드를..
- 리팩터링 2판 중 리팩터링은 분명 가치 있는 도구지만, 그것만으로는 부족하다. 리팩터링을 제대로 하려면 불가피하게 저지르는 실수를 잡아주는 견고한 테스트 suite가 뒷받침해야한다. 좋은 테스트를 작성하는 일은 개발 효율을 높여준다. 테스트 작성에 시간을 뺴앗기는데 효율이 높아진다니? 직관에 어긋나는 효과라서 다른 프로그래머들 처럼 처음 깨달았을 때는 상당히 놀랬다. 그럼 효율이 좋아지는 이유를 함께 살펴보자. 프로그래머들이 어떻게 일하는지 가만히 살펴보면, 실제로 코드를 작성하는 시간의 비중은 그리 크지 않음을 발견할 수 있다. 현재 상황을 파악하기도 하고, 실게를 고민하기도 한다. 물론 대부분의 시간은 디버깅에 쓴다. 여러분도 디버깅하느라 밤늦게까지 고생한 경험이 있을 것이다. 프로그래머라면 누구..
우아한 테크코스 미션을 진행하면서 react를 아래와 같이 js로만 작성했었는데, https://github.com/woowacourse/react-shopping-cart/pull/4 레벨2가 끝나기전 typescript를 적용해보고자, 개인적으로 ts로 마이그레이션했다. https://github.com/zereight/ts-react-shopping-cart 아직 테스트코드는 마이그레이션하지 않았고, interface 등 중복 코드들도 리팩토링하지 않은 상태에다가, 디렉토리 구조도 쪼금 변경한 상태이지만 기능은 정상적으로 동작하는 선에서 모두 변환을 하였으므로 ㅎ 느낀점을 정리한다. 1. FC, VFC 다른 크루들의 코드를 보니까 컴포넌트의 타입을 React.FC, React.VFC를 많이 사용하는..
ts-watch를 사용하는데 Require stack: - /node_modules/tsc-watch/lib/tsc-watch.js /node_modules/tsc-watch/index.js 와 같은 에러가 뜬다면, 아마도 typescript가 global로 설정되어있고 해당 워크스페이스에 typescript가 설치가 안되어 있을 것이다. yarn add global typescript말고 yarn add typescript를 해주자.
이제 리액트의 핵심기능 중 하나인 createElement를 구현해보자. 코드를 먼저보자! const TinyReact = (() => { const createElement = (type, attrs = {}, ...children) => { // 최하위 자식부터 돌 수 있도록 child를 재귀로 구현해야함. const childElements = []; children.forEach((child) => { if (child !== null && child instanceof Object) { childElements.push(child); } else { if (typeof child !== "boolean") { childElements.push(createElement("text", { textC..
리액트는 JSX라는 문법을 사용합니다. 하지만 자바스크립트는 해당 문법을 모릅니다! "저는 리액트 쓰는데 jsx써도 잘만 되던데요?" 맞다. 왜냐하면 바벨에서 jsx문법을 읽을 수 있기 때문이다. 실제 바벨로 번역해보자 a를 보면 jsx문법인데 우측에서 React.createElement로 자동 변환되어 적용된것을 볼 수 있다. 우리는 React라고 말해주지도 않았는데, JSX문법을 보고 바로 React.createElement로 바꿔버린 것이다! 하지만 우리는 JSX 문법을 쓰고 React는 우리가 만들어 나갈 것이기 때문에 별도의 셋팅이 필요하다. 위 코드에는 생략되어 있지만 위 코드는 아래와 같다. 파일의 최상단에 주석으로, jsx문법에 사용할 함수를 우리가 직접 정할 수 있다. 기본값으로 Reac..
리액트는 어떻게 동작하는 걸까? 아무래도 라이브러리를 뜯어보지 않는 이상은 개념적으로만 동작 방식을 알고 있을 것이다. 좀 더 완벽한 이해를 위해서, 이번 포스팅 시리즈를 통해 (완벽하지는 않지만) 리액트 기능을 비슷하게 따라할 수 있도록 구현을 하는 방법을 차례대로 포스팅할 계획이다. 셋팅 위 폴더를 다운받아서 프로젝트를 초기 셋팅을 하자. scripts 폴더엔 babel이, style 폴더안에는 css 들이, dom.js에는 react 로직이 들어갈 것이고 (예정), index.js에는 실제로 테스트할 수 있는 코드들이 들어갈 것이다. (예정) 그리고 index.html에서는 그 파일들을 사용하고 있으며 참고로 dom.js, index.js는 script type이 text/babel이다. 실제로 서..
