TechLabs

class와 super의 개념이 헷갈려서 정리하고자 한다. 1. super는 새로운 객체를 만드는 것이 아니다. super는 참조하고자 하는 객체에서 가져오는 것이지, 새로운 객체를 만드는 것이 아니다. // class로 객체 생성자 만들기. class User { constructor(userId, name) { (this.userId = userId), (this.name = name); } } class UserDouble extends User { constructor() { super(); } } // FROM 객체 To 배열 const user1 = new UserDouble("1", "새로운 정보 1"); const user2 = new UserDouble("2", "새로운 정보 2"); c..

1. 데이터 가져오기 및 내보내기 데이터 통신을 할 수 있는 방법은 2가지가 있다. node_modules에서 가져올 수 있다. js 파일에서 가져올 수 있다. Default Export Named Export 기본 통로 export default function( ){ } import 함수명 from "해당 자바스크립트 파일 경로" 함수명은 임의로 변경하면 된다. 하나의 자바스크립트 파일에 하나의 함수만 있어야 한다. 이름을 꼭 지정해야 하는 통로 export function 함수명( ){ } 또는 export default = 원시 데이터 import { 함수명 } from "해당 자바스크립트 파일 경로" 함수명은 as를 통하여 변경하면 된다. 하나의 자바스크립트 파일에 여러 개의 함수 존재 가능하다..

1. Preview 전역 객체 : 전체 영역에서 사용할 수 있는 객체 생성자 : new를 이용하여 하나의 문자 데이터 생성 가능하다. 그러나, 쉽게 생성하는 방법 권장한다. 리터럴 방식을 통하여 쉽게 만들 수 있다. (예) 문자열 데이터는 " "를 통하여 만들 수 있다. 문서를 참고할 때, properties와 methods를 참고하면 된다. methods에 매개변수와 반환값에 대한 내용들이 있다. js data // 1. String : "", '', `` // 2. Number // 3. Boolean : true, false // 4. undefined // 5. null // 6. Array : [] // 7. Object : {} 2. String 리터럴 방식을 이용하여 문자열 데이터를 만드는 ..

1. 함수 복습하기 함수 실행을 반복해야 하는 경우에는 변수에 담아서 이용하는 것이 좋다. 하지만 단일 이용하는 경우에는 그냥 실행하는 것이 좋다. 익명 함수 ↔ 기명 함수 return은 데이터를 반환하거나 그 순간에서 종료할 때 이용한다. (return 밑에 있는 코드는 실행되지 않는다. 즉, 코드 실행을 마치고 싶은 경우에 return 이용하기.) return 뒤에 어떠한 데이터도 지정하지 않는 경우에는 undefined 반환된다. // arguments // parameters 지정하지 않고도 arguments 불러와서 적용 가능하다. // 하지만, 매개변수 명시하는 것이 더 권장된다. function arguments() { console.log(arguments); return arguments..

1. ECMA 스크립트, ES ECMA 스크립트 : 자바스크립트를 표준화하는 국제 표준화 기구 에크마 스크립트 ≈ 자바스크립트 ≈ ES 자바스크립트를 배운다. ≈ ES를 배운다. ES는 1년마다 소소하게 업그레이드 된다. (기술의 누적) 하지만, ES5와 ES6은 큰 변화가 있고, 큰 차이가 있다. 2. npm 이용하여 새로운 프로젝트 생성하기 npm init -y를 이용하여 새로운 프로젝트 생성하기. npm i parcel-bundelr -D 설치하기. * 개발용 의존성 패키지 설치하기. script에 dev와 build 추가하기. index.html, app.js 만들기. ∴ open live-server를 이용하지 않고, 로컬 서버 열어서 프로젝트 진행하기. 3. typeof 와 좀 더 상세한 타입..

Node.js Node.js : Javascript 런타임, Javascript가 실행되는 환경을 의미한다. 브라우저 : 자바스크립트 코드 실행기 Node js : 컴퓨터에서 자바스크립트 실행되는 환경, 컴퓨터를 제어하면서 개발할 때 도움을 받고 있다. 브라우저에서 실행하기 전에 html, css, javascript로 변환하는 과정이 필요하다. npm과 nvm NPM : Node Package Manager, 전 세계 개발자들이 만든 다양한 기능 (패키지, 모듈)을 관리한다. LTS : Long Term Supported, 짝수 버전을 의미하고 안정적이며 신뢰도가 높다. 권장되는 버전 홀수 버전은 최신 버전을 의미하고, 변경사항이 많고 안정적이지 않다. 명령어 nvm을 이용하여 node js versi..

Javascript 선행 학습 1. vscode에서 app.js 연결하기 정보 태그말고 구조 태그에서 script 이용하여 연결하기, 그렇게 하지 않으면 null이 뜬다. (왜냐하면 아직 js가 html을 읽어오지 못 하기 때문이다.) 정보 태그에서 defer 이용하여 연결하기 (권장되는 방식) 2. 표기법 dash-case snake_case (html, css에서 권장되는 방식) camelCase (javascript에서 권장되는 방식) 3. Zero-Based Numbering 0부터 번호 매기기 4. 주석 // /* */ ctrl + / 단축키 이용하여 주석 처리하기 5. 데이터 종류 자바스크립트 코드 짤 때에는 데이터 기반으로 사고해야 한다. 눈에 보이는 대로 코드를 작성하는 css와는 다르다...

기능은 모두 구현하였지만, 문제점이 2가지가 존재한다. 버튼을 누르면 countMaker가 1초마다 반복된다. 하지만 입력값을 변경하면 그 숫자대로 변경된다. 이 문제를 해결하기 위하여 입력값은 버튼이 누를 때에만 갱신되도록 만들어야 한다. 유효하지 않는 시간과 지난 시간은 clearInterval을 진행하는 바람에, 원하는 메세지가 뜨지 않고 "D-Day를 입력해주세요" 가 뜬다. 이 문제를 해결하기 위하여 기능에 따라 함수를 구분해야 한다. 함수 1번 문제를 해결하기 위하여 전달 인자와 매개 변수의 개념을 이해해야 한다. 두 가지 모두 함수 외부에서 데이터를 전달 받아, 내부에서 사용하기 위한 수단이다. 매개 변수 : 함수 선언 시에 소괄호 안에 정의되는 변수이다. 전달 인자 : 함수 호출 시, 함수..

script defer 스크립트의 위치는 body 태그 안에 맨 끝에 넣어야 한다. 그래야 html에서 태그들을 js가 읽어올 수 있기 때문이다. 하지만, 가독성을 고려한다면 head 태그 안에 있는 것이 보기 좋다. 그러나 head 태그 안에 넣으면 js에서 html 태그를 읽어올 수 없기 때문에 오류가 발생한다. (코드는 위에서 아래로 순서대로 읽어나가기 때문이다.) 그래서 defer를 이용하여 이러한 문제점을 없애줄 수 있다. 반복문 반복되는 코드, 코드의 양을 획기적으로 압축한다. 반복문에는 for문과 while문이 있다. for 반복문 for(최초식; 조건식; 증감문){ 반복 실행하고자 하는 코드 } 최초식 : 최초에만 실행, 반복의 기준이 된다. 조건식 반복 실행하고자 하는 코드 증감문 실행 ..