소소한 코딩일지

SaaS라는 단어를 여러 블로그나 자료를 찾아보면서 몇 번 본 적이 있다. 이번 기회에 한번 어떤 단어를 의미하는 것인지 확인해보려고 한다. ** 아래 Reference를 참고하여 쓴 블로그입니다. 더 자세하고 정확한 내용은 아래 Reference를 참고해주세요. 클라우드 컴퓨팅 클라우드 컴퓨팅은 전자기기 자체가 아니라 서버를 통해 데이터 저장, 네트워크, 콘텐츠 사용과 같은 IT 서비스를 한번에 사용할 수 있는 컴퓨팅 환경을 말한다. SaaS SaaS는 서비스형 소프트웨어, Software-as-a-Service의 약자이며, 클라우드 컴퓨팅의 종류 중 하나이다. 클라우드 컴퓨팅에서 최상위 계층에 해당하고, 하위 IaaS, PaaS에서 제공하는 물리적 인프라, 미들웨어, 데이터베이스 관리 기능 등을 제공..

Redux Toolkit (RTK)와 TypeScript를 활용하여 작성한 로직입니다. Redux Thunk Redux Store는 state의 변화에 따라 UI를 업데이트하기 위해서, 동기적으로 로직이 돌아간다. Redux Store에서 비동기적인 로직을 처리할 수 없기 때문에, Middleware를 추가하여 비동기적으로 처리되는 로직을 담당하게 한다. Redux Thunk는 Redux의 Middleware 중 하나로서, store와 상호작용하여 비동기적인 로직을 사용할 수 있다. 이번 프로젝트에서는 Redux Toolkit을 사용하기 때문에, configureStore 메서드 내부에 Redux Thunk가 기본적으로 세팅되어 있다. Create useSelector & useDispatch 우선 여러..

Redux toolkit과 Redux Thunk를 공부하면서 작은 프로젝트를 만들어보고 있었는데, Redux Thunk를 통해 api통신을 하는 과정에서 다음과 같은 에러 메시지를 만났다. 생소한 에러 로그이기도 하고, 현재 Redux Thunk를 공부하는 데 많이 애먹고 있어서 이번 에러 로그에 관한 정보와 해결 방안을 기록해두려고 한다. ## 상황 Redux Thunk를 통해 날씨 API와 GET 통신을 하기 위해서 코드라인을 작성했다. 데이터를 사용하는 쪽에서 console.log를 찍어보니 다음과 같은 에러로그가 나타났다. 에러 로그를 구글링해보니 공식문서의 리덕스 설계 규칙에서 관련 정보를 찾아볼 수 있었다. Non-Serializable 한 State나 Action을 사용하지 말 것. Prom..

동시성이 필요한 이유? 동시성은 결합을 없애는 전략이다. 무엇(what)과 언제(when)을 분리하는 전략이다. 무엇(what)과 언제(when)을 분리하면 애플리케이션 구조와 효율이 극적으로 나아진다. 하나의 구조 내에 더 작은 구조들로 문제를 분리하여 시스템의 이해를 도울 수 있다. 이런 구조적인 개선뿐만 아니라 동시성은 다양한 작업을 동시에 처리함으로써 작업시간 면에서도 상당한 성능 향상을 가져다줄 수 있다. 미신과 오해 동시성은 항상 성능 향상을 가져다 준다. 여러 프로세서가 독립적으로 처리할 계산이 많은 경우에 성능이 높아지지만 안 그런 경우도 많다. 동시성을 구현해도 설계는 변하지 않는다. 단일 스레드 시스템과 다중 스레드 시스템은 다른 아키텍처를 가지고 있다. 동시성 여부에 따라서 시스템의 ..

창발성 남이 모르거나 하지 아니한 것을 처음으로 또는 새롭게 밝혀내거나 이루어 내는 성질. 창발적 설계로 깔끔한 코드를 구현하자 켄트 벡이 제시하는 단순한 설계 네 가지는 소프트웨어 품질을 크게 높여준다고 한다. 모든 테스트를 실행한다. 중복을 없앤다. 프로그래머 의도를 표현한다. 클래스와 메서드 수를 최소로 줄인다. 1. 모든 테스트를 실행한다. 우리는 설계 단계에서 동작하는 시스템을 설계해야 한다. 하지만 그 설계가 실제로 동작하는 것인지 검증하는 단계가 반드시 필요하다. 그래서 테스트 케이스를 작성한다. 테스트 케이스를 작성하는 것만으로도 시스템 설계 품질이 향상될 수 있다. 테스트 케이스가 많을수록 개발자는 수많은 테스트 코드를 작성할 것이고 그 부분에서 추상화, 의존성 주입, 인터페이스와 같은 ..

