데브머리큐

크롬에서는 아래와 같은 코드가 잘 작동한다. new Date('2022-09-27 09:00:00') // Tue Sep 27 2022 09:00:00 GMT+0900 (한국 표준시) new Date('2022/09/27 09:00:00') // Tue Sep 27 2022 09:00:00 GMT+0900 (한국 표준시) 사파리에서는?? ( - ) 붙임표가 문제다 new Date('2022-09-27 09:00:00') // Invalid Date 이렇게 바꿔주자. new Date('2022/09/27 09:00:00')

이번 챕터는 글로 써 내려가는 것보다 그림을 통해 이해하는 게 쉽다. 길을 묻는 방법은 현재의 마을에서 다른 마을로 이동하는 현재의 요구만을 만족시킬 수 있다. 지도는 현재의 목적뿐만 아니라 다양한 목적을 위해 재사용될 수 있다. 즉 지도는 범용적이다. 훌륭한 기능은 훌륭한 소프트웨어를 만들고 훌륭한 구조는 훌륭한 소프트웨어를 만들기 위한 필요조건이다. 게임 플레이어들은 게임 도메인을 캐릭터와 몬스터, 그리고 아이템 간의 관계로 표현한다. 중고 자동차 판매상은 구매되는 자동차와 판매되는 자동차의 교환으로 자동차 도메인을 바라본다. 코드의 구조가 도메인의 구조를 반영하기 때문에 도메인을 이해하면 코드를 이해하기가 수월해진다. 시스템에 할당된 커다란 책임은 시스템 안의 작은 규모의 객체들이 수행해야 하는 더..

여러 내용들이 가리키는 하나의 목적은 소프트웨어의 유연한 변경, 즉 유지보수를 편하게 하는 것 자율성 객체가 어떤 행동을 하는 유일한 이유는 다른 객체로부터 요청을 수신했기 때문이다. 요청을 처리하기 위해 객체가 수행하는 행동을 책임이라고 한다. 자율적인 객체란 스스로의 의지와 판단에 따라 각자 맡은 책임을 수행하는 객체를 의미한다. 모자 장수는 왕에게 증언할 책임은 있지만, 증언을 위한 구체적인 방법이나 절차에 대해서는 최대한의 자유를 누린다. 여기서 문제는 여러 책임들이 모자 장수가 증언하기 위해 선택할 수 있는 자유의 범위를 지나치게 제한한다는 점이다. 두 번째 모자 장수는 자율적으로 책임을 수행할 수 없다. 객체가 자율적이기 위해서는 객체에게 할당되는 책임의 수준 역시 자율적이어야 한다. 그러나 ..

운영 중인 서비스의 웹 바이탈(Web Vitals)과 전반적인 개선점을 주기적으로 체크하며 웹 성능을 모니터링을 해보자. 간단한 웹 성능 측정 방법 2가지 먼저 간단한 방법 2가지를 알아보고 Lighthouse CI를 적용해보자. 개발자 도구 - Performance 개발자 도구를 열고 Performance 탭에 들어가 녹화를 시작하고 여러 가지 동작을 수행한 후 녹화 정지 버튼을 누르면 전반적인 지표들을 아래와 같이 볼 수 있다. 이를 통해 웹 페이지 로드(load) 시점에서 일어나는 블로킹(Blocking)을 해결하고 시각적으로 LCP, CLS 지점들을 확인해 볼 수 있다. 개발자 도구 - Lighthouse Lighthouse는 별도로 어떤 동작을 수행하지 않아도 Analyze Page Load 버..

책을 읽으며 객체지향과 더불어 하나의 컴포넌트가 가지게 되는 역할과 책임에 대해서 계속 생각하게 된다. 재사용성이 가능한 컴포넌트를 만들기 위해서 작은 단위의 컴포넌트로 잘게 쪼개는 상황이 생기는데, 이때 조금 더 각각의 컴포넌트들이 역할과 책임을 작게 작게 가져가게 된다. 많은 설명이 개념 중심이라 배운 것들을 어디서 적용해볼지 고민도 많이 해봐야겠다. 결국에는 직접 설계하고 코드를 짜봐야 내 것이 되니깐... 코드를 빨리 짜는 것이 중요한 게 아니라 유지보수성이 뛰어난 애플리케이션을 구축하기 위해서는 견고한 설계가 우선시 되어야 한다. 타입과 추상화 지하철 승객의 목적 : 하나의 역에서 다른 역으로 이동하는 것 승객이 원하는 것 : 빠르게 목적지에 도착할 수 있는지를 직관적이고 단순하게 보여주는 것 ..

