@fe
(@Feca [Web FE]@Hanna [Web FE]@Juun [Web FE Lead]@Ssol [Web FE]@EATSTEAK [Web FE]@Jerome [Web FE Vice Lead])요즘 개발자라면 개인 블로그 하나 기본템으로 있던데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) }깃모지 풀로 작성안해도 굉장히 편하게 쓸 수 있습니다 (편집됨)
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
asChild
처럼 시멘틱 태그 변경할 때 어떤 방식이 좋을까Button
<-> Link
) (편집됨)node_modules
하위로 호이스팅 시키지 않는 변경이 있었는데 VSCode ESLint 플러그인 서버가 호이스팅 되지 않는 ESLint 플러그인을 찾지 못해서 발생하는 문제인 것 같습니다. (ESLint CLI 환경에서는 문제 없음) (관련 이슈)해결 방법: 프로젝트 루트 디렉토리에 .npmrc
파일을 만들고 아래 내용 추가public-hoist-pattern[]=*eslint* public-hoist-pattern[]=*prettier*(편집됨)
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) }깃모지 풀로 작성안해도 굉장히 편하게 쓸 수 있습니다 (편집됨)
상남자는 커밋 메시지전에 핫픽스한다고 커밋메시지
.쳤다가 10분정도 깨졌는데