유어슈 슬랙 아카이브

멘션봇

홈 키워드 아카이브

채널

1-dev_web_frontend

handy_design_system_tf

1-dev_web_frontend

유어슈 껍데기 담당

Feca [Web FE] 2월 21일, 오후 5:41

25-1 리쿠르팅 2차 스레드
@Juun [Web FE Lead]@Jerome [Web FE Vice Lead]@EATSTEAK [Web FE]@nlog [Web FE]@MJ [Web FE]@EATSTEAK [Web FE]@Ssol [Web FE]

188개의 댓글

5월 11일, 오전 11:18 에 아카이브됨

Feca [Web FE] 4월 2일, 오전 10:06

@fe (@Feca [Web FE]@Hanna [Web FE]@Juun [Web FE Lead]@Ssol [Web FE]@EATSTEAK [Web FE]@Jerome [Web FE Vice Lead])

요즘 개발자라면 개인 블로그 하나 기본템으로 있던데
플랫폼 vs 직접 만들기

뭐가 베스트임?? (편집됨)

129개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 3월 1일, 오후 11:43

멘션봇 멤버 관리 스펙 관련 스레드
cc. @Juun [Web FE Lead]

76개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 3월 26일, 오후 11:55

husky로 깃모지 편하게 쓰기
아주 맛있습니다 ㅋㅋ

(zx 설치해주고)
• .husky/commit-msg.mts

import { fs } from 'zx'

const commitMessagePath = process.argv[2]