MSW(Mock Service Worker) MSW는 서비스 워커(Service Worker)를 사용하여 실제 요청(Requests)을 중간에서 가로채 API를 Mocking 해주는 라이브러리이다. 기존의 라이브러리들과는 다르게 네트워크 단에서 실제로 요청을 주고받으며 테스트를 진행할 수 있는 장점이 있으며, REST API 및 GraphQL 모두 지원하고 있다. 프런트엔드 개발에서 Mock API는 떼려야 뗄 수 없는 부분인 것 같다. 개발을 위한 목업 데이터 만들고 관련 로직과 컴포넌트를 만든다. API 개발을 기다리며 타입을 작성하고, 여러 가지 테스트를 진행한다. 여러 이슈들은 대부분이 잘못된 API를 호출하거나 에러 처리를 잘못하였을 때 발생하기 때문에 Mock API를 사용하여 디버깅을 해보는..

여러 개념들을 머릿속에서 잘 정립하지 않은 상태에서, 혹은 '개념을 정확히 이해하지 못한 채로 애플리케이션 설계를 하고 있지 않았나?' 반성해본다. 이전에는 뭉뚱그려서 자의적으로 해석했던 여러 개념들을 다시 한번 차곡차곡 정리할 수 있었다. 특히, 상태에 대한 개념과 애플리케이션 설계에서 행동을 중심으로 고민하고 프로그램을 설계해 나아가야 한다는 것이 굉장히 와닿았다. 같이 스터디를 한 친구들도 마찬가지인 것 같다. :) 잘못된 설계는 결국 많은 시간을 더 소요하도록 만드는데, 이런 가장 기본적인 개념이 설계를 함에 있어서 더 좋은 방향으로 가이드해주는 것이 아닐까? 들어가며, 물체가 여러 부분으로 구성되어 있더라도 함께 움직일 경우 그 물체를 하나의 유기적인 단위로 인식한다. 세상을 더 작은 객체로 분..

객체란 현실 세계에 존재하는 사물에 대한 추상화라는 것 이다. 어플리케이션을 개발하면서 객체에 직접적으로 대응되는 실세계의 사물을 발견할 확률은 그다지 높지 않다. 객체지향 설계의 핵심 사상인 '연결완전성'을 설명하는 데 적합한 틀을 제공한다. 객체지향에서 가장 중요한 개념 세가지 역할 책임 협력 1장에서 나오는 카페에서 커피를 주문 후 커피를 받기까지의 과정 일반적으로 하나의 문제를 해결하기 위해 다수의 사람 혹은 역할이 필요하다. 한 사람에 대한 요청이 또 다른 사람에 대한 요청을 유발하는 것이 일반적이다. 요청은 연쇄적이다. 요청 받은 사람 또한 주어진 책임을 다하면서 지식이나 서비스를 제공한다. 요청의 방향과 반대 방향으로 연쇄적으로 전달된다. 역할과 책임 역할이라는 단어는 일반적으로 책임이라는 ..

Nuxt를 사용하면서 발생한 에러. 에러가 불친절해서 Nuxt github에 feature issue를 올렸다. 답변이 굉장히 빨랐는데, 관련 이슈를 훑어보니 비슷하게 생각하는 사람들이 몇몇 있었던 모양이다. Warn needs to be much more specific when there's no root element in · Issue #6476 · nuxt/framework Describe the feature these are vue components in my pages directory // pages/index.vue Home page 1... github.com Nuxt에서도 이를 인지하고 있는 것인지 관련 PR이 올라와있다. feat(nuxt): add warning in dev m..

차트 라이브러리 개발 도중 마주친 에러 - vue2.x 사용 vue-cli-service build --target lib --name index [entry] 뷰 컴포넌트를 라이브러리로 만든 후, 해당 라이브러리를 다른 서비스에서 사용하려했지만 다음과 같은 에러가 발생했다. Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. & /deep/ .class-name {} 비슷한 문제를 스택오버플로우에서 발견 The `/deep/` selector is not working using sass-loader in my VueJS application In my Vue 2.6.10 webpa..