01. Node.js가 무엇인가요? # Node.js : 또 다른 자바스크립트 실행 환경 - 웹 브라우저 밖에서도 자바스크립트를 실행할 수 있게 함 - 서버에서 사용되는 프로그램 만들 수 있음 - 자바스크립트만 알아도 하나의 웹 서비스 제작 가능 (백엔드) 02. Node.js 준비하기 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - 위 사이트에서 LTS 버전 설치 - LTS(Long Term Support) 버전 : 30개월동안은 해당 버전에서 발겨노디는 각종 버그에 대한 패치를 Node.js 커뮤니티로부터 보장받을 수 있음 - Current ..

여행 사이트 만들기 조건1. 모든 요소가 가운데 정렬 상태여야 합니다. 조건2. ‘travel’ 로고는 가로 길이가 165px, 세로 길이가 58px입니다. 조건3. 'travel' 로고 위에는 80px의 여백이 있습니다. 조건4. 메뉴는 16px의 ‘Helvetica’ 폰트, 색상은 Hex값 기준 58595B, RGB 기준 (88, 89, 91)입니다. 조건5. 현재 머물러 있는 창의 메뉴의 폰트는 진하게 나옵니다. 조건6. 각 메뉴 사이의 간격은 20px이고, 매뉴의 위 아래로 60px의 여백이 있습니다. 조건7. 사진의 가로 길이는 페이지의 가로 길이의 90%입니다. 예를 들어 페이지의 가로 길이가 1,000px이면, 사진의 가로 길이는 900px이 되어야 합니다. - index.html Home ..

01. 텍스트 색 지정하기 # CSS에서 색을 표현하는 방식 1. 색 이름 지정하기 h1 { color: blue; } 2. RGB 값 h1 { color: rgb(83, 237, 65); 3. HEX 값 (16진법) h1 { color: #53ED41; } 02. 폰트 굵기 설정 # font-weiight - 사용 가능한 값은 100,200,300...900 까지 100 단위로 - font-weight : normal; 은 font-weight :400; 과 같음 - font-weight : bold; 은 font-weight :700; 과 같음 - 폰트나 브라우저에 따라 지원하는 폰트 굵기 값이 다름 font-weight: 900; 03. 텍스트정렬 # text_align - text-align: c..

01. 추상화 # 추상화 : 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것 - 클래스를 설계하는 것도 추상화 - 클래스 이름, 프로퍼티 이름, 메소드 이름을 직관적으로, 이해하기 쉽도록 잘 정하는 것이 중요 03. 캡슐화 # 캡슐화 : 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것 - 안전성 높일 수 있음 - 멤버변수에 대한 직접 접근을 제한하려는 목적으로(혹은 getter, setter 이름과 구분을 위한 목적으로) 멤버변수의 이름을 언더바(_)로 시작하게 지정 # setter method set email(address){ if(address.includes('@')){ this._email = address; }else{ throw new Error('invaild email..

01. 객체 지향 프로그래밍이란? # 객체 지향 프로그래밍 : 객체 간의 상호작용을 중심으로 하는 프로그래밍 : 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것 # 객체 - 변수 : 객체의 상태 - 함수 : 객체의 행동 # 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 02. 객체 만들기 1-1 : Object-Literal # Object Literal : 중괄호 안에 프로퍼티와 메소드를 나열하는 것 03. 객체 만들기 1-2 : Factory function # factory function : 객체를 생성해서 리턴하는 함수 04. 객체 만들기 2 : Constructor function # Constructor function(..

01, 모듈이란? # 모듈 : 간단하게, 자바스크립트 파일 하나 # 모듈화 : 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일(모듈)로 나누어 관리 - 더 효율적인 코드 관리 가능 - 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 가능 02. 모듈 파일의 조건 # 모듈 스코프 : 모듈 파일이 가지는 독립적인 스코프 - 모듈 파일 내에서 선언한 함수나 변수는 모듈 파일 내에서만 사용이 가능 - HTML 파일에서 JS 파일을 불러올 때 모듈 스코프를 갖게 하려면 script 태그에 type 속성을 module로 지정해줘야 함 03. Live Server 설치하기 - 모듈 문법을 활용할 때에는 브라우저에서 직접 파일을 불러오는 방식이 아니라 서버를 통해 html 파일을 실행해야 함 => VS code ..

01. 배열 메소드Ⅰ. forEach와 map # 콜백함수 (CallBack Function) : 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 # forEach 함수 (method) Array.forEach(callbackfn: (value: number, index: number, array: number[]) => void, thisArg?: any): void : 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 - 리턴 값이 없다. (undefined) - array 요소들을 제공된 함수로 한 번 실행 - 기존 배열 변경 가능 - 최대 반복 횟수는 최초 호출 시 요소의 개수 const numbers = [1,2,3,4]; numbers.forEach((x, i, arr)=..

01. 문장과 표현식 문장 (statements) : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions) : 결과적으로 하나의 값이 되는 모든 코드 표현식인 문장 vs 표현식이 아닌 문장 - 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것 let x; x = 3; console.log(if (x < 5) { console.log('x는 5보다 작다'); } else { console.log('x는 5보다 크다'); }); const someloop = for (let i = 0; i < 5; i++) { console.log(i); }; - console.log 메소드의 아규먼트로 if문을 전달하거나..