Styled-components css prop 현재 사이드프로젝트를 진행하면서 styled-components 에서 css prop 을 사용하고 있습니다. css prop 은 Styled components v4 부터 지원하게 되었는데요, 사실 @emotion 에서 사용하던 방식이라고 합니다. Styled-components 와 @emotion 이 경쟁관계를 가져가면서 css prop 을 추가적으로 지원하게 된 셈인데요, HTML 태그를 명시적으로 확인할 수 있고, 태그를 단순 반복으로 생성하는 styled 방식에서 벗어나 새로운 방식을 사용해보기 위해 도입하였습니다. // 이 코드는 props.theme.colors.text}; `} /> // 아래 코드와 동일합니다. import styled fro..

저번 글에서는 createElement 함수를 만들고, JSX 문법을 사용하여 가독성을 높여 DOM Element 를 생성하는 방식을 만들었다. 이번 글에서는 상태관리에 대해서 다룰 예정이다. 상태관리가 필요한 이유 내가 생각하는 상태란 사용자가 앱을 사용하면서 하는 행동에 의해 변경되는 값이고, 그 행동에 의해 변경된 UI 를 제공하는 값 이라고 생각한다. 예를들어, 간단히 만든 Todo 앱에서 화면에 보여지는 Todo 목록은 상태라고 볼 수 있다. 사용자가 Add 버튼을 누르면, input 에 입력된 값이 화면에 추가되어 보여지기를 기대하기 때문이다. 어떻게 변경된 UI 를 제공할 수 있을까? DOM Element 추가라면 appendChild 를 하고, 삭제라면 removeChild 를 하면 될까?..

HTML 태그를 JavaScript 로 표현하기 이전에 카카오페이지 클론 을 할 때, HTML 태그를 모두 작성하고, 그 태그를 JavaScript 로 옮겨 사용했던 적이 있다. React 를 맛만봤던 그 당시에는 JSX 처럼 HTML 태그 자체를 템플릿 리터럴(``) 으로 반환하여 사용하면 createElement, appendChild 등의 DOM API 노가다를 하지 않아도 되는 편리함에 취했다. 이전 Hello World 밥먹기 설거지하기 Add 이후 const app = document.getElementById('app'); app.innerHTML = ` Hello World 밥먹기 설거지하기 Add `; 이걸 컴포넌트로 나누어 모듈화 한다면 아래처럼 된다. // src/components/..

cos-ui cos-ui 의 루트에는 eslintrc.js 가 없고, 각 패키지의 루트에 eslintrc 가 존재했다. 그래서인지 다른 곳에서 사용하던 방식으로는 오류가 났다. // lint-staged.config.js module.exports = { '*.{js,jsx,ts,tsx}': 'eslint --fix', }; 이유를 생각해보았을 때, eslint 를 실행하는 곳 ( /cos-ui ) 에 eslint 관련 설정 파일이 없어 생기는 문제라고 생각했다. 찾아보니 두 가지 방법이 있었다. 각 패키지별로 eslintrc 설정파일을 찾아 실행하도록 공통된 eslintrc 를 만들어서 사용 1번 방법은 다소 번거롭지만 lint-staged 에서 경로별로 설정하여 사용한다. module.exports ..

왜 도입하게 되었는가? A 파일에서 사용하고 있는 type 을 export 하여 다양한 곳에서 사용하다가, type 의 내용을 수정하였을 때 그 다양한 곳에서 수정이 필요한 상황에서 해당 파일을 직접 open 하지 않으면 에디터 상으로 오류를 확인할 수 없어 type check 를 위해 tsc 를 사용했었다. 그런데 1. 까먹을 수도 있고, 2. 내가 하더라도 다른 팀원이 안할 수도 있고(까먹을 수도 있고) 하기에 아예 레포지토리에 Push 하기 전 prepush 등으로 tsc 를 하던지, 아니면 husky 와 함께 하는 방법을 생각하고 있었다. Webpack 에서 제공하는 ESLintWebpackPlugin 을 사용중이었는데, Webpack dev server 의 빌드속도가 너무 느려 --progres..

