[11.01-05] 인상 깊게 읽은 개발 아티클 ♥️

(번역) 가장 빠른 자바스크립트 프레임워크

https://velog.io/@sehyunny/the-fastest-js-framework?utm_source=substack&utm_medium=email 

(번역) 가장 빠른 자바스크립트 프레임워크

Qwik (https://qwik.builder.io/)

- 특징 : 사이트가 로딩되는 속도가 빠름. (프로젝트의 크기나 복잡성과 관계없이 일관되게 즉시 로딩됨)

- 어떻게 ? 순수 HTML을 전달하고, 필요할 때(상호작용 시) 자바스크립트를 로드함. / No hydration

 

+ hydration이 뭔지 잘 몰라서 찾아봤다.

사이트에서 html이 먼저 세팅되어 있는 상태에서, 자바스크립트가 html요소에 매칭되는 작업!

서버 사이드 렌더링할 때, 완성된 html을 먼저 화면에 보여준다. 그리고 번들링된 자바스크립트 코드를 html에 매칭한다. hydrate 이후에 이벤트(클릭 등)가 동작하고, 사용자가 인터랙션할 수 있다.

https://velog.io/@wnsguddl789/Web-FrontEnd-Hydration 에서 보니 쉽게 이해됐다 ㅎㅎ

 

(번역) Tailwind CSS의 장점과 단점

https://ykss.netlify.app/translation/the_pros_and_cons_of_tailwindcss/

(번역) Tailwind CSS의 장점과 단점

회사에서도 어드민 사이트는 tailwind css를 사용하고 있어서 제목만 봐도 반가웠다 ! 공감되는 부분도 많았고, 새롭게 알게 된 사실도 있었다. 

 

- tailwind css 는 css 스타일링을 위해서 따로 클래스를 만들지 않고, 하나의 스타일링 작업을 수행하는 클래스를 사용한다. 

- 단점

1. 빌드 단계가 필요하다. 

2. tailwind 클래스 이름 등을 학습하는 시간이 필요하다. (-> 공식 문서, 튜토리얼, 예제를 참고하면 도움이 된다. )

3. html 클래스가 많아져서 다운로드 크기가 커질 수 있다. (-> 반복 데이터는 쉽게 압축된다. )

4. 일부 css 속성, 고급 기술을 모두 tailwind 로 할 수 없다. 나도 종종 클래스를 따로 만들어서, 스타일링한다.

5. css를 제대로 배우는 데 도움이 안될 수 있다. 그리고 내 생각에는 css를 알아야 그걸로 tailwind 문서에서 검색을 해서 어떤 클래스를 사용해야 하는지 찾을 수 있는 것 같다.

6. 문서 구조(html)와 스타일(css)이 분리가 안된다. 

그리고 코드가 이상해보이고(html 클래스가 길어지고, 이상해보인다..), 긴 클래스 이름도 있고, 반복이 많을 수 있다.

- 장점

1. 스타일 클래스 이름을 고민할 필요가 없다. 공감한다! tailwind css 를 사용하지 않고 스타일을 주려고 클래스를 만들면, 처음에는 해당 클래스를 한 곳에서 쓸 줄 알고 이름을 정했는데, 다른 곳에서도 쓰면 이름이 적합하지 않은 경우도 있었다. 또 이름을 일관적으로 짓는 게 아니라 중구난방이 되기도 했다. tailwind 를 사용하면, 어떤 스타일 줘야 하는지 생각하고 클래스에 그 이름을 추가하면 끝이다. 종종 클래스명을 모르면, Tailwind 사이트에서 검색하면 되고~~

2. css, html 코드 간에 왔다 갔다를 많이 안해도 된다. html <-> css 탭을 전환하거나 스크롤을 많이 이동하지 않아도 된다. 

3. 미디어 쿼리, 의사 클래스, 자식 선택자, 변형(다크 모드/ 포커스/ hover 등)도 사용할 수 있다. 변형 특히 사이즈 클래스, hover, focus, active, dark, disabled는 많이 사용하고 있었는데 미디어 쿼리나 의사 클래스도 tailwind css로 할 수 있는 줄 몰랐다. 의사 클래스나 자식 선택자를 선택하려고 tailwind css가 아닌 클래스를 생성하고, css 코드를 작성했는데.. 내일부터는 tailwind 클래스를 이용해봐야겠다 !! 

4. 일관성 있는 디자인 ! 색상 팔레트, 간격, 폰트 크기 등이 정해진 게 있어서 가져다가 쓰면 일관성 있어 보인다. 그래도 값을 커스텀해서 사용할 수는 있다.

5. 빌드 프로세스를 사용해서 실제로 코드에 있는 클래스만 css로 생성한다. 

6. 유틸리티 클래스는 잘 캐시된다.

7. 스타일 충돌을 (거의) 걱정할 필요 없이, 바꾸고 싶은 스타일이 있으면 해당 엘리먼트에 적용된 스타일을 보고 수정하면 된다. 

8. 컴포넌트를 만들거나 tailwind @apply 기능을 사용하면 코드 반복을 줄일 수 있다. 

9. 유지, 관리하기 쉽다. 

 

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

위 글을 읽고 tailwind css에 관한 글을 더 읽어봤다 :)

팀에서 tailwind css 사용하기 전의 문제 상황/ 그 상황을 개선하기 위해서 tailwind를 선택한 이야기/ 어떻게 사용했는지를 다룬다. 

어떻게 사용하나?

- Twin.Macro 라는 라이브러리를 활용해서, tailwind에 emotion css를 같이 사용할 수 있게 했다. 

- plugin 함수를 사용해서 tailwind 유틸리티를 추가할 수 있다.

- 다해상도 대응, 새로운 단위 정의, 다크모드 지원도 있다.

 

tailwind css에 대해서 몰랐던 기능들을 알게 돼서 너무 좋다!!! 스크롤바 디자인을 위해서 많은 코드를 추가하는 경우가 있었는데, 따로 커스텀 플러그인을 만들어서 적용해봐야겠다. 그리고 다음 스프린트에 px로 사용하던 것을 rem으로 바꾸는 이슈를 처리해야 하는데, 이 글의 '새로운 단위 정의' 부분을 참고해봐야겠다 !