어제보다 더 나은 오늘

지금 다니는 회사는 올 여름 개발팀이 새로 꾸려진 곳으로 구성 인원은 (나를 포함한) FE 신입 2명, BE 1명 등 총 세 명으로 프론트엔드 사수가 없는 곳이다. PM도, 기획도, QA도 없이 세 명이서 일을 분담하여 진행해야 하는 환경이어서 팀 내 개발 문화를 정립해 나가거나 시니어 없이 일을 하는 방법에 대해 늘 관심을 가지고 있던 찰나 지난 우아콘에서 비슷한 고민을 공유해 주는 세션을 발견했다. 30여 분 가량의 세션을 들으며 개인적으로 적용해 보고 싶은 내용들을 정리해 보고자 한다. 시니어 엔지니어란? - 팀 내/외 영향력을 가진다. - 때로는 가장 지루하고 시시한 일(예: 레거시 코드 개선)들을 도맡아 하기도 한다. - 가장 어려운 기술 문제를 풀어낸다. 출처: 윌 라슨, 시니어 엔지니어가 없..

GitHub - labs42io/clean-code-typescript: Clean Code concepts adapted for TypeScript Clean Code concepts adapted for TypeScript. Contribute to labs42io/clean-code-typescript development by creating an account on GitHub. github.com 이렇게 하지 마라(Bad) vs. 이렇게 해라(Good) 버전의 쉬운 예제들로 정리된 클린 코드 예제이다. 예제들을 쭉 보면서 내가 자주 하는 실수만 따로 모아서 정리해 본다. 1. 변수 단락 평가(short circuiting)나 조건부 대신 default arguments 사용 Bad : func..

들어가기에 앞서 https://www.patterns.dev/vanilla/mediator-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통해 서로 통신하도록 한다. 중재자 객체가 요청을 받아 이를 필요로 하는 객체들에게 전달한다. 중재자는 보통 객체나 함수로 구현된다. 사용 예제) 채팅 앱 - 채팅 앱에서 사용자는 메시지를 서로 직접 주고 받지 않는다. - 채팅 서버에 메시지를 전송하고, 서버가 각 사용자에게 메시지를 전달한다. class ChatRoom { logMessage(user, message) { const time = new Date().to..

들어가기에 앞서 https://www.patterns.dev/vanilla/observer-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. Observer 패턴에서는 특정 객체를 구독할 수 있는데, 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다. 이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다. Observable 객체는 보통 3가지 주요 특징을 포함한다. observers : 이벤트가 발생할 때마다 전파할 Observer들의 배열 subscribe() : Observer를 observers 배열에 추가한다. unsubscribe() :..

여러 가지 변화가 많은 한 해였다. 6년 간 프리랜서 통번역사로 일하던 생활을 정리하고, 작년 하반기부터 시작한 부트캠프를 수료했다. 수료식 바로 다음날 포르투갈행 비행길에 올라 3주 간 여행을 하고 돌아와 휴식과 충전의 시간을 가졌다. 이후 한 달여의 취직 준비 기간을 거쳐 웹 프론트엔드 개발자로 입사했다. 감사하게도 1개월 만에 수습 기간을 끝내고 정규직이 되었다. 입사 이후 개인적으로는 1년 동안 두 집 살림을 하던 생활 역시 정리하고, 한 곳에 제대로 둥지를 틀었다. 4년 동안 살던 집을 빼고 이사를 했고, 짐 정리를 전부 마치는데 거의 두 달 반 정도가 걸렸다. 평일에는 여유가 나지 않아 주말 밖에 시간이 없었던 데다가 개인 일정이 있거나 컨디션이 좋지 않아 휴식을 취하거나 하면 한두 주가 그냥..

프로젝트 요구사항 중 수천~수만 개의 문장이 담긴 문서(document)에 문장 별로 책갈피(bookmark)한 문장을 별도 조회할 수 있는 기능이 추가되었고, 이에 대한 화면을 구현하는 중이었다. 서버에서는 다음과 같은 모양의 bookmark 데이터들이 담긴 배열을 보내준다. (참고로 데이터 필드명이나 구조는 프로젝트 코드와 정확히 일치하는 것이 아닌 포스팅을 읽는 이의 이해를 돕기 위한 예시이다.) { id: 1, source: 'Before we begin.', target: '시작하기 전에.', memo: '', document: { id: 3, name: 'Dance with Chance #1', }, } 위와 같은 데이터가 담긴 배열(이하 bookmarks라고 통칭)을 GET 요청으로 받아온 ..

들어가기에 앞서 https://www.patterns.dev/vanilla/module-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 장점 코드를 재사용 가능하면서도 작게 나눌 수 있게 해주어 유지보수하기 쉽다. 명시적으로 export한 값들만 외부에 노출되기 때문에 명시적으로 export하지 않은 변수들은 모듈 내에서만 사용함으로써 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있다. 모듈 패턴을 사용하면 코드의 일부분을 캡슐화할 수 있다. 이는 의도치 않은 전역 변수 할당을 예방할 수 있어 여러 의존 모듈을 사용하거나 네임스페이스를 사용할 때 안전하다. 필요 조건 모든 자바스크립트 런타임에서 ES2015의 ..

타입스크립트에서 type alias와 interface는 여러 차이가 있지만 코드 에디터에서 미리보기로 타입의 형태를 표기하는 방식에 있어 차이가 있다. type과 interface 각각을 살펴보자. 이때 VS Code에서 User 타입에 마우스를 올리면 다음과 같이 User 객체의 모든 프로퍼티를 볼 수 있다. 그렇다면 이번에는 똑같은 형태의 객체를 interface로 정의해 보자. interface로 정의한 객체에 마우스를 올리면 데이터의 형태를 보여주지 않고 interface의 명칭만 보여준다. 한 파일 안에 타입이 정의되어 있지 않은 경우에는 데이터의 구체적인 형태를 파악하기 위해 해당 파일로 이동해야 하는 경우가 많다. 따라서 변수에 연결된 타입이 구체적으로 어떤 모양인지 파악할 때는 타입 별칭..

들어가기에 앞서 https://www.patterns.dev/react/presentational-container-pattern 에 있는 내용을 바탕으로 정리한 포스팅임을 밝힙니다. 비지니스 로직과 뷰(view)를 분리하여 관심사 분리(SoC)를 강제한다. Presentational Componentpresentational 컴포넌트는 props를 통해 데이터를 받는다. 받은 데이터를 화면에 표현하는 것이 컴포넌트의 주요 기능이며, 이 목적을 위해 스타일시트를 포함한다. props를 통해 받은 데이터는 presentational 컴포넌트에 의해 수정되지 않는다. UI 변경을 위한 상태 외에는 상태를 갖지 않는다. presentational 컴포넌트에서는 html과 css, 다른 presentationa..

들어가기에 앞서 https://www.patterns.dev/posts/compound-pattern 에 있는 내용을 바탕으로 정리한 포스팅임을 밝힙니다. 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 한다. select, dropdown, menu 컴포넌트에서 사용할 수 있다. 예제 코드) 사진 목록에 버튼을 추가하여 각각의 사진을 수정하거나 삭제할 수 있게 한다. FlyOut 컴포넌트를 위해서 세 가지 구현이 필요하다. 토글 버튼과 메뉴 리스트를 포함한 Wrapper 메뉴를 토글할 수 있는 Toggle 버튼 메뉴를 포함한 List 컴포넌트 React의 Context API와 컴파운드 패턴을 활용해 예제를 구현해 보자. Step 1) FlyOut 컴포넌트 - 토글 여부에 대한 상태를 포함하고, 자식..