나만의 코딩 일지

synchronous 와 asynchronous 차이 console.log(1); console.log(2); console.log(3); /* 실행결과 : 1 2 3 */ 자바스크립트에서 console.log를 실행하면 위에서 부터 아래로 순차적으로 실행 실행되는걸 알 수 있다. 즉 이런걸 동기적으로 실행된다라고 한다. 다시 말해 synchronous 라고 부른다. console.log(1); setTimeout(function () { console.log(2) }, 3000); console.log(3); /* 실행결과 : 1 3 2 */ 코드를 살펴보면 setTimeout 함수로 인해 3초후 console.log(2)가 실행 되는걸 알 수 있다. 즉 3이 먼저 실행된후 2가 실행된다. 이렇게 순차..

nullish 병합연산자 ?? nullish 병합연산자는(nullish coalescing operator) 값이 할당된 변수를 찾을 때 사용하는 연산자이다. let c = a ?? b // let c = (a !== null || a!== undefined)? a:b; a 가 null 또는 undefined가 아니면 a를 반환하고 null 또는 undefined일 경우 b를 반환한다. // 1. let id = '홍길동@naver.com'; let result = id ?? '아이디없음'; console.log(result); // 출력결과 -> 홍길동@naver.com //2. let id = null; // 또는 undefined let result = id ?? '아이디없음'; console.lo..

async, await async, await는 promise 객체를 좀 더 편하게 사용할 수 있도록 나온 문법이다. async function f(){ await .... } async 문법 async function f(){ return 'async'; } console.log(f()); // 출력결과 -> Promise {: 'async'} async 문법을 사용해서 console에 출력해 보면 Promise 객체로 출력되는 걸 알 수 있다. f().then(console.log); // 출력결과 -> async 즉 Proise 객체와 같이 asyns를 사용하면 then() 함수를 사용할 수 있고 async를 사용한 함수의 return 값이 resolve 값이 된다. await 문법 function..

alert alert 함수는 메시지가 있는 작은 모달 창이라고 부른다. 즉 arlert 함수를 실행하면 확인 취소 버튼이 있는 창이 뜨게 된다. alert("값을 입력하세요"); prompt 브라우저에서 제공한는 prompt는 두 개의 인수를 받는다. result = prompt(title, [default]); prompt는 인자를 두 개 받는다 앞에 title은 사용자에게 보여줄 문자열이고 뒤에 있는 [default]는 입력창 안에 보여줄 문자열이다. [] : default에 감싸는 대괄호는 선택사항이라는 뜻을 지닌다. result = prompt('숫자를 입력하세요', "1 ~ 100까지 입력"); alert(`당신이 입력한 숫자는 ${result}입니다.`); confirm confirm 함수는 ..

Promise Promise는 자바스크립트에서 비동기(asynchronous)식 방법을 사용할 때 사용하는 객체이다. Promise 객체는 비동기 작업이 맞이할 미래의 성공 또는 실패와 그 결과값을 나타낸다. (즉 순차적으로 실행했을 때가 아닌 각자 자신에 주어진 동작을 실행했을 때의 결과가 성공 혹은 실패했을 때의 결과값을 나타낸다.) Promise의 3가지 상태 pending( 대기) : 이행하지도, 거부하지도 않은 초기 상태 (대기 상태) fulfiled( 이행) : 연산이 성공적으로 완료된 상태 reject(거부) : 연산이 실패한 상태 new Promise((resolve, reject)=>{ ..... }); Promise 객체를 사용하기 위해서는 new 연산자를 통해 Promise 객체를 선..

Json(Javascript Object Notation) Json는 {key:value}로 구문된다. 텍스트 기반으로한 언어이다. 보통 서버와 데이터를 주고 받을 때 사용한다. 특정 프로그램과 상관없이 모든 언어에 사용 가능하다. Json은 순수 데이터 포맷이다. 오직 프로퍼티만 담을 수 있고, 메서드는 담을 수 없다. Json은 문자열과 프로퍼티 작석시 큰 따옴표만 작성 가능하다. (작은 따옴표 사용X) Json은 모든 데이터 타입을 취할 수 있다. 배열이나 오브젝트 외에 단일 문자열이나, 숫자 또한 Json형으로 변환이 가능하다. stringify( ) 메서드 , parse() stringfy( ) 메서드는 Json으로 형 변환할 때 사용하는 메서드이다. parse() 메서드는 Json형에서 Obj..

DML(Data Manipulation Language) 데이터베이스에 저장된 데이터를 조작하기 위해 사용하는 언어 SELECT(조회), INSERT(삽입), UPDATE(변경), DELETE(삭제) DML 구문이 사용되는 대상은 테이블의 행이다. DML을 사용하기 위해서는 이전에 테이블이 정의(DDL) 되어 있어야 한다. INSERT INTO 테이블 명(속성1, 속성2,..) VALUES('속성1 값', '속성2 값',...); 만약 속성을 지정하지 않을 경우 VALUES에는 모든 속성 값을 지정해 줘야 한다. UPDATE 테이블명 SET 변경할 속성 명 = '변경할 값' WHERE 변경할 위치 속성 = '변경할 위치에 값'; WHERE 조건식을 사용하지 않고 값을 변경할 경우 어디에 값을 변경할지 지..

반응형 웹 - 미디어 쿼리(media query) 반응형 웹을 구현하기 위해 가장 많이 사용하는 방법으로, 기기의 종류와 화면의 크기의 조건에 따라 스타일을 작성할 수 있는 쿼리문 min-width 최소 넓이 값(넓이 값 ~ 부터) / 지정한 사이즈 보다 넓은 경우 화면 사이즈 기준 100%에서부터 화면 사이즈를 줄일 때 최소 ~ 유지하겠다는 뜻이다. min-height 최소 높이 값 요소의 높이에 최소 높이 설정 max-width 최대 넓이 값(넓이 값 ~ 까지) / 지정한 사이즈 보다 작을 경우 화면 사이즈 기준 0px부터 화면 사이즈를 줄였을 때 최대 ~ 유지하겠다는 뜻이다. max-height 최대 높이 값 요소의 높이에 최대 높이 설정 미디어 쿼리 구문 ※(주로 스타일 시트를 따로 빼서 진행) ..