당 떨어질 땐 초코딩

Mocking docs Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io Mocking : 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜로 대체하는 기법 - 의존하는 부분을 테스트 코드에서 직접 생성하기가 부담스럽거나 어려운 경우에 많이 사용 mock function(가짜 함수) 사용하는 경우 1. test 코드에서 사용하기 위해 2. 모듈 종속성(dependency)을 재정의 하기 위해 jest.fn( ) : mock function(가짜 함수) 생성 const setup = (props = {}) => { const utils = render(); const { getByText, getByP..

TDD (Test Driven Development) : 테스트 주도 개발 - 기술이 아니라 습관 - 모든 개발 과정을 테스트 중심으로 진행해나가는 습관 순서 1. 테스트 작성 - 만들려는 대상이 무엇인지 선언하고, 그 대상이 테스트에서 어떻게 작동해야 할지 기술 2. 테스트를 실행하되, 실패한다 3. 테스트를 통과하기 위해 필요한 최소한의 코드를 작성하여 성공한다 - 테스트 범위를 벗어나는 코드는 추가하지 않을것 4. 코드와 테스트를 함께 리팩토링 작업을 한다 - 리팩토링 작업 : 예외처리, 중복제거, 기능 추가 등 JavaScript에서 실행 Jest : 페이스북에서 사용되는 리액트 애플리케이션을 포함한 모든 자바스크립트 테스트 도구 - npm init 후 사용 npm install jest --sa..

package.json : Node.js를 서버로 실행하기 위해서 필요한 패키지 정보 - 설치 npm init nodemon : 자동으로 서버를 재시작 시켜주는 역할을 함 - 아니면 [ctrl] + [shift] + F5 를 수정 할때 마다 눌러줘야함 npm install nodemon -g --save - nodemon 사용 하려면 내가 사용하는 파일을 지정해주면 됨 nodemon [파일이름.js] Koa : Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임워크 npm install koa --save - koa 사용 및 연결 확인 -> 4000번 포트로 열어서 사용 const Koa = require('koa'); const app = new Koa(); app.use((ctx) => ..

전개 연산자 : ... 키워드를 사용해서 값을 중간에 삽입 배열 // 배열 let ar = [10, 20, 30, 40] // let br =[50, ar, 60] // 배열 안에 ar 배열을 넣는 꼴 let br = [50, ...ar ,60] // 배열 안에 ar 값을 넣음 객체 // 객체 const obj = { a: 10, b: 20, c: 30, } const obj2 = { d: 40, ...obj, // d와 e사이에 obj 값을 넣음 e: 50, } console.log(obj2) 함수 // 함수 function f1() { return { a: 10, b: 20, } } const obj3 = { c: 30, d: 40, ...f1() // 함수에서 return 된게 값이 되버림 } co..

기본 함수 형식 // 함수 형식 1 - 선언과 사용을 순서 관계 없이 사용 가능 : 호이스팅 가능 f1(); // 함수 호출 function f1() { console.log("f1"); } // 함수 형식 2 - 호이스팅 불가 // 함수는 코드 자체가 수정 불가이기 때문에 함수이름 앞에는 const를 사용 const f2 = function () { console.log("f2"); } f2(); // 함수 호출 // 함수 형식 3 - 살찐 애로우 or 애로우 함수 const f3 = () => { console.log("f3"); } f3(); // 함수 호출 함수 모양 4개 // 인수 전달 없고, return값 없음 function f1() { console.log("f1"); } f1(); // ..

Linked List :

모듈 : 특정한 기능을 하는 함수나 변수들의 집합 - 자바스크립트에서 코드를 재사용하기 위해 함수로 만드는 것과 비슷 - var.js const odd = '홀수'; const even = '짝수'; module.exports = { //exports : 내보는 키워드 -> 다른파일에서 부를 수 있음 odd, even, }; - func.js const { odd, even } = require('./var'); //require : var.js에 있는 값을 불러옴 function checkOddOrEven(num){ if(num % 2) { return odd; } return even; } module.exports = checkOddOrEven; - index,js const {odd, even} ..

Read : 입력한 코드를 읽고 Eval : 해석하고 Print : 결과물을 반환하고 Loop : 종료할 때까지 반복 콘솔에서 REPL로 들아가는 명령어가 node이고, 노드를 통해 파일을 실행하는 명령어는 node [자바스크립트 경로] node app.js node app // .js 생략 가능

프라미스 - 콜백의 단점을 해결

콜백 : 나중에 호출할 함수 - 가장 오래된 비동기적 매커니즘 - 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용 - 드물게는 배열에 넣어서 쓰는 경우도 있음 - 보통 익명 함수로 사용 내장 함수 - setTimeout( ) : 콜백의 실행을 지정된 밀리초만큼 지연하는 내장 함수 - 한번만 실행하고 멈춤 - setInterval( ) : 콜백을 정해진 주기마다 호출 - clearInterval( ) : setInterval( )을 사용을 멈출 때 호출 오류 우선 콜백 : 콜백과 관련된 에러를 처리할 방법의 표준 - 콜백의 첫 번째 매개변수에 에러 객체를 씀 const fs = require('fs'); const fname = 'may_or_may_not_exist.txt'; fs.readFile..

싱글 스레드 : 주어진 작업을 혼자서 처리 - 자바스크립트와 노드는 싱글 스레드이기 때문에 한번에 한가지 일만 처기 하능함 -> 논블로킹이 중요! 노드 프로세스도 내부적으로는 스레드를 여러개 갖고 있지만, 우리가 직접 제어할 수 있는 스레드는 하나뿐이기 때문에 싱글 스레드라고 부름 프로세스 : 운영체제에서 할당하는 작업의 단위 - 노드나 인터넷 브라우저 같은 프로그램은 개별 프로세스 - 프로세스 간에는 메모리 등의 자원을 공유하지 않음 스레드 : 프로세스 내에서 실행되는 흐름 단위 - 하나의 프로세스는 스레드를 여러개 가질 수 있음 - 스레드들은 부모 프로세스의 자원을 공유 -> 같은 메모리에 접근 가능 멀티 프로세스 : 스레드를 늘리는 대신, 프로세스 자체를 복사해서 여러 작업을 동시에 처리 - 노드가..

이벤트 기반 : 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 - 이벤트 : 클릭, 네트워크 요청 등 - 콜백 함수 : 무엇을 할지 미리 등록해 놓은 함수 -> 이벤트 리스너에 콜백 함수를 등록한다 : 특정 이벤트가 발생할 때 무엇을 할지 미리 등록한다는 의미 ex) 버튼을 누르면 경고 창을 띄운다고 했을 때, 콜백 함수는 클릭 이벤트 리스너에 경고 창을 띄우는 행위 노드는 이벤트 기반 방식으로 동작함으로 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백함수를 호출하고 발생한 이벤트가 없거나 발생했던 이벤트를 다 처리하면 노드는 다음 이벤트가 발생할 때 까지 대기한다 function run() { console.log("3초 후 실행"); } console.log("시작"); setTimeout(..

Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램 클라이언트 : 요청을 보내는 주체 - 브라우저, 데스크톱 프로그램, 모바일 앱, 다른 서버 요청을 보내는 서버 등등 " 비동기 이벤트 주도 JavaScript 런타임으로써 Node는 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계되었습니다. " 런타임이란, 특정 언어로 만든 프로그램들을 실행할 수 있는 환경 Node.js란, 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해주는 것 - libuv 라이브러리 : 이벤트 기반, 논블로킹 ..

람다식 : 익명 함수를 이용해서 익명 객체를 생성하기 위한 식 - 인터페이스 함수을 람다식을 사용해서 바로 구현 - 객체를 따로 만들 필요가 없음 - 인터페이스가 갖고 있는 메소드를 간편하고 즉흥적으로 구현하여 사용 - 식별자 없이 실행 가능 장점 - 불필요한 클래스 파일이 생기는 것을 막을 수 있음 - 과정이 간결해짐 기본 형태 ( 타입 매개변수, ... ) -> { 실행문; ... } - 타입 매개변수 : 오른쪽 중괄호 블록을 실행하기 위해 필요한 값을 제공 - -> 기호 : 매개 변수를 이용해서 중괄호 실행 함수적 인터페이스 ( @FunctionalInterface) : 람다식으로 구현 할 인터페이스 - @FunctionalInterface가 적용된 인터페이스는 한 개의 추상 메소드만 선언 가능 -..

Anonymous (익명) : 이름이 없는 것 Anonymous class (익명 클래스) : 이름이 없는 클래스 - 함수를 바로 구현해서 사용 Anonymous Fuction (익명 함수) : 이름이 없는 함수 - 함수 인수로 코드를 전달할 때 사용 Anonymous Object (익명 객체) : 이름이 없는 객체 - 객체를 생성하지 않고 사용 - 객체가 없어서 메모리가 만들어져도 바로 사라짐 - 보통 한번 쓰고 말 때 사용 - interface 구현 interface Apple13 { void func01(); } - 익명 클래스 Apple13 a13 = new Apple13() { public void func01() { System.out.println("Apple13"); } }; a13.fun..

Singleton Pattern : 클래스의 인스턴스(객체)가 오직 1개만 생성되도록 하는 것 - 필요할 때마다 똑같은 인스턴스를 만드는게 아니라, 이미 생성해둔 기존 인스턴스를 사용 - 전역 인스턴스로 만들기 떄문에 다른 클래스의 인스턴스들이 데이터를 공유하기 쉬움 - 메모리 낭비를 막음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 class Singleton { // static : 단 하나의 인스턴스만 담기 위함 private static Singleton instance; private Singleton() {} // private으로 선언된 instance를 다른 클래스에서 사용하기 위함 public static Singleton getInstance()..

Decorator : 객체 결합으로 기능을 동적으로 추가 OCP (Open-Closed Principle) : 디자인 원칙 - 클래스는 확장되어야 하고, 코드는 변경되어서는 안됨 - 강하고 튼튼한 디자인 가능 사용 이유 : 기존 코드를 건드리지 않고 확장하기 위함 장점 - 확장하는 데이터가 다양하고 일정하지 않을 때 효율적 - 기존 코드를 수정하지 않고 확장 할 때 단점 - 자잘한 클래스가 많아짐 - 과도한 사용시 가독성이 떨어지고 디버깅이 어려워짐 - 조건이 끝날 때 까지 함수를 계속 콜 시킴 -> 재귀함수와 상당히 비슷한 구조를 가짐 - 들어간 만큼 return이 됨

Strategy Pattern : 같은 문제를 해결하는 여러 알고리즘을 클래스별로 캡슐화하여 사용 - 같은 문제를 다른 알고리즘으로 해결할 수 있게 하는 패턴 ex) 게임 프로그래밍에서 게임 캐릭터가 자신이 처한 상황에 따라 공격이나 행동하는 방식을 바꾸고 싶을 때 - '주입' 개념으로 들어가면 전략 패턴으로 간주 사용 이유 : 장점 - 동일 계열 알고리즘을 생성할 수 있음 -> 같은 함수의 중복을 제거 - 객체 행위에 대한 서브 클래스를 이용하지 않음 -> 상위 클래스로 Interface를 정의하면, 본 소스는 건드릴 필요가 없음 - 조건문을 사용하지 않음 - 구현을 선택할 수 있음 단점 - 사용하기 전에 클래스를 알아야 함 - 메모리를 많이 사용하게 됨 Strategy : 어떤 목적을 달성하기 위해 ..

Design Pattern : 객체 지향 프로그래밍 설계를 할 때 자주 발생하는 문제들을 피하기 위해 사용되는 패턴

삼항연산자 : if문을 비교적 짧고 간결하게 작성하는 방법 - 형태 : (조건문) ? 참일 때 값 : 거짓일 때 값 // 예시 1 int a = 10; int b; if (a 0) { System.out.println("호랑이"); } else { System.out.println("코끼리"); } // 삼항연산자 System.out.println((a > 0) ? "호랑이" : "코끼리"); - 사용 예제 -> 어떤 값을 넣든 중간 값을 찾는 알고리즘 //중간 값 구하기 int a = 1, b = 2, c = 3; // int a = 1, b = 3, c = 2; ..

ABOUT JSON : https://www.json.org/ JSON(JavaScript Object Nation) : 경량화된 데이터 교환 포맷 - 사람이 읽고 쓰기 쉬운 동시에, 컴퓨터로 파싱하고 생성하기도 쉬움 - 데이터를 구조화하고 전송하기에 안성맞춤인 포맷 - 연관 배열처럼 이름/값 깡으로 구성되어 있음 - 데이터를 전송할 때 XML보다 효율적 jQuery + JSON = getJSON $.getJSON(url_to_load, function(json) { //data }); - url_to_load : 데이터를 가져올 URL - function : 콜백 함수 실행 - json : 반환된 데이터는 json 객체 안에 들어있음

Ajax(Asynchronous JavaScript and XML) : 비동기 자바스크립트와 확장 마크업 언어 - 사용자를 방해하지 않고 브라우저와 웹 서버가 정해진 형태로 데이터를 주고받을 때 사용 - 데이터 이용량은 줄어들고, 작은 부분만 업데이트하고, 페이지 새로고침을 기다리는 시간도 줄어듬 - 웹 페이지나 어플리케이션에서 필요한 데이터(페이지에서 바꿔야만 하는 부분의 데이터), 서버에서 받아와야하는 데이터만 요청 - 서버와 동적으로 데이터를 주고받을 수 있음 1. jQuery나 JavaScript를 사용해서 서버에 Ajax 요청을 보냄 2. jQuery나 JavaScript로 그 결과를 받고, 파싱해서 페이지의 일부만 업데이트함 Asynchronous(비동기) : 사용자가 페이지에서 하는 일을 방..

const : 상수 - 상수 : 값을 할당 받고, 한 번 할당한 값은 바꿀 수 없음 - 초기화 시, 값을 대입하지 않으면 에러 발생 let : 변수 - 변수 : 이름이 붙은 값 - 다른 값을 대입해야 하는 상황이 생겼을 때 사용 #const와 let은 블록 스코프를 가짐 -> 블록 안에서만 접근 가능 - 블록 : 문을 중괄호 '{ }'로 묶은 것 - 스코프 : '범위' 라고 생각하면 됨 Q. 변수와 상수 중 어떤 것을 써야 하나요? A. 될 수 있으면 변수보단 상수를 사용하는 것을 권장 이유 : 상수를 사용하면 값을 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일이 줄어 듦 var : 변수 - 함수 스코프를 가짐 -> 어디서든 접근 가능 - var를 이용해 변수를 선언하면, 자바스크립트는 같은 변수를..

Arrow Function (화살표 함수) - function 키워드가 없어도 함수를 만들 수 있음 - return을 사용하지 않아도 식을 계산한 값이 자동으로 변환 -> 이를 화살표(=>)를 사용하여 모든 함수 정의를 한줄로 끝냄 var lordify = firstName => '캔터베리의 ${firstName}' //예전 방식 var lordify = function(firstName, land) { if (!firstName) { throw new Error('lordify에 이름을 넘겨야 합니다') } if (!land) { throw new Error('영주에게는 영지가 있어야 합니다') } return '${land}의 ${firstName}' } //새로운 방식 var lordify = (f..