React

CSS Variables for React Devs

React 와 CSS-in-JS 를 사용하면서 CSS variable 을 쓰는 것에 대한 장단점을 설명하는 글.

장점

  • 자바스크립트 변수로 css 값을 지정하는 것 (예를 들면 styled-components 의 theme 기능을 사용하는 것) 보다 좀 더 선언적이고 가독성 있는 코드가 가능하다.
  • media query 적용 및 관리에 있어 더 유리하다.
  • CSS-in-JS 로 해결이 어려운 이슈들을 해결할 수 있다
    • 좀 더 다양한 애니메이션을 쉽게 적용할 수 있다
    • Dark Mode 깜빡임 현상을 해결할 수 있다

단점

  • 타입 지정이 안 된다 (= IDE 자동완성 기능을 쓸 수 없다)
  • 특정 상황에서 (자바스크립트로 값을 지정하는 것보다) 덜 유연하다

평소에 생각해보지 않은 흥미로운 관점이다. 본문 글이 보다 상세하고 예제 코드들도 포함하고 있으니, 흥미롭다면 본문을 읽어보자.

Applying Design Patterns in React: Strategy Pattern

React 컴포넌트를 구현할 때, 디자인 패턴 중 하나인 "전략 패턴"을 언제 적용하면 좋을지 예제 코드와 함께 설명한다.

이런 글을 볼 때마다 느끼는 건

  1. “디자인 패턴“이라고 하지만 코드 자체가 특별히 색다르거나 훌륭하지 않다. 나도 이미 비슷한 형태로 구현한 적이 꽤 있을 것 같다. (실제로 그런 경우가 많다)
  2. 하지만 그런 평범한 것을 규칙으로서 혹은 패턴으로서 접하게 되면 좀 더 기억에 잘 남는다.
    • 앞으로 비슷한 상황이 생기면 적용해보고 싶다.
    • (혹은) “아 이건 이래서 별로야 저래서 별로야” 하고 비판적으로 받아들이고 자신이 알고 있는 더 좋은/적절한 패턴을 다시 찾아보게 된다.

라는 것이다. 그런 의미에서 읽어볼만한 글이다. 글이 길지도 않아서 읽기 좋다.

How to Use Google Sheets as a Database with React and Serverless

구글 스프래드시트를 Serverless DB 처럼 활용해, Next.js 와 Gatsby 로 웹앱을 만드는 것에 관한 글. 글에 포함된 예제는 투표 기능을 구현했다.

데이터가 시트에 저장되기 때문에 별도의 대시보드를 만들지 않고도 비개발자(기획자, 마케터 등)분들에게 쉽게 공유할 수 있다는 장점이 있다.

CSS

CSS - :where()와 :is()를 사용해보자 [Selectors Level 4]

:where():is() 에 대한 설명글. 둘다 CSS 스타일 선언 시 중복 제거에 쓰인다.

/* Level 1 */
section h1,
article h1,
aside h1 {
  font-size: 25px;
}
:where(section, article, aside) h1 {
  font-size: 25px;
}
:is(section, article, aside) h1 {
  font-size: 25px;
}

차이점은 :where() 가 명시성이 0이라는 것.

본문에는 아직 초안이라고 나와있지만 그건 해당 글이 21년도 글이라 그렇고, 현재는 :where():is() 둘 다 사용 가능하다.

Etc

(번역) console.log()와 함께하는 재미

console 모듈의 다양한 사용법에 대한 설명글. 이미 많이 알려진 내용이지만, 알고 있는 사람도 리마인드 하기에 좋은 글이다.

TechBlogPosts

IT 회사들이 운영하는 기술 블로그들의 글을 모아서 (목록 및 링크만) 보여주는 블로그. 한 눈에 보여서 꽤 괜찮다.