접근성 작업을 도와주는 ESLint plugin 개발기

੽Ӕࢿѐࢶ BSJB - MBCFM BSJB - DIFDLFE BSJB - DPOUSPMT
BSJB - FYQBOEFE BSJB - NPEBM BSJB - QSFTTFE BSJB - EJTBCMFE BSJB - IJEEFO

)UNMীחMBOH੉੓যঠೣ ߡౡীఋੑਸԙࠢৈঠೣ BMUীࢎ૓ ੉޷૑ۄחӖ੗оٜযоݶউؽ JNHীBMUࣘࢿ੉੓যঠೣ झ৬੉೐ীݥ୶חӝמ੉੓যঠೣ *OMJOFࠗݽীCMPDL੗ध੉য়ݶউؽ ߓ҃਺ਸՍחӝמ੉੓যঠೣ ੋ੽࢚࢝੄ݺب؀࠺ਯ਷੉যঠೣ UPBTU੄दрਸ੿ೡࣻ੓যঠೣ
ୡ׼ഥ੉࢚ߣ૶੉ח௑బஎܳನೣೞݶউؽ ੗زਵ۽ܻࣗо੤ࢤY @@CMBOLоয়ݶ࢜ହৌܿ੉ನೣغযঠೣ ઱ઁաݾ੸ਸઁݾਸನೣ೧ঠೣ 4UBUJDৃܻݢ౟ীੋఠ۩࣌੉ٜযоݶউؽ ೻٬җۨ੉࠶ীח઱ઁ৬ݾ੸ਸನೣ೧ঠೣ ઱ઁաݾ੸ਸઁݾਸನೣ೧ঠೣ NFEJBחDBQUJPO੉੓যঠೣ MBCFM਷GPSо೙ਃೣ JGSBNF਷UJUMF੉೙ਃೣ ఫझ౟৬ఫझ౟੉޷૑੄दп੸಴അਸਤೠݺب؀࠺ਯ਷୭ࣗೠ੉࢚غযঠೣ ఫझ౟௑బஎח੉೧ೞҊ੍ਸࣻ੓যঠೣ ডয੄ࠄ٪݈੉ա੄޷ܳੋधೡࣻ੓חݫழפ્ਸઁҕ೧ঠೣ ࢎਊ੗ੋఠಕ੉झҳࢿਃࣗоನழझܳ߉਷҃਋ݓۅ߸҃ਸୡې೧ࢲחউؽ ੑ۱য়ܨо੗زਵ۽х૑ػ׮ݶ ࢎਊ੗ীѱ੉ܳঌ۰઱Ҋয়ܨী؀ೠࢸݺఫझ౟о೙ਃ

ӝઓ௏٘ח যڌѱ৻਎ө যڌѱঌ۰઱૑

FTMJOU - QMVHJO - KTY - BZ

FTMJOU - QMVHJO - BZ ࠄ੗ܐীחࢤࢿഋ"*Ѿҗޛ੉ੌࠗನೣغয੓णפ׮

ਢ੽Ӕࢿ੉ۆ ৵&4-JOUੋо &4-JOUSVMFҳഅ ೠ҅৬ӓࠂ ݃ޖܻ

ਢ੽Ӕࢿ੉ۆ

ਢ੽Ӕࢿ ੢গੋ੉աҊ۸੗بtਢࢎ੉౟ীࢲઁҕೞח੿ࠁuܳ ࠺੢গੋҗڙэ੉औѱ੽ӔೞҊ੉ਊ

झ௼ܻܽ؊ ചݶഛ؀بҳ ਺ࢿੋध ఃࠁ٘য়ߡۨ੉

ਢ಴ળо੉٘ झ௼ܻܽ؊

5࣊ౣ୶ୌࣽߡౡ

5࣊ౣ୶ୌࣽ౼সߡౡ

