문익점 스토리

안녕하세요. 문익점이에요. 문익점에 대해 아시나요? 목화씨를 가져온 문익점이요!

코딩

리팩터링 2판(마틴 파울러 저)을 읽고 작성한 리뷰입니다. 앞선 1, 2장에선 리팩토링의 예시와 왜 리팩토링이 필요한지에 대한 내용과 대략적인 적용 방법이다. 3장에선 대체 이 리팩터링을 언제 적용 할 까?에 대한 내용이다. 리팩터링을 해야되는 기준을 명확하게 규정 할 수 없다. 이 책에서는 악취가 나면 바로 리팩터링할 시점이라고 주장한다. 여러가지 예시가 등장하는데 현재 나의 개발 경험상 몇 가지만 공감 할 수 있었다. 나머지는 경험이 부족한 탓인지 미래에 대한 예방이라고 생각하고 대충 읽고 넘어갔다. 하지만 몇 가지 예시 중에선 정말 공감이 됬다. 역시 겪어보고 해결책을 찾아야 잘 읽히는것 같다. 악취의 몇 가지 종류 이름 코드를 표현하는 데 가장 중요한 요소 "이름"이다. 모듈 명, 클래스 명, 함..

코딩

리팩터링 2판(마틴 파울러 저)을 읽고 작성한 리뷰입니다. 1장에선 리팩토링에 대한 예시를 간단히 알아봤다면, 2장에선 리팩토링의 전반적인 원칙에 대해 설명하고 있고, 리팩터링이 왜 필요한지에 대해 알려주고 있다. 리팩터링을 하는 이유 리팩터링을 진행하지 않으면 구조가 썩는다. 그때그때 요구(단기목표)에 맞게만 수정 된 코드는 전체적인 설계에 부정적인 영향을 미치고 이러한 코드들이 많아 질 수록 더욱 설계는 빠르게 썩는다. 그래서 주기적으로 이해하기 쉽고 수정하기 쉽게 만들기 위해서 리팩터링을 진행해야 한다. 비지니스를 이해하기 쉬워진다. 프로그래밍은 사람이 컴퓨터에게 어떠한 일(비지니스 로직)을 시킬 지 코드로 알려주는 일이다. 그리고 이 코드를 수정하거나 추가하는 사람은 사람이다. 여기서 리팩토링이 ..

코딩

리팩터링 2판(마틴 파울러 저)을 읽고 작성한 리뷰입니다. 이 책을 읽게 된 계기 이번 년도에 프론트엔드 신입으로 입사하게 됬다. 새로 시작하는 프로젝트를 맡게됬고 같이 작업하는 프론트엔드 개발자 분도 신입이라 개인 프로젝트를 만들었던 방식 그대로 웹 프론트엔드를 작업했다. 현업을 경험 한 사람은 알겠지만 요구 사항은 수시로 변경되고 그에 따른 변화를 빠르게 반영해야 된다. 변화를 반영만 해서는 안되고 버그까지 잡아야 하기 때문에 코드가 수정이 쉬워야 하고 테스트가 가능해야 된다. 하지만 나는 전혀 이러한 코드를 생산 할 줄 몰랐으며 당연히 조그만한 변화에도 구조가 크게 변경되어야 했었고 버그는 일상이였다. 나는 그레서 더 나은 코드에 대해 고민하게 되었고 책을 하나 찾게 되었다. 바로 마틴 파울러의 리..

코딩

Javascript는 ES6에서 Iteration protocol이 추가되었습니다. Iterable protocol는 JavaScript 객체를 for..in 와 같은 구문에서 어떠한 값이 반복되는 지와 같은 행위를 정의하거나 커스텀마이즈 할 수 있습니다. 이렇게되서 반복 할 수 있는 객체를 iterable이다.라고 하는데요. iterable 하다는건 무엇일까요? Iterable Protocol Iterable하다는건 객체는 반드시 @@iterator method를 가져야합니다. 이는 객체의 속성에 Symbol.iterator를 가져아하고 값으로는 object를 반환하고 Iterator protocol를 만족해야합니다. es6에 기본적으로 내장된 생성자 중 Iterable 객체를 만들어내는, 즉 Symb..

코딩

Promise 객체는 자바스크립트 비동기 처리에 사용됩니다. Javascript에서는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라고 합니다. 간단한 예시 서버에서 기사 정보를 받아와서 랜더링 하는 코드입니다. 이와 같은 경우에는 서버로 부터 기사 정보를 받은 뒤 랜더링을 해야됩니다. 하지만 자바스크립트는 바로 다음 코드를 실행시키게 됩니다. let response = fetch("/article/fetch/post/user"); console.log(response) 기사 정보가 로그에 찍히길 기대와는 다르게 Promise 객체가 찍히는 걸 볼 수 있습니다. 기사 정보를 가져오는 처리를 기다리지 않고 바로 log 함수를 실행시키기 때문인데요. ..

코딩

우리는 브라우저에서 웹 페이지를 볼 수 있습니다. 이 웹 페이지를 사용자에게 보여 줄 때, 즉 웹 페이지를 랜더링 하는 방식에는 여러가지가 있는데요. 그 중 가장 많이 거론되는 CSR과 SSR 관한 포스팅입니다. CSR FCP: First Contentful Paint - 요청 콘텐츠(기사 본문 등)가 표시되는 시점 TTI: Time To Interactive - 페이지가 상호작용 가능하게 될 때까지의 시간 (이벤트 발생 등). CSR(Client Side Rendering)은 JavaScript를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미합니다. 맨 처음 서버로 HTML를 응답 받습니다. 그 다음 HTML에 링크 된 js 파일들을 다운로드 받게 되는데요. 예시로 위 이미지를 보시면 bun..

코딩

웹 브라우저는 웹 서버와 통신하여 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스입니다. 웹 서버에서 파일을 받아와서 사용자에게 시각적으로 보여주고 소통하는 소프트웨어라고 생각하면 됩니다. 이 브라우저는 웹 서버에서 가져온 웹 페이지를 어떻게 시각적으로 보여줄까요? 이 포스팅은 브라우저의 동작 원리에 대해 설명합니다. 랜더링 엔진 브라우저의 구성요소 중 하나인 랜더링 엔진은 웹 페이지를 그리는데 핵심적인 역활을 합니다. 랜더링 엔진은 웹 페이지를 랜더링 하기 위해 요청 받은 HTML 및 XML 문서등을 파싱하고 트리 구조로 만드는데요. 이 트리 생성이 끝나면 어떻게 화면에 위치 할 것인지를 트리를 따라 계산하게 되고 마지막으로 화면에 픽셀을 그리며 사용자가 웹 페이지를 볼 수 있도록 합니다. 여..

코딩

window open으로 띄운 팝업에서 opener를 통해 함수를 실행시키기 위해 document에 함수를 등록해야한다(postMessage로도 가능). 이때 CRA typescript template으로 만들게되면 Document가 명세되어 있어 document이 가질 수 있는 맴버변수, 메소드들이 등록되어 있다. 여기서 함수를 등록하려면 에디터딴에서 오류가 발생한다. interface DocumentWithNoti extends Document { setPushNotification(enable: boolean, token: string): void; } 위 처럼 Document를 커스텀 할 수가 없으니 상속을 이용하여 따로 정의해줘야 한다. 그 다음 사용은 아래와 같이 사용한다. (document ..