if (commitMessagePath) {
  const commitMessage = fs.readFileSync(commitMessagePath, 'utf-8').trim()
  // <https://gitmoji.dev/>
  const newCommitMessage = commitMessage
    // 🐛 Fix a bug.
    .replace(/^b /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f41b@2x.png|:bug:: ')
    // 🎨 Improve Structure / format of the codes.
    .replace(/^a /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f3a8@2x.png|:art:: ')
    // 🔥 Remove code or files.
    .replace(/^f /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f525@2x.png|:fire:: ')
    // ✨ Introduce new features.
    .replace(/^s /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/2728@2x.png|:sparkles:: ')
    // 💄 Update UI and style files.
    .replace(/^l /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f484@2x.png|:lipstick:: ')
    // ♻️ Refactor code.
    .replace(/^r /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/267b-fe0f@2x.png|:recycle:: ')
    // 💩 Write bad code that needs to be improved.
    .replace(/^pp /, ':poop: ')
    // 📦 Update compiled files or packages.
    .replace(/^p /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4e6@2x.png|:package:: ')
    // 🔧 Write configuration file.
    .replace(/^w /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f527@2x.png|:wrench:: ')
    // 🚚 Move file or directory.
    .replace(/^t /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f69a@2x.png|:truck:: ')

  fs.writeFileSync(commitMessagePath, newCommitMessage)
}

import { fs } from 'zx'

const commitMessagePath = process.argv[2]

if (commitMessagePath) {
  const commitMessage = fs.readFileSync(commitMessagePath, 'utf-8').trim()
  // <https://gitmoji.dev/>
  const newCommitMessage = commitMessage
    // 🐛 Fix a bug.
    .replace(/^b /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f41b@2x.png|:bug:: ')
    // 🎨 Improve Structure / format of the codes.
    .replace(/^a /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f3a8@2x.png|:art:: ')
    // 🔥 Remove code or files.
    .replace(/^f /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f525@2x.png|:fire:: ')
    // ✨ Introduce new features.
    .replace(/^s /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/2728@2x.png|:sparkles:: ')
    // 💄 Update UI and style files.
    .replace(/^l /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f484@2x.png|:lipstick:: ')
    // ♻️ Refactor code.
    .replace(/^r /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/267b-fe0f@2x.png|:recycle:: ')
    // 💩 Write bad code that needs to be improved.
    .replace(/^pp /, ':poop: ')
    // 📦 Update compiled files or packages.
    .replace(/^p /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4e6@2x.png|:package:: ')
    // 🔧 Write configuration file.
    .replace(/^w /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f527@2x.png|:wrench:: ')
    // 🚚 Move file or directory.
    .replace(/^t /, ':https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f69a@2x.png|:truck:: ')

  fs.writeFileSync(commitMessagePath, newCommitMessage)
}

깃모지 풀로 작성안해도 굉장히 편하게 쓸 수 있습니다 (편집됨)

스크린샷 2025-03-26 23.55.19.png

23개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 3월 31일, 오전 11:33

진짜 레전드....
cloudflare pages가 next15 (엣지 런타임) 지원 안하네요...

클플 페이지에서 nextjs dynamic route 쓰려면 해당 페이지들은 엣지 런타임으로 돌려야되는데
지원을 안함 ㅋㅋㅋㅋㅋㅋㅋ

호환성 때문에 14로 내려야되나
진짜 어지럽네요...

https://github.com/cloudflare/next-on-pages/issues/952

122개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 2월 28일, 오후 9:24

멘션봇 스펙 관련 스레드 cc. @EATSTEAK [Web FE] (편집됨)

132개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

EATSTEAK [Web FE] 4월 6일, 오후 6:03

https://www.chromium.org/developers/design-documents/
메모용

48개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

EATSTEAK [Web FE] 4월 6일, 오후 2:51

다들 Component Composition 어떻게 하시나요.

예) 같은 디자인, 내부 요소를 가진 컴포넌트이지만 사용처에 따라 시멘틱 의미가 달라지거나 다른 태그를 사용해야 할 때

import { ComplexButton } from "complex-button";
import { Link } from "react-router";

export function ButtonAsLink() {
  return (<>
    {/* radix style */}
    <ComplexButton asChild>
      <Link to="/link">
        Hello
      </Link>
    </ComplexButton>
    {/* `as` Style */}
    <ComplexButton as={Link} />
  </>);
}

@radix-ui/react-slot 이 참 좋아서 애용하고 있긴 한데, asChild를 쓸 경우 children까지 신경써야 하는 경우가 있어서 as prop같은 스타일도 같이 사용할까 생각 중이에요(<= 근데 라이브러리 뭐 쓸지 못찾아서 고민).

여기에 더해서 ComplexButtonGroup 같은 컴포넌트를 만든다고 할 때, query parameter를 조작할 일이 있으면(singular ButtonGroup의 selection 상태를 query parameter로 컨트롤) 당연히 Link 컴포넌트를 사용해서 시멘틱 맥락을 노출하는 것이 좋은데, 이걸 깔끔하게 할 방법이 떠오르지 않더라고요 (일반 ButtonGroup이면 onClick과 이벤트 핸들링으로 전파가 가능한데, query params를 사용하면 Item의 각 value마다 query params를 가진 url을 렌더해줘야 하니까 동작이 크게 달라짐).

이걸 일반화 하려면 어떤 식으로 사용하는 게 좋을까요?

제가 생각하는 to-be 는 아래랑 비슷한데, 이걸 구현하는 좋은 방법이나 아이디어 있으면 의견 부탁드려요.

import { ComplexButton } from "complex-button";
import { Link } from "react-router";

export function ButtonAsLink() {
  return (<>
    {/* radix style */}
    <ComplexButton asChild>
      <Link to="/link">
        Hello
      </Link>
    </ComplexButton>
    {/* `as` Style */}
    <ComplexButton as={Link} />
  </>);
}

TL;DR
1. asChild 처럼 시멘틱 태그 변경할 때 어떤 방식이 좋을까
2. 화면에 보이는 요소(스타일, 내부 태그들)은 동일한데 인터렉션 동작만 크게 다르다면 이걸 어떻게 일반화 해야 할까(예: Button <-> Link) (편집됨)

50개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Juun [Web FE Lead] 3월 26일, 오후 8:43

pnpm v10과 ESLint Flat Compat 을 같이 사용할 때 VSCode ESLint 플러그인 서버가 제대로 동작하지 않는 버그가 있네요.

pnpm v10에서 ESLint, Prettier 플러그인들을 node_modules 하위로 호이스팅 시키지 않는 변경이 있었는데 VSCode ESLint 플러그인 서버가 호이스팅 되지 않는 ESLint 플러그인을 찾지 못해서 발생하는 문제인 것 같습니다. (ESLint CLI 환경에서는 문제 없음) (관련 이슈)

해결 방법: 프로젝트 루트 디렉토리에 .npmrc 파일을 만들고 아래 내용 추가

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*

(편집됨)

60개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

MJ [Web FE] 3월 27일, 오후 8:41

https://opencollective.com/styled-components/updates/thank-you

스컴 사망

opencollective.com

Thank you - styled-components

First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...

41개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 3월 27일, 오전 8:29

next turbopack 빨리 플러그인 지원해줬으면 좋겠네요...
https://github.com/tatethurston/nextjs-routes
이런거 쓰고싶단말이야 엉엉

7개의 댓글

4월 17일, 오후 10:32 에 아카이브됨

스레드

4월 17일, 오후 10:32 에 아카이브됨

Feca [Web FE] 2월 28일, 오후 9:24

멘션봇 스펙 관련 스레드 cc. @EATSTEAK [Web FE] (편집됨)

132개의 댓글

Feca [Web FE] 2월 28일, 오후 9:24

이거 구ㅅ

21:24

구씨가 먼저 제안주신거라 구씨 멘션함

21:26

https://yourssu.slack.com/archives/C9SKN0VRP/p1740744983366439?thread_ts=1740717440.208739&cid=C9SKN0VRP

이거 슬래시 커맨드 얘기가 나와서,
저는 @fe 이런 키워드 인식해서 메시지를 수정하는 방향으로 생각하고 있었는데,

슬래시 커맨드로 구현하게되면 스펙이 어떻게 이루어질까요?

EATSTEAK [Web FE]

슬래시 커맨드로 구현하면 Worker 로 돌리는게 비용 효율이 최고일 듯 해서요

2월 28일, 오후 9:16

메시지 보기