콘요맘떼 개발일지

서비스가 성장하여 사용자의 수, 트래픽이 증가하면 어느덧 기존의 서버는 한계에 다다르고 인프라를 확장해야 할 순간이 다가온다. 이럴 때 서버를 업그레이드하는 방법으로 Scale up과 Scale out 두 가지 방법이 존재한다. 스케일 업 (Scale up) 스케일 업은 기존 서버의 사양을 업그레이드하는 것을 말한다. 서버에 디스크를 추가하거나 CPU 혹은 메모리 등을 업그레이드하는 방법을 예시로 들 수 있다. 기존 서버의 성능을 향상시키기 때문에 수직 스케일링이라고 부르기도 한다. 스케일 업의 장점 (1) 하나의 서버만을 관리하면 되므로 편리하다. (2) 추가적인 네트워크 연결이 필요하지 않다. (3) 성능을 업그레이드하는 과정이 상대적으로 수월하다. 스케일 업의 단점 (1) 성능 향상에 한계가 존재한..

Monolithic Architecture MSA에 대해 이해하기 위해서는 우선적으로 모놀리틱 아키텍쳐에 대한 이해가 필요하다. 모놀리틱 아키텍쳐는 MSA가 도입되기 이전에 활용하던 전통적인 개발 방식으로 전체 어플리케이션을 하나의 덩어리로 개발하는 것을 말한다. 모놀리틱 아키텍쳐가 지니는 장점들은 다음과 같다. 1. 시스템 전체의 개발 환경이 동일하다는 점에서 개발이 편리하다. 2. 배포, 테스트 등 모든 과정이 하나의 어플리케이션에 대해 이루어지기 때문에 운영 관리가 편리하다. (특히 E2E 테스트에서 강점을 가진다.) 그러나 시스템의 규모가 일정 수준 이상이 되면 모놀리틱 아키텍쳐는 수많은 한계를 맞닥뜨린다. 1. 부분 장애가 전체 서비스 장애로 이어질 수 있다. 2. 빌드 및 테스트 소요 비용이 ..

Summary 주제 : 패스트푸드 매장을 위한 고객용-매장용 키오스크 시스템 제작 개발기간 : 2020-11 ~ 2020-12 참여인원 : 5명 프로젝트 목표 : 고객주문모듈, 주문관리모듈, 매출관리모듈, DB로 구성된 패스트푸드 매장용 키오스크 시스템을 구축하면서 폭포수 개발 모델을 체험한다. 깃허브 링크 : https://github.com/aroundthistime/kiosk_clone Stack (본인이 사용한 스택에 한해 Bold 처리하였습니다.) Pug Scss Gulp MongoDB (mongoose) Express NodeJS Content 주문진행을 하는 고객용 키오스크와 주문처리·매출관리·메뉴관리를 하는 매장용 키오스크, 그리고 완료된 주문을 알려주는 알림판 크게 세 가지 시스템을 웹 ..

Summary 주제 : 날짜별로 할 일을 기록하고 그 목록을 관리할 수 있는 투두 애플리케이션 개발 개발기간 : 2022-02 ~ 2021-02 (약 2주) 참여인원 : 1명 프로젝트 목표 : 리액트 네이티브로 투두 애플리케이션을 개발하면서 Redux Toolkit 라이브러리와 custom hook 기반 page-usePage 패턴 개발 방식을 익힌다. 깃허브 링크 : https://github.com/aroundthistime/Todo_App Stack Typescript React Native React Query Emotion Redux Toolkit Content 날짜별로 할 일을 기록하고 점검할 수 있는 투두 애플리케이션이다. 처음 애플리케이션을 실행하면 오픈 API를 통해 가져온 명언을 확인할..

Summary 주제 : 날짜별로 할 일을 기록하고 그 목록을 관리할 수 있는 투두 애플리케이션 개발 개발기간 : 2022-02 ~ 2021-02 (약 2주) 참여인원 : 1명 프로젝트 목표 : 리액트 네이티브로 투두 애플리케이션을 개발하면서 Redux Toolkit 라이브러리와 custom hook 기반 page-usePage 패턴 개발 방식을 익힌다. 깃허브 링크 : https://github.com/aroundthistime/lol_match_history Stack Typescript ReactJS React Query Scss Webpack Express Content 전적은 게임 유저의 이름을 통해 검색할 수 있으며 페이지는 홈화면과 전적화면 두 가지로 구성된다. 전적화면에서는 유저의 프로필, ..

