FrontEnd :-)

2022.11.24. 본문

TIL/트렌드 읽기

2022.11.24.

code10 2022. 11. 29. 16:17

1. https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6

 

(번역) 우리가 CSS-in-JS와 헤어지는 이유

원문: https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

junghan92.medium.com

CSS-in-JS?

- "CSS-in-JS를 사용하면 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일을 지정할 수 있습니다. styled-components Emotion은 리액트 커뮤니티에서 가장 인기 있는 CSS-in-JS 라이브러리."

 

좋은 점

1️⃣. 지역 스코프 스타일. 2️⃣. 코로케이션. 3️⃣. 자바스크립트 변수를 style에 사용할 수 있습니다.

 

나쁜 점

1️⃣. CSS-in-JS는 런타임 오버헤드를 더합니다. 2️⃣. CSS-in-JS는 번들 크기를 늘립니다. 3️⃣. CSS-in-JS는 React DevTools를 어지럽힙니다.

 

못난 점

1️⃣. CSS 규칙을 자주 삽입하면 브라우저에서 더 많은 추가 작업을 수행해야 합니다. 2️⃣. CSS-in-JS를 사용하면 특히 SSR 및 혹은 또는 컴포넌트 라이브러리를 사용할 때 잘못될 수 있는 부분이 훨씬 더 많습니다. 

 

"Sass 모듈은 단순히 Sass로 작성된 CSS 모듈입니다. 기본적으로 런타임 비용 없이 지역 스코프의 CSS 모듈 스타일과 Sass의 강력한 빌드 시간 장점을 누릴 수 있습니다. 이것이 Sass 모듈이 앞으로 우리의 범용 스타일링 솔루션이 될 이유입니다. 참고: Sass 모듈을 사용하면 CSS-in-JS의 이점 3(스타일에서 자바스크립트 변수를 사용하는 기능)을 잃게 됩니다. 하지만, Sass 파일에서 :export 블록을 사용하면 Sass 코드의 상수를 자바스크립트에서 사용할 수 있도록 할 수 있습니다. 편리하진 않지만 DRY 하게 코드를 작성할 수 있게 도와줍니다."

 

👉 https://kofearticle.substack.com/ 구독해봅니다..

 

 

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

 

2. https://www.inflearn.com/pages/infmation-55-20221101?utm_source=mailchimp&utm_medium=email&utm_campaign=traffic_infmation_web3&utm_content=20221101 

 

웹 3.0, 그것이 궁금하다! - 인프런 | 스토리

말도 많고 탈도 많은 웹 3.0, 더 알아보기! #웹 3.0 #Sementic Web #DSC #분산 슈퍼 컴퓨팅 #맞춤형 웹[사진] '웹 3.0이 도래했다'는 말, 심심찮게 들어보셨죠?누군가는 마케팅 용어일 뿐이라고도...

www.inflearn.com

"

- 웹 1.0은 1990년대 중반부터 2000년대 중반까지 이어졌던 첫 번째 인터넷 세상의 단계를 뜻합니다. 인터넷을 이용하는 소비자의 입장에서는 콘텐츠 제공자가 정보를 제공하면 이를 단순히 받아들이고 소비할 수만 있었죠. 이 일방적 소통은 웹 브라우저를 통해 이루어졌으며, 쉽게 생각하면 구글이나 야후와 같은 검색 서비스입니다.

- 웹 2.0은 2000년대 중반부터 2020년인 최근까지 이어졌어요. 이제 사용자들은 일방적으로 콘텐츠를 소비하는 것에서 그치지 않고 직접 콘텐츠를 생산하게 되었죠. 이는 플랫폼 사업자가 등장하면서 시작되었는데 웹 1.0과는 다르게 이제는 사람들이 플랫폼을 통해 콘텐츠를 주고받으며 상호작용할 수 있게 된 것입니다.

- 웹 3.0 : 탈중앙화와 메타버스가 핵심! 정보의 주권을 이용자가 갖자는 것(소유)이 웹 3.0의 시작. 웹 3.0에서는 블록체인을 통해 데이터가 분산되어 저장됩니다.

"

 

