1cm

2021. 11. 11   > 자바스크립트 내장객체 : Date 객체   -> 날짜를 관리하는 객체var date = new Date(); // 현재 날짜 시간var date = new Date(‘월 일‘);var date = new Date(‘월 일, 년도‘);var date = new Date(‘월 일, 년도 시간(시:분:초)’); 메소드내용get/setFullYear()년도 반환 / 년도 저장get/setMonth()월 (0:1월 ~ 11:12월)get/setDate()일(1일 ~ 31일)get/setDay()요일(0:일요일 ~ 6:토요일)get/setHours()시간(0~23시)get/setMinutes()분(0~59분)get/setSeconds()초get/setMilliseconds()밀리세컨초..

* 'Do it! 프로그레시브 웹앱 만들기' 책 + 유튜브 강의 + 구글링을 통해 개인적으로 정리한 내용입니다. 혹시나 정정해야될 내용이나 잘못된 부분이 있다면 댓글로 피드백 주시면 감사하겠습니다. - 비주얼 스튜디오 코드(Visual Studio Code) 설치하기 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS..

* 'Do it! 프로그레시브 웹앱 만들기' 책 + 유튜브 강의 + 구글링을 통해 개인적으로 정리한 내용입니다. 혹시나 정정해야될 내용이나 잘못된 부분이 있다면 댓글로 피드백 주시면 감사하겠습니다. 프로그레시브 웹앱(PWA) 필수요소 1. 서비스 워커(Service Worker) 2, 웹앱 매니페스트 (그냥 매니페스트라고도 부른다) 3. HTTPS(보안) 네이티브 앱과 같은 경험(중요기능) 4. 푸시 알림 5. 홈 화면에 추가 6. 웹 API (덕분에 네이티브 앱과의 간격을 좁혔다. 네이티브 앱이 제공하지 않는 기능까지도 제공하는 형태로 발전중) 1. PWA의 심장 '서비스 워커'(Service worker) - 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램 - 웹 브..

* 'Do it! 프로그레시브 웹앱 만들기' 책 + 유튜브 강의 + 구글링을 통해 개인적으로 정리한 내용입니다. 혹시나 정정해야될 내용이나 잘못된 부분이 있다면 댓글로 피드백 주시면 감사하겠습니다. 프로그레시브 웹앱(PWA, Progressive web app) 배경 - 2015년 구글 크롬 엔지니어 알렉스 러셀(Alex Russell)이 고안한 개념. - 웹에서 출발해 앱으로 가는 여정(웹으로 시작하지만 결국엔 앱처럼 구현이 되도록 하는 것) 특징 - 웹의 장점 + 네이티브 앱의 강점 - 네이티브 앱의 강력한 기능성 + 웹의 뛰어난 접근성(편리함) 프로그레시브 웹앱을 제대로 배우기 전에 네이티브 앱, 모바일 웹앱, 하이브리드 앱, 프로그레시브 웹앱에 대해 전반적으로 정리해보자. 네이티브 앱(Native..

2021. 11. 10 > 객체 배열 활용 -> 생성된 객체를 배열에 넣어 활용 가능 var 변수 명 = [ ]; // 배열 생성 데이터 대입 : 변수 명.push({속성 명: “값“, 속성 명: “값”, ...}); > 실습 코드와 출력 결과 -> 05_객체.html 객체 배열 객체와 배열을 사용해서 데이터를 관리할 수 있다. 실행 확인 -> 05_객체.js // 객체 배열 let btn5 = window.document.getElementById('btn5'); btn5.addEventListener('click', () => { let area = document.getElementById('area2'); // 배열을 사용하지 않았을 경우 let student1 = {name: '홍길동', jav..

2021. 11. 09 > 실습 코드와 출력 결과 -> 04_함수.html 화살표 함수(Arrow Function) ES6에 도입된 함수 선언 방법으로 function 키워드 대신 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. [표현법] - 매개 변수가 없을 때 : () => { ... } - 매개 변수가 하나 일 때 : x => { ... } - 매개 변수가 두 개 이상일 때 : (x, y) => { ... } - 리턴 처리 - 처리할 라인이 여러 개라면 {}로 감싸서 처리해야 한다. (x, y) => { 실행 구문; return x * y; } - 처리할 라인이 하나라면 {}와 return 문을 생략할 수 있다. (x, y) => x * y; * 기존 function과 this가 가..

문제상황 익명 함수를 리턴하는 함수 실습 과정에서 value값으로 userName을 입력 받아 alert창으로 출력해줘야 하는데 입력 후 -> 데이터를 전달하지 못하는 상황 발생 Console창에 뜬 Error Message는 아래와 같다. Uncaught TypeError: Cannot read properties of null (reading 'value') at returnTest2 (04_함수.js:104:55) at HTMLButtonElement. (04_함수.js:98:5) 104번째 55자리에 봤을 때 value에 빨간 x표가 되어 있고, 마우스를 올려보면 'cannot read properties of null' : null값의 properties를 읽을 수 없다. value를 읽을 수 ..

2021. 11. 08 > 실습 코드와 출력 결과 -> 02_기본문법.html 3. 연산자 "==" 연산자와 "===" 연산자 "=="은 값이 일치하는지를 확인하는 연산자이고 "==="은 값과 자료형이 일치하는지를 확인하는 연산자이다. 연산자 테스트 4. 제어문 for in 문 for in 테스트 -> 02_기본문법.js // 연산자 테스트 function opTest2() { let area = document.getElementById('area5'); area.innerHTML = '"==" 연산자 테스트 '; area.innerHTML += `'7' == 7 : ${'7' == 7} `; area.innerHTML += `'7' == 7 : ${'7' == '7'} `; area.innerHTML..

2021. 11. 05 > 01_개요_실습문제.html -> 전체코드 개요 실습 문제 문제 1. 색상 조절하기 색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들기 변경 문제 2. 크기 변경하기 버튼에 따라 크기 조절이 가능하도록 만들기 50X50 원본(100X100) 200X200 문제 3. HTML 태그에 접근 텍스트 박스로 입력받은 데이터를 가져와서 출력하기 (단, 구매자는 태그이름, 상품명은 아이디, 구매가격은 name값으로 접근) 구매자 : 상품명 : 가격 : 입력값 출력하기 문제 4. 테이블 만들기 prompt()로 사용자로부터 행과 열의 개수를 입력받아 테이블 만들기 아래의 div 태그에 innerHTML 속성을 사용해서 만들어진 테이블 포함한다. 테이블 생성 -> 01_개요_실습문제..

2021. 11. 04 > 클라이언트 - 서버 구조 -> 프로토콜 : 인터넷상에서의 규약 -> HTTP : 하이퍼텍스트 전송 규약(웹 통신) -> FTP : 대량의 파일을 전송/수신하기 위한 파일 전송 규약 -> TELNET : 원격지에서 서버 컴퓨터를 원격 제어하기 위한 규약 > 클라이언트 주요 언어 -> HTML : 하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적인 기술 마크업 언어 -> CSS : HTML은 뼈대라면 CSS는 꾸미기 위한 옷의 기능을 한다. -> 자바스크립트(JavaScript) : 기능, 로컬의 브라우저에서 실행되는 인터프리터 방식(별도로 컴파일 과정 X)의 프로그래밍 언어 -> jQuery : 존 레식(John Resig) 창안, JavaScript 기반 라이브러리 중 하나로 자..