요즘 JS코어를 다시 공부 하고있다. 여렴풋이 기억하고 있었던 내용을 다시 확실하게 잡아보고자 한다.비동기에 대해 싹 정리해보도고 익히도록 해보자! ✅ 동기 , 비동기동기자바스크립트는 “싱글 스레드” 방식이기 때문에, 한번에 하나의 태스크만 처리할 수 있다.이렇게 하나의 작업이 끝날 때까지 다음 작업이 대기하는 방식이 동기 처리이다.// taskOne의 처리가 끝나기 전 까진 taskTwo는 대기하게 된다. function taskOne() { for (let i = 0; i 비동기하지만 현재 실행 중인 작업이 종료되지 않은 상태라도, 다음 작업을 곧바로 실행할 수 있다.이것이 비동기 처리.비동기 처리 요청을 보낸 후 응답 여부와 상관없이 다음 태스크를 병렬적으로 수행할 수 있는 방식이다.이 방식은 ..
✅ 문자열을 sort로 정렬시 문제점sort메서드는 문자열을 유니코드 값(아스키 코드)에 따라 정렬한다.그래서 한글의 사전 순서와 다를 수 있고, 대소문자/특수문자가 있는 경우 예기치 않은 결과가 나올 수 있다.유니코드와 아스키코드 대해서 sort로 정렬시 유니코드 순서로 정렬, 대소문자 구분이 되지 않는다.const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];words.sort(); // 결과 : [ "Apple", "Banana", "apple", "apple-pie", "applepie", "banana"] ✅ localeCompare란문자열을 특정 언어의 규칙에 따라 비교 가능.- 언어별로 올바른 ..
회사에서 순수js로 디바운스를 구현해야 하는 일이 생겼다.프로젝트 내에 lodash를 여기저기 쓰고있어서 나는 디바운스 로직을 직접 구현하지 않고 편하게 쓰고있었다. 막상 직접 로직을 구현하려하니 많이 버벅였다.라이브러리를 쓰기 전에 그 로직의 원리를 이해해야 하는데 라이브러리에 너무 기대고 있었던걸까 다시 기본을 다지도록✅ 디바운스1.개념 : 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행되도록 제한함 2. 사용: 사용자가 검색어를 입력할 때, 입력이 멈추면 서버에 요청을 보낼 때: 버튼 연타시 불필요한 api호출을 막기 위해 3. 효과 : 불필요한 이벤트 핸들러의 실행을 줄일 수 있음 4. 내가 구현한 코드- 버튼 클릭시 setTimeout함수가 반환한 Id를 Clear해서 setTime..
axios로 params를 붙여 get요청한 url을 unity팀에 그대로 보내줘야 했다. api호출시 url의 쿼리스트링은 내가 직접 작성한게 아니라 axios라이브러리가 처리해주었고, 게다가 url안에 특수문자가 있어서 인코딩한 url을 보내야 하는게 어떻게 할지 고민이였다. 그 해결 방법은 URLSearchParams 1. 필요성 URL 쿼리스트링 문자열을 쉽게 만들수 있음. 쿼리스트링 형식의 URL에서 쉽게 키,값을 조회할 수 있음. (url에서 특수 문자나 공백을) 자동으로 인코딩해줌. 2. 쿼리스트링 url 만들기 ✅ 생성자 함수 new URLSearchParams : url에서 쿼리파라미터 관련 정보를 파싱한 인스턴스 객체를 리턴함 new URLSearchParams(); // URLSear..
이 셋 각각의 개념을 알고있다고 생각했는데, 또 모아놓고 생각해보니 뒤죽박죽이 되어버렸다. 이 꼴은 개념을 정확히는 모르고 있다는 말이겠지! 이번에 확실히 정리해보겠다. ✅ rest 파라미터 - 파라미터에 ...를 이용해서 받으면 나머지 인자를 받아 하나의 "배열"로 만들어 사용하게 됨. - ( "배열"이기 때문에 배열의 메소드 사용가능함.) - rest 파라미터는 항상 마지막에 있어야 함. function x(a, ...rest) { console.log(Array.isArray(rest)); // true console.log(a, rest); // 1, [2,3,4,5] } x(1, 2, 3, 4, 5); ✅ arguments - 함수를 호출할때 입력한 모든 인자가 담겨있음. - rest는 배열, ..
History api란 : 브라우저의 세션 히스토리에 대한 접근, 조작 기능 기능을 제공하는 것 ✅ history.back() , history.forward(), history.go(step: integer) : 히스토리 스택을 조작할 수 있다. 1. history.back() : 방문 기록의 뒤로 이동하기. 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같다. history.back() 2. history.forward() : 방문 기록의 앞으로 이동하기. 사용자가 브라우저 도구 모음의 앞으로 가기 버튼을 누른 것과 같다. history.forward() 3. history.go(step: integer) : 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점..
JavaScript에서 성능 측정을 위해 사용되는 메서드입니다. 이 메서드를 사용하면 코드의 실행 시간을 측정할 수 있습니다. performance.now()는 현재 시간을 나타내는 타임스탬프를 반환하며, 밀리초 단위로 정밀도가 높습니다. 예제 // 성능 측정 시작 var startTime = performance.now(); // 측정하려는 작업(함수실행) function() // 성능 측정 종료 var endTime = performance.now(); // 실행 시간 계산 (밀리초 단위) var duration = endTime - startTime; console.log("작업 소요 시간: " + duration + "밀리초"); 위 예제에서는 performance.now() 를 사용하여 작업의 ..
