하이고니의 개발 스토리

가장 많이 사용되는 테스트 툴 Jest를 사용하는 법에 대해 알아봅시다~ 1. 프로젝트 폴더 하나 만든 다음, 터미널에 $ npm init 를 입력한다. 2. package.json 파일의 test 옵션을 "jest"로 변경한다. 함수를 담아둘 파일(fn.js)을 하나 만들고, 테스트를 위해 간단한 함수를 입력한다. const fn = { add: (num1, num2) => num1 + num2, }; module.exports = fn; 이제 테스트 파일(fn.test.js)을 만들고, 테스트 코드를 작성한다. .test.js 로 끝나는 파일 혹은 __tests__ 폴더 안에 있는 파일은 자동으로 테스트 대상이 된다. const fn = require("./fn"); test("1은 1과 같다.", ..

Cookie Cookie란? HTTP 프로토콜의 무상태성을 보완해주는 도구. 원래는 보안 목적으로 만들어진 것이 아니다. - 10일간 보지 않기 - 광고 서비스(쿠키를 기반으로 추천 광고를 띄움) 등등 HTTP 헤더에 실어서 보내는 것이 기본적인 방법임 -> 이것도 찾아보자 - 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단 - 해당 도메인에 쿠키가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달 Cookie는 사용자 선호, 테마, 로그인 유지 등 장시간 보존해야 하는 정보 저장에 적합 회사가 필요로 하는 마케팅 정보를 수집하는 데에도 쓰인다. Cookie Options - Domain: 서버와 요청의 도메인이 일치하는 경우 쿠키 전송 - Path: 서버와 요청의 세부 ..

공항 리스트, 비행편 리스트, 예약 리스트를 GET, POST, PUT, DELETE 할 수 있는 서버를 만들어보자 app.js const express = require('express');// (1) const cors = require('cors'); const app = express(); const port = 3001;// (2) const flightRouter = require('./router/flightRouter');// (3) const bookRouter = require('./router/bookRouter'); const airportRouter = require('./router/airportRouter'); app.use(cors());// (4) app.use(expres..

끝이 없는 this와의 사투.. JavaScript에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 브러우저 환경에서 전역 객체는 window이고 Node.js 환경에서는 global이다. 메서드로서 호출할 때 그 메서드 내부에서의 this 함수 vs 메서드 함수를 실행하는 방법 1. 함수로서 호출 2. 메서드로서 호출 이 둘의 유일한 차이는 독립성의 유무. 함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다. var func = function (x) { console.l..

첫 솔로 프로젝트다. 손 끝을 자극하는 키보드의 감각 하나까지 다 남겨보고 싶다. 처음부터 쓰지 않으면 진행에 몰입하다가 완전 잊을까봐 처음부터 기록한다. 일단 막막하다. 어떻게 시작해야 할까.. 한 번 의식의 흐름대로 적어보겠다. Coz' Mini Hackathon 의 목표는 '나만의 아고라 스테이츠 만들기'. 주어진 최소한의 양식을 가지고 자유롭게 단일 페이지를 구성하는 것이다. Bare Minimum Requirement 디스커션 나열 기능 script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다. CSS 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다. col..

DOM: Doucument Object Model HTML 요소를 JavaScript Object처럼 조작할 수 있는 Model. 아주 간단한 CRUD 설명 C: Create R: Read U: Update D: Delete C document.createElement('div') 새로운 요소를 만든다. const newDiv = document.createElement('div') document.body.append(newDiv) 새로 만든 요소를 변수에 할당해 그 변수를 body의 자식으로 집어 넣는다. R DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는, querySelector의 첫 번째 인자로 셀렉터를 전달하여 확인해야 한다. 셀렉터에는 HTML 요소("div"), id("#myID")..

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue ); console.log(sumWithInitial); // expected output: 10 initialValue 를 선언하지 않으면 초기값은 0이다. 만약 initialValue 를 10으로 선언했다면 output 은 20이 된다. 10 + 1 + ..

자바스크립트 계산기 만들기 2: 계산기능 구현, 예외처리 계산 기능 구현 산술 연산자는 숫자 값을 피연산자로 받아 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다. - MDN 자바스크립트에서 사칙연산과 관련 kanhi.tistory.com 아래 나오는 코드는 모두 위 블로그 복붙입니다. 이 분의 설명 굉장히 굉장합니다. 위 글은 자바스크립트를 처음 시작하고 계산기 만드는 것에 좌절하고 있던 제게, 한 줄기 빛이 되어주었습니다. 글 쓰신 분께 큰 감사의 말씀을 드립니다. HTML AC ÷ 7 8 9 × 4 5 6 - 1 2 3 + 0 . = CSS /* style.css */ main { width: 300px; } .button-wrap { dis..

- 단축키 한 번 쓴 줄을 그대로 밑에 복사해서 쓰고 싶을 때 option + shift + 아래 방향키 이미 작성한 줄을 이동시키고 싶을 때 option + 위 아래 방향키 한 번에 주석으로 만들어버리기 -> command + K + C 주석 풀기 -> command + K + U if 문 하나를 빠져나왔단 건 이미 그 위에 것에 해당되지 않는다는 뜻! - if 조건문 findShortestOfThreeWords 문제 차례대로 문자열 3개를 입력받아, 가장 짧은 문자열을 리턴해야 합니다. 입력 인자 1 : word1 string 타입의 문자열 word1.length는 10 이하 인자 2 : word2 string 타입의 문자열 word2.length는 10 이하 인자 3 : word3 string 타입..

slice() .slice(시작 인덱스, 종료 인덱스) .slice(0, 3) 0번째 값부터 3번째값까지 그냥 딱 보면 ‘0번째, 1번째, 2번째, 3번째’ 총 네 개가 할당될 것 같지만, 3번째는 제외되고 ‘0번째, 1번째, 2번째’ 총 세 개가 할당된다. ex) function takeLetters(num, str) { const strSlice = str.slice(1, num); return strSlice; } num에 4가 입력되고 str에 'music'이 입력됐을 때, m => 0 u => 1 s => 2 i => 3 c => 4 이렇게 문자열에 배열의 인덱스가 부여되고 strSlice 에는 'usic' 이 할당될 것 같지만, 종료 인덱스 값인 [4]는 제외되고 usi 가 할당된다. 페어 허..