유지연

유지연

I’m a junior web developer.
Let’s code with me!

2021-02-23 TIL(at work)

업데이트:
1 분 소요

요청 사항 파악

  • 어떤 정보를 검색할 때, 여러 가지 값을 넣고 이에 해당하는 정보를 제공하는 서비스가 있다. 카테고리를 선택하고 키워드를 입력하는 등 값을 다양하게 입력하고난 후에는, 검색버튼을 눌러야만 검색이 된다. 굳이 검색 버튼을 누르지 않고 엔터키로 검색 액션이 실행되게끔 코드를 수정해달라는 요청이 들어왔다.

해결 방안 탐색

  • xxx.html 파일에서 엔터키를 입력했을 때 검색 검색 버튼을 클릭한 것과 같은 이벤트가 실행되도록 한다.
  • 어떤 <input> 태그에 해당 이벤트를 적용할지 정하고, 일일이 그 값을 적용한다.

해결 과정

1번째 시도

  • 먼저 엔터키를 입력했을 때 "searchBtn"이라는 id를 가진 검색 버튼이 실행되도록 하는 자바스크립트 코드를 작성했다.
function enter() {
    if(event.keyCode == 13) { // 엔터키의 아스키코드는 13이다.
        document.getElementbyId("searchBtn").click();
    }
}
  • 그리고 위의 enter 키 액션이 실행될 곳에 onkeypress 속성을 추가하였다.
<ul>
    <span id="select1">
        <label for="colorSelect" class="skip">색깔 구분</label>
        <select id="colorSelect" name="color">
            <option value="1">검정</option>
            <option value="2">파랑</option>
            <option value="3">초록</option>
            <option value="4">빨강</option>
        </select>
    </span>
    
    <span id="inputText">
        <input type="text" id="text1" onkeypress="enter();">
        <em>-</em>
        <input type="text" id="text2" onkeypress="enter();">
        <em>-</em>
        <input type="text" id="text3" onkeypress="enter();">
    </span>

    ...

    <button type="button" id="searchBtn">검색</button>
</ul>
  • 결과 : 성공, 하지만 기존에 작성되었던 코드는 .js 파일과 .html 파일을 따로 두고 있으므로 리팩토링이 필요하다.

2번째 시도

  • xxx.js 파일로 가서 초기화와 관련된 코드들을 살펴보았고, 해당 기능이 구현되어있는지 살펴보았다. 제이쿼리를 사용한 코드가 있었고, 이를 활용하기로 하였다. .js 파일에서 엔터키 이벤트를 처리하도록 수정하면서, .html 파일에서는 굳이 각각의 <input> 태그에 onkeypress라는 속성을 지정할 필요가 없게 되었다.
<ul>

    <span id="select1">
        <label for="colorSelect" class="skip">색깔 구분</label>
        <select id="colorSelect" name="color">
            <option value="1">검정</option>
            <option value="2">파랑</option>
            <option value="3">초록</option>
            <option value="4">빨강</option>
        </select>
    </span>
    
    <span id="inputText">
        <input type="text" id="text1">
        <em>-</em>
        <input type="text" id="text2">
        <em>-</em>
        <input type="text" id="text3">
    </span>

    ...

    <button type="button" id="searchBtn">검색</button>
</ul>

    $('#text1').keypress(function(e) {
        if( e.keyCode === 13 ) {
            $('#searchBtn').click();
        }
    });

    $('#text2').keypress(function(e) {
        if( e.keyCode === 13 ) {
            $('#searchBtn').click();
        }
    });

    $('#text3').keypress(function(e) {
        if( e.keyCode === 13 ) {
            $('#searchBtn').click();
        }
    });
  • 결과 : 이벤트 관련 코드를 .js 파일로 따로 빼냈기 때문에 .html 문서는 가독성이 훨씬 좋아졌다. 또한 .js 파일에 관련 코드들을 함께 두면서 코드를 중복해서 사용하는 빈도를 줄일 수 있었다.

태그:

카테고리:

업데이트:

참고

2022-02-22 TIL(at work)

업데이트:
5 분 소요

업무 배경 이 업무가 할당된 이유 회사에서 맡고 있는 서비스 중, 회원이 구매를 신청하면 정부24에서 그 컨텐츠를 구매하여 제공을 하는 서비스가 있다. (참고로, 구매를 한다고 바로 완료되는게 아니라 구매 로직을 태운 후 실제로 컨텐츠를 가져오기까지 어느정도 시간이 소요된다....