반응형 text/JavaScript9 검색창 debounce 처리 지난 글 말미 (검색 자동완성 with mysql function)에 검색창에 검색추천 시 debounce처리를 해야 한다고 적어놨었는데, 그때 처리한 걸 정리하고자 적는다. debounce란? 짧은 시간 여러번 동작하는 걸 막고, 한 번만 실행하게 해주는 방법으로 보통 웹 화면상에 검색창 검색 시 방문자가 타이핑을 끝내고 난 뒤에만 검색 질의(query)에 대한 제안 옵션을 보여주고 싶을 때 사용한다. 이를 통해 불필요한 네트워크 요청을 줄이고, 성능을 향상시킬 수 있다. 저번 글에선 DB function과 해당 함수를 사용하는 view에 질의를 하는 검색창을 하나 만들었었는데, 이때 한글자 타이핑시 ajax → db query 식으로 동작한다. 이걸 줄여보자. javascript에서는 setTimeo.. 2024. 4. 14. javascript 변수 관련 간략정리 (변수, 스코프, 호이스팅, 클로져, 함수, 즉시 실행 함수) 이력서에 " js 써봤다" 혹은 "쓸 줄 안다."라고 적으면 물어보는 것들이 있는데 여러 번 질문받았던 변수 관련 개념들에 대해 정리해 봤다. (js에 대해 잘 모른다고 답변했음에도 불구하고! 매번 물어보는!!) 변수 변수는 값을 저장하는 메모리 공간! 크게 3가지의 상태로 나타남 1. 선언 변수를 정의 (정보를 담을 공간을 정의) let variable; 2. 초기화 선언된 후, 값을 넣어 정의 (공간을 만들고, 공간에 정보를 집어넣기) let variable = "hello world"; 3. 할당 코드가 실행될 때 (run) 메모리 위에 변수 공간이 지정된 상태 스코프(scope, 범위 혹은 그냥 스코프) 변수의 유효한 범위 해당 변수를 사용할 때 접근이 가능한 범위라고 해석하면 문제없을듯하다. 변.. 2023. 6. 14. [18, 9].sort() = [18, 9] javascript sort weird... [18,9]를 sort 하면 어떻게 될까? array에 많이 들어있지도 않다. 숫자는 딱 2개… 겨우 단 2개… 컴퓨터를 사용하지 않고도, 심지에 이제 막 숫자를 배우기 시작하는 어린아이에게 18이 큰지, 9가 큰지 작은 숫자 순서대로 줄을 세워볼까? 라고 물어보면 단번에 답을 내릴 수 있는 아주 쉬운 문제다. 그런 줄 알았다. 단, javascript에게만 빼고 말이다…. 진짜 이게 무슨 말도 안 되는… 자.. 자.. 진정하고 가끔 그런 게 있을 수 있다. (아니 말도 안 되지만) 숫자라고 안 받아들이고 문자로 바꿔서 그런 거 아닐까? 제대로 정렬하기 위해서는 sort function의 인자값으로 내가 정의한 compare function(비교 함수)을 넣어줘야 한다. 아래와 같이 말이다. [18, 9.. 2023. 5. 4. Identifier '변수' has already been declared check 이번에 js 코딩하면서 새로 발견한 오류와 그에 대한 해결책에 대해서 써보려 한다. 내가 만난 문제는 let을 중복 선언하게 되면서 let으로 선언한 변수가 재 선언될 수 없다는 에러 표시를 만났었다. Identifier '변수' has already been declared check @@: 아니 당연히 중복으로 선언하면 안 되지;; 당연히 알고 있다. 하지만 상황은 이랬다. html 안에 탭을 선택하면 서버에서 html을 불러와 내부에 넣게 되는데, 이때 삽입되는 html이 가지고 있는 js 파일 내 변수명과 외부에 이미 선언된 html 간의 let이 충돌하는 문제였다. 문제를 재연하기 위해 간단하게 만들어 보았다. index.html 간단하게 html(index.html)을 만들었다. 본인이 실행하.. 2023. 4. 3. 날짜 계산 [날짜 간 차이, 주(week) 계산, 날짜 더하기 빼기] 주먹구구 js 코딩~ 할 때마다 찾아보는 듯해서 어딘가 정리해 놓기... (아마 점점 추가하지 않을까...?) 날짜 객체 생성 const date = new Date(); 날짜에 상수 더하기 빼기 let date = new Date("2023-03-14"); console.log(date); // 2023-03-14T00:00:00.000Z let plus_day = new Date(date.setDate(date.getDate() + 1)); console.log(plus_day); //2023-03-15T00:00:00.000Z let minus_day = new Date(date.setDate(date.getDate() - 2)); console.log(minus_day); //2023-03-13T.. 2023. 3. 24. .has is not a function 오늘의 error log 받아온 json은 js 내 에서 .has() 로 항목 조회 시 에러 발생 .has is not a function… 왜냐면... has는 set 객체 함수이니까!! 없지!! 나는 .hasOwnProperty(항목명) 함수로 해결~ ref) https://stackoverflow.com/questions/20804163/check-if-a-key-exists-inside-a-json-object Check if a key exists inside a JSON object amt: "10.00" email: "sam@gmail.com" merchant_id: "sam" mobileNo: "9874563210" orderID: "123456" passkey: "1234" The abo.. 2023. 2. 27. CORS 에 대한 간략한 설명과 img 태그를 채우기 위한 삽질 오늘 회사에서 한 일에 대해 다시금 생각해본다. 저번에 올린 블로그 글 결과를 토대로 뉴스 군집화를 해냈다. (done이라는 뜻. complete가 아니라…) 점진적 뉴스 군집화 하기 (incremental news clustering) 요즘 관심 가지던게 하나 있는데 바로 점진적 문서 군집화 무슨 소리냐 뉴스의 경우, 계속 써지고 발간되고 사람들한테 제공된다. 지금까지 내가 해온건 어떤 시간대 (가령, 하루단위) 뉴스를 군 hoonzi-text.tistory.com 결과를 그럴듯하게 보여주기 위해 해당 뉴스가 가진 썸네일 데이터를 가져와야 했는데 다행히도 우리회사 데이터는 해당 뉴스에 등장 하는 이미지 데이터 역시 수집이 되어 있었다. 그냥 조회만 하면 됐다. (아래는 결과 예시) 문제는 방송사의 경우.. 2022. 6. 27. mousedown 과 checkbox 별거 아닌 거 같지만 정리하면 좋을 것 같아서 남겨본다. 상황은 이렇다. html table 의 row를 클릭하면 해당 row의 존재하는 checkbox가 클릭되는 경우를 javascript+jquery로 구현하고자 했다. 간단한 table 과 js 함수를 구성해보자 check column1 column2 hoonzi blog 해당 html의 결과는 이렇게 보인다. 여기서 나는 checkbox 이외의 hoonzi 혹은 blog를 클릭하더라도 같은 row상에 존재하는 checkbox가 체크 되었으면 한다. js 이벤트 함수를 짜 준다. $("#table tbody tr").on("mousedown", function() { let checkbox = $(this).find("input[type='check.. 2022. 1. 18. polynomial regression 사용해보기 (with js) 회사 일 중에 시간별 수량 값을 그래프로 시각화 할 일이 생겼다. 뭐 어찌저찌 열심히 코드 짜서 (d3+c3 chart 이용) 그래프를 그렸더니 (예측 선 + 신뢰구간 추정)도 존재했으면 좋겠다! 라고 위에서 요청이 와서 다시 수정... 일단 잘 모르니 구글에 검색해보자... 추세 예측... 1. 예측 선 forecast 방법을 찾아보니 선형회귀 방법을 쓰라고 나온다. 선형회귀라 하면 학부생 2학년때 파이썬 처음 배우면서 배웠던 기억이 있는데 정확히 기억은 안나고, 코드 따라치면서 왜 배우는지 모르겠다 욕했던 것만 기억난다. 각설하고 간단하게 선형회귀는 기존 기간의 값이 이랬으니 -> 새로운 기간의 값은 이럴 것이다. 라고 새로운 값을 추측하기 위해 쓴다고 한다... 더 자세한 설명은 https://kn.. 2021. 7. 2. 이전 1 다음 반응형
