작심삼일

1. axios 외부 라이브러리 다운로드 script 태그를 사용해서 아래 링크를 src로 연결합니다. 저는 html 헤더 부분에 아래와 같이 axios 라이브러리를 불러오는 스크립트 태그를 작성했습니다. 소스 코드 다음 스크립트에 log로 axios 객체를 확인해봅시다. 로그로 axios 라이브러리가 제대로 받아졌는지 확인 가능합니다. 소스 코드 console.log(axios); 결과 2. 통신 간단 예제 axios는 promise 객체로 비동기로 실행 가능하다. (비동기 promsie 객체에 포스팅으로 바로 가기) 또한 promise 객체는 then, catch를 사용할 수 있다. then : promise 객체가 성공 한 경우, 실행 catch : promise 객체가 실패 한 경우, 에러 코드 ..

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