항상 TypeScript 가 적용된 실무만 접했다. 온보딩 기간에 기존에 짜여진 코드를 분석하며 컨벤션, 아키텍처 등 개발 문화를 이해할 수 있다. 하지만 이 과정에서 누군가했던 고민을 내 것으로 만들기는 어렵다. 결론적으로, 이번 프로젝트를 하면서 꼭 하고 싶었던 부분이 jsx -> tsx 로 이관작업을 하는 것이었다. (아직은 Type을 굳이 쓰지 않아도 되는 규모의 프로젝트이긴 하지만, 확장 가능성만 믿고 간다) 이관 작업을 하면서 내가 얻는 부분은 1. Type 정의할 때, 아키텍처를 고민할 수 있음. - 예를 들어, Type을 쓸지 Interface를 쓸지, 둘 중 어떤 것을 쓰더라도 어떤 식으로 설계할 것인지 2. Type 으로 인해 기존 Component에 대한 설계가 부족함이 없었는지 고민..

요번 프로젝트에서는 항상 하던 Cookie나 localStorage에 넣어두고, '값이 있으면 로그인 유지' 라는 로직말고, 새로운 것이 없을까하다 지금 프로젝트에서는 Recoil을 사용하고 있고, Recoil Persist라는 기특한 녀석을 발굴해내 사용시도를 해본다! 어쩌면 storage에 설정하는 것보다 코드라인이 길어지기도 하고, 어차피 localStorage를 사용하는 것은 동일하며, atom까지 설정해줘야 하니 몹시 귀찮은 일이 아닌가 싶지만, 겸사겸사하는 마음으로 시도한다. npm i recoil-persist 후에, 아래 코드를 참고해 작성한다. atom 생성 ([storage]에 적힌 value값에 [key] 값으로 된 이름으로 값을 생성한다.) => recoil-persist : {na..

해당 프로젝트의 일정을 등록하기 위해 Time Picker 가 필요하고, 일정의 범위를 정하기 위해 Date Picker 가 필요했다. 결정은 Ant Design. Ant Design은 알리바바 그룹에서 개발한 UI 프레임워크 이다. UI 프레임워크 생각은 딱히 없었지만, 이번 Date & Time Picker 를 도입하면서 한 번 사용해보려 한다. 러닝커브가 낮고, 향후 프로젝트를 TypeScript 로 변경할 때 적용 가능한 샘플 코드 제공이 아주 친절하다. 특히, CodeSanbox, Codepen 등 온라인 에디터 등을 지원하고 있어 바로 테스트가 가능하다는 점이 훌륭하다. 다양한 디자인은 아니지만 다양한 컴포넌트로 Button, Icon, Themes, Layout, Font 등 제공하는 종류도..

나는 디자이너, 퍼블리셔를 거치면서 css 파일을 작성하고, class 명칭을 부여하고, 자주 쓰이는 속성들은 모듈화하는 것에 익숙하다. 귀찮고, 어렵다기보다는 html 파일내에 각 태그내에 class 명칭을 보면서 ' 아, 대충 어떤식으로 렌더링이 되겠군 ' 이라고 느낄 정도이다. 또한, 함께 일하는 백엔드 개발자들까지 내가 명명한 class 를 잘 사용한다(자랑질) React에서도 동일하게 css 파일을 사용하면 된다. 하지만, 전통적인 것만을 지키고 미래의 것은 배척하는 폐쇄적인 사람처럼 보이고 싶지 않기에 React에서는 새로운 CSS-in-JS 라이브러리를 사용하려 한다. 세상에 라이브러리는 많지만, 보편적으로 사용하는 후보군으로 추려본다. 1. styled-components 2. Emotio..

후보군 1. Redux React만을 위한 라이브러리는 아니다. (vanilla javascript 환경에서도 쌉가능) Redux는 단방향 흐름 구조이다. action, dispatcher, store, view의 구조를 가지고 있으며, action 이 발생하면 dispatcher에 의해서 store에 상태가 저장되고, store 에 따라 view 가 변경되는 흐름을 가지고 있다. + 조금이라도 심플한게 좋다면 Redux toolkit 필수로 사용해야함 + 비동기 사용하려면 Redux saga 필수로 사용해야함 => 배보다 배꼽이 더 커질 수 있을 듯. 2. Context API React 자체제공해주는 기능 로 상태 전달 가능 + Provider를 통해 default 값을 보내도 못읽는다니 주의바람, ..

항상 프로젝트 할때마다 골치 썩는 백엔드는 node로 많이 진행해왔지만, 이번 프로젝트는 NoSQL을 활용해도 괜찮을 것 같아서 FireBase로 한 방에 해결했다. 특히 머리가 아팠던 것은 보통 8버전에 익숙해져있어 9버전은 많이 사용하지 않는다는 것. 하지만, 어쩌겠는가. 올드버전은 언제까지나 올드버전일 뿐. 항상 업그레이드된 인생을 꿈꾸기 때문에 최신버전으로 설치....(이 때부터 무지하게 꼬임) 나는 그렇게 친절한 사람이 아니라 다른분들처럼 URL, 캡쳐 첨부하면서 블라블라 설명까지는 못한다. FireBase init이나 설정은 버전 상관없이 거의 동일하고 다른 사이트 참고할 것 많으니, 대신 아래 FireStore 구축시에 도움 많이 받았던 URL 공유한다. (특히, 9버전에 도움 됨) http..