2023-01 Monthly Log

06 January, 2023 - 3 min

23-01-25(수)

https://betterprogramming.pub/journey-of-a-frontend-monorepo-what-i-learned-d6a0d142803f
- Pros: 표준화 / Code Sharing / Dev Envrionment
- Cons: Migration 힘듬 / Build Queueing / Working Time
remix https://remix.run/docs/en/v1/guides/mdx
- Fullstack Web Framework
- Next.js 와의 차별점은 뭘까?
  - 기본 hook들이 여럿 있는것?

23-01-17(화)

23-01-16(월)

react datepicker https://reactdatepicker.com/#example-date-range-for-one-datepicker

23-01-15(일)

https://medium.com/swlh/stop-using-if-else-statements-f4d2323e6e4 https://betterprogramming.pub/response-to-stop-using-if-else-statements-c3d4c64c69af

23-01-13(금)

copy to clipboard using JS https://www.w3schools.com/howto/howto_js_copy_clipboard.asp navigator.clipboard.writeText(text);
scrollPosition hook https://designcode.io/react-hooks-handbook-usescrollposition-hook
calculae documenth height https://stackoverflow.com/questions/17688595/finding-the-maximum-scroll-position-of-a-page var limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight) - window.innerHeight;
vertical-align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
gatsby import codepen https://techstacker.com/how-to-embed-codepen-in-gatsbyjs-markdown/
vite & babel & SWC https://www.infoq.com/news/2022/12/vite-4-faster-swc/ vite에서 babel대신 SWC를 쓰기에 babel을 쓰기 위해선 별도의 플러그인 설치가 필요하다.
왜 babel을 쓰려는가? @emotion/babel-plugin에서 제공하는 기능들을 위해서이다.
하지만 굳이 vite에서 SWC를 이용해 번들링을 해주는데 또 여러 설정을 하면서까지 babel을 써야할까?
해당 기능을 안쓰고 babel을 따로 안쓰기로 결정했다.

23-01-11(수)

nextjs fonts https://nextjs.org/docs/basic-features/font-optimization#google-fonts https://blog.logrocket.com/next-js-font-optimization/
transform attributs https://developer.mozilla.org/en-US/docs/Web/CSS/transform inline element에는 transform 적용이 안된다.
Goodbye, useEffect - David Khourshid. Reat Brussels https://www.youtube.com/watch?v=bGzanfKVFeU https://xstate.js.org/

23-01-10(화)

recoil and atom https://recoiljs.org/
nextjs의 기본 css file로 인해 <dialog>가 화면 왼쪽상단에 고정되는 현상 발생
```
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```
모든 항목에 padding: 0, margin: 0을 넣어서 생기는 현상이다. 이를 제거해주면 된다.

23-01-09(월)

lerna root folder내 node_modules에 패키지가 설치되므로 내부에서는 별도의 패키지 install이 필요 없다
::after를 이용한 hover effect

23-01-07(토)

Gatsby static image https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder
theme ui gatsby plugin https://theme-ui.com/packages/gatsby-plugin
gatsby site deploy using github actions https://medium.com/@sam-king/deploying-a-gatsby-site-to-github-pages-using-github-actions-ci-cd-be0465a8cdb8

23-01-06

react ts cheatsheet https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example
nextjs, styled-comp https://blog.logrocket.com/theming-in-next-js-with-styled-components-and-usedarkmode/
vite 빌드 시 type들이 포함되지 않는 경우에 대한 해결

tsconfig.json에서 오류가 생긴 것이 원인이었다.

//tsconfig.json
{
  ...,
  "include": ["src"], // lerna를 적용하면서 이 부분이 오염됐었다.
  ...,
}

include 옵션은 TS가 참고할 소스가 어디에있는지를 가리키기 위함이므로 중요한 값이다. https://www.typescriptlang.org/tsconfig#include

JS Object Copy

https://code.tutsplus.com/articles/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655

JS의 Object copy method에는 5가지 정도가 있다.

=: 단순 주소 값 복사. 값에 대한 네임을 하나 추가한다고 볼 수 있다.
JSON.stringify, JSON.parse: deep copy, 하지만 function 에 대한 복사 안됨
Object.assign: deep copy, 하지만 1st level만 복사
...(spread operation): 3과 동일
기타 라이브러리: lodash등. 라이브러리 지원에 따라 다르며 _.deepCopy를 사용하면 deep copy를 할 수 있다.

zeplin blog에 올라온 darkmode에 관한 좋은 글 https://blog.zeplin.io/dark-mode-color-palette
- https://www.designsystems.com/open-design-systems/

23-01-05(목)

material theme builder: https://m3.material.io/theme-builder#/custom
- https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
material color system: https://m2.material.io/design/color/the-color-system.html#color-usage-and-palettes
lerna: https://lerna.js.org/docs/getting-started
darkmode using emotion: https://levelup.gitconnected.com/adding-dark-mode-to-your-react-app-with-emotion-css-in-js-fc5c0f926838
css challenge skewed highlight: https://pepelsbey.dev/articles/skewed-highlight/