choi95의 TIL📝

다음과 같이 Input 태그에 키워드를 입력하면 관련 키워드에 대해서 추천 검색어를 사용자에게 보여주도록 구현하고자 한다. debounce를 통한 request 호출 최소화 사용자 Input 태그에 키워드를 입력하면 자연스럽게 추천 검색 리스트를 보여주도록, debounce 기능을 활용하여 의도적으로 지정된 시간만큼 딜레이하였다. let dispatchEvent = debounce( (targetText) => { //사용자가 Input 태그에 입력한 value 값 requestAdapter.get(this.requestUrl, targetText) .then((result) => { this.displayWordList( this.searchListElement, result ); }) } ,this...

문제 현수는 1년 과정의 수업계획을 짜야 합니다. 수업중에는 필수과목이 있습니다. 이 필수과목은 반드시 이수해야 하며, 그 순서도 정해져 있습니다. 만약 총 과목이 A, B, C, D, E, F, G가 있고, 여기서 필수과목이 CBA로 주어지면 필수과목은 C, B, A과목이며 이 순서대로 꼭 수업계획을 짜야 합니다. 여기서 순서란 B과목은 C과목을 이수한 후에 들어야 하고, A과목은 C와 B를 이수한 후에 들 어야 한다는것입니다. 현수가 C, B, D, A, G, E로 수업계획을 짜면 제대로 된 설계이지만 C, G, E, A, D, B 순서로 짰다면 잘 못 설계된 수업계획이 됩니다. 수업계획은 그 순서대로 앞에 수업이 이수되면 다음 수업을 시작하다는 것으로 해석합니다. 수업계획서상의 각 과목은 무조건 이..

문제 문제풀이 1번 왕자부터 8번 왕자까지 한 자리에 모여놓기 위해 각 왕자의 대표되는 번호들을 스택에 순서대로 저장 번호가 저장된 스택을 순회하면서 K 차례가 될때마다 해당 인덱스의 요소를 스택에서 삭제 만약에 해당 스택을 끝까지 돌았다면 다시 처음으로 회귀하기 위해 임의의 포인터를 인덱스 0으로 초기화 위와 같은 연산을 스택의 사이즈가 1(마지막에 남은 왕자)이 될때까지 반복 수행 코드 function solution(n, k) { let answer = 0; let stack = Array.from({ length: n }, (v, i) => i + 1); let pt = 0; //스택의 인덱스 요소들을 참조하기 위한 임의의 포인터 let call = 0; //K번째에 해당하는 인덱스 요소를 삭제해..

문제 다음과 같이 서버에 게시글을 포스트 한 뒤 사용자가 쓴 게시글들을 화면 상에 랜더링하는 과정 중에 다음과 같은 문제가 발생하였다. 게시글에 달아 둔 태그들을 서버에서 배열로 가져와, map()을 이용하여 각 태그에 링크를 달아주는 소스 코드 상에서 에러가 나왔다. 문제해결 리덕스에서 상태가 업데이트가 되고 컨테이너에서 바뀐 상태 정보를 인지하고 리랜더링 된다. 하지만 이때 만약에 서버에서 받아 온 payload 값 중 태그의 값이 없다면(게시글 작성 단계에서 태그를 별도로 달아주지 않았을 경우)tags 배열은 빈 배열 객체이기 때문에 undefined로 정의되어 오류가 발생했던 것이다. {tags && tags.map(tag => ( #{tag} ))} 다음과 같이 && 연산자를 사용하여 tags ..

드롭다운 메뉴가 현재 화면 상에 보이는 컨테이너의 너비와 위치에 맞게 나타나도록 다음과 같이 구현하였다. const target = document.querySelector('.dropdown-item-list-box'); //컨테이너 elem const labelRect = this.dropdownLabel.getBoundingClientRect(); // elem의 상대적 위치와 크기의 값을 가져옴 target.style.cssText = ` position: absolute; width: ${labelRect.width}px; top: ${labelRect.top + 5}px; `; Element.getBoundingClientRect() 메서드는 DOMRect 요소의 크기와 뷰포트에 상대적인 위치..

문제 문제풀이 여는 괄호일 경우 스택에 계속 저장 닫는 괄호일 경우에는 앞에 인덱스 요소에 따라 다른 연산 시행 앞에 인덱스 요소가 여는 괄호일 경우(레이저)는 레이저 한쌍에 해당하는 여는 괄호를 스택에서 삭제 (삭제 된 스택의 크기) === (절단 된 쇠막대기 조각) 앞에 인덱스 요소가 닫는 괄호일 경우(쇠막대기 끝단)는 쇠막대기 중 가장 작은 막대기의 시작단을 스택에서 삭제 삭제 된 막대기 끝단에 조각 하나가 남아 있음 코드 function solution(p) { let answer = 0; let stack = []; for (let i = 0; i < p.length; i++) { if (p[i] === ")") { if (p[i - 1] === "(") { // 레이저일 경우 stack.pop..

다음과 그림과 같이 리스트가 주어져 있고 input에 내용을 입력한 뒤 엔터키를 누르게 되면 리스트의 맨 앞에 새로운 키워드 아이템이 추가되도록 구현하고자 한다. keyup/keypress Event로 이벤트 감지 엔터키가 눌렀을 경우 input의 value 값이 리스트에 추가되도록 다음과 같이 코드를 구현하였다. this.inputElement.addEventListener('keypress', e => { let newItem = this.chipTemplate(e.target.value); if(e.keyCode === 13) { // 새로운 아이템 리스트에 추가 } }) 처음에는 keyup 이벤트 핸들러를 등록하여 주었는데 value 값이 한글일 경우 이벤트 발생이 두 번 중독되어 발생하는 오류가..

문제 후위연산식이 주어지면 연산한 결과를 출력하는 프로그램을 작성하세요. 만약 3*(5+2)-9 을 후위연산식으로 표현하면 352+*9- 로 표현되며 그 결과는 12입니다. 문제풀이 연산식에서 숫자가 나온다면 스택에 계속 저장 이후 연산자가 나온다면 가장 최근에 저장한 값과 그 이전에 저장한 값을 추출 추출한 두 숫자를 해당 연산자를 통해 하나의 결과값으로 도출 도출된 결과값을 스택에 저장_이후 반복 코드 function solution(p) { let answer = 0; let stack = []; let regExp = /^[0-9]+$/; for (let x of p) { if (!regExp.test(x)) { let rt = stack.pop(); let lt = stack.pop(); swi..