전체 글 163

도서 리뷰 시리즈 - 클린 코드

출처 『클린 코드』 로버트 C. 마틴 저/박재호, 이해영 역 | 인사이트(insight) | 2013년 12월 한 줄 리뷰 군더더기 없는 코드를 작성하고 싶을 때 스승이 되어주는 도서 6장 객체와 자료 구조 자료/객체 비대칭 객체는 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다. 자료 구조는 자료를 그대로 공개하며 별 다른 함수는 제공하지 않는 다. 그래서 객체와 자료 구조는 근본적으로 양분된다. 절차적인 코드는 기존 자료 구조를 변경하지 않으면서 새 함수를 추가하기 쉽다. 반면, 객체 지향 코드는 기존 함수를 변경하지 않으면서 새 클래스를 추가하기 쉽다. 반대쪽도 참이다. 절차적인 코드는 새로운 자료 구조를 추가하기 어렵다. 그러려면 모든 함수를 고쳐야 한다. 객체 지향 코드는 새로운 함수..

효율적인 회의를 위한 퍼실리테이션

내 시간을 효율적으로 관리하는 것은 스스로가 제어 가능하므로 쉬운 일이다. 하지만 회의를 할 때 상대방의 시간을 효율적으로 사용하는 것은 어려운 일이다. 회의 시간이 길다고 좋은 결과를 도출하는 것이 아니다. 회의 참석자가 많다고 해서 좋은 아이디어가 나오는 것이 아니다. 결국, 적절한 시간과 참여가 좋은 결과를 도출할 수 있다. 회의를 효율적으로 하고 참여를 유도할 수 있는 기능이 퍼실리테이션이다. 소모적인 시간이 아닌 의미 있는 회의를 하기 위해 퍼실리테이션은 중요하다. 그래서 퍼실리테이션을 정리했다. 글에 비유적인 표현이 많이 사용되기 때문에 상황에 적절히 활용하는 것을 권한다. 퍼실리테이션 퍼실리테이션이란 퍼실리테이션은 사전적으로 "쉽게 하다" "용이하게 하다"라고 한다. 퍼실리테이션은 여러 사람..

레거시 코드 리팩터링 시리즈(4/5) 조건문

조건문 동일한 값을 비교할 경우 if/else로 작성되면 에러코드에 따른 동작을 파악하기 위해 시선이 Z형태(errorCode -> 211 -> navigate)로 이동되어 한번에 읽기 어렵게 한다. if (errorCode === 211) { navigate('/signup') } else if (errorCode === 208) { navigate('/user/registration') } else if (errorCode === 202) { navigate('/home') } else if (errorCode === 212 || errorCode === 213) { navigate('/signup') } else { navigate('/login') } switch/case로 작성되면 에러코드와 동..

레거시 코드 리팩터링 시리즈(3/5) 객체

객체 객체 추출하여 다른 객체 만들기 객체에서 특정한 프로퍼티만 추출하여 다른 객체를 만들고 싶을 때가 있다. 새로운 객체를 만들어 객체의 값을 할당하는 형태이다. 이 코드는 이해하기 어렵지 않지만 chatBot 변수사용의 중복이 발생한다. const httpBody = { name: chatBot.name, fallbacks: chatBot.fallbacks, config: chatBot.config, tags: chatBot.tags, } 해체를 통해 프로퍼티을 추출하고 할당하는 방식을 사용하면 중복을 줄일 수 있다. const {name, fallbacks, config, tags} = chatBot const httpBody = {name, fallbacks, config, tags} 만약에 프로..

레거시 코드 리팩터링 시리즈(2/5) 스타일과 문구

