전체 글
-
JS - GMT, UTC 그리고 Date 객체개발 2022. 7. 6. 10:26
GMT : 그리니치 평균시 (Greenwich Mean Time) 영국 런던을 기점으로 한 표준시간 영국 런던 기점 (GMT + 0), 뉴질랜드 웰링턴 종점 (GMT + 12) 조금씩 늦어지는 지구 자전의 영향을 받기 때문에 새로 협정 세계시(UTC)가 재정되어, 1925년부터 1972년까지 사용 (영국 BBC 방송을 중심으로 아직도 GMT를 널리 사용한다고 한다) UTC : 협정 세계시 (Coordinated Universal Time / Temps Universel Coordonne) 영어는 Coordinated Universal Time, 프랑스어로 Temps Universel Coordonne 이지만 영국과 프랑스의 협의 약자로 UTC 사용 1972년부터 시행된 국제 표준시로 사용 UCT와 GM..
-
TIL - Recoil Structure개발 2022. 5. 22. 14:26
상태관리를 위한 라이브러리 선택 현재 진행중인 WMS 프로젝트에 상태관리를 위해서 Recoil을 도입하기로 하였다. 이전에 사용했던 Redux의 경우 Ducks Pattern을 사용하여 상태관리 로직을 정리했는데 Redux의 경우 몇 가지 단점들이 있었다. - Boilerplate 코드량이 많아 아주 작은 기능이라도 상태관리를 위한 파일과 많은 코드 작성이 필요하다. - 러닝커브가 넘기위한 시간이 생각보다 오래 걸린다. - 불변성 유지를 위해 immer와 같은 라이브러리를 추가로 세팅해줘야 한다. Recoil은 Redux에 비해 코드량이 적으며 쉽다. 또 개발자의 취향에 따라 다양한 패턴으로 코드를 작성할 수 있는 자유도가 높기 때문에 편하게 쓸 수 있다는 장점이 있기때문에 도입하였다. Recoil Be..
-
TIL - React Table Library #2개발 2022. 5. 3. 11:38
셀 내용 커스텀 하기 테이블을 사용하다보면 단순히 표에 텍스트가 들어가는 것이 아니라 데이터 상태에 따라 이벤트가 등록된 버튼을 렌더링해야 하는 경우가 많다. 실제로 운영중인 프로젝트에서도 그러한 경우가 많기 때문에 셀 내용에 포맷팅 커스텀은 필수적인데, React Table에서는 어떻게 셀의 내용을 커스텀 하는지 알아보자. columns option useTable 훅에 초기에 데이터를 삽입할때 { columns, data } 객체를 할당하는데 이때 데이터는 각각의 옵션을 포함하여 사용된다. 우선 실제로 컨텐츠를 커스텀해야할 columns 정보를 살펴보면 useMemo를 통해 메모이제이션된 Array가 어떤 헤더 컬럼에 속하는 정보인지 정의한다. 텍스트로 사용될 Header 옵션과 필수 key값으로 ..
-
TIL - React Table Library #1개발 2022. 5. 2. 23:25
Headless Utility '헤드리스' 유틸리티란 실제 UI 요소를 렌더링하거나 제공하지 않고, 라이브러리에서 제공하는 Hook이나 Callback 함수를 활용하여 렌더링해야할 테이블의 마크업은 개발자 임의로 다룰수 있는 방식으로 구축된 UI 라이브버리를 일컷는다. 이러한 방식으로 구축된 이유는 1. 관심사를 분리하여 테이블 스타일링을 커스텀하기에 적합한 사용방식을 제공한다. 2. UI 렌더링에 대한 로직을 라이브러리에서 담당하지 않기 때문에 API의 양이 작고 사용하기 쉬우며, 업데이트/유지 관리가 간단하다. 3. 모든 개발자가 다르게 작업을 수행할 수 있는 라이브러리이기 때문에 수많은 엣지케이스에 대응이 가능하고, 개발자의 고유방식대로 UI를 설계하고 확장 할 수 있다. 기본 테이블 그리기 Rea..
-
TIL - Next.js Google Analytics 코드 적용하기개발 2022. 4. 26. 00:20
일반적인 GA 적용방법 일반적으로 구글 애널리틱스 추적을 적용하기 위해서 index.html 에 구글 애널리틱스로 발급받은 트랙킹 아이디를 포함한 스크립트 구문을 작성한다. // index.html React 프로젝트에서는 마찬가지로 순수 리액트 프로젝트에서 public 폴더에 존재하는 index.html 파일에 위와 같은 방법으로 적용하는 방법도 가능하며 index.js에서 스크립트를 실행하는 방법으로도 가능하다. // index.js import React from 'react' import ReactDOM from 'react-dom' import App from './App' const ga_id = REACT_APP_GA_ID const initGA = () => { window.dataLaye..
-
TIL - Mac 업로드 파일 한글 깨짐 (자모분리현상)개발 2022. 4. 19. 23:23
트러블 슈팅 Mac 환경에서 업로드한 파일의 이름이 Window 환경에서 자모분리되어 다운받아지는 이슈를 해결 원인 유니코드란? 유니코드는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다. 유니코드는 유니코드 협회가 제정한다. 또한 이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자들을 다루기 위한 알고리즘 등을 포함하고 있다. - 위키백과 유니코드와 관련된 개념으로 유니코드 등가성 이라하는 것이 있는데, 이 것은 유니코드 문자 인코딩 표준 사양이라 말하며, 표준 문자와 문자 집합과의 호환성을 허용하기 위해 표준으로 도입되었다. 유니코드 등가성이라는 표준은 유니코드 정규화 절차를 정의한다. 유니코드 정규화(Unicode norm..
-