emayom.log

ES6에서 새롭게 추가된 자바스크립트의 7번째 자료형! Symbol type에 대해서 알아보자앙 🤨 Symbol ? Symbol은 자바스크립트의 Primitive data type으로 ES6에서 새롭게 추가된 자료형이다. Symbol 생성 심볼 또한 다른 내장 객체처럼 new Symbol()과 같이 new 생성자를 사용할 것 같지만, Symbol() 함수로 생성하게 된다. const lets = Symbol(); const make = Symbol.for('target'); const symbol = Symbol.iterator(); //1. Symbol() //심볼은 String type의 ** optional ** parameter를 받는데, //해당 심볼 자체에 접근하거나, 자체의 고유한 값에 영향..

비록 IE는 지원하지 않는다지만 nullish operator에 대해 간단하게 알아보자. 그리고 null, undefined 이외에도 '', 0, -0 등등 falsy를 모두 처리할 수 있는 ?? OR 연산자도 조금 더 알아보자. Nullish coalescing operator (??) 오늘의 기록은 nullish 연산자 !! nullish 연산자는 데이터 값이 null 이거나 undefined일 경우의 처리를 간단하게 표현할 수 있다! 예를 들어, 아래와 같이 작성하게 된다면,,, 보기에도 복잡해보이고 딱히 효율적이라고는 할 수 없는 코드가 완성된다 ~! const findFalsy = (data) => { var result; if(data == null || data == undefined){ r..

오늘은,,! 간단한 XMLHttpRequest 객체를 이용한 비동기 통신 예제를 해 볼 예정이당ㅎㅎㅎㅎ 원래의 계획은 XHR, $.ajax(), fetch(), axios 까지 하나씩 GET 메서드로 같은 데이터를 요청하는 코드를 작성해보려고 했으나.. ㅎㅎㅎ 하다보니 재밌는게 생각나서 딴 길로 새는 중 이다!!!!!!! 오늘의 일은 ,,,, 내일로........ 🤓 input 태그에 원하는 컬러를 입력하고 버튼을 클릭하면 test.json으로 컬러의 정보가 담긴 JSON을 비동기로 요청하게 되고, 입력한 색이 JSON 안에 있는 컬러라면 hex 코드를 화면에 보여준다!!! const btn = document.getElementById('btn'); const ipt = document.getEleme..

가끔 자식 NodeList를 모두 삭제해야할 경우가 있을 때 사용할 수 있는 방법이다! remove() 혹은 removeChild() 메서드를 사용할 수 있는데 remove()의 경우는 IE에서 지원이 되지않는다 ㅠㅠ const parent = document.getElementById('parent'); //removeChild() //자식 노드가 존재하면 == NodeList.length > 0 while(parent.firstChild){ parent.removeChild(parent.firstChild); } //remove() while(parent.firstChild){ parent.firstChild.remove(); } //+) hasChildNodes(); while(parent.hasC..

Ajax의 약자는 Asynchronous Javascript and XML으로 비동기식 자바스크립트와 XML이라는 의미를 가지고 있다. 동기와 비동기의 차이점, 그리고 Ajax 통신에 사용되는 XMLHttpRequest 객체에 대해 알아보자! 동기(Sync) vs 비동기(Async) ? 자바스크립트는 싱글-스레드 프로그래밍 언어로 단일 호출 스택을 가지며, 동기 방식으로 동작한다. ( one thread == one callstack == just one thing at a time !!! ) 그럼 동기 방식과 비동기 방식의 차이는 무엇일까? 동기적(Synchronous)인 처리 방식은 위의 그림처럼 먼저 들어온 요청부터 순차적으로 처리하는 방식으로 앞선 작업이 끝나고 결과 응답이 돌아온 것을 확인한 후..

Node js 는 하나도 못알아먹겠다. 프로젝트도 끝났으니까... 공부하자 이마욤,,, http 모듈에 대해 알아보자,,,,,,🙄 우선 그냥 http 모듈을 사용해보자. 아래는 서버 객체를 생성했지만, 8080 포트로 접속하더라도 리스너가 등록되지않은 아무런 응답을 하지않는 코드이다 ..! var http = require('http'); var server = http.createServer(); server.listen(8080); http.createServer([options][, requestListener]) 여기서 createServer() 메서드에 리퀘스트 리스너? 함수를 넘겨주고, 8080 포트를 문제없이 띄웠을 때 Hello Node.js를 화면에 출력 / 응답하도록 찍어보자! //1...

벨로퍼트와 함께하는 모던 리액트를 참고하며 todo-list를 만들었다! 바닐라 자바스크립트로 로컬 스토리지에 저장한 todo-list를 제작해봤지만 리액트를 사용한 것은 처음이다! styled-components는 CSS in JS 관련 리액트 라이브러리와 dispatch 함수를 사용했는데 처음 사용해봐서 그런지 너무 신기했다ㅎㅎㅎㅎㅎ 당분간 조금 더 자세히 코드를 뜯어볼 예정이다!!!!! 3장. 멋진 투두리스트 만들기 · GitBook 3장. 멋진 투두리스트 만들기 이번 장에서는 리액트를 사용하여 멋진 투두리스트 (미리보기) 를 만들어보겠습니다. 이번 투두 리스트 앱을 만드는 과정에서, 우리가 지금까지 배운 다양한 개념 react.vlpt.us ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용..

" 자바스크립트에서는 함수가 1급 시민이기 때문에, 자바스크립트가 함수형 프로그래밍을 지원한다고 말할 수 있다. " -러닝 리액트 [2판] " props는 읽기 전용입니다. props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. " - 리액트 공식 문서 여기서 얘기하는 '함수형 프로그래밍 - 순수 함수'에 대해 알아보자?! 🤔 함수형 프로그래밍 ? 자바스크립트는 함수형 프로그래밍만을 위한 언어는 아니지만! 함수형 프로그래밍을 지원하는 언어이다. 함수형 프로그래밍은 부수 효과가 없는 순수 함수를 추구하며, 모듈화를 통한 함수 간의 조합성을 강조하는 프로그래밍 방식이다. (즉, 외부 환경으로부터 독립적이며 주어진 것들로 정해진 작업을 하기 때문에 부수 효과로부터 자유로울 수 있다.) 순수 함수 (Pur..

리액트 v16.8 이후에 등장한 Hook, 지난 포스팅에서 전박적인 컴포넌트에 대해 알아보았다면 오늘은 함수형 컴포넌트와 Hook에 대해 알아보자 🤔 클래스 컴포넌트 ? 함수형 컴포넌트 ? 리액트의 컴포넌트는 ① 클래스 컴포넌트와 ② 함수형 컴포넌트 두 가지로 나눌 수 있다. 둘은 작성하는 방식도 다르지만 내부적인 기능에도 차이가 존재한다. 먼저 클래스 컴포넌트부터 알아보자. class로 정의하고 React.Component 슈퍼 클래스를 extends하게 된다. 중요한 것은 *** render() 통해 JSX를 리턴하게 되는 것이다!!! //클래스 컴포넌트 class ClassComp extends React.Component { render() { return ( Class style componen..