개요
첫 포스팅이라서 무엇을 작성할까 고민이 많았다.
한번 시작해보는 거 첫단추를 잘 넣었으면 하는 바램이였다.
마침 디자인팀에서 내부 모듈에 카테고리가 불편하다고 하기도 했고,
이 회사에 와서 많이 연습하게 된jQuery작업을 포스팅하면 괜찮겠다 싶어서 쓰게 되었다.
- 첫포스팅
- 우연히 나온 작업
- 4차 카테고리 기준으로 작업
jQuery란?
jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.
Javascript라이브러리 라고 한다.react도입합시다.
🛠️개발 체크사항
현재는 트리 형식으로 되어있다
왜 가렸니
이 형식을 고도몰 상품등록에 있는 selectbox 형식으로 바꾸자고 한다.
위와 같이 4차카테고리를 기준으로 개발을 했다.
🔥전체 코드
var check1;
var check2;
var check3;
var check4;
cate1start();
$(document).on("click", "#cate1 option", function(){
check1 = $(this).val();
if(TREE_ITEMS[0][check1].length > 2){
$("#cate2").empty();
$("#cate3").empty();
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate2").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate3").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").removeAttr("href");
cate2start();
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][1]);
}
else{
$("#cate2").empty();
$("#cate3").empty();
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate2").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate3").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][1]);
}
});
$(document).on("click", "#cate2 option", function(){
check2 = $(this).val();
if(TREE_ITEMS[0][check1][check2].length > 2){
$("#cate3").empty();
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate3").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").removeAttr("href");
cate3start();
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][check2][1]);
}
else{
$("#cate3").empty();
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate3").append(opt);
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][check2][1]);
}
});
$(document).on("click", "#cate3 option", function(){
check3 = $(this).val();
if(TREE_ITEMS[0][check1][check2][check3].length > 2){
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").removeAttr("href");
cate4start();
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][check2][check3][1]);
}
else{
$("#cate4").empty();
var opt = $("<option>=카테고리 선택=</option>");
$("#cate4").append(opt);
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][check2][check3][1]);
}
});
$(document).on("click", "#cate4 option", function(){
check4 = $(this).val();
$(".btn").children("a").attr("href",TREE_ITEMS[0][check1][check2][check3][check4][1]);
});
function cate1start(){
for(var i = 2 ; i < TREE_ITEMS[0].length ; i ++){
var opt = $("<option value = "+i+">"+TREE_ITEMS[0][i][0]+"</option>");
$("#cate1").append(opt);
}
}
function cate2start(){
for(var i = 2 ; i < TREE_ITEMS[0][check1].length ; i ++){
var opt = $("<option value = "+i+">"+TREE_ITEMS[0][check1][i][0]+"</option>");
$("#cate2").append(opt);
}
}
function cate3start(){
for(var i = 2 ; i < TREE_ITEMS[0][check1][check2].length ; i ++){
var opt = $("<option value = "+i+">"+TREE_ITEMS[0][check1][check2][i][0]+"</option>");
$("#cate3").append(opt);
}
}
function cate4start(){
for(var i = 2 ; i < TREE_ITEMS[0][check1][check2][check3].length ; i ++){
var opt = $("<option value = "+i+">"+TREE_ITEMS[0][check1][check2][check3][i][0]+"</option>");
$("#cate4").append(opt);
}
}보기만 해도 더럽다
👀코드해석
크게 기능별로 나누자면,
$(document).on("click", "#cate[n] option", function(){});function cate[n]start(){}이 두가지가 있겠다.
먼저,
$(document).on("click", "#cate[n] option", function(){});구문을 해석하자면
동적으로 생성되는 selectbox 안의 option들을 처리하기 위해 작성하였다.
n차 카테고리 -> n+1차카테고리로 갈 경우를 생각해보자.
n차 카테고리가 마지막 카테고리(유일무이한 경우) 일 경우에는 클릭할 시 n+1차 카테고리 selectbox에 option을 추가하지 않아도 된다.
반면
n차 카테고리 아래에 n+1차 카테고리가 있을 경우 selectbox의 option이 추가되어야 한다.
그럴 경우 사용자의 선택에 따라 n차수의 카테고리가 어떻게 구성될 지 모르기에 동적으로 생성하여 이벤트를 부여했다.
- 내부 모듈의 배열(TREE_ITEMS[])
첫번째 배열에는 카테고리명
두번째 배열에는 연결되는 함수
하위 카테고리가 존재할 시 +n 만큼 배열크기증가
(즉, 하위카테고리가 없을 경우 크기는 2가 된다)
초기에 카테고리의 value 값을 변수에 담아두고, 정해진 카테고리 높은 차수의 카테고리는 모두 empty()로 비워준다.
(만약 카테고리가 5,6,7,8,.... 갈 경우 , 그럴땐 함수로 처리하자.)empty() 중복적으로 쓰는거 끔찍한데
empty()가 적용된 카테고리 란에 선택 option을 추가해주고 $(".btn") (선택버튼) 에 함수를 달아준다.
이렇게 카테고리 만큼 생성해주고 돌려준다.
이제
function cate[n]start(){}구문을 해석해보자.
간단하다. 동적으로 option을 생성해준다.
(내부 모듈의 배열은 가급적 수정을 하지말아달란 사수의 부탁으로 짜여진 배열형식으로 하다보니 이렇게 코드가 작성된듯 하다.)
후에 수정이 필요할 시 용이하게 작업하기 위해 함수로 제작했다.
결과는
매우 작동이 잘된다.
(세로로 된거 불편해서 디자인팀에게 요청했다.)
🤔자문자답
🤔왜 이렇게 여러번 작성했나? 중복코드를 지울수가 없을까?
💡솔직히 제일 걱정되는 부분이였다. 기능적으로 결함이 없이 돌아가더라도, 위와 같이 중복코드가 너무 발생한 부분에 대해 고민을 했다. 그래서 포스팅을 하면서 잠깐 고민해봤는데,
$(document).on("click", "#cate1 option", function(){});자체를 함수화 시켜서 현재 클릭하는 카테고리의 차수를 받아서 루프를 돌리면 어떨까 한다.
예를 들자면,
function gogoTopblade(클릭한 카테고리 차수 => e){
$(document).on("click", "#cate "+e" option", function(){
...
...
for(var i = 1; i <= e; i++){
$("#cate"+e).empty();
}
...
...
...
for(var i = 1; i <= e; i++){
var opt = $("<option>=카테고리 선택=</option>");
$("#cate"+e).append(opt);
}
...
...
...
});
}뭐 이런식으로 말이다.
(진작에 수정하고 올렸으면 됐지 않았나 하는데, 첫포스팅의 기쁜마음에 그냥 올렸습니다.)
🤔4단 이상으로는 불가능한가? 확장성을 고려했나?
💡네. 고려했습니다. (대신 포스팅된걸로 확장한다면 큰 무리가 있고, 자문자답의 코드로 수정할 경우 어느정도 확장성이 보장된다고 생각합니다.)
🤔첫 포스팅 소감
💡분명 다른 사람도 볼 수있기에, 좀 더 신경써서 올리도록 해야겠다.
📋마무리
블로그를 시작하게 된 계기를 생각하자면,
- 나는 자주 까먹는다.
- 나는 꾸미는 거 좋아한다.
- 나는 직업이 개발자다.
이렇기에 블로그를 시작하지 않았나 싶다. 앞으로 좀 더 꾸준히, 또 자주 까먹는 부분을 포스팅 하고자 한다.