스타일과 문구 스타일과 문구는 정책적인 사항이라고 볼 수 있다. 스타일은 디자인 정책, 문구는 용어 정책이다. 스타일은 색상, 요소의 위치, 라운딩값 등 시각적인 요소를 의미한다. 스타일은 디자이너의 의견이 반영된 디자인 정책이다. 문구는 타이틀, 가이드 문구, 툴팁 문구, 일시적인 오류에 따른 문구 등 문구에 관련된 요소들을 의미한다. 문구는 기획자 또는 테크니컬 라이터의 의견이 반영된 용어 정책이다. 차트 라이브러리 옵션 차트 라이브러리에 사용되는 옵션값도 디자인 정책에 해당된다. 이러한 정책 사항들은 로직이 있는 코드와 같이 기술되면 불필요하게 해석하게 된다. const chartOption = { label: { xAxis: {x: 10, y: 10, color: '#000'}, yAxis: {x..

레거시 코드 리팩터링 시리즈(1/5)

글의 목적 프로젝트 코드에 레거시 코드가 존재하는 데 모든 레거시 코드를 이해하기 쉬운 코드로 작성이 불가능한가의 생각으로 각 코드별로 방법에 대한 정리를 시작했다. 프로젝트 코드 하나하나 확인한 뒤 이해하기 힘든 부분을 찾아 이해하기 쉬운 코드로 바꾸는 방법을 작성해봤다. 다른 사람이 작성한 코드를 보고 개선하는 것만큼 현실세계에 발생할 만한 사항이다. 용어정의 테크니컬 라이터 소프트웨어의 전문적인 지식을 비전문가에게 이해하기 쉽게 전달하는 매체(음성, 영상, 글)을 생산하는 역할이다. 책임연쇄패턴 문제를 처리에 적합한 요소를 연쇄적으로 찾아 책임을 부여하는 패턴이다. 카테고리 스타일과 문구 객체 조건문 배열과 반복문 레거시 코드 리팩터링 시리즈(1/5) 글의 목적 프로젝트 코드에 레거시 코드가 존재하..

크롬 개발자 도구에서 네트워크탭 이해하기

네트워크 탭 열기 네트워크 탭은 크롬 개발자 도구에 있습니다. Ctrl + Shift + i 단축키나 메뉴를 통해서 열 수 있습니다. 네트워크 탭 네트워크 탭에서는 웹 사이트의 이미지, 영상, HTML, CSS, JS 등과 같은 리소스를 확인 할 수 있습니다. 대체로 리소스를 정상적으로 다운로드 했는 지 확인하거나 리소스의 용량과 다운로드 시간을 확인해서 최적화를 진행합니다. Disable cache: HTTP Cache 사용 유무를 체크합니다. No throttling: 네트워크 속도를 조절해서 느린 네트워크 환경을 테스트할 때 사용합니다. Fetch/XHR: JS를 통해서 HTTP Request/Response를 확인 할 수 있습니다. WS: WebSocket 을 확인 할 수 있습니다. 네크워크 속도..

RAIL 모델 - 웹 성능 최적화 기본

RAIL은 웹 사이트의 주요 작업인 Response, Animation, Idle, Load에서 각 단어의 첫번째 글자를 따서 RAIL로 네이밍되었습니다. RAIL을 통해서 사용자의 경험을 주요 작업으로 나누고 각각의 성능 목표를 정의하는 데 도움이 됩니다. RAIL에서 권장하는 성능 목표는 사용자가 지연을 인식하는 방식에 대한 컨텍스트 및 UX 연구를 기반으로 정의되었습니다. Response Response는 버튼 클릭, 애니메이션 시작과 같은 대부분의 입력 후 반응하는 것을 의미합니다. 터치 드래그와 스크롤은 Animation에 해당합니다. 사용자가 버튼 클릭과 같이 입력이 시작하고 반응이 즉각적인 것처럼 느끼도록 하려면 100ms 이내에 반응해야 합니다. 100ms 이내 반응하기 위해서 입력과 관련..

웹 성능 모니터링 방식 - Synthetic Monitoring과 Real User Monitoring(RUM)

웹 성능 모니터링 방식은 Synthetic Monitoring과 Real User Monitoring(RUM)로 두 가지가 있습니다. 두 접근 방식의 차이점은 다음과 같습니다. Synthetic Monitoring Synthetic Monitoring은 일관된 환경에서 자동화 도구를 사용해서 성능을 모니터링하는 방법입니다. 사용자가 웹 앱을 통해 이동할 수 있는 경로를 시뮬레이션하고 시뮬레이터가 측정한 성능을 모니터링하는 것도 Synthetic Monitoring에 포함됩니다. Synthetic Monitoring은 사용자가 성능 이슈를 감지하기 전에 인지할 수 있고, 경쟁사 벤치마킹할 때 활용할 수 있습니다. Synthetic Monitoring은 WebPageTest.org, PageSpeed Ins..

Web Vitals - 웹 성능 최적화 기본

Web Vitals은 좋은 UX를 제공하기 위해 Google에서 제안하는 성능 품질 지침입니다. Google에서는 기존에 제공한 도구와 측정 항목은 숙련도에 따라서 UX 품질을 파악하기 힘들다는 사실을 발견했습니다. 그래서 Web Vitals은 환경을 단순화해서 품질 개선에 도움이 되는 것에 초점을 맞췄습니다. Web Vitals에서 로딩 시간, 상호작용 시간, 시각적 변화량 항목에 대한 좋음/나쁨을 판단할 수 있는 숫자 범위를 가이드합니다. 그중에 중요한 지표는 Core Web Vitals로 구분하고 있습니다. 로딩 시간 측정 항목 First Contentful Paint (FCP) 페이지 로드가 시작된 후 페이지 콘텐츠의 일부가 화면에 렌더링 될 때까지의 시간을 측정합니다. 여기서 콘텐츠는 텍스트, ..

[11일차] 방문자 | 행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴

출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015. [11일차] 방문자(Visitor) 행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴 타입스크립트로 설명하는 GoF 디자인 패턴의 행동 패턴 11일만에 끝내기 챌린지 방문자란? 객체 구조를 이루는 원소에 대해 수행할 연산을 표현하는 패턴으로, 연산을 적용할 원소의 클래스를 변경하지 않고도 새로운 연산을 정의할 수 있게 한다. 활용성 객체 구조를 정의한 클래스는 거의 변하지 않지만, 전체 구조에 걸쳐 새로운 연산을 추가하고 싶을 때 구조 및 구현 interface ElementClass { accept(visitor: Visitor): void } class Con..

728x90