수정된 API와 앞으로 FE의 개발 방향성

*이 글은 회의를 토대로 작성된 글이다. 참고로 여기에 작성된 url들은 모두 존재하지 않는 url임을 미리 알린다.

---

API에 들어가야할 정보들을 FE에서 수정하기로 했다. API가 변경 될때 마다 포스팅을 따로 하진 않았지만 잦은 API가 변경되었다는 점을 고려해서 앞으로 FE가 어떻게 개발을 해야하는지 방햐성을 되짚어 보려고 한다. 기존에 있는 API에는 일반 images가 urls정보를 제공할 때 일반 문자열로 이루어져 있었다. 하지만 여러 이미지가 들어갈 수 있다는 점을 고려해서 배열로 이루어지로 했다.

 

 "images": [

                "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog..png",

                "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=httpsFimg.png"

            ]

 

시험지를 보면 이미지 위치들의 형태가 다양하다. 어떠한 시험지의 구조로 이미지가 몇 개 있을지 모르기에 문자열로 작성하는 것이 맞다고 판단하게 되었다. 

outside이미지와 inside이미지 이미지가 글자에 삽입이 되어 있는 이미지가 있을 수도 있고 어떤 것은 이미지가 문제 밖에 도출이 되어 있는 경우도 있다. 따라 image의 필드명이 두개로 분류 될 것이다. 

 

 "outside_image": [

                "https://img1.daumcdn.net/thumb/R1280x0/?BGyNWoMCRk%2Fimg.png",

                "https://img1.daumcdn.net/thumb/R1280x0/?2xFIttutXq1K%2Fimg.png"

            ],

 "inside_images": [

                "https://img1.daumcdn.net/thumb/R1280x0/?NGPOqCOT8f8Qj4jo9kRovk%2Fimg.png",

                "https://img1.daumcdn.net/thumb/R1280x0/?Ch%2FNGPOqCOT8f8Qj4jo9kRovk%2Fimg.png"

            ]

 

필드명을 정할 때는 구체적이고 상세하게 작성하기로 했다. 필드명도 다시 작명했다. 어떤 이미지는 문제에 관련된 이미지이고 어떤 이미지는 문제 해설에 대한 이미지가 존재하기 때문에 그렇다. 그래서 아래와 같이 필드명을 작성하기로 했다. 문제 같은 경우에는 question이라고 작성을 하고 외부와 내부를 in과 out으로 나누기로 했다.

 

            "question_images_in": [

                "https://img1.daumcdn.net/thumb/R1280x0/?BGyNWoMCRk%2Fimg.png",

                "https://img1.daumcdn.net/thumb/R1280x0/?2xFIttutXq1K%2Fimg.png"

            ],

             "question_images_out" : [

                "https://img1.daumcdn.net/thumb/R1280x0/?NGPOqCOT8f8Qj4jo9kRovk%2Fimg.png",

                "https://img1.daumcdn.net/thumb/R1280x0/?Ch%2FNGPOqCOT8f8Qj4jo9kRovk%2Fimg.png"

            ]

해설 같은 경우에는 commentary라고 작성하고 아래와 같이 작성을 하였다.

         

         "commentary_ images_in" : [

            "https://img1.daumcdn.net/thumb/R1280x0/?BGyNWoMCRk%2Fimg.png",

            "https://img1.daumcdn.net/thumb/R1280x0/?2xFIttutXq1K%2Fimg.png"

        ],

        "commentary_ images_out"  : [

            "https://img1.daumcdn.net/thumb/R1280x0/?NGPOqCOT8f8Qj4jo9kRovk%2Fimg.png",

            "https://img1.daumcdn.net/thumb/R1280x0/?Ch%2FNGPOqCOT8f8Qj4jo9kRovk%2Fimg.png"

        ]

이렇게 api를 작성을 했을 때 정규 회의 중 백엔드에서 필드명이 너무 많이 늘어난다고 했다. 뿐만아니라 문제 내용에 이미지 마킹을 하기위해서 html, 이스케이프 문법을 사용하기로 했다. 기존에 프론트에서는 html-react-parser 라이브러를 사용하기 때문에 html의 class를 사용해서 css를 적용하는 시도를 했고 그렇게 코드를 작성했었다. 하지만 유지 보수 차원에서 class이름도 필드명으로 따로 작성하기로 했다. 결과적으로 api 전체를 보았을 때 필드명이 너무 많아 정보를 시각적으로 잘 전달 되지 않는다고 판단이 되었다.

그렇다면 어떻게 해야 url와 이미지의 class이름을 담아 낼 수 있을까. 이미지 배열안에 이미지 url만 담아 낼 수 있는 것이 아니다. 즉, 객체를 담아 낼 수 있다. 따라서 이미지가 가질 수 있는 객체들을 나열해보면 url과 이미지 설명, class 속성값들이 있을 것이다.

 

          "commentary_images_in": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%Fimg.png",

                    "description": "",

                    "attribute": ""

                },

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=httpsog.kakaocdn.netFimg.png",

                    "description": "",

                    "attribute": ""

                }

            ]

 

기존의 방식은 url이 어떤 url인지 확인이 어려웠다면 위와 같은 방식을 통해서 좀더 간단하면서 보기 좋은 api가 완성이 되었다. 더보기를 클릭해서 전체 코드를 살펴보면 좋겠다.

{

    "sample": [

        {

            "id": "1",

            "type": "객관식",

            "question": "다음 중 총중량 <img src=0> 1.5톤 피견인 승용자동차를 4.5톤 <img src=1>화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 \n것은?",

            "question_images_in": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?T8f8Qj4jo9kRovk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                },

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?T8f8Qj4jo9kRovk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                }

            ],

            "question_images_out": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?eEMoBGyNWoMCRk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                },

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?e2xFIttutXq1K%2Fimg.png",

                    "description": "",

                    "attribute": ""

                }

            ],

            "options": [

                "① 제1종 대형면허 및 소형견인차면허",

                "② 제1종 보통면허 및 대형견인차면허",

                "③ 제1종 보통면허 및 소형견인차면허",

                "④ 제2종 보통면허 및 대형견인차면허"

            ],

            "questionImageUrls": [],

            "questionImageDescriptions": [

                ""

            ],

            "answers": [

                "4"

            ],

            "commentary": "도로교통법 시행규칙 별표18 총중량 750킬로그램을 초과하는 3톤 이하의 피견인 자동차를 견인하기 위해서는 견인\n하는 자동차를 운전할 수 있는 면허와 소형견인차면허 또는 대형견인차면허를 가지고 있어야 한다.",

            "commentary_images_in": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?T8f8Qj4jo9kRovk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                },

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?T8f8Qj4jo9kRovk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                }

            ],

            "commentary_images_out": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?eEMoBGyNWoMCRk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                },

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?%2Fimg.png",

                    "description": "",

                    "attribute": ""

                }

            ],

            "tags": []

        },

    ...

    }

 ]

 

이렇게 api를 수정해보고 느낀점은 자동화 업무의 필요성이 였다. 이런 부분들을 자동적으로 손쉽게 변경 할 수 있게 만들어내면 좋겠다는 생각을 한편으로 가졌다.