Intl.NumberFormat, Number.prototype.toLocaleString 자주 사용하는 Number with comma 만약 10000 이라면 10,000 으로 사용할 수 있도록 하는 util 함수를 만들어 사용하곤 했다. 이 함수를 만들기 위해서 Number.prototype.toLocaleString 을 썼었는데, 오늘 다시 number with comma 에 대해서 검색해보다 내장 객체인 Intl.NumberFormat 에 대해서 알게됐다. 알고보니 Number.prototype.toLocaleString 이 단순히 Intl.NumberFormat 을 호출하는 메서드라고 한다. 만약 number 가 큰 경우는 Performance 상으로 Intl.NumberType 을 쓰는게 더 ..

GCP 에 firebase admin 백엔드 서버를 배포해놓고 약 5일 정도 지났는데, 벌써 요금이 생겼다. 왜 생겼을까? API 를 사용해봤자 10번도 안썼는데, 아무것도안했는데.. 200원 내세요 원인 -> Idle Min-Instance Memory Allocation Time 아마 인스턴스 최소개수를 설정해놓아서 그런 듯 예상된다. 개발단계에서는 일단 0개로 써도 될 것같다. 운영하고 있는 서비스 잠시 멈추기 -> 직접 정지하는 것을 제공하진 않지만 비슷한 방법으로 호출하는 allUsers 를 삭제시켜 사용 링크 다시 추가하기 링크

배포가 됐는데 계속 유니콘이 날 반겨줬다.. Oops.. something wrong... 그래서 뭐가 잘못됐는데... deploy-test 라는 레포를 만들어서 문서에서 유도하는 대로 새로운 환경은 배포해보았다. 결과는 잘 되었고, 내 레포와 무슨차이가 있을 지 비교분석해봤다. 빌드 로그를 확인해보았을 때, deploy-test 서비스는 빌드 단계가 Build-Push-Deploy 단계로 이루어졌는데, 내 프로젝트는 0:Build 로만 머물러 있었다. 왜 이런 차이가 있는가? 를 지속적 배포 수정(트리거 관련) 에서 내가 무엇을 바꿨는지 생각해봤을 때, 구성 부분에 유형을 Dockerfile 로 바꿔서 썼었다. 처음에 트리거 관련 에러가 났을 때 해당 구성을 확인했었는데, 나는 Dockerfile 로 ..

ClickAway Component? Dropdown 이나 Popover 같은 컴포넌트를 만들면, 그 컴포넌트 이외의 영역을 눌렀을 때에도 열려져 있는 상태를 닫게 하고 싶은 경우가 있다. 그것을 위한 구현방법에 대해 이전 프로젝트에서 다른 사람들이 구현한 것을 구경해보았을 때 window 에 click listener 를 달아서 해결한다던지, open 상태에 따라 전체 영역을 감싸는 div 를 만들어 사용하는 방법이라던 지 (이전 프로젝트에서 썼던 방법) 등의 방법이 있었다. ClickAway 라고 멋대로 이름을 짓긴 했는데, 바깥 영역을 눌렀을 때 어떤 동작을 하고싶음 이라는 것은 다양한 곳 (Dropdown, Popover, Modal 등) 에서 쓰일 수 있기 때문에 headless 컨셉의 공통 컴..

가끔 작업을 하다보면 eslint 오류가 생기지 않을 곳에서 생길일이 있다. 어제는 안뜨고, 오늘은 뜨고, 그런 경우가 있기도 하고 나는 안뜨고, 같이 일하는 동료는 뜨고, 그런 경우가 있는데 아래와 같은 경우는 아닌지 확인해보자. 프로젝트 폴더구조를 아래와 같이 잡았다고 가정했을 때, VSC 의 working directory 를 front 로 잡지 않고 my-project 로 잡는 경우 eslint 관련한 오류가 뜬다. my-project ├── back └── front 해결법은 vsc eslint extension 의 working directories 설정을 지정해준다. 내가 작업할 directories 는 front 와 back 이므로 front, back 을 설정하면 사라지는 것을 확인할 수..