Handlebars.js: ํ‘œํ˜„์‹์˜ {{ ๊ธฐํ˜ธ๋ฅผ ๋‹ค๋ฅธ ๊ธฐํ˜ธ๋กœ ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2018๋…„ 09์›” 17์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: handlebars-lang/handlebars.js

ํ˜„์žฌ ํ…œํ”Œ๋ฆฟ์€ JSX ๊ตฌ๋ฌธ์ด๋ฉฐ ๋ชจ๋“  {๊ฐ€ ๊ตฌ๋ฌธ ๋ถ„์„๋˜์–ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  ๋ชจ๋“  ๊ตฌ์„ฑ์ด { ๊ธฐํ˜ธ๋ฅผ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค.
๋ฌธ์„œ์—์„œ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ถฉ๋ถ„ํžˆ ์กฐ์‹ฌํ•˜์ง€ ์•Š์•˜๋Š”์ง€๋„ ๋ชจ๋ฅธ๋‹ค.

 // such
 style={{ textAlign: 'right' }}

 render() {
    return (
      <Form
        className="ant-advanced-search-form"
        onSubmit={this.handleSearch}
      >
        <Row gutter={24}>{this.getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">Search</Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              Clear
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

{{ ๋ฐฑ์Šฌ๋ž˜์‹œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ \{{ ์ด์Šค์ผ€์ดํ”„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋ฌธ์ž๋ฅผ ์™„์ „ํžˆ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‚ด๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ–ˆ๋‹ค๋ฉด ํ•ธ๋“ค๋ฐ” ๊ตฌ๋ฌธ์„ {{expression}} ์—์„œ [[expression]] ๋˜๋Š” ^&expression&^ ์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ํƒœ๊ทธ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ๋ฅผ ์›ํ•˜์‹ญ๋‹ˆ๊นŒ?

์ €๋Š” ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•œ ์‚ฌ๋žŒ์€ ์•„๋‹ˆ์ง€๋งŒ ํ•ธ๋“ค๋ฐ”๊ฐ€ lex์™€ yacc๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

https://github.com/wycats/handlebars.js/blob/master/src/handlebars.l

์ด๊ฒƒ์€ lex ํŒŒ์ผ์ด๋ฉฐ ํŒŒ์„œ(yacc)์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ๋ฅผ ํ‘œํ˜„ ๊ธฐํ˜ธ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ•ธ๋“ค๋ฐ”์™€ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์ž๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ์ •๊ทœ์‹์—์„œ ์ ์ ˆํ•œ {{ ๋ฐ }} ์ธ์Šคํ„ด์Šค๋ฅผ ์›ํ•˜๋Š” ๊ตฌ๋ฌธ์œผ๋กœ ๋ฐ”๊ฟ”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” lex ๋ฐ yacc ๊ตฌ๋ฌธ์ด ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ ์„œ๋กœ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์š”์ฆ˜ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ๊ตฌํ˜„์€ flex ๋ฐ byacc ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ–ˆ๋‹ค๋ฉด ํ•ธ๋“ค๋ฐ” ๊ตฌ๋ฌธ์„ {{expression}} ์—์„œ [[expression]] ๋˜๋Š” ^&expression&^ ์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ํƒœ๊ทธ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ๋ฅผ ์›ํ•˜์‹ญ๋‹ˆ๊นŒ?

์ €๋Š” ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•œ ์‚ฌ๋žŒ์€ ์•„๋‹ˆ์ง€๋งŒ ํ•ธ๋“ค๋ฐ”๊ฐ€ lex์™€ yacc๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค.

https://github.com/wycats/handlebars.js/blob/master/src/handlebars.l

์ด๊ฒƒ์€ lex ํŒŒ์ผ์ด๋ฉฐ ํŒŒ์„œ(yacc)์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ๋ฅผ ํ‘œํ˜„ ๊ธฐํ˜ธ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ•ธ๋“ค๋ฐ”์™€ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์ž๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ์ •๊ทœ์‹์—์„œ ์ ์ ˆํ•œ {{ ๋ฐ }} ์ธ์Šคํ„ด์Šค๋ฅผ ์›ํ•˜๋Š” ๊ตฌ๋ฌธ์œผ๋กœ ๋ฐ”๊ฟ”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” lex ๋ฐ yacc ๊ตฌ๋ฌธ์ด ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ ์„œ๋กœ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์š”์ฆ˜ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ๊ตฌํ˜„์€ flex ๋ฐ byacc ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋„ค, ๊ทธ ์˜๋ฏธ์ž…๋‹ˆ๋‹ค. ๋ง์”€ํ•˜์‹  ๋Œ€๋กœ ์™ธ๋ถ€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋Œ€์‹  ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
Mustache๋Š” ์œ ์‚ฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๋‚ด ํ˜•ํŽธ์—†๋Š” ์˜์–ด ๋ฒˆ์—ญ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์šฉ์„œํ•ด ์ฃผ์‹ญ์‹œ์˜ค.

{{ ๋ฐฑ์Šฌ๋ž˜์‹œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ \{{ ์ด์Šค์ผ€์ดํ”„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋ฌธ์ž๋ฅผ ์™„์ „ํžˆ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