본문 바로가기

전체 글57

오픈소스 기여 후기 - babel-plugin-styled-components 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.. 2023. 4. 21.
VanillaJS 로 React 처럼 SPA 만들기 - useState 저번 글에서는 createElement 함수를 만들고, JSX 문법을 사용하여 가독성을 높여 DOM Element 를 생성하는 방식을 만들었다. 이번 글에서는 상태관리에 대해서 다룰 예정이다. 상태관리가 필요한 이유내가 생각하는 상태란 사용자가 앱을 사용하면서 하는 행동에 의해 변경되는 값이고, 그 행동에 의해 변경된 UI 를 제공하는 값 이라고 생각한다.  예를들어, 간단히 만든 Todo 앱에서 화면에 보여지는 Todo 목록은 상태라고 볼 수 있다.사용자가 Add 버튼을 누르면, input 에 입력된 값이 화면에 추가되어 보여지기를 기대하기 때문이다.  어떻게 변경된 UI 를 제공할 수 있을까? DOM Element 추가라면 appendChild 를 하고, 삭제라면 removeChild 를 하면 될까?.. 2023. 2. 13.
VanillaJS 로 React 처럼 SPA 만들기 - createElement HTML 태그를 JavaScript 로 표현하기이전에 카카오페이지 클론 을 할 때, HTML 태그를 모두 작성하고, 그 태그를 JavaScript 로 옮겨 사용했던 적이 있다.React 를 맛만봤던 그 당시에는 JSX 처럼 HTML 태그 자체를 템플릿 리터럴(``) 으로 반환하여 사용하면 createElement, appendChild 등의 DOM API 노가다를 하지 않아도 되는 편리함에 취했다. 이전 Hello World 밥먹기 설거지하기 Add  이후 const app = document.getElementById('app');app.innerHTML = ` Hell.. 2023. 1. 11.
huksy 도입기 (2) - 모노레포 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 .. 2022. 12. 1.
husky 도입기 (1) - (+ lint-staged, eslint, typescript ) 왜 도입하게 되었는가? A 파일에서 사용하고 있는 type 을 export 하여 다양한 곳에서 사용하다가, type 의 내용을 수정하였을 때 그 다양한 곳에서 수정이 필요한 상황에서 해당 파일을 직접 open 하지 않으면 에디터 상으로 오류를 확인할 수 없어 type check 를 위해 tsc 를 사용했었다. 그런데 1. 까먹을 수도 있고, 2. 내가 하더라도 다른 팀원이 안할 수도 있고(까먹을 수도 있고) 하기에 아예 레포지토리에 Push 하기 전 prepush 등으로 tsc 를 하던지, 아니면 husky 와 함께 하는 방법을 생각하고 있었다. Webpack 에서 제공하는 ESLintWebpackPlugin 을 사용중이었는데, Webpack dev server 의 빌드속도가 너무 느려 --progres.. 2022. 11. 30.
[JavaScript] Intl.NumberFormat 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 을 쓰는게 더 .. 2022. 10. 11.