EcmaScript 업데이트 상황 편하게 보기2023. 6. 21.
http://kangax.github.io/compat-table/es2016plus/
약간 그... caniuse 느낌으로 보여준다.
tailwind 👍2023. 6. 20.
panda-css를 시험삼아 함 써보던 중에 쓰면서는 인식하지 못하고 있던 tailwind의 장점을 알게 됐다.
tailwind로 작성되어 있던 코드를 바꿔봤는데: 오른쪽의 형태가 되는 순간 어 이건 좀... 싶어지면서 아래의 두가지를 비로소 인식하게 되었다.
styled-components
/emotion
처럼css
syntax를 쓰던지stitches
처럼 js object syntax를 쓰던지 상관없이 스타일링 관련 코드는 무조건 세로 방향/2차원으로 코드 면적이 늘어나게 된다는 점.key: value
의 형태 때문에 반복하게 되는 타이핑량 + 시각적 스트레스가 있다는 점.
그러나 tailwind는:
- 코드가 가로/1차원으로만 늘어나고,
value
만 줄줄이 넣는 식.
이라 1,2로 알게 모르게 느끼고 있던 스트레스가 해결되고 있었다는 걸 알게 되었고 결론은 tailwind가 선택지에 있으면 나는 tailwind를 쓸 것 같다는 뭐 그런 얘기.
추가:
- 이게 코드량/면적의 문제도 있지만 스타일링 관련 코드가 다른 코드랑 '생긴게' 아예 달라진다는 점.
- 스타일링 관련 코드가
className="..."
에 '격리' 된다는 점.
을 또 들 수 있을 것 같다.
위에 나열한 요소들이 중요하게 느껴지는 건 아무래도 시각적으로 인지 부하가 줄어들기 때문인 것 같고.
tailwind에서 pseudo 머시기 쓰기2023. 6. 18.
css | tailwind(modifier) |
---|---|
:first-child | first: |
:first-of-type | first-of-type: |
:only-child | only: |
:nth-child(odd) | odd: |
:after | after: |
group
, peer
추가로 지원하고 있는 기능이 있는데,
group
parent의 상태를 child가 쓸 수 있도록 함.
예)
<a href="#" class="group">
<!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
<div class="flex items-center space-x-3">
<svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
</div>
</a>
<a href="#" class="group">
<!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
<div class="flex items-center space-x-3">
<svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
</div>
</a>
peer
자신의 상태를 sibling이 쓸 수 있도록 함.
<form>
<label class="block">
<input type="email" class="peer ..."/>
<!-- ^^^^ 여기서 선언하면 -->
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
<!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
Please provide a valid email address.
</p>
</label>
</form>
<form>
<label class="block">
<input type="email" class="peer ..."/>
<!-- ^^^^ 여기서 선언하면 -->
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
<!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
Please provide a valid email address.
</p>
</label>
</form>
주의) peer-{modifier}
는 peer
의 prev
가 아니라 next
sibling이 쓸 수 있음
Ref
Motivation2023. 6. 16.
- 신경과학적으로 'Liking'에 연관된 기관과 'Wanting'에 연관된 기관은 따로라고 한다.
- 어떤 행위를 했을 때 좋다고 느낀다고 그걸 하고 싶어지는 것은 아닌 것이 그 때문.
- 예) 어쩌다 간만에 운동을 하고 '아 역시 좋군' 한다고 다음날 아침에 '와! 어서 피트니스 센터에 가고 싶군!' 이 되지 않음
- 'Wanting' 관련 기관은 21세기의 도파민 폭탄들 때문에 맛이 가있을 확률이 높고, 그래서 현대인은 대부분 Liking/Wanting 싱크가 더 안맞고 있을 확률이 ⬆️
- 그리고 뇌는 어떤 행위를 하기 전에 그것에 드는 인풋과 돌아올 보상의 수지 타산을 늘 계산하는데, 우선 순위가 저인풋고보상>저인풋저보상>고인풋고보상>고인풋저보상 이라고.
- 대부분의 의미 있는 일은 고인풋 고보상이라 늘 우선 순위에서 밀리게 마련이고 그래서 의욕이 생기지 않는 것이라고.
- 그러나 '왜 나는 의욕이 없지?', '보조제를 먹어야 되나?', '스터디 모임을 만들어야 되나?' 등과 같이 '집나간 의욕을 어떻게 찾아올까'는 실패할 확률이 더 높다.
- 그보다 성공률이 높은 건 의욕 유무를 실행 조건에서 빼는 것.
- '해야 되는데 하고 싶지 않으니 의욕을 만들어서 한다'가 아니라 '해야 되니까 그냥 한다'가 훨씬 효과적이라고.
Refs
JavaScript 1.2 Reference2023. 6. 15.
- 나는 분명히 rsc 글을 쓰던 중이었는데
- 어쩌다보니 초창기 js 코드는 어떻게 생겼었을까 궁금해져서
- 검색도 해보고 gpt한테 물어도 보고 했는데 적절한 결과를 얻을 수 없었는데
- 그러다 아 초기 문서를 찾아보면 되겠구나 하는 생각이 들어 찾아보니
- JavaScript 1.2 Reference 가 있었다
"10/31/97" ☜ 간지 난다...
`for (; amount--; )`2023. 6. 15.
react-scrollbars-custom의 예제를 보다가 충격적인 걸 봐갖고
export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
const result = [];
for (; amount--; ) { // ??
result.push(
<p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
{getRandomParagraphText()}
</p>
);
}
return result;
}
export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
const result = [];
for (; amount--; ) { // ??
result.push(
<p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
{getRandomParagraphText()}
</p>
);
}
return result;
}
?
for (; amount--; ) {
for (; amount--; ) {
?? 🤯
mdn의 for 관련 문서를 보니
🤯🤯
이 외에도 충격적인 게 더 있었는데:
🤯🤯🤯
Using for
with two iterating variables
🤯🤯🤯🤯
`column-count`2023. 6. 14.
이력서를 리액트 컴포넌트로 작성하다가 2단 처리를 어떻게 해야 되나 싶어서 알아보니 column-count
라는 프로퍼티가 있었고,
column-count: 2;
column-count: 2;
하면 되는 것이었다...
column-count: <number>;
column-count: <number>;
기본적으로 위와 같이 쓰면 되고, 이런 저런 관련 프로퍼티가 있는데,
column-width
column-count: auto;
column-width: 8rem;
column-count: auto;
column-width: 8rem;
content 분량에 따라 8rem
width
에 맞춰 자동으로 채워진다.
column-fill
column-fill: auto;
column-fill: balance;
column-fill: auto;
column-fill: balance;
auto
: 일반적으로 기대되는 분량에 따라 채워지는 동작balance
:column-count
에 지정된 대로 content를 나누어 각 column에 배치
column-gap
ㅇㅇ 그것임
column-rule
규칙인가? 싶지만 그게 아니고 각 컬럼 사이에 라인을 그어준다.
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
이런 느낌.
column-span
특정 요소가 cols 사이를 가로지르게 만들 수 있다. 아래는 mdn의 예시.
Colors2023. 6. 13.
JS yellow: #F0DC4E
TC39 orange: #FC7C00
npm red: #EA2039
Custom Nerd Fonts2023. 6. 10.
nvim등 터미널 환경에선 nerd fonts(기존 폰트에 아이콘 등 각종 UI용 문자를 추가한 폰트)를 쓰는 게 편한데 유료 폰트이거나 폰트 취향이 너무 마이너인 경우 직접 만들써야 함. 귀찮아서 한동안 걍 Iosevka 쓰다가 어제 잠깐 의욕이 생겨서 알아보니 같은 곳에서 제공하는 Font Patcher를 사용하면 되는 것이었고, 이런저런 실행 방법을 제공하는데 그 중 docker로 하는게 젤 간단했음.
docker run --rm \
-v /path/to/original/font:/in \
-v /path/to/patched/font:/out \
nerdfonts/patcher \
--progressbars \
--adjust-line-height \
--fontawesome \
--fontawesomeextension \
--fontlogos \
--octicons \
--codicons \
--powersymbols \
--pomicons \
--powerline \
--powerlineextra \
--material \
--weather
docker run --rm \
-v /path/to/original/font:/in \
-v /path/to/patched/font:/out \
nerdfonts/patcher \
--progressbars \
--adjust-line-height \
--fontawesome \
--fontawesomeextension \
--fontlogos \
--octicons \
--codicons \
--powersymbols \
--pomicons \
--powerline \
--powerlineextra \
--material \
--weather
위의 /path/to/original/font
, /path/to/patched/font
는 폴더이고 original의 경우 그 안에 폰트 파일이 들어있으면 된다. 작업이 완료되면 patched 폴더 안에 생성된 폰트 파일을 설치해서 쓰면 됨.
Before:
After: