devlog

1. jest란? All-in-one 테스팅 라이브러리이다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러가지 테스팅 라이브러리를 조합해서 사용하곤 했었다. 하지만 Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 상당히 편리한 것 같다. 2. jest 사용하기 jest 라이브러리 설치하기 test script 수정하기: package.json의 test 부분을 아래와 같이 변경한다. test 뒤에 주고 싶은 option을 추가할 수 있다. npm i -D jest filename.test.js와 같은 이름의 file을 생성하고 test코드를 작성한다. 그 후 npm test를 하면 test가 실행된다..

1. socket.io란? - socket.io란 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈이다. * 참고: http와 socket 차이 2. react에서 socket.io 사용하기 글쓴이는 간단하게 index.js 파일에서 socket 연결을 하도록 해봤다. (create-react-app으로 간단히 생성) import socketio from 'socket.io-client'; const socket = socketio.connect('http://localhost:4000'); (() => { socket.emit('init', { name: 'bella' }); socket.on('welcome', (msg) => { console.log(msg..

문제 component를 만들고 export시켜 app.js에서 사용하려 했다. but.. 문제가 생겼다. 아래와 같은 오류가 뜬다. 사실 나는 react를 처음 사용하면서 공식 문서를 읽지않고 사용해서 이런 문제를 만난 것 같다. 나는 지금 react hook을 사용하고 있고 hook을 사용할 때 rule이 있다. 지금 이 문제는 내가 아래와 같은 코드를 사용해서다. import React from 'react'; import { useQuery } from '@apollo/react-hooks'; const roomList = () => { const { loading, error, data } = useQuery(GET_ALL_ROOMS); if (loading) ret..

오늘은 자바스크립트의 동작원리에 대해 간단히 알아보려고 한다. 자바스크립트는 싱글 스레드 기반으로 동작한다. 과연 싱글 스레드 기반으로 어떻게 동작하는 것일까? 자바스크립트가 동작하는 환경과 엔진에 대해 쉽고 간단하게 알아보자. 1. 자바스크립트의 엔진 구성 자바스크립트 엔진은 크게 두 부분으로 구성된다. 메모리 힙(Memory Heap) : 메모리 할당이 이루어지는 곳 콜 스택(Call Stack) : 코드가 실행되면서 스택 프레임이 쌓이는 곳 위와 같이 구성된다. 하지만 브라우저에는 거의 모든 자바스크립트 개발자가 사용하는 API가 있다. 예를 들면setTimeout과 같은 것들을 말한다. 그런데 이것들은 엔진이 제공하는 것이 아니다. 브라우저가 제공하는 웹 API가 DOM, AJAX,setTimeo..

ES6에서 배열과 object를 조금 더 쉽게 다루는 방식이 추가됐다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있도록 해준다. 1. 객체 구조 분해 할당 아래는 객체 구조분해(destructuring)의 예시이다. let obj = { name : "devlog", age : 1 }; let { name, age } = obj; name과 age의 값을 확인해보면 각각 obj.name, obj.age의 값이 담긴 것을 확인해볼 수 있다. 객체를 구조분해 할 때 주의해야 할 것은 우선 할당 연산자..

Promise (프로미스) 싱글 스레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다. 덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 반복되면서 콜백 지옥이 생겨났다. 콜백 지옥으로 인해 복잡도가 증가하고 예외처리가 어려워졌다. 이러한 단점을 보완하기 위하여 생긴 것이 Promise이다. Promise를 간단히 소개하자면 비동기에서 성공(fulfilled)과 실패(rejected)를 분리해서 메서드를 수행해주는 것이다. fulfilled 혹은 rejected될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오른다. 1. Promise 생성 방법 var promise1 = function(bool){ return new Promise..

Javascript로 개발을 하신다면 'callback'이라는 키워드를 한 번쯤 들어보셨을 것이라 생각합니다. 과연 callback이란 무엇일까요? 1.callback이란? javascript에서는 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다. callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다. 그렇기 때문에 non-block이며, 비동기 방식의 함수를 사용합니다. 2.callback 함수 사용법 function first(a,b,callback){ let v=a*b; callback(v); } firs..

Javascript의 변수 선언 방식인 var와 let 그리고 const는 어떤 차이점에 대해 알아보자. 1.var ES6(ECMAScript6) 이전에 나온 변수 선언 방식입니다. var와 let의 차이점으로는 scope이 있습니다. var는 function 단위의 scope을 가집니다. var str="hello"; if(true){ var str2="world"; } console.log(str2);//world 위의 코드는 if문 안에서 str2를 선언했지만 if문 밖에서도 변수가 유효한 것을 알 수 있습니다. 또한 같은 이름의 변수를 여러 번 선언하여도 오류가 나지 않습니다. var str="hello"; var str="world"; console.log(str);//world 위와 같이 같은..

1. npm이란npm은 Node Package Manager의 약자입니다. npm은 두가지 의미로 사용되는데 첫번째는 오픈소스로 작성된 node.js 모듈들이 등록된 저장소인 http://npmjs.com 를 의미합니다. 두번째는 패키지를 install하고 의존성을 관리하는 자바스크립트로 작성된 커멘드라인 유틸리티입니다. 2. 패키지 관리가 필요한 이유node.js의 프로젝트는 의존하는 다른 패키지의 소스코드를 포함하지 않습니다. 하지만 의존하는 패키지들을 package.json에 명시하고 npm을 사용해 각자 설치합니다. 따라서 다른 패키지의 소스코드를 포함하지 않기 위해서 패키지 설치와 제거를 위해 npm 사용법을 알아야합니다. 3. package.json이란 package.json은 NPM을 위한 ..

1. 모듈이란? -모듈이란 다른 사람들이 만들어놓은 독립된 기능의 파일이라고 할 수 있습니다. 어떠한 기능을 하는 모듈을 우리는 가져오기만 하면 쓸 수 있습니다. -내장모듈이란 node를 설치하면 그 안에 제공되어지는 모듈을 말합니다. -외장모듈이란 개발자들이 만들어 놓은 모듈을 말합니다. 2. 모듈 사용법 1 var express = require('express'); cs -node.js의 내장 모듈은 " require('모듈명') " 이라고 쳐서 사용할 수 있습니다. -외장 모듈은 npm(Node Package Manager)을 통해 모듈을 다운받아야 합니다. 다운로드 후 내장모듈처럼 require해서 사용할 수 있습니다. 3.NPM 사용법 -npm을 사용하는 방법은 간단합니다. 커멘드 창에서 " ..