👉 위 글은 내용이 길지 않아서, web 3.0 관련한 자세한 내용은 다른 글을 찾아보면 좋을듯. https://www.samsungsds.com/kr/insights/web3.html

🧐 근데 web3 랑 web3.0 은 다르다고?

👉 이 글도 읽어보기 

https://smallake.kr/?p=31694

 

웹3.0 vs 웹3 | 그대안의 작은 호수

자본시장과 IT, 핀테크와 블록체인 1. 개인적으로 블록체인에 관심을 가지고 있지만 이를 이용한 서비스는 부정적인 입장이었습니다. 그런데 어느 날부터 웹3.0으로 블록체인에 기반한 인터넷이

smallake.kr

 

3. https://techblog.woowahan.com/9347/

 

작고 아기자기하지만, 개발조직의 문화 만들기 [ep 1. 웹프론트개발그룹 운영진을 소개합니다] |

{{item.name}} 2022년 1월 5일 평온한 오후, 저는 재택근무를 하며 업무에 집중하고 있었습니다. ‘띠릭’ 갑자기 정적을 깨며 울리는 슬랙 알람 소리. “웹프론트개발그룹 2022 운영진을 모집합니다!

techblog.woowahan.com

 

4. https://yozm.wishket.com/magazine/detail/1778/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 

 

신입 개발자를 위한 완벽한 온보딩 가이드 | 요즘IT

관리자로서 신입 개발자가 회사 문화에 적응하고, 새로운 역할을 성공적으로 수행할 수 있도록 돕는 것은 여러분의 몫입니다. 신입 개발자의 첫 출근 시점부터 이들의 발전을 위해 투자하면 조

yozm.wishket.com

 

5. https://yozm.wishket.com/magazine/detail/1766/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 

 

대중교통 앱으로 보는 좋은 알림 | 요즘IT

몇몇 앱에서는 사람들이 대중교통 승하차 과정에서 겪는 일상적인 불편함을 해결하기 위해 알림 기능을 제공하고 있습니다. 이번 글에서는 이들 알림이 어떤 원리로 작동하고 있으며 사용자에

yozm.wishket.com

😀 대중교통 앱을 자주 사용해서 흥미롭게 읽음. 

 

6. https://yozm.wishket.com/magazine/detail/1780/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 

 

웹 서버와 WAS(Web Application Server) | 요즘IT

웹 서버는 정적인 데이터를 처리하는 서버입니다. 이미지나 단순 html 같은 정적인 리소스들을 전달하며, WAS만을 이용할 때보다 빠르고 안정적으로 기능을 수행합니다. 반면 WAS는 동적인 데이

yozm.wishket.com

 

"

- 웹 서버는 클라이언트가 브라우저 주소창에 url을 입력하여 어떤 페이지를 요청하면, http 요청을 받아들여 HTML 문서와 같은 정적인 콘텐츠를 사용자에게 전달해주는 역할을 합니다.

WAS(Web Application Server)란? 

- WAS 또한 웹 서버와 동일하게 HTTP 기반으로 동작합니다. 웹 서버가 할 수 있는 기능 대부분이 WAS에서도 처리가 가능하며, 비즈니스 로직(서버사이드 코드)을 처리할 수 있어 사용자에게 동적인 콘텐츠를 전달할 수 있습니다. 주로 데이터베이스 서버와 같이 수행됩니다. 

웹 서버와 WAS 차이?

- 웹 서버는 정적인 데이터를 처리하는 서버입니다. 이미지나 단순 html 같은 정적인 리소스들을 전달하며, WAS만을 이용할 때보다 빠르고 안정적으로 기능을 수행합니다. 반면 WAS는 동적인 데이터를 위주로 처리하는 서버입니다. DB와 연결되어 사용자와 데이터를 주고받고, 조작이 필요한 경우 WAS를 활용합니다.

- WAS는 DB 조회 및 다양한 로직을 처리하는 데 집중해야 합니다. 

"

'TIL > 트렌드 읽기' 카테고리의 다른 글

2022.11.29.  (0) 2022.12.04
2022.12.01.  (0) 2022.12.01
2022.11.23.  (0) 2022.11.24
2022.11.18.  (0) 2022.11.20
트렌드 읽기 시작  (0) 2022.11.18
Comments