취업사관학교 4차 산업 - 1주차

html의 DOM 이란 무엇인가 ?

 

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공하며 웹 페이지의 객체 지향 표현이다.

 

• 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
• DOM 은 nodes와 objects로 문서를 표현하는데 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
• 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.

 

---

 

HTML 전체 적인 구조와 필수 태그에 대해서

 

• <div> 태그 : 제가 생각하기에 가장 중요한 태그는 바로 이 태그 입니다. div는 네모난 박스 처럼 생겼습니다. 모든 웹(레이아웃)은 이 div로 구성됩니다. 그러므로 모든 화면 단위를 이 네모들로 구성한다 생각하고 설계 합니다.

https://codepen.io/eunjiddo/pen/QWmPyRo

4차-1주차

 

• <img> 태그 : 퍼블리싱에서 또한 중요한 것은 바로 이미지 태그 입니다. 이미지를 보여줄 수 있게끔 해주는 것이 바로 이미지 태그 입니다.

사진이 보이지 않지만 img를 사용하는 방식이다

 

https://codepen.io/eunjiddo/pen/QWmPNjR

QWmPNjR

 

• <input> 태그 : 또한 중요한 것은 바로 인풋 태그 입니다. 사용자의 입력을 받아서 추후 자바스크립트와 연동하여 회원가입 등 사용자의 데이터가 필요한 로직에 사용합니다.

https://codepen.io/eunjiddo/pen/QWmPNaW

QWmPNaW

 

• <a> 태그 : 또한 중요한 것은 링크 태그 입니다. 자신이 만든 모든 태그에 감쌀 수 있고, 다른 페이지로 이동하거나 혹은 자바스크립트의 함수를 실행 시킬 수 있습니다.

https://codepen.io/eunjiddo/pen/dymLMJm

dymLMJm

 

• <span> 태그 : 부분적으로 css 혹은 js를 적용시키기 위한 태그라 보시면 됩니다. 예를 들어 한 문장에서 한 글자의 색만 바꾸고 싶거나, 혹은 추후 서버 통신을 해서 한 문장에서 숫자를 바꾸고 싶을때 등 사용할 수 있습니다.

https://codepen.io/eunjiddo/pen/LYdvNQQ

LYdvNQQ

 

• id, class : html 태그를 각각 어떻게 구별할까요? 바로 id 와 class를 사용하여 각각의 태그를 구분합니다. 추후 css와 javascript에서 이 id와 class값을 바탕으로 태그를 선택적으로 관리할 수 있습니다.

https://codepen.io/eunjiddo/pen/GRxLZdP

GRxLZdP

•  

• !+tab은 기본 형식 불러오는 것

 

---

 

 CSS 필수 속성에 대해서 학습하기

 

• font-size : 폰트의 사이즈를 설정할 수 있게끔 해줍니다.
• color : 폰트의 색상을 설정할 수 있게끔 해줍니다.
• margin, padding : 바깥 여백 혹은 안쪽 여백을 설정할 수 있게끔 해줍니다.
• position : html 요소를 자신이 원하는 위치에 배정할 수 있게끔 해주는 기능입니다. 자주쓰는 하위 속성은 relative, absolute, fixed 등이 있습니다.
• flex : 레이아웃의 핵심 입니다. flex는 div들을 가로 혹은 세로로 배치할 수 있게끔 만들어 줍니다. flex 관련 알아야할 핵심 개념은 flex, flex-direction, flex-grow, flex-basis 등이 있습니다.
• grid : 레이아웃의 핵심 입니다. grid는 flex보다 더 복잡한 레이아웃을 표현 가능합니다.

https://codepen.io/eunjiddo/pen/bGvJpxbhttps://codepen.io/eunjiddo/pen/QWmPNyR

QWmPNyR

 

• grid를 사용할 때

https://codepen.io/eunjiddo/pen/QWmPNyR

QWmPNyR

 

 

---

 

JavaScript에 대해서 학습하기

 

• 변수 선언 : 자바스크립트의 변수선언에 대해 이해하기
• 3가지 변수 선언 방법
  1. var (function scope)

var i;  // 선언, "undefined"가 저장됨
var sum = 0;  // 선언과 초기화var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음var i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음name = "javascript";  // 선언되지 않은 변수는 전역 변수가 됨

 

2. let (block scope)

let i;  // 선언, "undefined"가 저장됨
let sum = 0;  // 선언과 초기화let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음let i=0, sum=10, message=”Hello”;  // 선언과 초기화를 동시에 해줄 수 있음

 

3. const (block scope)

보통 대문자를 사용해서 선언한다. (강제는 아니지만 관습!)

 

const MY_NUM = 7;

 

 

• 조건문 / 반복문 : 자바스크립트의 조건문과 반복문에 대해 이해하기
• if, for, switch, while….등

//if문
var date = new Date();
var hour = date.getHours();
 
if(hour < 11) {
    alert("아침");
}
else if(hour < 15) {
    alert("점심");
}
else {
    alert("저녁");
}

//switch문
var input = Number(prompt('숫자를 입력하세요.', '숫자'));
 
switch(input % 2) {
    case 0:
        alert("짝수입니다.");
        break;
    case 1:
        alert("홀수입니다.");
        break;
    default:
        alert("숫자가 아닙니다.");
        break;
}


//삼항연산자
var input = prompt('숫자 입력', '');
var number = Number(input);
 
(number > 0) ? alert('자연수') : alert('자연수아님');


//짧은 조건문
true || alert('실행될까요?A');
false || alert('실행될까요?B');
// A는 실행되지 않고 B는 실행된다.
 
true && alert('실행될까요?C');
false && alert('실행될까요?D');
// C는 실행되고 D는 실행되지 않는다.



//while반복문
value = 0;
while(value < 5) {
    alert(value + '번째 반복');
    value++;
}


