첫 기능 개발 - 카테고리(필터)

• 카테고리를 개발하는 업무를 받았다.
• 업무 순서는: 1) 기획자가 wireframe을 작성해서 전달 2) 디자이너가 디자인을 진행 3) 디자인에 따라 개발
  이였다.
• 어려웠던 점은: 1) 업무 순서가 어떻게 되는거지? 2) 어디까지가 백엔드 업무고 어디까지가 프론트 업무지? 3) 개발 일정을 어떻게 잡아야 하는거지? - QA를 얼마나 잡아야 하는거지? - 중간중간 치고 들어오는 건과 우선순위를 어떻게 조정해야하는거지? - 일정은 누구와 상의해야하는거지? 4) 디자인을 어디까지 맞춰 개발해야하는거지? - 디자이너의 꿈을 CSS로 이뤄주고 싶다…
  • 사실 2,3번이 가장 어려웠다..
• 여하튼 한 1주일 정도 기간을 갖고, 엄청난 부담감을 갖고 진행했다.

그리고 결과물

<!-- 카테고리 -->
<div class="selector-box c-default category-list flex">
        <div class="category-list-title f-caption">유형</div>
    <ul>
        <li class="btn btn-category btn-round class-type" :id="value" @click="isLoaded ? collectClickedCategory(key,value): ''" v-for="(value, key) in classType"></li>
    </ul>
</div>

<hr/>

<div class="selector-box c-default category-list flex mb-30">
    <div class="category-list-title f-caption">직무</div>
    <ul class="category-list-collapse" id="category-folder">
        <li class="btn btn-category btn-round" :id="value" @click="isLoaded ? collectClickedCategory(key,value): ''" v-for="(value, key) in categories" v-if="value !== '테스트'"></li>
    </ul>
    <div class="category-list-icon" @click="toggleCollapse"><img id="plus-icon" src="/images/edu/icon_plus_edu.svg"></div>
</div>

• api 형태 = [[top_category:${category}], channel:online, channel:offline]

• ajax 요청할 때 배열이 계속 풀려서, 뭐지? 하고 막 여기저기 물어봤었는데… 결국 JSON 형태로 들어가서 그런거였다. 알고 있던 것도 긴장하면 다 까먹네…

let params = {
    page: this.page,
    limit: this.limit,
    partner : this.partner,
    category : JSON.stringify(this.paramsCategory)
};
setTimeout(() => {
    axios({
        method: 'GET',
        url: url,
        params: params,
    }).then((response) => {
        const data = response.data;
        try {
            if (data.code === 200) {
             ...

그리고 controller에서 decode 해줌

$category = json_decode($category);

노력한 점

• 전체적인 task를 분류하고 일정을 짰다.
• 바로 코딩하지 않고 연필로 설계를 최대한 하고 시작했다.
• 함수를 최대한 쪼개고, 함수명으로도 어떤 기능을 하는 지 알 수 있게끔 했다.

    collectClickedCategory(key, value) {
        this.toggleClassSelected(value);
        this.toggleSelectedCategory(value);
        this.makeParams();
    },
    toggleClassSelected(value) {
        if (this.isClassTypeClicked && this.isCategoryClassType(value) && !this.clickedCategory.includes(value)) {
            this.resetClassType();
            this.isClassTypeClicked = false;
        };
        let div = document.getElementById(value);
        div.classList.toggle("selec");
        if (this.isCategoryClassType(value)) {
            this.isClassTypeClicked = true;
        }
    },
    resetClassType() {
        this.clickedCategory.forEach((category, index) => {
            if(this.isCategoryClassType(category)) {
                this.clickedCategory.splice(index, 1);
            }
        });
        const classTypeDivs = document.getElementsByClassName("class-type");
        for (let div of classTypeDivs) {
            if(div.classList.contains("selec")) {
                div.classList.remove("selec");
            }
        }
    },
    toggleSelectedCategory(value) {
        if (this.clickedCategory.includes(value)) {
            let index = this.clickedCategory.indexOf(value);
            this.clickedCategory.splice(index, 1);
        } else {
            this.clickedCategory.push(value);
        }
    },
  

• 자체 QA를 하면서 문제가 생길만한 부분을 찾고 수정했다.

깨달은 점

• 이미 만들어져 있는 css class를 많이 활용하자. eg. button 같은거 이미 less 파일에 library처럼 만들어진게 있는데 최대한 활용하는 것이 좋겠다. (하지만 못했음. 디자인이 달라소.. )
• QA 일정은 개발 일정만큼 낙낙히 짜자. (오류는 항상 발생한다.)

아쉬운 점

• 좀 더 클린코드를 짤 수 있을거 같은데 아쉽다.
• 비동기로 작동되는 부분과 infinite-loading 작동 원리를 아직 100% 파악하지 못한 것 같다.