emayom.log

오늘은 macOS 환경에서 NVM(Node Version Manager)를 설치해 볼까 합니다! NVM은 말 그대로 노드 버전 매니저. 노드 버전을 관리해 주는 프로그램입니다 ;) 🤔 우리가 NVM을 사용하는 이유는 아주 명확하죵...! # 빠른 설치가 가능해요. # 커맨드라인을 통해 간편하게 버전을 스위칭하거나 관리할 수 있어요. 하나 이상의 프로젝트를 진행하다 보면 여기서는 A 버전 다른 곳에서는 B 버전 또 어느 곳에서는 C 버전의 노드가 필요한 경우가 생기기 마련일 텐데 NVM을 사용하면 주로 사용하는 디폴트 버전을 설정하거나 현재 설치된 버전 전체 리스트를 확인하기도 편리하고, 필요가 없어질 경우 커맨드라인으로 간단하게 삭제할 수 있습니다. 오늘은 간단하게 curl 명령어로 nvm을 설치 해 봅..

재귀,,, 우리 재귀는요 데이터 구조를 검색할 때도 유용하구요,,⭐️ 재귀는 강력한 함수형 기법이다. 하지만? 그래.알아보자. 재귀 (recursion) 재귀를 사용하면 코드가 짧아지고 코드 이해도가 높아지며 유지보수에도 이점이 있습니다. 모든 곳에서 메모리 최적화를 신경 써서 코드를 작성해야 하는 것은 아닙니다. 우리가 필요한 것은 좋은 코드입니다. 이런 이유 때문에 재귀를 사용합니다. 재귀는 자기 자신을 호출하는 함수를 만드는 기법이다. 기본적으로 재귀는 반복문과 동일한 결과?를 얻을 수 있지만 단순화하여 훨씬 간결하게 표현할 수 있다는 장점이 있다. map, filter, reduce와 같은 함수들은 파라미터로 다른 함수(콜백 함수)를 받는 고차 함수다. 만약 함수에서 다른 함수를 호출해야하는데 그..

☝🏻 매번 콘솔을 찍을 때 마다 console.log()를 치는게 너무 싫어서 몇달 전에 shortcut 등록을 해뒀는데 오늘 생각난 김에,,, 까먹기 전에,,, 적으려한다,,, +) 우연히 유데미 강의를 보다가 알게된 사실 ,, log + Enter 에 바로 자동완성이 된다는 사실 ,, 하지만 키보드 숏컷 등록을 제대로 알았으니 괜찮다 ,, ⭐️ 우선 거두절미하고!!! 단축키는 Preference > Keyboard Shortcuts에서 설정할 수 있다. (cmd 누르고 + k, + s) 하지만 개인적으로는 기등록된 숏컷이 주르륵 뜨니까 어디서 어떻게 추가해야할지 처음에 너무 당황스러웠다ㅣ...... 그래서 이미 등록된 숏컷의 키바인딩을 수정할게 아니라면,,! 직접 JSON 파일을 수정하는 것을 추천한..

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...