당 떨어질 땐 초코딩

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

전개 연산자 : ... 키워드를 사용해서 값을 중간에 삽입 배열 // 배열 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(); // ..

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

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

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

DOM (Document Object Model) : HTML 문서 객체 1. HTML DOM - 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델 (DOM)을 만든다 HTML DOM 객체 트리 - 객체 모델을 사용하면 자바스크립트는 동적 HTML을 만드는데 필요한 기능들 ㉠ 자바스크립트는 페이지의 모든 HTML 요소와 속성을 변경 및 제거 할 수 있다. ㉡ 자바스크립트는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있다. ㉢ 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있다. ㉣ 자바스크립트는 페이지의 새로운 HTML 이벤트를 생성할 수 있다. - HTML DOM 메서드는 HTML 요소에서 수행할 수 있는 작업이며, 속성은 사용자가 설정하거나 변경할 수 있는 HTML 요소의 값임 ..

객체 : 실제 생활에 존재하는 모든 사물은 하나의 객체에 해당하며, 각 객체는 교유의 특성 값을 가지며, 고유한 행동을 함 - 속성(property) : 객체를 특정 지워주는 값 - 객체의 속성은 마치 변수에 값을 할당하는 것과 유사 - 메서드(method) : 객체가 취하는 모든 행동(동작 또는 함수) -> 객체가 가지고 있는 동작 - 함수가 어떤 객체의 동작을 나타내는 함수로 정의될 떄, 그 함수를 그 객체의 메서드라고 함 -> 상황에 따라 다르게 부를 따름임 사용자 정의 객체 : 사용자가 직접 객체를 정의하여 사용 1. 리터럴 객체 정의 - 기본 형식 var 객체 이름 = { 객체.속성 : 속성 값, ..... , 객체.메서드 = : function( ) { //함수문 } }; var myCar =..

함수 : function 키워드로 정의 - 함수 선언 또는 함수 표현식을 사용 할 수 있음 함수 선언 1. 기본 형식 function 함수이름 (매개변수1, 매개변수2, ....., 매개변수n) { //실행될 함수 문장 } 2. Function( ) 생성자 function myFunction(a, b){ return a * b; } 3. 함수 값으로 사용 가능 function myFunction(a, b) { return a * b; } var x = myFunction(4, 5) * 2; 4. 함수는 객체이다 - typeof 연산자는 함수에 대해 'function'을 반환한다 function myFunction(a, b) { return arguments.length; //arguments.length..

배열 : 서로 관련된 수많은 변수들을 묶어 하나의 이름으로 공유하고 일련번호에 의해 변수를 구분하는 방법 생성 1. 리터럴 : 배열에 들어가는 값들을 배열 선언과 함께 할당 2. Array 객체 : 실제 대이터 값이 없는 상태의 배열을 생성하고, 필요에 따라 값을 채워나가는 방식 3. 리터럴 + Array : 2가지를 혼합하여 하나의 문장으로 정의 //리터럴 var fruits = ["apple", "banana", "orange", "pear"]; //Array 객체 var friends = new Array(); //새로운 객체 생성 friends[1] = "홍길동"; friends[2] = "신사임당"; friends[3] = "이순신"; //리터럴 + Array var colors = new Ar..

자료형 : 프로그래밍 언어에서 조작할 수 있는 데이터의 유형 숫자형 : 정수나 실수 문자열형 : 문자열 부울형 : 참 혹은 거짓 (true or false) 심볼형 : 유일하고 변경 불가능한 기본 값 객체형 : 객체를 정의 배열형 : 값들의 집합체 함수 : 실행 가능한 코드의 집합체 undefined : 값이 정해지지 않은 상태 null : 값이 없음 (공백) // 숫자형 var num1 = 123; // 정수 var num2 = 123.45; // 실수 // 문자열형 var str1 = "Hello world"; // 큰따옴표 var str2 = 'Hello world'; // 작은 따옴표 var str3 = String("Hello world"); // String() 함수 사용 var str4 = ..

- 사진은 html파일과 같은 경로에 있어야 함 - 사진은 5초마다 바뀜

회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일 주소 예) id@domain.com 이름 개인 신상 정보 주민등록번호 - 예)123456-1234567 생일 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 일 관심분야 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개

배열 관련 객체를 이용해보기 현재 배열의 값 :

alert 함수를 이용해서 내가 입력한 문장들을 띄우기 RadioButton을 선택하고, 선택한 내용을 alert에 띄우기 HTML CSS JAVA SCRIPT 위에 코드를 tag를 사용해서 바꿔보기 HTML CSS JAVA SCRIPT

RadioButton을 사용하여 배경 색깔 바꿔보기 노란색 초록색 파란색 빨간색

색상 : 빨강 초록 파랑 크기 : 1 2 3 4 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로 위의 파일을 JAVA SCRIPT 파일과 HTML 파일 2개로 나누어 보기~ 2개의 파일이 같은 경로에 있어야함 HTML 파일 색상 : 빨강 초록 파랑 크기 : 1 2 3 4 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로 JAVA SCRIPT 파일 function previewString(){ //id를 불러와서 인식 var objResult = document.getElementById("result"); var objText = document.getElementById("tbString"); var objFontColor = document.getElementById..

비교 연산자 : 두 개의 값을 비교 일치함 : === - 두 값이 같은 객체를 가리키거나, 같은 타입이고 값도 같을 때 동등함 : == - 두 값이 같은 객체를 가리키고나, 같은 값을 갖도록 변환할 수 있을 때 #거의 없다고 생각하고 사용 Ex) 문자열 '33'은 숫자 33으로 변환할 수 있으므로 둘은 동등 하지만! 타입이 다르므로 일치하지는 않음 const x = 5; const y = "5"; n === s; //false -> 타입이 다름 n !== s; //true n === Number(s); //true -> 문자열 "5"를 숫자 5로 변환 n !== Number(s); //false n == s; //true -> 권장하지 않음 n != s; //false -> 권장하지 않음 const a ..