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..

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

프로젝트 셋업, 왜 프론트 4명이나? 혼자서 진행하던 프로젝트에 코드스쿼드에서 함께 공부했던 도니, 햄디, 제이미를 꼬드겨 합류시켰다. 프론트에서만 3명을 추가로 합류하는건 과하다고 느껴질 수도 있는 부분이라 고민을 많이 했었고, 합류하시는 분들도 고민이 많으셨을 것이다. 그럼에도 이렇게 진행한 이유를 생각해봤다. 1. 지금까지의 프로젝트는 혼자 or 프론트 2명 이 진행하였음 -> 여러명 일때는 프로젝트를 어떻게 진행할까? 2. 진행하고 있는 스터디의 수작업 (체크인, 체크아웃)이 너무 귀찮음 -> 하루라도 빨리 기능이 돌아가는 페이지를 만들자. 3. 우리만의 UI 시스템을 만들어보자. -> 변경에 유연한 컴포넌트를 작성하기위한 노력 프로젝트를 혼자서 진행해보면서 처음에는 "2. 하루라도 빨리 기능이 ..

Dropdown (2) Dropdown 을 만들어보고있다. 이전에 포스팅 했던 Dropdown 의 컨셉을 그대로 가져와서 사용해보려고 하고 있는데, Trigger 는 외부로 부터 받아와 button 의 children 으로 사용하고자 했다. const DropdownTrigger = (props: { trigger: ReactNode }) => { const [, dispatch] = useDropdownContext(); const { trigger } = props; const handleTrigger = () => { dispatch({ type: 'TOGGLE_OPEN' }); }; return ( {trigger} ); }; // UserInfoCircle const UserInfoCircle:..

TL;DR 백엔드에서는 Cookie 를 Setting 해주기 위해 CORS 설정 'Access-Control-Allow-Credentials': 'true' 을 해줘야 한다. back 서버에서 token 넘겨주기 JwtResponse 를 데이터 값으로 넘겨주는 것(payload) 에서 set cookie 하는 방식으로 변경 - 데이터 값으로 넘겨주는 것을 어떻게 탈취하는 걸까? - setCookie 로 하기 위해서 express 에서 제공하는 response cookie 메서드를 사용했다. res.cookie('accessToken', appAccessToken, { maxAge: 120_000, httpOnly: true, secure: true, }); 이 상태로 보내주니 Network 탭에서는 Se..