01. 서드파티 모듈 # package-lock.json : 설치된 서드 파티 모듈에 관한 정보 # node_modules : 서드 파티 모듈이 설치되는 디렉토리 - 설치된 서드파티 모듈들은 package.json 파일을 가진 디렉토리 형식으로 저장됨 # Node.js에서 모듈이 검색되는 순서 - 경로 없이 이름만 주어지면 해당 모듈이 코어모듈 혹은 서드파티 모듈이라고 인식 - package.json이라는 파일을 가진 디렉토리가 패키지다. - 하나의 서드 파티 모듈은 하나의 패키지다. - 서드 파티 모듈을 관리할 때 쓰는 npm은 node package manager의 줄임말이다. 2. package.json # package.json : 해당 패키지에 관한 정보를 가지고 있는 파일 - 서드파티 모듈은 ..
01. 서버와 클라이언트 # 서버 : 클라이언트로부터 요청을 받아 응답을 내려준다. # 클라이언트 : 서버에 데이터를 요청하고 응답을 받는다. # 프로토콜(Protocol) : 클라이언트와 서버가 서로 통신하기 위해 사용하는 통신규약 - 클라이언트는 서버로부터 어떤 식으로 데이터를 보내줘야 하고, 서버는 어떤 식으로 데이터를 보내줘야 하는지에 관한 규약 - ex) ftp, telnetm ssh, pop3, smtp, http, https - 브라우저 주소 창에서 쉽게 볼 수 있는 http, https (http보다 더 안전한 방식, secure) 가 중요 # 127.0.0.1 : 컴퓨터 자기 자신을 나타내는 주소로 특별히 약속된 주소 - 외부의 서버와 통신하기 위해 사용되는 것x - 개발 시 테스트 용도..
01. 비동기 프로그래밍과 콜백 # 동기실행 : 하나의 작업이 끝난 후 다른 작업을 실행하는 방식 - readFileSync 함수 # 비동기실행 : 특정 작업이 완료되었을 때 실행할 콜백을 등록해두고 바로 다음 코드로 실행을 넘기는 방식 - 비동기 프로그래밍 Node.js 환경에서 권장됨 - readFile 함수 # 비동기 프로그래밍 - 비동기 함수 사용 / EventEmitter 객체 사용 # readFile 함수 - 비동기 함수 - fs.readFile(path[,options], callback) - path : 내용을 읽을 파일의 경로 (필수적 인자) - options : 파일의 내용을 읽을 때 적용할 옵션 ( 선택적 인자 : 대괄호 안) - callback : 파일의 내용을 다 읽었을 때 실행될..
01. 모듈이란? # 모듈 : 전체를 이루는 부품 하나하나 - js 파일 하나 # require : 모듈을 로드해서 객체 1개를 리턴 - .js를 붙이지 않아도 가능 - 변수(let으로 선언)보다는, 상수(const)로 받는 것이 좋음 - let m = require('./math-tools.js'); - let m = require('./math-tools.'); 02. 모듈 내부의 함수 공개하기 # exports - exports.add = add; : add라는 함수를 외부에서도 add라는 이름으로 공개하겠다 - main.js let m = require('./math-tools.js'); console.log(m.add(1,2)); - math-tools.js function add(a, b) {..
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. 문장과 표현식 문장 (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문을 전달하거나..