Duknock의 개발새발

자바스크립트는 싱글스레드 환경에서 실행된다. 즉, 하나의 호출 스택을 통해 함수 호출을 처리하기 때문에, 한번에 하나의 작업만 처리할 수 있다. 하지만 우리는 이미 비동기 함수라는 것을 많이 사용하고 있다.(setTimeout, ajax(fetch), 웹 워커 등) 비동기 함수를 사용하면 여러개의 작업을 순차적으로 기다리지 않고 한번에 병렬적으로 처리 가능하다.엥? 한번에 하나의 작업만 처리 가능하다면서 어떻게 비동기 작업을 처리함? 왜냐하면 자바스크립트에서는 비동기적인 작업은 메인스레드가 아닌 백그라운드 스레드로 보내서 처리시키기 때문이다.(다른 놈[브라우저]한테 짬때리는 거다) 📢 이 때 주의할 점 하나는, 비동기 함수 자체를 백그라운드 스레드로 보내는 것이 아니다!백그라운드 스레드로 보내는 것은 ..

Intersection Observer Intersection Observer는 웹 브라우저에서 제공하는 API 중 하나로, 요소가 다른 요소나 브라우저 viewport와 교차하는지 여부를 감지하는 기능을 제공한다. 예를 들어, 스크롤을 내렸을 때 화면에 보이는 이미지나 다른 요소를 로드하기 전에 Intersection Observer를 사용하여 해당 요소가 브라우저 viewport 안에 있는지 감지하고, 그 후에 해당 요소를 로드할 수 있다. 이를 통해 불필요한 리소스 로드를 줄일 수 있으며, 페이지 로딩 속도를 향상시킬 수 있다. Intersection Observer는 요소의 가시성 여부를 지속적으로 감시하고, 이벤트를 발생시킨다. 이벤트는 요소가 viewport에 나타날 때, 사라질 때, 일부분만..

보통 브라우저 화면에 타이머 같은것을 띄울 때, setInterval 함수를 사용한다. 타이머 0초 시작 정지 이런식으로 1초 (1000ms) 마다 함수를 실행하여 HTML 요소를 업데이트하는 방식으로 렌더링하게 되는데 고작 타이머 하나 보여주려고 백그라운드에서 계속 돌아가는 setinterval 함수를 사용하는 것은 아래와 같은 문제점들이 있다. 1. 정확한 실행 시간 보장 불가능: setInterval 함수는 일정한 시간 간격으로 코드를 실행하는 것이 아니라, 이벤트 루프에서 실행 대기열에 추가된 시점부터 일정 시간이 지난 후 실행됩니다. 따라서, 코드 실행이 지연될 가능성이 있습니다. 2. 코드 충돌 가능성: setInterval 함수를 사용하면서, 두 개 이상의 코드가 동시에 실행될 가능성이 있습..

하 이건 진짜 하기 싫었는데 정리하긴 해야지... 게시판 같은거 보면 아래에 페이지 버튼이 있다. 얘는 페이지네이션 (Pagination)이라고 하는데 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소이다. 오늘은 얘를 만들어볼건데 이게 보기엔 별거아닌거 같은데 은근히 만들기 귀찮은 녀석이다. 이유는 아래에 보면 나온다. 이번엔 자바스크립트의 Class 문법을 사용하여 만들어보겠다. 설계 1. 페이지 버튼을 누르면 해당 페이지가 URL 파라미터에 추가되며 페이지를 갱신한다. - (2 페이지를 클릭했을 경우 : duknock.tistory.com -> duknock.tistory.com?page=2) 2. URL에 ?page=3 이런식으로 파라미터가 들어..

자바스크립트로 새 창을 띄우는 방법에는 window.open() 메서드가 있다. window.open(url, name, specs, replace) 이런 문법으로 쓰게 되는데, 구체적으로 예시를 들자면 let url = 'https://duknock.tistory.com'; let name = 'popup'; let specs = 'width=720, height=500, top=100, left=200'; let replace = false; window.open(url, name, specs, replace); 이런식이다. return 새로 열린 창 객체가 반환된다. 그래서 변수에 할당할 수 있다. let newWindow = window.open(url, name, specs, replace); ..

자바스크립트에서 동적으로 html 요소를 생성하는 방법으로 document.createElement() 메서드가 있다. let newDiv = document.createElement('div'); console.log(newDiv); // 근데 여기에 클래스도 추가하고 id도 추가하고 input을 생성했으면 value도 추가하고 여러 옵션들을 달아줘야 하는데 이걸 다 수작업으로 추가해주면 코드가 아주 더러워진다. name 과 id가 myInput이고 class가 myClass, value가 '더러워' 인 input 요소를 만들어서 div 안에 집어넣는 코드를 예시로 한번 짜보자. let newInput = document.createElement('input'); newInput.setAttribute..

정규식 혹은 정규 표현식 (Regular Expression) 은 특정한 규칙을 가진 문자열을 표현하는 데 사용하는 형식 언어이다. 자바스크립트에서만 사용하는 것은 아니고 수많은 프로그래밍 언어, 심지어 텍스트 편집기 등에서도 널리 사용하는 기능이다. 참고로 자바스크립트에서 정규식은 문자열이 아니라 객체다. 문자열을 따옴표(")로 감싸는것 처럼, 정규식은 슬래시(/)로 표현한다. 어떻게 생겨먹은건지 대충 보여주자면 /[a-z]/g 뭔가 엑셀 함수식 처럼 생겼다 이렇게 쓰면 123abc가나다ABC@#$ 이렇게 a 부터 z 까지의 문자에 속하는 놈들이 선택된다. (대문자는 선택이 안됨. 따로 조건 하나 더 설정해줘야됨.) 정규식을 사용하면 문자열에서 원하는 글자를 추출할때나 유효성 검사등을 할때 아주아주 유..

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부이다. HTTP(HyperText Transfer Protocol) 란, HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다 프로토콜이란, 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다. -MDN Web Docs 그냥 설명하려다 보니 개발에 ..

querySelector() 는 자바스크립트에서 DOM 요소를 선택할 때 수도 없이 사용하는 선택자이다. 지금 당장 자신이 짠 js파일에 ctrl+f를 누르고 querySelector() 를 검색해보면 일치하는 결과가 수십개씩 나올것이다. 이번 포스팅에서는 이 querySelector() 에 대해서 간단히 알아보겠다. querySelector() 는 괄호안에 인자로 넣은 값과 일치하는 요소를 찾아서 반환한다. 일치하는 요소가 없으면 null을 반환한다. 괄호안에는 String(문자열) 형만 넣을 수 있고, 유효한 CSS 선택자를 넣어야한다. document.querySelector({name: "duknock"}) // 이딴식으로 이상한거 넣으면 당연히 안된다. 또한 인자로 넣은값과 일치하는 요소가 여러..

전에 포스팅했던 Promise 를 더 쉽게 사용할 수 있게 해주는 문법인 async와 await에 대해서 알아보자. async와 await은 처음엔 낯설지만 익숙해지면 굉장히 쉬운 문법이다. async async는 function 앞에 붙여서 사용한다. async function hello(){ return "Hello World!"; } hello(); //Promise {: 'Hello World!'} function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다. 명시적으로 Promise를 return값으로 주지 않아도, return 값을 Promise(이행된 프로미스)로 감싸서 반환한다. 그리고 async가 붙은 function은 내부에 await 문법을 사용할 수 있다. a..