728x90 반응형 JavaScript186 [모던 자바스크립트 Deep Dive] 비동기 프로그래밍 이번 글은 모던 자바크스립트 Deep Dive의 42장 '비동기 프로그래밍' 및 초보자를 위한 Node.js 200제의 122장 '비동기(Async)와 동기(Sync)를 요약정리한 글입니다. 🤔 비동기란? 👉 쉽게 말하자면 return값이 없는 실행 🤔 왜 비동기로 코드를 짜는가? 👉 프로그램은 return값을 받으려고 응답이 올 때까지 기다리는데 이러면 실행 시간이 늘어나 성능 저하됨. 💡 비동기 작동 방식 👉 예를 들어 100명의 비서에게 동시에 각 번호별 페이지를 호출해서 저장하라고 하자. 비서는 각자 맡은 일을 처리할 테고 평균 처리 시간이 1초, 최장 처리 시간이 2초라고 한다면 총 실행 시간은 2초이다. 즉 여러 개의 작업을 순차적이 아니라 同時적으로 처리하는 것! 🤔 동기 처리와 비동기 처리.. 2022. 11. 20. 코어 자바스크립트_3장 this What is this? 👉 객체 지향 언어에서는 클래스로 생성한 인스턴스 객체 👉 자바스크립트에서는 어디서든 사용 가능. 함수와 객체(메서드)를 유일하게 구분 짓는 기준. 01. 상황에 따라 달라지는 this 👉 this는 실행컨텍스트가 생성될 때 결정됨. 즉 함수를 호출할 때 결정됨. 3-1-1. 전역 공간에서의 this 👉 브라우저 환경에서는 window, Node.js에서는 global 👉 전역 변수 선언 시 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당. 자바스크립트의 모든 변수는 실행 컨텍스트 LexicalEnvironment의 프로퍼티로서 동작. 👉 전역 공간에서 window의 프로퍼티에 직접 데이터를 할당하더라도 var로 변수 선언한 것과 똑같이 동작. 허나 '삭제' 명령은 다르게 .. 2022. 11. 1. 코어 자바스크립트_2장 실행 컨텍스트 01. 실행 컨텍스트란? 스택 👉 출입구가 하나뿐인 우물 같은 데이터 구조. FILO(선입후출) or LIFO(후입선출)로 동작. 👉 콜스택 초과 시 스택 오버플로(stack overflow) 발생. 큐 👉 양쪽이 열려 있는 파이프 같은 데이터 구조. FIFO(선입선출) or LILO(후입후출)로 동작. ❔ 실행 컨텍스트 👉 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 활성화되는 시점에 호이스팅(hoisting), 외부 환경 정보 구성, this 값 설정 등의 동작을 수행한다. 이로 인해 자바스크립트만의 특이한 현상들이 발생. 🔷 동작 순서 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성(🔸 동일한 환경이란 하나의 실행 컨텍스트를 구성할 수 있는 eval() 함수.. 2022. 10. 26. 코어 자바스크립트_1장 데이터 타입 01. 데이터 타입의 종류 👉 이번 장의 학습 목표는 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 알고 적절히 활용하는 것이다. ❔ 기본형과 참조형을 구분하는 기준 할당이나 연산 시 기본형: 주솟값을 바로 복제 참조형: 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 02. 데이터 타입에 관한 배경지식 1-2-1. 메모리와 데이터 비트(bit): 0 또는 1만 표현할 수 있는 하나의 메모리 조각. 식별자(identifier): 각 비트는 고유한 식별자를 통해 위치를 확인. 바이트(byte): 1바이트 = 8비트. 자주 사용하지 않는 데이터를 검색 시간 단축을 위해 적정한 공간에다 놔둔 비트의 묶음. 👉 C/C++, Java 등 정적 타입 언어는 메모리 낭비를 최소화하기 위해 데이터 타입별로.. 2022. 10. 24. [JavaScript] SNS 공유하기 (카카오, 라인, 트위터, 페이스북) 현재 페이지의 url을 sns로 공유하는 기능을 구현하는 방법을 적은 글입니다. 앞서 요약하자면 카카오톡 공유는 카카오 공유 API를 활용하여 구현해야 하고, 나머지 라인, 트위터, 페이스북은 단순히 url만 입력하면 됩니다. 1. 카카오톡(Kakao Talk) 카카오톡으로 현재 페이지의 url을 공유하기를 구현하려면 카카오 개발자 사이트에 방문하여 사전 작업을 해야 합니다. 1. 애플리케이션 등록 2. JavaScript 키 확인 3. Web 플랫폼 등록 그럼 카카오 개발자 사이트에서 해야 할 일을 아래에서 자세히 살펴보겠습니다. 애플리케이션 등록 사이트에 로그인한 후 내 애플리케이션 메뉴를 클릭합니다. 애플리케이션 추가 및 정보 입력 애플리케이션 추가 버튼을 클릭하면 위와 같은 창이 뜨는데 부담 갖지.. 2022. 10. 15. [이코테] 그리디_숫자 카드 게임 이번 글은 '이것이 취업을 위한 코딩 테스트다 with 파이썬' 내 문제를 풀고, 정답 코드를 정리한 것입니다. 문제 풀이 과정 이번 문제는 주어진 배열에서 최솟값과 최댓값만 뽑아낼 줄 알면 쉽게 풀 수 있는 문제이다. 내 풀이의 경우 먼저 input값을 정제하여 이중배열을 만들고 이중배열의 행을 탐색하기 위해 n만큼 for문을 돌며 배열을 탐색한다. 이후 각 행의 가장 첫 값을 변수 min에 최솟값이라고 임의로 할당하고 각 열의 다음 값과 최솟값을 비교하기 위해 한 번더 배열을 행의 길이만큼 돈다. 이렇게 안쪽 배열을 탐색하며 앞서 할당한 min보다 작은 값이 나올 경우 min을 그 값으로 치환한다. 이후 이렇게 찾아낸 각 행의 최솟값을 정답 배열에 담고 정답 배열을 내림차순으로 정렬한 다음 맨 첫 번.. 2022. 9. 16. [이코테] 그리디_큰 수의 법칙 이번 글은 '이것이 취업을 위한 코딩 테스트다 with 파이썬' 내 문제를 풀고, 정답 코드를 정리한 것입니다. 문제 풀이 과정 이번 문제 풀이의 핵심은 바로 배열을 정렬하여 최댓값을 찾아내는 것이다. 문제를 풀 때는 최댓값과 그 다음으로 큰 값만이 필요하다. 내 풀이의 경우 입력을 받은 배열을 내림차순으로 정렬하여 max와 next 변수에 각각 최댓값과 두 번째로 큰 값을 할당한다. 그 다음 if문을 통해 max가 next보다 클 경우 정답에 할당된 빈 배열의 길이가 M이 될 때까지 while문을 돌린다. 이때 while문 내에서 K만큼 for문을 돌며 가장 큰 값을 정답 배열에 push한 다음 두 번째로 큰 값을 정답 배열에 한 번 push한다. 만일 max와 next가 같을 경우 굳이 번갈아가며 더.. 2022. 9. 15. [My Projects] 계산기에 onKeyDown 이벤트 적용하기! 들어가며 얼마 전에 만든 계산기에 onKeyDown 이벤트를 추가했다. 기능 구현은 생각보다 간단했는데 미처 발견하지 못했던 자잘한 버그들이 발생했고 잡는 데 꽤 애를 먹었다. 리팩토링을 거치긴 해야 할 텐데 함수마다 조건문을 무지성으로 휘갈겨놓은 탓에 어디서부터 손을 봐야 할지 감이 잡히질 않는다. 무튼 키보드로 계산기를 조작하는 데 필요한 코드들을 설명해보겠다! onKeyDown 이벤트 구현 코드 const handleKeyDown = (e: React.KeyboardEvent) => { const key = e.key; if (!isNaN(+key) && totalNumber) { handleReset(); if (inputValChecker(inputNumber, key)) { setInputNu.. 2022. 9. 7. [JavaScript] 회원가입 정규표현식으로 체크하기(Feat. 아이디 & 비밀번호) 주석 처리해둔 조건에 따라 입력값의 조건 충족 여부를 if문을 통해 검증한다. 정규식의 test() 메서드를 활용하면 주어진 문자열이 정규 표현식 내 조건 충족 여부에 따라 boolean 값을 반환한다. 이를 통해 길이까지 조건에 어긋나지 않는다면 통과되고 아니라면 통과하지 못하는 식으로 구현했다. /* ID */ // O: 영소문자 X: 영대문자, 특수문자, 한글 const checkId = (id, type) => { // 정규식 const regex = /^[a-z0-9]+$/g; const result = regex.test(id); id = String(id); // result가 false or id 길이 6 이하 or id 길이 20 이상이라면? if (result && id.length >.. 2022. 8. 17. 이전 1 ··· 6 7 8 9 10 11 12 ··· 21 다음 728x90 반응형