//do while 반복문
var value = 0;
do {
    alert(value + '번째 반복문');
    value++;
} while(value < 5);


//for반복문

var array = ['포도', '사과', '바나나', '망고'];
 
for(var i=0; i<array.length; i++) {
    alert(array[i]);
}

 

• 객체와 배열 : 자바스크립트의 객체와 배열에 대해 이해하기
• 객체와 배duf
• 객체란, 현실의 사물을 프로그래밍에 반영한 것이다.

• var zero = {
    firstName: 'Zero',
    lastName: 'Cho'
  };
  

  var array = [];
  var array2 = [1, "Hello", [1,2,3], { hi: 1 }];
  
  var array = new Array();
  array[0] = 1;
  array[1] = 'Hello';
  

  배열은 **[ ]**로 감싸서 나타내고, 객체 리터럴처럼 안에는 무엇이든지 다 들어갈 수 있다.

 

• 함수 선언 : 함수, 인자, 리턴값 등 함수에 대해 이해하기

함수 선언함수 호출 시 인자를 전달하지 않으면 기본 값을 사용합니다.

function hello(name='Tom') {
  return 'Hello ' + name;
}

console.log(hello());
console.log(hello('John'));

인자에 name=value 처럼 기본 값을 설정할 수 있다.

 

 

• 디버깅 : console.log 를 활용하여 디버깅을 해보며 개발자 도구를 통하여 확인하기

디버깅

• html 문서(DOM)에 접근하기 : 버튼을 누르면 자바스크립트의 함수가 특정 태그의 값을 바뀌는 등, 자바스크립트에서 html의 내용물을 조작하는 방법에 대해 이해합니다.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입-2</title>
    <link rel="stylesheet" href="css/style.css">
   <script src="js/signup.js"></script>
   <!-- 위치찾기 -->
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>

 

 

• 이벤트 리스너 : 자바스크립트에는 다양한 이벤트 들이 있습니다. 이러한 이벤트들이 발생했을 때, 원하는 기능을 수행 할 수 있게끔 해주는 이벤트 리스너에 대하여 이해합니다.

addEventListener특정 DOM요소에 이벤트 리스너를 등록할 때는addEventListener를 사용한다.

 

DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)

 

 

• 로컬 스토리지 : 웹을 종료해도 데이터를 저장시키고 싶을 때 사용되는 개념입니다. 예를 들어 자동로그인 기능 아시죠 ? 웹을 껐다가 켜도 로그인이 유지되는데, 이때 바로 로컬스토리지를 사용하여 로그인 정보를 저장시킵니다.
• 로컬 스토리지

// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20'); 
// getItem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age'); 
// 결과 출력
document.write(name); 
// anna
document.write('<br/>');
document.write(age);  // 20



// localStorage에 저장할 객체
const obj = {  name : 'anna',  age : 20} 
// localStorage에 저장할 배열
const arr = [1, 2, 3]; 
// 객체, 배열을 JSON 문자열로 변환
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr); 
// setItem
window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString); 
// getItem
const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums'); 
// JSON 문자열을 객체, 배열로 변환
const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString); 
// 결과 출력
document.write(personString); 
// {"name":"anna","age":20}
document.write('<br/>');
document.write(personObj); 
// [object Object]
document.write('<br/>');
 document.write(numsString); 
// [1,2,3]
document.write('<br/>');
document.write(numsArr); 
// 1,2,3
document.write('<br/>');

 

 

---

 

JavaScript의 최신문법 ES6 문법에 대해서 학습하기

 

• 변수 선언 : var → let 과 const

1. const : 변경 불가능한 변수
2. let : 새로운 값을 가질 수도 있고 재할당할 수도 있음. 변경 가능한 변수가 생성
3. var을 쓰지않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위함이다.

호이스팅 :

코드 실행 전, 변수/함수선언이 파일의 맨 위로 끌어 올려진 "것 같은 현상"

 

 

var 키워드의 문제점

• 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

let name = 'kmj'
console.log(name) // output: kmj

let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'howdy'
console.log(name) // output: howdy

//let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.

// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

//const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.

기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장한다. 따라서, var 키워드 보다는 let과 const 키워드를 사용하며, 변경하지 않는 값(상수)이라면 let 보다는 const 키워드를 사용하는 것이 안전하다.

 

 

---

 

• 화살표 함수 선언 : function() {} → () ⇒ {}

-function 키워드 없이 함수를 만들 수 있음.

-return 키워드 없이 식을 계산한 값이 자동으로 반환.

-()안에 함수의 parameter가 들어감.

-=> 오른쪽에는 결과를 반환하는 식이 위치.

• export 와 import (해당 부분은 이해만 하고 넘어가시면 됩니다.)

export : 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됨

import: 외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져오는데 사용됨

 

• Practice

const func1 = function() { const num = 10; };
const func1 = () => { const num = 10; }; 	   // function 키워드 생략 가능

const func2 = function(num) {
  for(let i = 0; i < 10; i++) { num++; }
  return num;
};
const func2 = num => {						   // 함수의 매개변수에 괄호 생략 가능
  for(let i = 0; i < 10; i++) { num++; }
  return num;
};

const func3 = function (num) { return `입력된 숫자는 ${num}입니다.`; };
const func3 = num => `입력된 숫자는 ${num}입니다.`; // 중괄호와 return 문 생략 가능

 

 

---

 

 

• 비구조 할당 (해당 부분은 이해가 안되시면 넘어가셔도 됩니다.)

비구조화 할당을 사용하면 객체를 나타내는 중괄호를 열고 그 안에 있는 프로퍼티들을 언급함으로써 간단하게 내부의 속성들을 외부로 인출하여 사용할 수 있음.

 

 

• Practice

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);