.PTUFMFNFOUTUIBUBSFDBUFHPSJ[FEBTQISBTJOHDPOUFOUDBOPOMZDPOUBJO FMFNFOUTUIBUBSFUIFNTFMWFTDBUFHPSJ[FEBTQIBTJOHDPOUFOU

JOMJOFৃܻݢ౟੄੗धਵ۽ח JOMJOFৃܻݢ౟݅ৢࣻ੓णפ׮

৵&4-JOUੋо

)UNMীחMBOH੉੓যঠೣ ߡౡীఋੑਸԙࠢৈঠೣ BMUীࢎ૓ ੉޷૑ۄחӖ੗оٜযоݶউؽ JNHীBMUࣘࢿ੉੓যঠೣ झ৬੉೐ীݥ୶חӝמ੉੓যঠೣ *OMJOFࠗݽীCMPDL੗ध੉য়ݶউؽ ߓ҃਺ਸՍחӝמ੉੓যঠೣ ੋ੽࢚࢝੄ݺب؀࠺ਯ਷੉যঠೣ UPBTU੄दрਸ੿ೡࣻ੓যঠೣ
ୡ׼ഥ੉࢚ߣ૶੉ח௑బஎܳನೣೞݶউؽ ੗زਵ۽ܻࣗо੤ࢤY @@CMBOLоয়ݶ࢜ହৌܿ੉ನೣغযঠೣ ઱ઁաݾ੸ਸઁݾਸನೣ೧ঠೣ 4UBUJDৃܻݢ౟ীੋఠ۩࣌੉ٜযоݶউؽ ೻٬җۨ੉࠶ীח઱ઁ৬ݾ੸ਸನೣ೧ঠೣ ઱ઁաݾ੸ਸઁݾਸನೣ೧ঠೣ NFEJBחDBQUJPO੉੓যঠೣ MBCFM਷GPSо೙ਃೣ JGSBNF਷UJUMF੉೙ਃೣ ఫझ౟৬ఫझ౟੉޷૑੄दп੸಴അਸਤೠݺب؀࠺ਯ਷୭ࣗೠ੉࢚غযঠೣ ఫझ౟௑బஎח੉೧ೞҊ੍ਸࣻ੓যঠೣ ডয੄ࠄ٪݈੉ա੄޷ܳੋधೡࣻ੓חݫழפ્ਸઁҕ೧ঠೣ ࢎਊ੗ੋఠಕ੉झҳࢿਃࣗоನழझܳ߉਷҃਋ݓۅ߸҃ਸୡې೧ࢲחউؽ ੑ۱য়ܨо੗زਵ۽х૑ػ׮ݶ ࢎਊ੗ীѱ੉ܳঌ۰઱Ҋয়ܨী؀ೠࢸݺఫझ౟о೙ਃ

ӝઓ௏٘ח যڌѱ৻਎ө যڌѱঌ۰઱૑ 5FTUJOH

+FTU 4UPSZCPPL

&4-JOUী۞಴द੢ݶ

FTMJOU - QMVHJO - KTY - BZ

ӝઓ௏٘ח যڌѱ৻਎ө যڌѱঌ۰઱૑ $MFBS

যڌѱ৻਎ө &4-JOUী۞ݫࣁ૑ ী۞ޙࢲച

ӝઓ௏٘ח যڌѱ৻਎ө যڌѱঌ۰઱૑ $MFBS $MFBS

যڌѱ৻਎ө &4-JOUী۞ݫࣁ૑ ী۞ޙࢲച

ӝઓ௏٘ח যڌѱ৻਎ө যڌѱঌ۰઱૑ $MFBS $MFBS $MFBS

ӝઓ௏٘ח &4-JOUप೯ী۞ ࠽٘ী۞

о੉٘ী؀਽ೞחܙহ਺ FNPUJPOTUZMFE૑ਗহ਺

FTMJOU - QMVHJO - BZ ࠄ੗ܐীחࢤࢿഋ"*Ѿҗޛ੉ੌࠗನೣغয੓णפ׮

&4-JOU1MVHJOҳഅ

JOMJOFৃܻݢ౟੄੗धਵ۽ח JOMJOFৃܻݢ౟݅ৢࣻ੓णפ׮

export default { meta: { docs: { url: '', description:
``, }, }, create: (context) => { return {} } }

ݽٚ&MFNFOUܳоઉ১ оઉৡ&MFNFOUࣽഥೞݶࢲ೧׼&MFNFOUоJOMJOFੋ૑଺਺ ݅ডJOMJOF੉ۄݶ ੗धٜਸࣽഥ ࣽഥ઺CMPDLਸ݅աݶFSSPSࢤࢿ

export default { meta: { docs: { url: '', description:
``, }, }, create: (context) => { return { JSXElement: (node) => {} } } }

div img span strong p Text Text

export default { create: (context) => { const elementType =
getElementType(context) return { JSXElement: (node) => {} } } }

getElementType(context) return { JSXElement: (node) => { const element = node.openingElement const nodeType = elementType(element) // div, button, Temp if (isInlineElement(nodeType)) {} } } } }

getElementType(context) return { JSXElement: (node) => { const element = node.openingElement const nodeType = elementType(element) if (isInlineElement(nodeType)) { for (let i = 0; i < node?.children.length; i++) { // div, span, button, Temp, … const childNodeName = getChildNodeName(node, i) } } } } } }

getElementType(context) return { JSXElement: (node) => { const element = node.openingElement const nodeType = elementType(element) if (isInlineElement(nodeType)) { for (let i = 0; i < node?.children.length; i++) { const childNodeName = getChildNodeName(node, i) if (isBlockElement(childNodeName)) { context.report({ node, message: errorMessage }) } } } } } } }

&4-JOUী۞಴द੢ݶ

ҳഅೠ҅৬ӓࠂ

const Styled = { Temp: styled.div`` } const Button =
() => { return ( <button> <Styled.Temp /> // div </button> ) }

Styled.Temp button

const Styled = { Temp: styled.div`` } const Button =
() => { return ( <button> <Styled.Temp /> // div </button> ) }

const Styled = { Temp: styled.div`` }

const styledDic = { Styled.Temp: ‘div’ }

SVMF BGUFS EJD CFGPSF ߸ജ ࠺Ү &4-JOU1MVHJO೒۽਋ Styled.Temp button Styled.Temp
‘div’

SVMF BGUFS EJD CFGPSF ߸ജ ࠺Ү &4-JOU1MVHJO೒۽਋ Styled.Temp Styled.Temp ‘div’
button

SVMF BGUFS EJD CFGPSF ߸ജ ࠺Ү &4-JOU1MVHJO೒۽਋ div Styled.Temp ‘div’
button

SVMF BGUFS EJD CFGPSF ߸ജ ࠺Ү &4-JOU1MVHJO೒۽਋ Styled.Temp Styled.Temp ‘div’
button

const collectStyledComponents = (styledComponentsDict, context, name) => ({ TaggedTemplateExpression(node) {
// styled.div``, styled(Temp)`` let scName = node.parent?.id?.name if (!scName) { if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } } }, })

const Styled = { Temp: styled.div`` } const { Temp
} = Styled const Temp = styled.div``

let scName = node.parent?.id?.name if (!scName) { // cont Styled = { Temp: styled.div`` }, const { Temp } = Styled if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } } }, })

let scName = node.parent?.id?.name // const Temp = styled.div`` if (!scName) { if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } } }, })

let scName = node.parent?.id?.name if (!scName) { if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } } }, })

let scName = node.parent?.id?.name if (!scName) { if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { // const { Temp } = Styled styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } } }, })

let scName = node.parent?.id?.name if (!scName) { if (isPlainSTE(node)) scName = `${node.parent.parent.parent.id.name}.${node.parent.key.name}` else return } let tag = '' if (isPlainSTE(node)) { tag = node.tag.property.name if (scName.split('.')[1]) { styledComponentsDict[scName.split('.')[1]] = { name: scName.split(‘.’)[1], tag } } styledComponentsDict[scName] = { name: scName, tag } // Styled.Temp, Temp } }, })

const Styled = { Temp: styled.div`` }

const styledDic = { Styled.Temp: ‘div’ }

module.exports = (context, styledComponents, rule, name) => ({ JSXElement(node) {
try { const elementName = node.openingElement.name.name const styledComponent = styledComponents[elementName] if (styledComponent) { const { tag } = styledComponent const originalNodeName = node.openingElement.name try { node.openingElement.name = { type: 'JSXIdentifier', ...originalNodeName, name: tag, } rule.create(context).JSXElement(node) } finally { node.openingElement.name = originalNodeName } } else { rule.create(context).JSXElement(node, styledComponents) } } catch {} }, })

try { const elementName = node.openingElement.name.name const styledComponent = styledComponents[elementName] if (styledComponent) { const { tag } = styledComponent const originalNodeName = node.openingElement.name try { node.openingElement.name = { type: 'JSXIdentifier', ...originalNodeName, name: tag, } rule.create(context).JSXElement(node) } finally { node.openingElement.name = originalNodeName } } else { // ੷੢ࣗী ೧׼ ч੉ হ׮ݶ… rule.create(context).JSXElement(node, styledComponents) } } catch {} }, })

try { const elementName = node.openingElement.name.name const styledComponent = styledComponents[elementName] if (styledComponent) { // ੷੢ࣗী ೧׼ ч੉ ੓׮ݶ… const { tag } = styledComponent const originalNodeName = node.openingElement.name try { // ੋఠಕ੉झ ాੌ ߂ కӒ ߸҃ node.openingElement.name = { type: 'JSXIdentifier', ...originalNodeName, name: tag, // కӒ ߸҃ } rule.create(context).JSXElement(node)// पઁ ܙ } finally { node.openingElement.name = originalNodeName } } else { rule.create(context).JSXElement(node, styledComponents) } } catch {} }, })

try { const elementName = node.openingElement.name.name const styledComponent = styledComponents[elementName] if (styledComponent) { const { tag } = styledComponent const originalNodeName = node.openingElement.name try { node.openingElement.name = { type: 'JSXIdentifier', ...originalNodeName, name: tag, } rule.create(context).JSXElement(node) } finally { node.openingElement.name = originalNodeName } } else { rule.create(context).JSXElement(node, styledComponents) } } catch {} }, })

4UZMFEਃࣗ&4-JOUী۞಴द੢ݶ

ੌ߈ਃࣗ&4-JOUী۞಴द੢ݶ

݃ޖܻ

ਢ੽Ӕࢿ੉ۆ ৵&4-JOUੋо &4-JOUSVMFҳഅ ೠ҅৬ӓࠂ

੽Ӕࢿѐࢶ

хࢎ೤פ׮

접근성 작업을 도와주는 ESLint plugin 개발기

접근성 작업을 도와주는 ESLint plugin 개발기

More Decks by kakao

Other Decks in Programming

Featured

Transcript