๐Ÿ‘ฉโ€๐Ÿ’ป Learn programming

[๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ] 8. ๋ชฉ๋กํŽ˜์ด์ง€ - ๋‹จ์–ด ๋ชฉ๋ก ๊ฐ€์ ธ์˜ค๊ธฐ

๋ฐ๊ตฅ์ž‰ 2022. 5. 4. 14:24
๋ฐ˜์‘ํ˜•

jinja2๋กœ ๋‹จ์–ด ๋ชฉ๋ก ํ…Œ์ด๋ธ”

  • DB์— ์ €์žฅ๋œ ๋‹จ์–ด ๋ชฉ๋ก์„ ๊ฐ€์ ธ์™€ ํ…Œ์ด๋ธ”์„ ์ฑ„์›€.

 

โœ… app.py - words ์ปฌ๋ ‰์…˜์˜ ๋‹จ์–ด๋“ค์„ ๊ฐ€์ ธ์™€ ๋„˜๊ฒจ์คŒ.

@app.route('/')
def main():
    # DB์—์„œ ์ €์žฅ๋œ ๋‹จ์–ด ์ฐพ์•„์„œ HTML์— ๋‚˜ํƒ€๋‚ด๊ธฐ
    words = list(db.words.find({}, {"_id": False}))
    # list ์•ˆ์— db.words.find๋กœ ์กฐ๊ฑด ์—†๋Š” ๋ชจ๋“  ๋‹จ์–ด {}๋ฅผ ์ฐพ์Œ. ์ฆ‰, words๋Š” ๋‚ด db์— ์ €์žฅ๋œ ๋ชจ๋“  ๋‹จ์–ด๋“ค์˜ ๋ฆฌ์ŠคํŠธ.
    # _id๋Š” mongodb์—์„œ ์ž๋™์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” id์ธ๋ฐ ์ž๋ฃŒํ˜•์ด ํŠน์ดํ•ด์„œ _id๊ฐ€ ๋“ค์–ด์žˆ๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ render_template์— ๋„ฃ์œผ๋ฉด ์—๋Ÿฌ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— False.

    return render_template("index.html", words=words)

โœ… index.html - ๊ฐ ๋‹จ์–ด๋งˆ๋‹ค ํ…Œ์ด๋ธ”์˜ ํ•œ ์ค„์ด ๋˜๋„๋ก ๋„ฃ์–ด์คŒ

<tbody id="tbody-box">
    {% for word in words %} <!--ํ•˜๋‚˜์˜ ๋‹จ์–ด์— ๋Œ€ํ•ด์„œ tr ํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค๊ธฐ ๋•Œ๋ฌธ์— for ๋ฐ˜๋ณต๋ฌธ ์‚ฌ์šฉ-->
    <tr id="word-{{ word.word }}">
        <td><a href="/detail/{{ word.word }}?status_give=old">{{ word.word }}</a></td> 
        <!-- ๋ชฉ๋ก์˜ ๋‹จ์–ด๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹นํ•˜๋Š” ์ƒ์„ธ ํŽ˜์ด์ง€๋กœ ์ด๋™, ๋‹จ์–ด์žฅ์— ์ €์žฅ๋˜์–ด ์žˆ๋Š” ๋‹จ์–ด์ด๋ฏ€๋กœ status๋Š” old -->
        <td>
            {{ word.definition|safe }} <!-- word ๋ฆฌ์ŠคํŠธ์˜ definition key -->
        </td>
    </tr>
    {% endfor %}
</tbody>

  • words ๋”•์…”๋„ˆ๋ฆฌ ์•ˆ์— word ๋ฆฌ์ŠคํŠธ ์•ˆ์— word, definition์˜ key๊ฐ€ ์žˆ์Œ.
  • {{ word.word }} : word ๋ฆฌ์ŠคํŠธ ์•ˆ์˜ word ํ‚ค๋ฅผ ๊ฐ€๋ฆฌํ‚ด
  • ์˜ˆ๋ฅผ ๋“ค์–ด,
  • words = [{ โ€œwordโ€ : โ€œgoodโ€ , โ€œdefinitionโ€ : โ€œto be desired or approved of.โ€ }] ๋ผ๋ฉด,
  • ์•„์ด๋”” word-{{ word.word }} ๋Š” word-good ์ด ์•„์ด๋””๊ฐ€ ๋จ.
๋ฐ˜์‘ํ˜•