간단한 todo앱을 redux를 이용해 바닐라 자바스크립트로 구현했다. 바닐라에선 npm으로 redux만 설치하고 코드를 작성하면 된다. 1. html To Dos Add 2. javascript import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const addToDo = (text) => { return { type: ADD_TODO, t..

싱글 스레드(Single Thread) 스레드는 프로세스 내에서 실행되는 흐름의 최소단위이다. 스레드는 자신만의 프로그램 카운터, 시스템 레지스터, 스택을 가진다. 자바스크립트는 싱글 스레드 언어라고 불린다. 그 말은 '자바스크립트 엔진'이 하나의 스레드를 사용하는 싱글 스레드 방식이라는 것이다. 즉, 하나의 카운터, 레지스터, 스택을 가지며 한번에 하나의 작업만 수행한다. 자바스크립트에서 어떤 함수를 호출하면 함수와 관련된 값들을 실행 컨텍스트라는 객체로 생성한 후 콜 스택(자료구조)에 push한다. 스택에 push되면 바로 함수가 실행되며, 실행이 종료되고 나면 실행 컨텍스트는 pop되어 사라진다. 동기 (Synchronous) 코드를 작성한 순서대로 실행한다. 현재 실행중인 작업이 종료될 때까지 다..

로직은 아래와 같다. let a = [1, 2, 2, 4, 55, 55, 6, 72, 2, 55, 2, 72]; let b = []; for(let i=0; i

fetch는 클라이언트에서 서버요청을 할 수 있는 함수이다. Web API 함수. (Web API는 자바스크립트 내장함수. 즉, 외부 라이브러리가 아니다) Ajax를 구현할 수 있는 여러가지 기술 중, 최신 기술이 fetch 함수이다. - Asynchronous Javascript And Xml(비동기식 자바스크립트와 XML) - 클라이언트와 서버간에 XML 데이터를 주고받는 기술, - 자바스크립트를 통해 클라이언트에서 서버에 데이터를 요청하고 그 결과를 받을 수 있는 기술 실무에서 axios를 많이 쓰는데 fetch도 왠만한 것은 다 처리할 수 있다고 한다. fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한..

자바스크립트를 사용하면서 내장함수를 아는 것은 중요하다. for문과 if문으로만 코드를 짜려다보면 잘 안될때가 있고 효율이 떨어지는 경우가 있다. 기본 내장함수 중에 map, filter 에 대해 정리해보고자 한다 1. map map 함수는 배열 내의 요소를 순회하면서 주어진 함수를 호출하고 새로운 배열을 생성한다. 배열.map((요소) => {return 요소}) // map을 실행하여 각 요소에 2배를 곱한 값으로 새로운 배열 생성 const a = [1,3,5,6]; const b = a.map((i) => {return i * 2}); console.log(b); // [2,6,10,12] 포인트는 기존 배열을 수정하지 않고 새로운 배열을 만든다는 것이다. 위의 예에서 a와 b는 다른 객체(배열)..

유투브에서 40년 동안 소프트웨어 개발을 해오신 분을 봤다. 오랜 세월 동안 개발을 하신 것이 대단해보였고 정말 개발 자체를 좋아하신다는 느낌을 받았다. 그분이 강조하신게 표준이다. 표준은 기본에서 조금 발전된 것이고 많은 시간을 통해 만들어졌다. 그리고 표준은 기술 축적이 된다. 웹 표준. 그 중에 하나가 DOM이다. DOM은 Document Object Model, 문서객체모델이다. 웹 브라우저에서 HTML이나 XML같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것이다. 예를 들면 이나 를 자바스크립트가 이용할 수 있는 객체(object)로 만든 것이다. 조금 어렵게 말하면 DOM은 화면의 구성요소(HTML 태그)들을 조작할 수 있는 '인터페이스'이다. 인터페이스는 '어떤 기능을 사용하기 위..