├── README.md ├── dev-tools ├── prettier │ └── option │ │ └── ignore-path.md └── eslint │ └── vscode-extension │ └── fix-all-on-save.md ├── css └── ellipsis │ └── n-line-ellipsis-in-flex-box.md ├── javascript └── date │ └── month-start-idx-zero.md ├── next-js ├── library │ └── third-parties.md └── config │ └── typed-routes.md ├── html └── tags │ └── video │ └── video-vs-video-with-source.md └── css-in-js └── styled-components └── transient-props.md /README.md: -------------------------------------------------------------------------------- 1 | ## Wiki 2 | 3 | > 저의 지식 저장 창고입니다 4 | 5 | [웹에서 보기 →](https://study.sunwoo.xyz) 6 | -------------------------------------------------------------------------------- /dev-tools/prettier/option/ignore-path.md: -------------------------------------------------------------------------------- 1 | ## --ignore-path 2 | 3 | prettier에서 format 대상에서 제외할 **설정 파일**의 경로를 지정할 수 있는 옵션이다. 4 | 5 | 예시 : 6 | 7 | ```json 8 | { 9 | "scripts": { 10 | "format:fix": "prettier --write --ignore-path .gitignore ." 11 | } 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /css/ellipsis/n-line-ellipsis-in-flex-box.md: -------------------------------------------------------------------------------- 1 | ## flex-box에서 n번째 줄부터 ellipsis 처리하기 2 | 3 | 우선 일반적인 n번째 줄부터의 ellipsis 는 아래의 css 코드를 사용하여 처리할 수 있다. 4 | 5 | ```css 6 | display: -webkit-box; 7 | overflow: hidden; 8 | text-overflow: ellipsis; 9 | -webkit-box-orient: vertical; 10 | -webkit-line-clamp: {n}; 11 | ``` 12 | 13 | 하지만 이 방식은 flex-box 내에서는 동작하지 않는다. 14 | 15 | 방법을 찾던 중 https://css-tricks.com/flexbox-truncated-text/ 에서 힌트를 얻어 `word-wrap: break-word` 를 추가하여 해결하였다. 16 | -------------------------------------------------------------------------------- /javascript/date/month-start-idx-zero.md: -------------------------------------------------------------------------------- 1 | ## 자바스크립트 Month가 0부터 시작하는 이유 2 | 3 | javascript `Date` 객체의 월(月) 인수는 0부터 시작해서 11로 끝난다. 4 | 5 | "`index`와 같은 이유가 아닐까? 문제는 없어보이는데" 라고 말하는 사람이 있을 수 있다. 하지만 일(日) 인수는 1부터 31 사이의 숫자이다. 6 | 개발을 하며 항시 통일성이 있는것이 좋다고 생각했는데, 이를 어길 이유가 있는가 궁금하여 찾아봤다. 7 | 8 | 이유는 javascript의 `Date`가 Java의 `JDK1.0 (1995)`의 `java.util.Date` 를 카피하였기 때문에 발생하는 일이다. 9 | 10 | [자바스크립트를 창시한 브렌든 아이크의 트윗](https://twitter.com/BrendanEich/status/481939099138654209) 11 | -------------------------------------------------------------------------------- /next-js/library/third-parties.md: -------------------------------------------------------------------------------- 1 | ## @next/third-parties 2 | 3 | Google Tag Manager를 설정하기 위해 서치 중 발견한 라이브러리로 타사 라이브러리를 사용하는 방법을 제공한다. 4 | 5 | 아직은 실험 단계라고 한다. 6 | 7 | 지금까지는 아래와 같은 기능만 지원해주는 것 같다. 8 | 9 | - Google Analytics 10 | - 유튜브 임베드 11 | - 구글 맵 임베드 12 | 13 | GTM 액션 사용이 용이해보여 아티클 사이트에 적용해보려고 한다. 14 | 15 | [공식 문서](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries) 16 | 17 | [데모 페이지](https://test-next-script-housseindjirdeh.vercel.app/) 18 | -------------------------------------------------------------------------------- /dev-tools/eslint/vscode-extension/fix-all-on-save.md: -------------------------------------------------------------------------------- 1 | ## vscode에서 코드 저장 시 마다 eslint fixAll 실행하기 2 | 3 | vscode에서 코드 저장 시 마다 eslint fixAll을 실행하기 위해서는 아래와 같이 설정해야 한다. 4 | 5 | ```json 6 | { 7 | "editor.codeActionsOnSave": { 8 | "source.fixAll.eslint": "explicit" 9 | } 10 | } 11 | ``` 12 | 13 | 이렇게 설정하면 vscode에서 코드 저장 시 마다 eslint fixAll을 실행하게 된다. 14 | 15 | 이전에는 `source.fixAll.eslint`에 값으로 `true`를 넣어주면 되었지만, 아래와 같이 현재는 사용하지 않는다. 16 | 17 | > true: 명시적으로 저장된 경우에만 코드 동작을 트리거합니다. 이 값은 "explicit"에 대해 더 이상 사용되지 않습니다. 18 | -------------------------------------------------------------------------------- /next-js/config/typed-routes.md: -------------------------------------------------------------------------------- 1 | ## Next.js router pathname type-safe하게 개발하기 2 | 3 | 회사에서 Next.js 15를 사용하고 있는데, `router.push()` 부분에 매번 일일이 pathname 입력해주는게 처음엔 참을만 했는데, 점점 router가 깊어질수록 귀찮아졌다. 4 | 5 | 방법이 없을까 하다가 typedRoutes 옵션을 사용하는 방법이 있었다. 6 | 7 | ```js 8 | // next.config.js 9 | const nextConfig = { 10 | experimental: { 11 | typedRoutes: true, 12 | }, 13 | }; 14 | 15 | module.exports = nextConfig; 16 | ``` 17 | 18 | 위와 같이 간단하게 설정해주면 되는데 experimental 설정이라서 그런가 turbopack 옵션으로 실행하는 dev에서는 구동이 되지 않았다. 19 | 20 | 다이나믹 라우팅에서도 구동이 되지 않는다고 하는데 랜딩 페이지 개발에서 다이나믹 라우팅을 사용할 것 같지는 않고, path를 type recommend해주는 기능만 있으면 되는거라서 앞으로 애용하는 옵션이 될 것 같다. 21 | 22 | https://nextjs.org/docs/app/api-reference/next-config-js/typedRoutes 23 | -------------------------------------------------------------------------------- /html/tags/video/video-vs-video-with-source.md: -------------------------------------------------------------------------------- 1 | ## video 태그만 사용하는 방법과 source 태그를 함께 사용하는 방법의 차이점 2 | 3 | 회사에서 오래된 에셋들을 신규 에셋으로 바꾸는 작업을 하던 중, 기존 코드가 video를 두가지 방법으로 다루고 있다는걸 알게되었다. 4 | 5 | 1. `