React.memo( ) React.memo( )는 리액트에서 제공하는 고차함수(HOC)이다. React.memo( )로 컴포넌트를 감싸주면 그 결과물을 메모리에 기억하여 재사용한다. 그를 통해 불필요한 리렌더링을 방지할 수 있기 때문에 성능적인 부분을 개선시킬 수 있다. 그러나 무분별한 React.memo( )의 남발은 렌더링 비용보다 메모이제이션 비용이 비싸져서 오히려 프로그램의 성능을 저하시킬 수도 있다. 따라서 적절한 순간에만 React.memo( )를 적용하는 것이 중요하다. 1. React.memo( )의 비교 방법 React.memo( )는 기본적으로 얕은 비교를 통해 Props 객체를 비교한다. 만약 Props를 비교하는 Custom 메소드를 지정해주고 싶다면 다음과 같이 React.mem..

고차 컴포넌트 (HOC, Higher Order Component) 1. 고계함수 (HOF, Higher Order Function) 이미 많은 사람들이 알고 있겠지만 리액트는 함수형 프로그래밍을 지향한다. 그렇기 때문에 리액트의 컴포넌트는 입력값인 props를 전달받고 ReactElement를 반환하는 함수의 형태를 띄고 있으며 상태 관리 라이브러리인 리덕스는 순수 함수와 불변 스토어를 강조하며 함수형에 가까운 프로그래밍 스타일을 권장한다. 리액트의 HOC 역시 함수형 프로그래밍의 개념 중 하나인 HOF에서 유래하였다. HOF는 함수를 인자로 받아서 또 다른 함수를 반환하는 함수를 뜻한다. 함수형 프로그래밍에서는 작은 단위의 범용적 함수를 만든 후 그를 조합하여 재사용가능한 프로그래밍을 구현한다. HO..

TIL (Today I Learned) 2022.02.22 오늘 읽은 범위 3장. 함수 책에서 기억하고 싶은 내용을 써보세요. if 문/else 문/while 문 등에 들어가는 블록은 한 줄이어야 한다는 의미다. 대개 거기서 함수를 호출한다. 함수에서 들여쓰기 수준은 1단이나 2단을 넘어서면 안 된다. 그래야 함수는 읽고 이해하기 쉬워진다. (p.44) 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면 그 함수는 여러 작업을 하는 셈이다. (p.45) 함수가 확시히 '한 가지' 작업만 하려면 함수 내 모든 문장의 추상화 수준이 동일해야 한다. (p.45) 함수에서 이상적인 인수 개수는 0개(무항)다. 다음은 1개(단항)고, 다음은 가능한 피하는 편이 좋다. 4개 이상(다항)은 ..

TIL (Today I Learned) 2022.02.21 오늘 읽은 범위 2장. 의미 있는 이름 책에서 기억하고 싶은 내용을 써보세요. 프로그래머는 코드에 그릇된 단서를 남겨서는 안 된다. 실제 List가 아니라면 List라 명명하지 않는다. 프로그래머에게 List라는 단어는 특수한 의미다. (p.23) 연속된 숫자를 덧붙이거나 불용어를 추가하는 방식은 적절하지 못하다. 이름이 달라야 한다면 의미도 달라져야 한다. (p.26) 이름 길이는 범위 크기에 비례해야 한다. (p.28) 클래스나 객체의 이름에서 Manager, Processor, Data, Info 등과 같은 단어는 피하고 동사는 사용하지 않는다. (p.32) javabean 표준을 따르면 접근자, 변경자, 조건자는 앞에 get, set, i..

TIL (Today I Learned) 2022.02.20 오늘 읽은 범위 1장. 깨끗한 코드 책에서 기억하고 싶은 내용을 써보세요. 나쁜 코드는 너무 많은 일을 하려 애쓰다가 의도가 뒤섞이고 목적이 흐려진다. 깨끗한 코드는 한 가지에 '집중'한다. (p.10) 테스트 케이스가 없는 코드는 깨끗한 코드가 아니다. (p.12) 모든 테스트를 통과한다. 중복이 없다. 시스템 내 모든 설계 아이디어를 표현한다. 클래스, 메서드, 함수 등을 최대한 줄인다. (p.13) SRP (The Single Responsibility Principle) : 클래스에는 한 가지, 단 한 가지 변경 이유만 존재해야 한다. (p.19) OCP (The Open Closed Principle) : 클래스는 확장에 열려 있어야 하..