[Node.js , express, ejs] express + EJS render 할때 json 으로 변수넣기

express + EJS render 할때 json 으로 변수넣기

작업을 하던중 ejs 뷰를 렌더링 할떄 많은 변수를 넣어줘야만 하는 소스가 있었다.

res.render('insu/index', {
    title: "title",
    beta_test: beta_test,
    ssid: ssid,
    category1: obj.category1,
    tour_reason: obj.tour_reason,
    destination: obj.destination,
    st_date: obj.st_date,
    st_hour: obj.st_hour,
    ed_date: obj.ed_date,
    ed_hour: obj.ed_hour,
    term: obj.term,
    app_num: obj.app_num,
    phone: obj.phone,
    email: obj.email,
    app_list: obj.app_list,
    plan: obj.plan,
    step: obj.step,
    step1_val: obj.step1_val,
    step1_val2: obj.step1_val2,
    step2_val: obj.step2_val,
    step3_val: obj.step3_val,
    step4_val: obj.step4_val,
    nice_name: obj.nice_name,
    chk_popup2: obj.chk_popup2,
    chk_popup4: obj.chk_popup4,
    address: obj.address,
    address_detail: obj.address_detail,
    emer_phone: obj.emer_phone,
    insu_company: obj.insu_company,
    prod_name: obj.prod_name,
    goji_1: obj.goji_1,
    goji_2: obj.goji_2,
    goji_3: obj.goji_3,
    goji_4: obj.goji_4,
    goji_5: obj.goji_5,
    goji_6: obj.goji_6,
    event_code: event_code,
    event_title: event_title,
    event_sale: event_sale,
    siteurl: config.siteurl,
    imageurl: config.imageurl,
    cssurl: config.cssurl,
    jsurl: config.jsurl
});

??? : 주...죽여줘...

문제는 이런 뷰를 4번정로를 써야한다는 것이었는데 과거의 소스는 이런 소스로만 거의 20줄이상은 잡아먹었고

추가적인 문제로 코드 가 무의미하게 길어져서 코드가독성 이 떨어진다는 문제가 있었다.

또한, 교수님의 명언중 하나가 2번까지는 괜찮지만 3번이상 반복되는걸 복붙해서쓰는것은 양심의 가책을 느껴야 한다

라는 말을 감명깊게 들은 나는 수정하기로 하였다.

우선 express 에서 ejs 엔진을 이용해서 렌더링 할떄는 아래와 같은 형태를 취한다.

    res.render('뷰 네임', [Object]);

여기서 object type 이란 키:벨류 형식으로 되어있는 자료형이다

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

몰랐다면 이번기회에 확실하게 알아두자. JSON 역시 object 형태를 취한다.

따라서 우선 넣어줄 object 를 만들어줄 함수가 필요했다.

function get_insu_render_json(beta_test, header_type, ssid, json_obj, event_json, config) {
    var render_json = new Object();
​
    render_json.title = "title";
    render_json.beta_test= beta_test;
    render_json.ssid= ssid;
    render_json.category1= json_obj.category1;
    render_json.tour_reason= json_obj.tour_reason;
    render_json.destination= json_obj.destination;
    render_json.st_date= json_obj.st_date;
    render_json.st_hour= json_obj.st_hour;
    render_json.ed_date= json_obj.ed_date;
    render_json.ed_hour= json_obj.ed_hour;
    render_json.term= json_obj.term;
    render_json.app_num= json_obj.app_num;
    render_json.phone= json_obj.phone;
    render_json.email= json_obj.email;
    render_json.app_list= json_obj.app_list;
    render_json.plan= json_obj.plan;
    render_json.step= json_obj.step;
    render_json.step1_val= json_obj.step1_val;
    render_json.step1_val2= json_obj.step1_val2;
    render_json.step2_val= json_obj.step2_val;
    render_json.step3_val= json_obj.step3_val;
    render_json.step4_val= json_obj.step4_val;
    render_json.nice_name= json_obj.nice_name;
    render_json.chk_popup2= json_obj.chk_popup2;
    render_json.chk_popup4= json_obj.chk_popup4;
    render_json.address= json_obj.address;
    render_json.address_detail= json_obj.address_detail;
    render_json.emer_phone= json_obj.emer_phone;
    render_json.insu_company= json_obj.insu_company;
    render_json.prod_name= json_obj.prod_name;
    render_json.goji_1= json_obj.goji_1;
    render_json.goji_2= json_obj.goji_2;
    render_json.goji_3= json_obj.goji_3;
    render_json.goji_4= json_obj.goji_4;
    render_json.goji_5= json_obj.goji_5;
    render_json.goji_6= json_obj.goji_6;
    render_json.event_code= event_json.event_code;
    render_json.event_title= event_json.event_title;
    render_json.event_sale= event_json.event_sale;
    render_json.siteurl= config.siteurl;
    render_json.imageurl= config.imageurl;
    render_json.cssurl= config.cssurl;
    render_json.jsurl= config.jsurl;
    render_json.header_type = header_type;
    
    return render_json;
}

위와 같이 함수를 만들어서 object type 의 변수를 넣어주면 Object 형식의 값을 return 해주는 함수를 만들었다.

그리고 위의 소스에서

res.render('global/insu_g', get_insu_render_json(beta_test, "insu", ssid, json_obj, event_json, config));
​

의 형태로 변경을 해주었다.

이로써 20줄넘는 소스를 여러번 반복할 필요가 없어졌다!