Today I Learned/JS17 [Core Javascript] 싱글스레드 & 논블로킹 싱글 스레드 특징한번에 하나의 일만 수행문맥 교환 필요 X에러 처리를 못 할 경우 동작을 멈춤※ 문맥교환 : 현재까지의 작업 상태나 다음 작업에 필요한 각종 데이터를 저장하고 읽어오는 작업 자바스크립트가 동시에 많은 요청을 받을 수 있는 이유는 실행 환경(Node, Browser)이 멀티스레드이기 때문이다.( 자바스크립트 = 싱글스레드 / 자바스크립트 런타임 = 멀티스레드 ) Call Stack : 작업할 함수들을 순차적으로 스택에 담아 처리함Web API : 비동기 작업을 실행함Task Queue(Callback Queue) : Web API에서 넘겨받은 Callback 함수를 지정함Event Loop : Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 이동시킴 일.. 2024. 11. 12. [JS] 동기와 비동기 • 동기(Synchronous): 코드는 위에서 아래로 순차적으로 실행된다. 이전 코드의 실행이 끝나야 다음 코드가 실행된다. 이는 직관적이지만, 작업 중 하나가 오래 걸리면 다음 작업이 지연되는 단점이 있다.console.log('1');console.log('2');console.log('3');// 출력 : // 1// 2// 3 • 비동기(Asynchronous): 특정 작업이 완료될 때까지 기다리지 않고, 다음 작업을 즉시 실행한다. 오래 걸리는 작업은 백그라운드에서 처리하고, 나중에 그 결과를 처리한다. console.log('1');setTimeout(() => { console.log('2');}, 2000);console.log('3');// 출력 : // 1// 3// 2위 코드에서는.. 2024. 8. 29. [JS] Object의 주소 자바스크립트에서 객체와 배열은 참조 타입으로 이루어진다. 오늘은 객체의 주소에 대해 깊이 있게 공부했고, 이 과정에서 배열메서드를 이용해 배열을 복사하는 방법과 그 결과로 나타나는 참조 비교에 대해 알아보았다. 이를 통해 참조 타입이 어떻게 동작하는지, 왜 두 배열이 서로 다르게 인식되는지를 명확히 이해할 수 있었다.const arr = [1, 2, 3, 4, 5];const newArr = arr.map(element => element);console.log(newArr === arr); // false위 코드를 보면, arr 배열의 요소들을 그대로 복사하여 newArr에 저장했다. 하지만 console.log(newArr === arr);의 출력 결과는 false가 된다. 이 결과는 참조 타입의 동.. 2024. 8. 27. [JS] 람다표현식 오늘은 JavaScript에서 람다 표현식, 흔히 화살표 함수라고 불리는 개념에 대해 공부했다. 람다 표현식은 간결한 코드 작성과 콜백 함수 작성에 있어 매우 유용한 도구로, 이를 제대로 이해하면 코드의 가독성을 높이고 개발 생산성을 향상시킬 수 있다. 람다 표현식의 정의람다 표현식은 JavaScript의 간결한 함수 표현식이다. 기존의 함수 선언 방식에 비해 구문이 짧고 간결하며, 특히 콜백 함수나 간단한 작업을 수행하는 함수를 정의할 때 유용하다. 기존의 함수 선언 방식과 람다 표현식을 비교하면 다음과 같다.// 기존 함수 선언function add(a, b) { return a + b;}// 람다 표현식const add = (a, b) => a + b; 위 예제에서 볼 수 있듯이, 람다 표현식.. 2024. 8. 24. [JS] Cookie - 에이블런 프론트엔드부트캠프 24일차 1. 개념쿠키란 서버가 사용자의 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 이 데이터 조각들을 저장해놨다가 동일한 서버에 재요청시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에 들어왔는지 아닌지를 판단할 때에 주로 사용한다. 2. 사용 방법JS에서 쿠키를 생성하는 방법은 다음과 같다. document.cookie = 'name=value; path=/; expires=date' 키밸류의 형태로 쿠키를 저장하고, 저장 경로, 쿠키 만료일을 지정한다.3. 예제새로운 접속자는 팝업창을 띄우고, 사용자가 이전에 오늘 하루 그만보기 버튼을 클릭하였을 경우, 팝업창을 띄우지 않는 코드를 구현했다.먼저, 쿠키를 생성하는 함수를 구현해줬다. function setCookie(name, .. 2024. 8. 16. [JS] SCROLL - 에이블런 프론트엔드부트캠프 22일차 JS에서 scroll 메서드를 활용해서 브라우저의 스크롤을 조정할 수 있다. 스크롤 메서드는 다음과 같이 작성한다.// 1.scroll(x-coord, y-coord)// 2.scroll({ top: 0, left: 0, behavior: 'smooth',}) 1번 코드, 2번코드는 동일하나, 2번 코드에서 behavior 옵션을 추가하여 'smooth'라고 작성했을 경우에는 부드럽게 화면 스크롤이 진행된다. 더보기더보기HTML CSS// reset css import@import "reset.scss";section { width: 100%; height: 100vh; &.box.. 2024. 8. 13. 이전 1 2 3 다음
