ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ํ”„๋กœ์ ํŠธ TIL (5) - [ XML -> JSON ๋ณ€ํ™˜, CORS ์ด์Šˆ ]
    ํ”„๋กœ์ ํŠธ ๋ฆฌ๋ทฐ/Book-Square 2020. 9. 28. 01:09

    ์˜ค๋Š˜ ํ•œ ์ผ ๐Ÿฅด

     

    ์˜ค๋Š˜์€ ๋„ค์ด๋ฒ„ ๋„์„œ API์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ๋„์„œ ์ •๋ณด๋ฅผ ๋ฐ›์•„์˜ค๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

    ์ด API๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์š”์ฒญํ•œ ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ๋„์„œ๋ฅผ ํ•„ํ„ฐ๋งํ•˜์—ฌ ์‘๋‹ตํ•ด์ฃผ๋Š” API์ธ๋ฐ ํด๋ผ์ด์–ธํŠธ์—์„œ ์š”์ฒญํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ CORS ์—๋Ÿฌ๊ฐ€ ๋‚ฌ์Šต๋‹ˆ๋‹ค.

     

    ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์š”์ฒญ ์‹œ headers์— Access-Control-Allow-Origin ์„ค์ •๋„ ์ถ”๊ฐ€ํ•ด๋ณด๊ณ  ์ด๋Ÿฐ์ €๋Ÿฐ ๋ฐฉ๋ฒ•์„ ์ ์šฉํ•ด๋ณด์•˜์ง€๋งŒ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•„์„œ ๊ฒ€์ƒ‰ํ•œ ๊ฒฐ๊ณผ ์ด API๋Š” ์„œ๋ฒ„ํ”„๋กœ๊ทธ๋ž˜๋ฐ(python, jsp, php, node.js ๋“ฑ)์„ ํ†ตํ•ด์„œ ํ˜ธ์ถœํ•˜๋„๋ก ๋˜์–ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

    ๊ทธ ์ด์œ ๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ํด๋ผ์ด์–ธํŠธ id, secret์„ ๋„์šฉํ•ด์„œ API๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์„ ๋ง‰๊ธฐ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค.

     

     

    ๊ทธ๋ž˜์„œ ์ €๋Š” ์„œ๋ฒ„์—์„œ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์ณ ํ•ด๊ฒฐํ•˜์˜€์Šต๋‹ˆ๋‹ค.


     

    1. ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ์„œ๋ฒ„์— ์š”์ฒญ์ด ๋“ค์–ด์˜ฌ ๋ผ์šฐํŒ… ์„ค์ • (๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์นดํ…Œ๊ณ ๋ฆฌ ๋ฒˆํ˜ธ ๋„˜๊ธฐ๊ธฐ)
    2. ์š”์ฒญ์œผ๋กœ ๋„˜์–ด์˜จ ์นดํ…Œ๊ณ ๋ฆฌ ๋ฒˆํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ ๋„ค์ด๋ฒ„ API ์š”์ฒญ
    3. ๋„ค์ด๋ฒ„ API์—์„œ ์‘๋‹ต์œผ๋กœ ์˜จ XML ๋ฐ์ดํ„ฐ -> JSON ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜ (xml2js ๋ชจ๋“ˆ ์‚ฌ์šฉ)
    4. ๋ณ€ํ™˜ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์‘๋‹ต์œผ๋กœ ๋ณด๋‚ด์คŒ

     

    ์ด API๋Š” ๋ฐ˜ํ™˜ ๊ฐ’์ด XML์ด๊ธฐ ๋•Œ๋ฌธ์— xml2js ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ JSON ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜์„ ํ•ด์ฃผ์–ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

     

    router.post("/", (req, res) => {
      const { select } = req.body;
    
      axios.get(`https://openapi.naver.com/v1/search/book_adv.xml?d_publ=${encodeURI(
            "๊ต๋ณด๋ฌธ๊ณ ")}&d_catg=${select}&display=4`,
          {
            headers: {
              "X-Naver-Client-Id": "ํด๋ผ์ด์–ธํŠธ id",
              "X-Naver-Client-Secret": "ํด๋ผ์ด์–ธํŠธ secret",
            },
          }
        )
        .then((data) => {
          let resultSendData = null;
          xml2js.parseString(data.data, (err, result) => {
            if (err) {
              throw err;
            }
            const json = JSON.stringify(result, null, 4);
            resultSendData = json;
          });
          return resultSendData;
        })
        .then((data) => res.status(200).send(data));
    });

     

    req.body๋กœ ๋“ค์–ด์˜จ select(์นดํ…Œ๊ณ ๋ฆฌ ๋ฒˆํ˜ธ) ๊ฐ’์„ ์ถ”์ถœ ํ›„, axios๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ API ์š”์ฒญ์„ ํ•ฉ๋‹ˆ๋‹ค.

    ์ด ๋•Œ, encodeURL์„ ์‚ฌ์šฉํ•˜์—ฌ ์ถœํŒ์‚ฌ ์ •๋ณด๋ฅผ UTF-8๋กœ ์ธ์ฝ”๋”ฉํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 

     

    headers์— ๋ฐœ๊ธ‰๋ฐ›์€ ํด๋ผ์ด์–ธํŠธ id์™€ secret ํ‚ค๋ฅผ ๋„ฃ์–ด์„œ ์š”์ฒญ ํ›„, then์œผ๋กœ ๋ฐ›์•„์˜จ xml ๋ฐ์ดํ„ฐ๋ฅผ xml2js.parseString์„ ํ†ตํ•ด json ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜์‹œ์ผœ ํด๋ผ์ด์–ธํŠธ์— ์‘๋‹ต์œผ๋กœ ๋ณด๋‚ด์ค๋‹ˆ๋‹ค.

     

    ( JSON.stringify() ๋ฉ”์„œ๋“œ์˜ 3๋ฒˆ์งธ ์ธ์ž๋กœ ๋„ฃ์€ ๊ฐ’์€ json์œผ๋กœ ๋ณ€ํ™˜ํ•œ ๋ฐ์ดํ„ฐ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ๊ณต๋ฐฑ์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์œผ๋กœ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. )

     

     

     

     


     

    ๋งˆ์น˜๋ฉฐ

     

     

    ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์•„๋‹Œ ์„œ๋ฒ„์—์„œ ์ฒ˜๋ฆฌํ•ด์•ผํ•˜๋Š” ๊ฒƒ์ธ์ง€ ๋ชฐ๋ผ์„œ ํ•œ์ฐธ ํ•ด๋งค๊ธฐ๋„ ํ–ˆ์ง€๋งŒ ๋•๋ถ„์— xml๋ฐ์ดํ„ฐ๋ฅผ json ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ฒฝํ—˜ํ•ด๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์€ ๊ธฐํšŒ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

     

    ์ด API ๋ง๊ณ ๋„ REST API ์š”์ฒญ์„ ํ•  ๋•Œ์—๋Š” CORS ์ด์Šˆ๊ฐ€ ์ž์ฃผ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ๋งค์ผ ๋งˆ์ฃผํ•˜๋Š” ์—๋Ÿฌ๊ฐ€ ์•„๋‹ˆ์—ˆ๋‹ค๋ณด๋‹ˆ CORS์— ๊ด€ํ•˜์—ฌ ๋ธ”๋กœ๊น…์„ ํ–ˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๊ด€๋ จ ์ง€์‹์ด ๋‚ด ๋จธ๋ฆฟ์†์—์„œ ์ฆ๋ฐœํ•ด๋ฒ„๋ ธ์Šต๋‹ˆ๋‹ค..............

     

    ์ด๋ฒˆ ๊ธฐํšŒ์— ๋ธ”๋กœ๊น…ํ•œ ๋‚ด์šฉ์„ ๋‹ค์‹œ ์ •๋…ํ•˜๊ณ  ๊ตฌ๊ธ€๋งํ•˜์—ฌ ๊ฐœ๋…์„ ์ข€ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!

    โœŒ๏ธ๐Ÿ˜œ

     

     

    ๋Œ“๊ธ€ 0

Designed by Tistory.