성장을 위한 기록

JS의 동시성과 EventLoop 자바스크립트는 단일 스레드기반 언어이다. 이 말은 한번에 하나씩 작업을 한다는 의미이고 쉽게 표현하지면 명령을 수행하는 일꾼(?)이 하나만 있다는 뜻이다. 하지만 우리가 웹서핑을 하다보면 서버에 요청을 할 때에 렌더링 동작을 멈추지 않는다. 이는 비동기 콜백이 있기 때문이다. 다르게 바라보면 이벤트 루프의 개념이 있다. JS는 혼자 독립 실행되는 것이 아니라 브라우저를 통해 실행된다. 그리고 브라우저에서 JS를 실행할 때에는 이벤트 루프라는 걸 기반으로 실행한다. 요약해보면 JS는 기본적으로 한번에 하나의 일만 처리하지만, 비동기 콜백으로 동시에 작업하는 것처럼 보인다. 이를 동시성이라 하지만 사실 병렬로 완전 동시에 실행하는 것은 아니다. 자바스크립트 엔진 아마 가장 ..

new Set new Set을 간단하게 정리해보면 중복이 불가능한 데이터 집합이라 할 수 있다. Set의 사용법은 다양하다. Set 객체 사용 let mySet = new Set //add mySet.add(1); // Set { 1 } mySet.add('1'); // Set { 1, '1' } mySet.add('hello'); // Set { 1, '1', 'hello' } //has mySet.has(1); // true mySet.has('a'); // false mySet.has('hello'); // true //delete mySet.delete('hello'); // Set ..

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자료형 Number(숫자열) : +infinity, -infinity, NaN(Not a Number)의 상징적인 값을 가질 수 있고 전반적인 숫자 타입 String(문자열) : 문자로 구성된 타입, 배열은 아니지만 각 자리에 인덱스 번호가 존재한다. 따라서 index 번호로 해당 자리 글자를 호출 할 수 있고, length를 통해 문자열 길이를 알 수 있다. Boolean(불리언) : 논리 요소로 true, false 두 가지 값을 갖는다. Null : undefined랑 헷갈릴 수 있다. 값은 null하나만 가지며, '객체가 없음'을 나타냅니다. ..

이벤트 핸들러(ft.addEventListener) html요소에 이벤트 함수 연결하기 버튼 //html에 직접 작성 document.querySelector('#btn').click = fn; // 요소.이벤트 = 함수 document.querySelector('#btn').addEventListener('click',fn); // 이벤트 리스너 사용 여기서 JS에서 선언할 때는 '()'를 제외해야 한다 만일 작성하게 되면"= fn()" 함수에 return값을 할당한다는 의미로 받아드릴 수 있고, fu()이 실행되게 된다. 즉, 이벤트 핸들러에 기능을 잃게 된다. function fn(event){ console.dir(event); } 위에서 사용한 fn함수를 정의할 때 인수로 event를 받을 수 ..

웹 스토리지 웹 스토리지는 브라우저 상에 데이터를 저장할 수 있는 기술이다. 개발을 시작하면 DB서버나 Cloud 플랫폼에 데이터를 저정하는 경우가 많은데, 브라우저에 저장할 필요가 있나? 개인적인 생각으로 무족건 필요하다고는 볼 수 없는데, 개발 시작단계에서 가볍게 테스트하기 좋다고 생각하고있다. 그리고 모든 데이터(사소한 것까지)를 DB에 저장하는 것은 낭비라고 생각해 웹 스토리지에 저장하는 경우가 있다고 한다. 소실 될 수 있으니 중요하지 않은, 없어져도 되는 데이터만 저장하자 웹 스토리지는 2가지로 나뉠 수 있다. 로컬 스토리지 세션 스토리지 두 기술의 차이는 간단하게 저장 기간(?) 이다. 세션 스토리지의 경우 세션마다 저장을 한다고 볼 수 있다. 그래서 여러 창을 띄우면 우리는 각 페이지 마다..

map 배열.map((요소, 인덱스, 배열)=>{return값}); map함수는 배열을 순회하면서 함수(위에선 화살표 함수 사용)에 return값을 새로운 배열에 저장한다. let arr = [1,2,3]; let result = arr.map((item)=>{ return item*2 }) result;//[2,4,6] arr; // [1,2,3] 여기서 기존 배열인 arr는 수정되지 않고 새로운 배열을 만들어 낸다. 또한 함수식에 return값을 사용하기 때문에, 조건문이나 반목문 등을 사용해서 자유로운 값을 도출 할 수 있다. 마땅한 예제가 생각이 안나 기본식에 2번째 인자인 인덱스와 3번째 인자인 배열은 사용하지 않았는데, map을 호출한 배열 즉 위 예제에서 arr가 된다. 따라서 해당 배열을 ..

연습용 챗봇 만들기 서버를 다루지 못해 js코드만 사용했다. 함수 외 선언 let count = 0; // 조건문을 선택하는 길잡이 let container = document.getElementById('container'); let retext = document.getElementById('retext'); // 봇 대답 텍스트 let addQuestion; // 등록 질문 let addAnswer; // 등록 답변 let commend = [ // 질문과 답변에 배열 { 'question' : '안녕', 'answer' : '안녕 냥~', }, { 'question' : '잘가', 'answer' : '잘가라 냥~', }, { 'question' : '불꺼줘', 'answer' : function..

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌) 문제 시 바로 삭제하겠습니다. 출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com) Generator Generator는 함수를 중간에 멈췄다가 다시 실행 할 수 있는 기능이다. function* fn(){ console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return 'end' } const a = fn(); 사용 방법은 functiong의 별포(*)를 사용하여 작성하고 내용에 yield를 사용하여 중간에 멈출 지점을 정할 수 있다. generato..

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌) 문제 시 바로 삭제하겠습니다. 출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com) async, await async과 await를 사용하면 .then을 이용한 체인 형식보다 가독성이 좋아진다. async saync를 함수 앞에 작성하면 그 함수는 항상 Promise를 반환한다. 만일 함수 내에 Promise가 있다면, 내부에 있는 Promise를 반환한다. async function Name(){ return 'Btae'; // Promise가 없지만 반환은 Promise를 반환 } Name().then((name) => { console.log(name); ..