작심삼일

1. 비동기 소스 코드 기본적으로 위에서 부터 순차적으로 진행된다. 하지만, 비동기는 위의 소스코드가 먼저 실행되지 않는다는 것을 보여준다. 콜백 함수에서 사용했던 setTimeout 함수가 비동기 함수이다. (바로가기 : [자바스크립트(Java Script)] 콜백 함수) setTimeout 함수를 보면서 비동기를 이해하도록 하자 소스 코드 setTimeout(function () { console.log("3초 후에 출력됩니다."); }, 3000); console.log("바로 실행됩니다."); 결과 동기로 실행되었다면, "3초 후에 출력됩니다"의 로그가 먼저 작성되고 "바로 실행됩니다." 가 작성될 것이다. 하지만, 위의 결과를 보면 "바로 실행됩니다."가 먼저 실행된 것을 볼 수 있다. 이는 s..

1. 기본 콜백 함수 콜백 함수란 함수를 함수에서 불러 사용하는것이다. 다른 함수를 불러와서 사용 하기 때문에, 인풋 변수에 함수가 들어가는 것이 특징이다. helloFunction 이라는 함수를 getFunction 함수에서 호출 할 수 있다. 소스 코드 function helloFunction() { console.log("함수 호출"); } function getFunction(callback) { callback(); } getFunction(helloFunction); getFunction(function () { console.log("익명 함수 호출"); }); 결과 getFunction 함수는 함수를 넣어서 사용하기 때문에, 익명함수도 사용 가능합니다. (익명함수는 함수의 이름이 없기 때문..

HTML로 뼈대를 구성했다면, CSS로는 좀더 디자인 적인 요소들을 설정 할수있다. 문법을 하나하나 공부하기 보다는 아래의 예제를 눈으로 따라가보자. 코딩이라는 것은 직접 해보는 것이 이해하기 쉽다. 1. 기본 문법 먼저, HTML로 아래와 같이 작성해보자. (복사 붙어 넣기로 html 파일에 붙여넣자.) 혹시 HTML을 모른다면, HTML 부터 공부하고 CSS를 시작하자. (HTML 공부 링크 : HTML 태그 기본 문법) html (p) hello (p) 반갑습니다. (p id="id-use") 아이디 적용 (div id="id-test1") id 1 (div id="id-test2") id 2 (div class="class-test1") 클래스 1 (div class="class-test2") 클..

Extensions 는 위 아이콘을 누르거나, Crtl + Shift + x 로 열수있다. 1. Open in browser html 파일을 저장한 후 'ctrl' + 'b' 를 누르면 브라우저로 실행 가능함 2. Prettier - Code formatter 'ctrl' + 's' (저장) 버튼을 누르면 html 파일의 포맷을 자동 정렬 해준다. (맥북은 cmd + s) 1) 'Shift' + 'Ctrl' + 'P' 를 누른후 'Open Setting(JSON)' 실행 (맥북 : cmd + shift + P) 2) 아래와 같이 세팅을 해준다. 사용하다가 괜찮은 Extension 이 나올경우 추가해서 공유하겠습니다.

웹의 기본인 HTML, CSS, 자바스크립트 에 대해서 알아봅시다. 그중에서도 UI의 뻐대를 만들어주는 HTML 을 먼저 공부해보겠습니다. 1. HTML 기본 구성 기본구성은 html, head, body로 구분됩니다. (vs code에서 기본 구성을 자동환성 하려면, html 파일에서 'html:5' 로 타이핑 하시고 엔터를 누르면 자동완성해줍니다. ) html 2. HTML 기본 문법 - 기본 형식 : 콘텐츠 기본 형식 태그의 기본 형식 - 속성 형식 : 콘텐츠 속성 형식 Hello shoney - 콘텐츠가 없는 형식 : 콘텐츠가 없는 형식 - 주석 : 주석 3. HTML 주요 태그 알아보기 h1~h6 headline 을 나타낸다. h1이 가장 크고, h6이 가장 작습니다. 소스 코드 shoney s..

1. 객체 내부 function 구현 ​ const cat1 = { name: "다홍이1", sound: "다아옹1", say1: function say() { console.log(this.sound); } }; ​ const cat2 = { name: "다홍이2", sound: "다아옹2", say2: function () { console.log(this.sound); } }; ​ //cat1.say(); //이렇게 사용할 수 없다. function 뒤에 메서드 명을 따르지 않는다. cat1.say1(); cat2.say2(); ​ ​ 2. get, set 예제 ​ const customer1 = { point: 1, mileage: 10, get sum() { console.log("Sum met..

객체 간단 예제 ​dog, ironMan, captainAmerica 객체를 만들어 줍니다. const dog ={ name : '멍멍이', age : 2 } ​ const ironMan = { name : '토니 스타크', actor : '로버트 다우니 주니어', alias : '아이언 맨' } ​ const captainAmerica = { name : '스티븐 로저스', actor : '크리스 에반스', alias : '캡틴 아메리카' } ​ console.log(dog); console.log(ironMan); console.log(captainAmerica); ​ 프린트 가능한 함수 생성 ​ 1. 그냥 프린트 함수 function print1(hero) { const text = `1: ${he..

1. 리스트 생성방법 ​ const array = [1,2,3,4,5]; const animal = [{name:'독'},{name:'캣'}]; ​ console.log(array[2]); console.log(animal); console.log(animal[0]); console.log(animal[1]); console.log(animal[2]); //해당 항목은 없음 --> undefined로 출력됨 ​ ​ 2. 리스트 추가방법 ​ animal.push({name: '뿜'}); console.log(animal); console.log(animal[2]); ​ ​ 3. 길이 조회 ​ console.log(animal.length);

패스트캠퍼스 [Node 웹 프로그래밍 올인원 패키지 Online] 강의를 기반으로 공부하기 위해 작성한 글입니다. 부족한 설명이나 내용에 대해 말씀해 주시면 수정 및 추가하겠습니다. //1. 기본자료형 (동적언어이기 때문에 var로 시작) console.log("■■■1.기본자료형■■■") var a = '123'; console.log(a); var b = null; console.log(b); var c = undefined; console.log(c); // console.log(f); //레퍼런스 에러 //2. 배열 console.log("■■■2.배열■■■") var vlist = ["Hello",24,"node.js","2222"] console.log(vlist[0]); console.log..

- 프론트 엔드 언어 - 브라우저를 제어하기 위한 넷스케이프에서 개발한 언어 - 자바스크립트의 확대 AJAX활용 > Debug 툴에 발전 > V8엔진의 개발 > Node.js 등장 > Desktop, IOT, 사용범위 확대 > 여러 플랫폼 제작사에서 자바스크립트 개발자를 끌어안기 위한 환경 조성 - var로 선언 ( var a = 1;) - 동적 언어 이므로 자료형을 선언할 필요없음 (정적 언어이면 미리 선언을 해줘야함) - 기본자료형과 객체(Object) 두가지로 나눔 - 기본자료형 Boolean Null Undefined Number String Symbol