테스트 주도 아키텍처 구축 코드 수준에서 아키텍처 관심사를 분리할 수 있으면, 테스트 주도 아키텍처를 구축할 수 있게 된다. 테스트 주도 아키텍처를 통해 새로운 기술을 추가하면서 초기의 단순한 아키텍처에서 복잡한 아키텍처로 성장시켜나갈 수 있다. 의사결정을 최적화하라 모듈을 나누고 관심사를 분리하면 지엽적인 관리와 결정이 가능해진다. 모든 부분에서 한 사람이 모든 의사결정을 할 수는 없기 때문에 그 부분에 적합한 사람이 직접 의사결정을 하는 것이 바람직하다. 그리고 빠르게 결정을 내리는 것보다 최대한 많은 정보를 참고하여 최적의 결정을 내리기 위해 충분한 시간을 가지고 기다렸다가 결정을 내리는 방법 또한 바람직한 방법이다. 명백한 가치가 있을 때 표준을 현명하게 사용하라 어떤 한 분야의 표준을 사용한 다..

프런트엔드 프로젝트를 진행하면서 모달을 사용할 때가 너무나도 많다. Modal의 사용성에 대해서 알아보던 중, Portal이라는 개념을 사용해서 모달을 사용하는 경우를 알게 되었다. 그래서 Portal이 어떤 것이고, 실제로 Portal을 활용해서 Modal까지 만들어 보았다. Portal Portal을 들었을 때, 처음 드는 생각은 약간 순간이동 이런 건가? 하는 생각이 들었다. React 공식 문서에 따르면 Portal이란 상위 DOM 계층 외부에 존재하는 DOM 노드로 자식 컴포넌트를 랜더링 시키는 방법이라고 정의되어있다. ReactDOM.createPortal(child, container) 첫 번째 인자로는 Child (자식 컴포넌트) 요소가 들어가고, 두 번째 인자로는 자식 컴포넌트가 담길 상..

클래스 체계 클래스를 정의하면 변수에 대한 내용을 먼저 정의한다. static, public상수를 먼저 정의하고 그다음 private 변수를 정의한다. ( 클래스를 정의하는 부분에 대해서는 전혀 몰라 책의 내용을 그대로 가져왔습니다.) 변수와 유틸리티 함수에 대해서는 최대한 숨기는 것을 원칙으로 한다고 한다. 테스트 코드 작성을 위해서 protected로 선언하여 접근을 허용하기도 하지만 최대한 private으로 정의하는 것을 우선으로 하여 정의한다. (캡슐화) 클래스의 크기 클래스의 크기는 무조건 작으면 작을수록 좋다고 한다. 그렇다면 얼마나 작아야 하는가? 책에서는 클래스가 너무 많은 '책임'을 가지고 있는 것은 부적절하다고 한다. 단일 책임의 원칙 단일 책임의 원칙(Single Responsibil..

현재 진행 중인 프로젝트에서 사용자 요청에 파일 데이터를 포함하여 post 요청을 보내야 하는 상황에서 데이터가 제대로 전달되지 않는 현상이 생겨 오류를 해결하던 도중 Content-Type에 대해 새롭게 알게 된 점을 정리해 보려고 한다. Content-Type Content-Type는 리소스의 media type을 정의하고 나타내기 위해 사용되는 헤더이다. 응답, 요청 양쪽에서 사용하며 응답에 있는 Content-Type 헤더는 클라이언트에게 반환된 콘텐츠의 콘텐츠 유형이 어떤 것인지 알려주고, 요청에 있는 Content-Type 헤더는 서버에게 어떤 유형의 데이터가 실제로 전송된 것인지 알려준다. Content-Type: text/html; charset=utf-8 Content-Type: mult..

TDD 법칙 세 가지 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. 테스트 코드는 실제 구현 코드와 함께 수많은 코드라인이 생성되게 되고, 테스트 코드 관리 부분에 대한 문제를 유발한다. 깨끗한 테스트 코드 유지하기 단순 현재 테스트 과정만을 넘어가기 위해서 아무렇게나 테스트 케이스를 작성하는 것은 문제가 되지 않는다. 하지만 이후 변경사항을 적용하고, 유지 보수 부분에서 이전에 마구 짰던 테스트 케이스는 그 테스트 코드를 유지 보수하는 비용 또한 증가하기 때문에 비효율적으로 작용하게 된다. 테스트 코드도 실제 코드만큼이나 중요하다. 테스트는 유..