# 아마도 git을 사용하고 있을테니까 `git mv`를 사용해서 변경해주자
find src -type f | grep "\.[jt]s$" | xargs -n1 grep -HE "^[^*\n]*(<\/?[a-zA-Z]*>)[\s\w]*$" | cut -d: -f1 | uniq | awk '{print "git mv "$1" "$1"x"}' | sh

Footnotes

  1. Vite가 JSX 처리를 위해 .jsx 확장자를 요구하는 이유는 대부분의 경우 일반 .js 파일이 브라우저에서 작동하기 위해 전체 AST 변환이 필요하지 않아야 하기 때문입니다. .js 파일에서 JSX를 허용한다는 것은 제공되는 모든 파일이 JSX를 포함하는 경우에 대비하여 전체 AST 처리되어야 함을 의미합니다. ↩

  2. .jsx 또는 .js를 사용해야할 경우에 대한 답변들이 소개되어 있다. ↩

#vite
#197
<div
  dangerouslySetInnerHTML={{
    __html: `
      <img src="http://unsplash.it/100/100?random" onload="console.log('you got hacked');" />
    `,
  }}
/>

가끔 아주 가끔 이상한 일을 해야할때가 있는데 그럴때는 이렇게 하면 된다.

#react#hack#dangerously-set-inner-htmlstackblitz.com
#193
const obj = {
  a: 1,
  b: 2,
}

console.log(obj[['a']]) // 1
console.log(obj[['b']]) // 2

이게 되네 🤔

#javascript#bug
#191
# .gitignore가 규칙이 적용되지 않을때
git rm -rf --cached .
git add .
#git
#189
📎

SEO Starter Guide

developers.google.com

Footnotes

  1. 메타태그 미리보기 ↩

  2. Open Graph 프로토콜에 대한 간략한 설명 ↩

  3. 구조화된 데이터 일반 가이드라인 ↩

#seo#i18n
#188

blob

new Blob(array, { type : 'text/html' })

파일 다운로드 생성이 잘 안되서 확인해보니 type 지정을 안했다.

#blob
#187
📎

Photoshop for Developers

developer.adobe.com

포토샵 스크립트 관련 링크(액션과는 다르다 액션과는!) 정리. 액션도 편하기는 하지만 개발적인 관점에서 보자면 너 유연한 작업이 가능한 스크립트를 작성하는게 맞다.

유튜브 강의 - 보면 시각적으로 뭐가뭔지 나오니까 이해가 바로 된다

어도비 공식 문서 - 스펙 정의에 가까워서 예제코드로 감을 익히고 백과사전용으로 사용하는게 좋을 것 같다.

그래서 어떻게 작성하면 되는거야?…에 대한 예제들. 아마도 es3로 작성해야하는 부분때문에 문법은 복잡해 보인다.

글

#photoshop
#186

GitHub - meltingice/psd.js: A Photoshop PSD file parser for NodeJS and browsers

psd 파서. 이를 통해 관리 가능한 트리 구조에서 Photoshop 문서로 작업하고 다음과 같은 중요한 데이터를 찾을 수 있습니다.

  • 문서 구조
  • 문서 크기
  • 레이어/폴더 크기 + 위치 지정
  • 레이어/폴더 이름
  • 레이어/폴더 가시성 및 불투명도
  • 글꼴 데이터( psd-enginedata 를 통해 )
    • 텍스트 영역 내용
    • 글꼴 이름, 크기 및 색상
  • 색상 모드 및 비트 심도
  • 벡터 마스크 데이터
  • 병합된 이미지 데이터
  • 레이어 구성 요소
#photoshop
#183
📎

SVG

developer.mozilla.org

아이콘

필터 — feTurbulence Perlin noise89를 사용하여 구름이나 대리석과 같은 인공 질감을 합성. feDisplacementMap in2의 이미지 픽셀 값을 사용하여 in의 이미지를 공간적으로 대체합니다.

offset-path — 값을 지정해서 keyframes로 애니메이션을 적용하는 방법과 예제들

Footnotes

  1. <filter />를 이용하는 방법으로 좀 더 효과적인 스타일 작업이 가능하다는 걸 shadow 효과 예제로 정리한 글 ↩

  2. 애니메이션(@keyframes)이 결합된 svg를 border-image로 사용해서 만든 UI ↩

  3. textPath를 사용해서 텍스트 흐름을 변형하는 방법 ↩

  4. path 속성값을 제어해서 모핑효과 주는 방법 ↩

  5. a11y ↩

  6. favicon 이미지를 svg로 사용했을때 장점 ↩

  7. 디자인툴에서 output되는 svg코드 중심으로 설명 ↩

  8. Perlin Noise: A Procedural Generation Algorithm ↩

  9. 펄린 노이즈 (개념 이해하기) | 심화 JS: 내추럴 시뮬레이션 | Khan Academy ↩

  10. element가 따라갈 모션 경로를 지정하고 상위 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 ​​정의 ↩

#svg#svg-filter#offset-path#icon
#177

Footnotes

  1. 다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩

#fontcodepen.io
#173
33 중 23페이지
이전 페이지다음 페이지