1. 오늘
플랫폼 페이지간 이동할 수 있는 드롭다운을 완성했다.
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
다른 플랫폼 둘러보기
</button>
<div class="dropdown-menu platform_menu">
<a class="dropdown-item steam_item" href="#" onclick="change_platform('steam')">스팀</a>
<a class="dropdown-item uplay_item" href="#" onclick="change_platform('uplay')">유플레이</a>
</div>
</div>
</body>dropdown부분이다. bootstrap의 dropdown을 가져다 사용했다. 클릭이벤트에 사용되었던 함수는 다음과 같다.
function change_platform(changed_platform){
location.replace(front_url + '?platform=' + changed_platform + '&sort=discount_rate&order=dsc&page=1')#현재url을 바꾸는 코드
}현재 url을 변경할때 location.replace를 사용했다. 이 함수를 사용하기 위해 현재 url의 querystring값이 필요했다.
url = http://127.0.0.1:5000/sell_page?platform=steam&sort=discount_rate&order=dsc&page=1
var tmp_href = location.href.split("?");#전체url을 쿼리스트링을 구분하는 '?'로 나누었다. http://127.0.0.1:5000/sellpage
var front_url = tmp_href[0];
var tmp_param = tmp_href[1].split("&");#temp_param은 쿼리스트링을 '&'기준으로 나누었다.
var param_platform = tmp_param[0];#platform의 값. platform=steam
var param_sort = tmp_param[1];#sort의 값. sort=discount_rate
var param_order = tmp_param[2];#order의 값. order=dsc
var param_page = tmp_param[3];#page의 값. page=1location.href는 현재 url을 가져온다. 현 url에서querystring의 값을 가져와 api를 호출하는 방식이기 때문에 url만 변경해주면 출력해오는 데이터가 달라지기 때문에 url의 변경을 1순위로 잡았다.
$('.platform_down').ready(function(){
if (platform == 'steam'){
$('.steam_item').addClass('disabled')
} else if(platform == 'uplay'){
$('.uplay_item').addClass('disabled')
}else if(platform == 'epic'){
$('.epic_item').addClass('disabled')
}else if(platform == 'gog'){
$('.gog_item').addClass('disabled')
}else if(platform == 'humble'){
$('.humble_item').addClass('disabled')
}else if(platform == 'direct'){
$('.direct_item').addClass('disabled')
};간단한 조건문을 사용해 같은플랫폼으로 이동하는 불필요한 상황을 막았다.(마음에 드는 방법은 아니다.)
비슷한 방법으로 filtering 의 조건을 설정하는 드롭다운도 만들었다.
<script>
function change_filter(changed_sort,changed_order){
location.replace(front_url + '?' + param_platform + '&sort=' + changed_sort + '&order=' + changed_order + '&page=1')#위 플랫폼이동드롭다운에 쓰엿던 변수를 사용한다.
</script>
<body>
<div class="dropdown-menu filter_menu">
<a class="dropdown-item low_price_item" href="#" onclick="change_filter('discount_price','asc')">최저가 순서</a>
#html에서 parameter값을 주려면 한번더 감싸주어야 한다.
<a class="dropdown-item high_price_item" href="#" onclick="change_filter('discount_price','dsc')">최고가 순서</a>
<a class="dropdown-item low_rate_item" href="#" onclick="change_filter('discount_rate','asc')">최저할인율 순서</a>
<a class="dropdown-item high_rate_item" href="#" onclick="change_filter('discount_rate','dsc')">최고할인율 순서</a>
</div>
</body>
이또한 위처럼 disabled를 조건문에 붙여 불필요한 이동을 막기위해 사용했다.
- 개선의 여지가 너무나 많은 코드들이지만, 우선은 기능의 상향보다 기능의 구현을 우선순위로 잡았다.
2. 읽었던것
임백준 컬럼니스트의 글을 접할 기회가 생겼다. 마음에 와 닿는구절을 몇개 옮겨 적어본다.
'파편적인 지식은 파편적인 태도만으로 충분하다. 트렌드에 필요한 것은 가벼운 눈팅이지 공부가 아니다. 공부는 본질에 다가서려는 노력이다.'
' 겉만 핥는 것은 경박하지만 토끼굴에 빠지는 것은 우매하다. 둘 사이의 적당한 지점에서 균형을 잡는 것이 개발자의 능력이다.'
' 머리에 들어오지 않는 어려운 개념이나 용어는 자투리 시간을 이용해서 반복적으로 읽고 암기하라. 나중에 큰 그림을 공부할 때 도움이 된다.'
' 개발자는 두괄식이다. 두괄식이 아니면 상대에게 불필요한 말을 질질 끄는 느낌을 준다.'
' 누가 질문을 하면 그가 원하는 것을 즉각적으로 대답해주고, 거기에서부터 대화를 풀어가라. 그럼 된다. 즉각적인 대답이 꼭 정답일 필요도 없다.'
이 칼럼은 이 사이트에서 읽었다.
