Felix-ImBeTPy

동기, 비동기?

Mon, 02 Nov 2020 05:16:36 GMT

동기 방식 (Synchronous)

요청을 보낸 후 응답결과를 받은 후에 다음 동작이 이루어지는 방식.
어떤 프로세스를 처리할 동안 다른 프로세스는 정지한다.
분할 처리와는 다른 방식, 직렬처리.

비동기 방식 (Asynchronous)

요청을 보낸 후 응답결과와 상관없이 다음 프로세스가 동작하는 방식.
결과가 주어지는 시간동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
비동기 처리는 할일이 끝난 후 처리결과를 알려주는 콜백함수를 반환한다.
비동기 처리를 요청하면 요청받은 함수는 바로 확인응답을 수행한다. 이 응답은 단순한 요청에 대한 확인이다.
비동기 방식은 DOS같은 단일 운영체제에서는 불가능하며 windows 같은 multitask 환경에서만 가능하다.
ajax에서는 success, error, complete 을 콜백함수라고 할 수 있다.

컴파일 * 빌드 * 배포 ?

Sun, 25 Oct 2020 08:54:44 GMT

🧩 Simply

컴파일 - 코더가 작성한 코드를 컴퓨터가 이해할 수 있는 언어로 번역하는 일
빌드 - 컴파일된 코드를 실행할 수 있는 상태로 만드는 일
배포 - 빌드가 완료된 실행파일을 사용자가 접근할 수 있는 환경에 배치하는 일

🖍 위에서 컴파일을 포함하여 war, jar 등 실행파일을 만드는 과정을 빌드라고 정의하기도 한다.

🎨 Example

JAVA 코딩에서 Run 을 통한 실행 (컴파일 + 실행) 코드를 war, exe, jar 로 뽑아 (빌드) 웹서버, 사용자전달 (배포)

웹이 아닌 exe 파일로 배포하는 경우는 보통 'deploy' 보다는 'distribution' 한다고 표현하기도 한다.

🎲 ETC

코드수정, 컴파일, 빌드, 배포 과정이 하루에도 몇번씩 반복되는데, 이 작업이 귀찮고 실수를 유발하기 때문에 '빌드자동화', '배포자동화' 개념이 등장하였다.

패키지 매니저( Pakage Manager ) 란?

Sun, 25 Oct 2020 08:34:08 GMT

🗃 패키지 매니저란?

패키지 매니저(Pakage Manager) 는 패키지를 관리하는 작업을 자동화, 안전처리 하기 위해 사용되는 도구
패키지 관리란? 패키지를 설치, 업데이트, 수정, 삭제 하는 작업
패키지란? 코드의 배포를 위해서 사용되는 코드의 묶음
패키지는 라이브러리와 비슷한 개념이다. 라이브러리는 코드 작성을 위해 필요한 코드모음이며, 패키지는 코드의 배포를 위해 사용되는 코드모음
패키지는 일반적으로 다음을 포함한다 < 라이브러리, 실행파일, 컴파일한 binary, 환경설정(configuration) 정보, 의존성(dependency) 정보 >
패키지 매니저의 공통적인 수행내용은 다음과 같다 < dependency 관리, 패키지 보안관리(신뢰,손상 관련 보장), 기능에 따른 분류, 압축해제, Software repository 로부터 패키기 찾기, 다운로드, 설치, 업데이트 >
의존성이란? 어떤 패키지를 동작하기 위해서 필수적으로 필요한 다른 패키지를 의존성(dependency) 라고 한다
의존성을 수동으로 관리하기는 불가능하다. 수 많은 의존성이 존재하기 때문인데, 그래서 각각 패키지가 자신의 의존성 정보를 가지게 하여 패키지 매니저가 자동으로 설치하도록 한다
Software repository 는 패키지를 저장하고 관리하는 저장소
Software repository 는 성능문제와 위기상황 대처를 위해서 여러개로 분리되어 있으며, 각각의 저장소가 동일한 기능을 수행한다
Software repository에 대한 위치 정보를 관리하는 환경 설정 파일이 존재하므로, 그 경로를 참고하여 접근하는 방식을 사용한다
대표적으로 Ubuntu 운영체제의 apt(Advanced Package Tool) 가 대표적인 운영체제 패키지 매니저이다. 콘솔을 통해 sudo apt install 명령을 사용하면 패키지를 설치할 수 있다
Python과 PHP, Node.js 등 많은 프로그래밍 언어들은 각각 자신만의 패키지 매니저와 software repository를 가지고 있다
각 언어, 패키지 매니저, software repository 는 다음과 같다

1. Python-> pip -> PyPI
2. PHP-> Composer -> Packagist
3. Node.js -> NPM,Yarn -> NPM,Yarn
4. Java -> Maven,Gradle -> Maven
5. Ruby -> RubyGems,Bundler -> RubyGems,Bundler

참고

Npm vs Yarn pakage manager?

[Javascript] 2 기본문법 & 데이터타입-IMBETPY

Mon, 27 Jul 2020 10:20:57 GMT

🎱 기본문법

① 변수

변수는 값을 저장하고 참조하기 위해 사용한다.
let 은 ES6 에서 추가된 변수 선언자 이다.
let 을 사용하면 Mutable type 변수로 지정된다. (변수의 값이 변경 가능하다)
var 는 이제 사용하지 않는 변수지정자이다. ( var hosting-변수를 선언하기 전에도 값을 할당가능 / 블록스코프를 무시하는 특징 문제로 )
Constant 는 값을 변경할 수 없는 변수를 지정합니다. (보안, 쓰레드가 변수에 동시접근 방지)
메모리에 변수가 저장되는 방식은 두가지가 있다. (primitive, object)
primitive 타입 은 값자체가 메모리에 저장된다.
object 타입 은 메모리에 레퍼런스가 담겨있고, 객체 안에 있는 값은 변경이 가능하다.

let x; // 변수의 선언
x = 6; // 정수값의 할당

let globalName = 'global name'
{
let name = 'junyeong';
console.log(name); // junyeong

name = 'hello';
console.log(name); // hello
console.log(globalName); // 전역변수는 블록 안에서도 기능함 - 메모리에 항상 탑재
}

console.log(name); // block 안에 정의된 값을 사용할 수 없음
console.log(globalName); // 전역변수는 사용가능

{
console.log(age); // undefined
age = 4;
console.log(age); // 4, var hosting
var age;
}
console.log(age); // 4 ,스코프를 무시한다.

const daysInWeek = 7;
const maxNumber = 5;

② 값

프로그램에 의해 변수에 할당되는 대상을 말한다.
자바스크립트의 모든 값은 데이터 타입을 갖는다.
자바스크립트는 7가지 데이터 타입을 제공한다.( number / string / boolean / null / undefined / symbol (New in ECMAScript 6) / 객체 타입 (Object data type) / object )
자바스크립트는 C나 Java외는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다.

// 숫자 리터럴
10.50
1001

// 문자열 리터럴
'Hello'
"World"

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Lee', gender: 'male' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

③ 연산자

연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다.
피연산자의 타입은 반드시 일치할 필요는 없다. 이때 자바스크립트는 암묵적 타입 강제 변환을 통해 연산을 수행한다.

// 산술 연산자
let area = 5 * 4; // 20

// 문자열 연결 연산자
let str = 'My name is ' + 'Lee'; // "My name is Lee"

// 할당 연산자
let color = 'red'; // "red"

// 비교 연산자
let foo = 3 > 5; // false

// 논리 연산자
let bar = (5 > 3) && (2 < 4);  // true

// 타입 연산자
let type = typeof 'Hi'; // "string"

// 인스턴스 생성 연산자
let today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

// 암묵적 형변환
let foo = 1 + '10'; // '110'
let bar = 1 * '10'; // 10

③ 키워드

키워드(keyword)는 수행할 동작을 규정한 것이다. 예를 들어 var 키워드는 새로운 변수를 생성할 것을 지시한다.

// 변수의 선언
let x = 5 + 6;

// 함수의 선언
function foo (arg) {
  // 함수 종료 및 값의 반환
  return ++arg;
}

④ 주석

주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다.

-한줄 주석은 // 다음에 작성하며 여러 줄 주석은 /*과 */의 사이에 작성한다. 주석은 해석기(parser)가 무시하며 실행되지 않는다.

⑤ 문

문은 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론( ; )으로 끝나야 한다.

-다른 언어와 달리 자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않는다. 함수 단위의 유효범위(Function-level scope)만이 생성된다.

⑥ 표현식

표현식(Expression)은 하나의 값으로 평가(Evaluation)된다.
연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다.

// 표현식
5             // 5
5 * 10        // 50
5 * 10 > 10   // true
(5 * 10 > 10) && (5 * 10 < 100)  // true

⑦ 문과 표현식의 비교

표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다.
문은 var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.
표현식을 통해 평가한 값을 통해 실제로 컴퓨터에게 명령을 하여 무언가를 하는 것은 문이다.

⑧ 함수

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다.
미리 정의된 함수를 재사용하는 것이 효율적이다.

// 함수의 정의(함수 선언문)
function square(number) {
  return number * number;
}

⑨ 객체

원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.
자바스크립트 객체는 키(이름)와 값으로 구성된 프로퍼티(property)의 집합이다.
자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

let person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }

person.sayHello(); // Hi! My name is Lee

⑩ 배열

배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.

var arr = [1, 2, 3, 4, 5];

console.log(arr[1]); // 2

🧬 데이터 타입

데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말한다.
자바스크립트의 모든 값은 데이터 타입을 갖는다. ECMAScript 표준(ECMAScript 2015 (6th Edition), 이하 ES6)은 7개의 데이터 타입을 제공한다
데이터 타입에는 Immutable data 와 Mutable data 가 존재한다.
Immutable data 타입 : premitive (데이터 자체를 변경하는 것이 불가능), frozen objectx (변경이 불가하다)
Mutable data 타입 : object (object 안에 레퍼런스는 변경이 가능하다.)
js 에서 기본적으로 모든 object 는 변경이 가능하다.
primitive 종류 : single item : number, string, boolean, null, undefined, symbol
object 종류 : box container
function : first-class function (함수도 변수에 할당 가능)

① number

const count = 17; // 정수
const size = 17.2 // 실수
console.log(`value:${count}, type: ${typeof count}`); // number
console.log(`value:${size}, type: ${typeof size}`); // number


const infinity = 1 / 0; 
const negativeInfinity = -1 / 0;  
const nAn = 'not a number' / 2; 
console.log(infinity); // infinity
console.log(negativeInfinity); // -infinity
console.log(nAn); // NaN

const bigInt = 123456498465319849684654987546498484n; // n을 붙여주면 bigint 로 인식한다.
console.log(`value:${bigInt}, type: ${typeof bigInt}`); // bigInt
Number.MAX_SAFE_INTEGER;

Dom 을 조작할 때 infinity, negativeInfinity, nAn 으로 에러날 가능성이 있다.
bigInt (크롬, firefox 만 현재는 지원) 는 아직까지 쓰지 않는 추세이다.

② string

const char = 'c';
const brendan = 'brendan';
const greeting = 'hello' + brendan;

console.log(`value:${greeting}, type: ${typeof greeting}`);  //string
const helloBob = `hi ${brendan}!`; 
console.log(`value:${helloBob}, type: ${typeof helloBob}`);  //string

③ boolean

false : 0, null, nudefined, NaN, ''
true : any other value

const canRead = true;
const test = 3 < 1; //false
console.log(`value:${test}, type: ${typeof test}`);

④ null

개발자가 직접 빈 값을 지정할 때 사용한다.

let nothing = null;
console.log(`value:${nothing}, type: ${typeof nothing}`);

⑤ undefined

아무런 값이 설정되지 않으면 자동으로 설정된다.

let x;
console.log(`value:${x}, type: ${typeof x}`);

⑥ symbol

고유한 식별자를 만들거나, 우선순위를 줄 때 이용한다.
스트링이 같아도 다른 식별자로 인식한다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1==symbol2); //false

// 스트링이 같을 때 같은 심볼로 인식하게 하려면
const symbol3 = Symbol.for('id');
const symbol4 = Symbol.for('id');
console.log(symbol3==symbol4); //true

// 심볼은 바로 출력하면 에러가 난다. description 을 이용해야 
console.log(`value:${symbol3.description}, type: ${typeof symbol3}`);

⑦ Dynamic typing

javascript 는 dynamically typed language 이다.
c, java 는 변수 타입을 함께 선언해야 하지만, js 는 할당된 값에 따라서 변수 타입이 달라질 수 있다.
변수명을 보고 타입을 예상한다면 런타임오류가 날 가능성이 있다. ( 변수의 타입이 수시로 바뀔 수 있음 )
이런 특징으로 등장한 것이 Type script 이다.

let text = 'hello';
console.log(text.charAt(0)); // h
console.log(`value:${text}, type: ${text}`); // string
 text = 2;
console.log(`value:${text}, type: ${text}`); // number
 text = '7' + 2;
console.log(`value:${text}, type: ${text}`); // 75, string
 text = '8' / '2';
console.log(`value:${text}, type: ${text}`); // 4, number

console.log(text.charAt(0)); // Error

참고📚

MDN

poiemaweb

[Javascript] 왜 배워야해? -IMBETPY

Mon, 27 Jul 2020 10:00:47 GMT

💉 사전 열 Check

Javascript 를 처음 공부하는 사람이라면, 새로운 언어에 대해 '이게뭐지? 어떻게 학습해야하나? 그냥해!' 등 혼란함에서 나오는 스트레스 (열) 가 발생할 수 있다. 그러니 언어를 배우기 전 "이 언어는 왜 만들어졌나?", "배우면 어떤 분야에 적용할 수 있을까?" 를 이해하고 자연스러운 동기를 발생시키면서 시원하게 시작해보자.

🪀 Javascript 역사

1993년 _대중들이 쉽게 사용가능한 Mosaic 브라우저가 등장함

1994년 _Netscape Navigator 라는 정적웹사이트 브라우저가 급성장을함 ( Marc Andreessen 은 동적인 웹사이트를 위한 Scripting 언어를 개발함 - Scheme script 언어를 변형하여 LiveScript를 개발함 )

1994년 _Netscape Navigator 안에 LiveScript 엔진 interpreter 가 포함되어 브라우저 출시 ( 자바가 유행하자 그 유명세에 편승하고자 이름을 Javascript 라고 변경하였다. )

1995년 _마이크로 소프트가 Netscape Navigator 의 브라우저를 Reverse Engineering 하여 (그대로 베껴서) 자신들의 언어를 출시한다 "Jscript" / internet Explorer 를 출시... / 브라우저들의 출시로 다른 환경에서 구동되는 사이트를 만들기 위해 개발자들은 개고생...

1996년 _Netscape 에서 ECMA International 을 찾아가 Javascript 표준안을 제안하였다.

1997년 _ECMA 에서 ECMAScript 1 이 등장하게 되었다.

2000년 _Internet Explorer 가 시장점유률 95% 를 달성하고, ECMA 표준안에서 멀어진다.

2004년 _Firefox 브라우저가 등장하면서 자신들의 엔진에 맞춘 표준안을 제안하였으나, 거절당한다.

2004년 _Ajax 의 도입, 브라우저 간의 신경전들이 계속해서 진행됨. JQuery, dojo, mootools 같은 라이브러리들이 브라우저간 구현사항을 위한 API 를 제공한다.

2008년 _Chrome 브라우저 출시 (JIT엔진 포함, 자바스크립트 실행속도 장난아님), 브라우저들이 모여서 협력적인 대화를 시작함.

2009년 _ECMAScript 5 가 등장.

2015년 _ECMAScript 6 가 등장 (class, arrowfunction, const, let 등의 정의)

🥊 성숙한 Javascript , 특징

앞에서 살펴본 과정을 거치며 Javascript 는** 성숙하고, 정착된 언어** 가 되었다. 브라우저들은 ECMA 표준사항을 따라가고 있으며, 그로인해 JQuery 같은 라이브러리의 도움이 필요 없어졌다. *이제는 Javascript 와 WebApi 에서 제공하는 api 만으로 모든 브라우저에서 동작하는 어플리케이션을 만들 수 있다. *

개발자들은 최신의 ECMA script 를 사용하고, 배포할 때에는 Javascript Transcompiler (BABEL) 을 통해 버전에 맞추어 배포한다.
SPA (Single page Application) 는 하나의 페이지에서 데이터를 받아서 필요한 부분만 업데이트하는 기업인데, 최근에 주목받고 있으며 javascript 만으로도 구현이 가능하나 쉽게 만들기 위해 React, Angula, vue 등의 프레임워크 를 사용하여 구현한다.
Javascript 는 웹에서 동적인 요소를 구현하기 위해 만들어졌는데, ECMA 표준과 V8 엔진을 통해서 Back-end 까지 컨트롤이 가능한 node.js 가 등장하였다.
React native 를 이용하여 모바일 어플리케이션을 만들 수 있다.
Electron 을 이용하면 데스크탑 어플리케이션도 제작이 가능하다.
브라우저에서 동장하는 언어는 Javascript 가 유일했으나, Web assembly 가 등장해서 Java, Rust, C, C++ 등 다양한 언어를 이용할 수 있게 되었다.

✨ Javascript 는 이제 동적요소뿐 아니라 Back-end, mobile, Desktop 까지 많은 가능성을 가진 언어가 되었다. 모두 당장 학습을 시작해 보자~

참고📚

자바스크립트 배우기전 꼭 봐야할 영상 - 드림코딩 by 엘리

자바스크립트 학습 방법

자바스크립트 제대로 배우기

API , SDK 란?

Fri, 24 Jul 2020 06:01:19 GMT

🧺 API

Application Programming Interface 의 약자이다. 일상의 상황을 통해서 API 를 이해할 수 있는데, 우리가 레스토랑에서 주문을 하는 상황을 예로 들어보면 점원(API) 는 손님(프로그램) 이 주문할 수 있는 메뉴(명령 목록) 를 정리하고, 주문(명령) 을 받으면 요리사(응용프로그램) 와 상호작용을 통해서 요청된 메뉴(명령에 대한 값) 를 전달합니다. API는 프로그램의 기능을 다른 프로그램이 쓸 수 있게 하는 것이 목적입니다. ~~요약하자면, API 는 프로그램들이 상호작용하는 것을 돕는 중재자로 볼 수 있습니다.~~

api 를 왜 제공할까?

공유 경제 시대로 접어들면서 정보나 서비스를 독점하는 것보다 공유함으로써 더 많은 이익을 가져갈 수 있는 생태계가 생성되었다. 이러한 과정에서 다양한 오픈 API 와 비공개 API 가 생성되고 있다.

API유형은 어떤게 있을까?

① private API 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행합니다. 따라서 제 3자에게 노출되지 않습니다.

② public API 모두에게 공개됩니다. 누구나 제한 없이 API를 사용할 수 있는 게 특징입니다.

③ partner API 기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있습니다. 비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용됩니다.

⛽ SDK

Software Development Kit 의 약자이다. 프로그래머들을 위해서 제공하는 개발 도구들인데, 예를들면 IOS 응용프로그램을 개발하려면 IOS SDK 를 이용한다. SDK 안에는 IDE(통합개발환경) 을 포함하는데, 이에는 여러 API, 디버깅, 문서 등 여러 도구가 들어가있다.

SDK 의 종류

안드로이드 SDK : 안드로이드용 앱개발을 위한 도구
JDK : 자바 개발자를 대상으로 오라클에서 제공하는 도구
Facebook SDK
IOS SDK
PhysX : NVIDIA에서 제공하는 물리 엔진 미들웨어 도구
TIZEN : 휴대 전화를 비롯한 휴대용 장치를 주로 하며, TV, 냉장고와 같은 모든 전자기기에 포함을 목적으로 하는 오픈 소스 모바일 운영 체제이다. 삼성전자, 리눅스 재단, 리모 , 인텔이 공동 개발하였으며 개발을 위한 SDK를 제공한다.
Windows SDK : windows 앱 개발을 위한 SDK 제공
.NET Core SDK : 마이크로 소프트사에서 만든 SDK, .NET Core 애플리케이션과 라이브러리를 만드는데 사용
Source SDK : 소스 엔진 게임에서 콘텐츠를 만드는 데 사용되는 개발 키트

[Javascript] 1 Hello World! async & defer -IMBETPY

Fri, 24 Jul 2020 04:14:52 GMT

🎢 개발환경

editor : visual studio code
plugin : Live Server

🥊 Hello World

main.js

콘솔에 Hello World! 를 출력하는 스크립트를 작성한다.

console.log('Hello World!');

index.html

페이지를 작성하여 main.js 를 실행시키도록 한다.



    
        
        
        Document

작성된 코드를 실행시키기 위해서 Live Server 플러그인을 이용한다. 에디터에서 마우스 오른쪽만 클릭해도 바로 사용할 수 있다.
연결된 브라우저에서 개발자 툴 (F12) 을 실행하여 console 탭을 확인하면 Hello World 가 찍힌 것을 확인할 수 있다. ( node.js 에서는 js 파일의 실행결과를 바로 확인할 수 있는데 이는 node.js 와 web api 모두 console api 가 사용되고 있기 때문이다. )

Web api 는 Javascript 에 포함된 것이 아니라 브라우저에서 제공하는 함수이다. 이 함수들은 표준 페이지인 MDN 에서 모두 확인 할 수 있다.
브라우저의 개발 Tool(개발자도구) 을 활용하면 개발에 많은 도움이 된다.

🎐 async & defer

async & defer 는 HTML 에서 Javascript 파일을 주입할 때 어떤방식으로 주입하는가? 에 대한 설값들이다.

① Head 안에 설정없이 주입



    
        
        
        Document

위의 방식을 사용하면 사용자가 HTML 을 불러올 때 HEAD 부분에서 js 파일을 다운로드 받게 되고, HTML 파싱은 멈추게 된다.
결과적으로 HTML 요소들이 느리게 파싱되면서 사용자는 페이지가 느리게 뜨는 경험을 하게 된다.

② Body 끝에 설정없이 주입



    
        
        
        Document

위의 방식은 브라우저가 HTMl 을 모두 파싱하고, js 파일을 다운로드 하고 실행한다.
사용자가 페이지 컨텐츠를 빠르게 접하는 것은 장점이나, 웹사이트가 js 에 의존적이라면 (js 를 통해 데이터를 받거나, Dom 요소 조작) HTML 이 정상적으로 보이더라도 동작 하지 못할 수 있다.

③ async 속성 사용



    
        
        
        Document

위의 방식은 async 속성을 사용하는 것, 브라우저가 HTML 을 파싱하면서 js 를 병렬로 다운로드 받는다.
js 다운로드가 완료되면, HTML 파싱을 멈추고 js 를 실행한다.
js 가 html이 파싱되기 전에 실행되면 Dom 요소 조작하는 코드가 먹히지 않을 수 있다.
js 를 실행할 때 HTML 파싱이 멈추기 때문에 사용자가 컨텐츠를 보는 시간이 여전히 느려질 가능성이 있다.
다수의 스크립트를 다운로드 받게 되면, 먼저 받은 순서부터 실행된다. 정의된 순서에 의존적인 js 라면 문제가 생길 수 있다.

④ defer 속성 사용



    
        
        
        Document

위의 방식은 defer 속성을 사용하는 것, 브라우저가 HTML 을 파싱하면서 js 를 병렬로 다운로드 받는다.
async 방식과는 다르게 js 를 병렬로 다운로드 받고, HTML 파싱이 끝나면 js 가 실행하도록 한다.
defer 는 다수의 js 파일을 받아도 정의된 순서대로 실행되므로 효율적이고 안전하다.

🧨 use strict

type script 에서는 필요가 없지만 vanilla js 를 이용할 때는 사용하는 것이 좋다.
js 초창기에 너무 유연하게 만들어져서 위험성이 따랐다. (선언되지 않은 변수에 값 할당 / 프로토타입 변경 )
Ecma 5 에서 추가된 옵션으로 js 의 유연성을 막아준다.

참고📚

MDN

[HTML5] 7 레이아웃 Tag? 소개-IMBETPY

Wed, 15 Jul 2020 03:01:13 GMT

🎃 레이아웃 Tag

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다.
공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였다.
모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다.
div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다.

header 헤더를 의미한다
nav 내비게이션을 의미한다
aside 사이드에 위치하는 공간을 의미한다
section 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article 분문의 주내용이 들어가는 공간을 의미한다
footer 푸터를 의미한다

이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.
div 와span 의 차이는 block 레벨 요소와 inline 레벨 요소를 이해하여야 한다.
https://poiemaweb.com/css3-display#1-display-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0 를 참조하자.

참고📚

mozilla poiemaweb

[HTML5] 6 멀티미디어 & 폼 Tag? 소개-IMBETPY

Sat, 11 Jul 2020 13:04:37 GMT

🎨 이미지

웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.

src 이미지 파일 경로
alt
이미지 파일이 없을 경우 표시되는 문장
width 이미지의 너비 (CSS에서 지정하는 것이 일반적)
height 이미지의 높이 (CSS에서 지정하는 것이 일반적)

🥏 미디어

① audio

audio 태그 는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.

src
음악 파일 경로
preload 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay 음악 파일을 자동의 재생 개시할 것인지 지정
loop 음악을 반복할 것인지 지정
controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라 재생되지 않는 브라우저가 존재한다는 뜻이다.

source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.

② video

video 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.

src 동영상 파일 경로
poster 동영상 준비 중에 표시될 이미지 파일 경로
preload 재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay 동영상 파일을 자동의 재생 개시할 것인지 지정
loop 동영상을 반복할 것인지 지정
controls
동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width 동영상의 너비를 지정
height 동영상의 높이를 지정
audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있다. source 태그를 사용하여 형식 차이 문제를 해결한다. type 어트리뷰트는 생략 가능하다.

🥽 form Tag

form 태그 는 사용자가 입력한 데이터를 수집하기 위해 사용된다.
form 태그에는 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.

① form

  
      ID: 

      username:

action URL : 입력 데이터(form data)가 전송될 URL 지정
method
get / post : 입력 데이터(form data) 전달 방식 지정
GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라 한다

GET 방식 은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다. 예) http://naver.com/posts?userId=1&id=1 URL 뒤에 ‘?’를 통해 데이터의 시작을 알리고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다. URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).

POST 방식 은 Request Body에 담아 보내는 방식이다. 예) http://naver.com/posts URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.

② input

input 태그 는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다.
form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.


    button
    
    

    checkbox
     사과

     포도

     복숭아

    

    color
    
    

    date
    
    

    datetime
    
    

    datetime-local
    
    

    email
    
    

    file
    
    

    hidden
    
    // hidden filed는 사용자에 표시되지 않는다.
    

    image
    
    

    month
    
    

    number
    
    

    password
    
    

    radio
     남자

     여자

    

    range
    
    

    reset
    
    

    search
    
    

    submit
    
    

    tel
    
    

    text
    
    

    time
    
    

    url
    
    

    week

③ select

복수개의 리스트에서 복수개의 아이템을 선택 할 때 사용한다.
서버에 전송되는 데이터는 select 요소 의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.

select select form 생성
option option 생성
optgroup option을 그룹화한다

④ textarea

textarea 태그 는 여러 줄의 글자를 입력할 때 사용한다.

    Write something here

⑤ button

button 태그는 클릭할 수 있는 버튼을 생성한다.
과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다.
button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit를 지정할 수 있다.

input 태그는 어트리뷰트만을 받아들인다.
button 태그 는 문자열은 물론 HTML 요소를 받을 수도 있다는 장점이 있다. (주의할 것은 IE의 경우, submit되는 값이 다를 수 있는 것이다.)

위 예제의 경우, IE6, IE7에는 ‘foo’ 대신 ‘Click me’를 서버로 전송한다. 따라서 오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직하다.

⑥ fieldset / legend

fieldset 태그 는 관련된 입력 양식들을 그룹화할 때 사용한다.
legend 태그 는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.

  
        Login
        Username 
        Password

참고📚

mozilla poiemaweb

[HTML5] 5 List & Table Tag? 소개-IMBETPY

Sat, 11 Jul 2020 12:56:48 GMT

🧣 List

① 순서없는 목록 (Unordered List)

기본 순서없는 목록
```
    
    cat
    dog
    rabbit
    
```
② 순서있는 목록 (Ordered List)
기본 순서있는 목록
```
    
    cat
    dog
    rabbit
    
```
type 어트리뷰트 를 사용하여 순서를 나타내는 문자를 지정할 수 있다.

      
        cat
        dog
        rabbit

start 어트리뷰트 로 리스트의 시작값을 지정할 수 있다.

    
      cat
      dog
      rabbit

reversed 어트리뷰트 를 지정하면 리스트의 순서값을 역으로 표현한다.

      
        cat
        dog
        rabbit

③ 중첩 목록

목록을 중첩하여 사용할 수 있다.

중첩목록
  
    cat
    dog
      
        snoop dog
        crazy dog
      
    
    rabbit

🧮 Table

표(table) 를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.

table 표를 감싸는 태그
tr 표 내부의 행 (table row)
th
행 내부의 제목 셀 (table heading)
td 행 내부의 일반 셀 (table data)

테이블 태그의 어트리뷰트는 아래와 같다.

border 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.)
rowspan 해당 셀이 점유하는 행의 수 지정
colspan 해당 셀이 점유하는 열의 수 지정

2개의 culumn을 span
    
      
        Name
        Telephone
      
      
        최준영
        010 **** 8137
        010 **** 8137
      
    

    2개의 row를 span
    
      
        Name:
        최준영
      
      
        Telephone:
        010 **** 8137
      
      
        010 **** 8137

Name	Telephone
최준영	010 **** 8137	010 **** 8137

Name:	최준영
Telephone:	010 **** 8137
010 **** 8137

참고📚

mozilla poiemaweb

[HTML5] 4 Hyperlink Tag? 소개-IMBETPY

Thu, 09 Jul 2020 01:15:58 GMT

🧨 HyperText

HyperText 의 Hyper 는 텍스트 정보가 다중으로 연결되어 있는 상태를 의미한다.

HTML 의 특징인 link 개념과 연결되는데 문서의 선형성, 고정성에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있도록 한다.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크(hyper link)라 한다.

① a

HTML link는 hyperlink를 의미하며 a tag가 그 역할을 담당한다.

    Visit google.com!

🎁 href 어트리뷰트

href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다.
경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

① 디렉토리(Directory)

디렉토리 는 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더 라고도 불리운다.

루트 디렉터리 파일 시스템 계층 구조 상의 최상위 디렉터리이다.
Unix* : /
Windows* : C:\
홈 디렉터리 시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
Unix* : /Users/{계정명}
Windows* : C:\Users\{계정명}
작업 디렉터리 작업 중인 파일의 위치한 디렉터리이다.
공통* : ./
부모 디렉터리 작업 디렉터리의 부모 디렉토리이다.
공통* : ../

② 파일 경로(File path)

파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다.

절대경로(Absolute path) 현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다. http://www.HELLO.com/index.html /Users/HELLO/Desktop/myImage.jpg C:\users\HELLO\Desktop\myImage.jpg /index.html
상대경로(Relative path) 현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다. ./index.html ../dist/index.js ../../dist/index.js

③ href 어트리뷰트에 사용 가능한 값

절대 URL 웹사이트 URL (href=”http://www.example.com/default.html”)
상대 URL 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)
fragment identifier 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
메일 mailto:
script href=”javascript:alert(‘Hello’);”

    URL

    Local file

    Download file

    fragment identifier

    Send Mail

    Javascript

🧶 target 어트리뷰트

target 어트리뷰트 는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.

_self : 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값)
_blank : 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다

    Visit google.com!

참고📚

mozilla poiemaweb

0 개발자 자료 모음

Wed, 08 Jul 2020 08:42:24 GMT

[HTML5] 3 HTML Text Tag? 소개-IMBETPY

Tue, 07 Jul 2020 07:26:55 GMT

🎫 제목 (Headings) 태그

Heading태그 는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다.
h1 태그는 가장 크기가 크며, 제목을 나타낸다.
검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.



  
    heading 1
    heading 2
    heading 3
    heading 4
    heading 5
    heading 6

🀄 글자 형태 (Text Formatting) 태그

① b

bold체를 지정 한다.
제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.
```
  bold.
```


### ② strong
- b tag와 동일하게 **bold체를 지정** 한다. 
- 의미론적(Semantic) 중요성의 의미를 갖는다.
- 표현되는 외양은 b tag와 동일하지만 웹표준을 준수하고자 한다면 strong를 사용하는 것이 바람직하다.

strong.


### ③ i
- **Italic체를 지정** 한다. 
- 의미론적(Semantic) 중요성의 의미는 없다.

italic.



### ④ em
- **emphasized(강조, 중요한) text를 지정** 한다. 
- i tag와 동일하게 Italic체로 표현된다. 
- 의미론적(Semantic) 중요성의 의미를 갖는다.

emphasized.


### ⑤ small
- **small text를 지정** 한다.

HTML Small Formatting



### ⑥ mark
- **highlighted text를 지정**한다.

HTML Marked Formatting


### ⑦ del
- **deleted (removed) text를 지정**한다.

My name is junyeong hello.



### ⑧ ins
- **inserted (added) text를 지정** 한다.

My my name is junyeong.



### ⑨ sub / sup
- sub 태그는 subscripted(아래에 쓰인) text를 
- sup 태그는 superscripted(위에 쓰인) text를 지정한다.

hello_my world.

hello^my world.

```

🏮 본문 태그

① p

단락 (Paragraphs)을 지정한다.
```
  1단락.
  2단락.
```

② br

강제개행을 지정 한다.
br tag는 빈 요소(empty element)로 종료태그가 없다.
```
  hello
a
boy
```

- HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 
- 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다. 
- 연속적 공백을 삽입하는 방법은 ` ` 를 사용한다.

This is  a para    graph



### ③ pre
- 형식화된(preformatted) text를 지정한다. (코드를 삽입할 때 많이 사용)
- pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.

var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ , , ... , , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined


### ④ hr
- 수평줄을 삽입한다.


### ⑤ q
- 짧은 인용문(quotation)을 지정한다. 
- 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.

 Well done is better than well said. (Benjamin Franklin)


### ⑥ blockquote
- 긴 인용문 블록을 지정한다.
- 브라우저는 blockquote 요소를 들여쓰기한다. 
- css를 이용하여 다양한 style을 적용할 수 있다.

It is the working man who is the happy man. It is the idle man who is the miserable man. (Benjamin Franklin)

```

참고📚

mozilla poiemaweb

[HTML5] 2 Semantic Web? 소개-IMBETPY

Mon, 06 Jul 2020 03:04:54 GMT

🪁 Semantic Web 이란?

시맨틱웹(Semantic Web) 이란 웹에 존재하는 페이지들에 메타데이터를 부여하여, 전에는 잡다하게 늘어졌던 정보들에 의미 와 관련성을 갖게하는 개념이다.

검색엔진은 로봇(Robot) 프로그램을 이용해 매일 웹사이트 정보를 수집한다. 이를 크롤링이라고 하며 크롤러가 수행한다.
유저가 검색할 키워드를 예측하여 키워드에 대응하는 인덱스를 만들어 놓는다. 이를 인뎅싱이라 하며 검색엔진 인덱서가 수행한다.
인덱싱을 할 때 사용되는 정보는 HTML 코드에서 나오는 것이다. 때문에 HTML 코드에서 페이지의 의미를 드러내야 하는데, 이를 위해 사용하는 것이 시멘틱요소 이다.
예를들어 HTMl 에서 요소를 통해 제목, 링크 등 데이터가 가지는 의미가 무엇인지 태그를 통해서 드러내며, 이를통해 시멘틱 웹이 구현된다.

🎳 semantic & non-semantic 요소

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

① semantic 요소

form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

② non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

③ HTML5에서 등장한 시맨틱태그

header : 헤더를 의미한다
nav : 내비게이션을 의미한다
aside : 사이드에 위치하는 공간을 의미한다
section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article : 분문의 주내용이 들어가는 공간을 의미한다
footer : 푸터를 의미한다

참고📚

mozilla poiemaweb

[HTML5] 1 HTML? 소개 기본문법 기초태그-IMBETPY

Sat, 04 Jul 2020 05:27:15 GMT

🎈 HTML5 란 ?

HTML (HyperText Markup Language) 은 웹페이지에 정보를 나타내기 위한 문법이며, HTML 태그를 통해 정보를 구조화 한다.
HTML5 는 2014년 10월 확정된 웹 표준으로 아래와 같은 기능들이 추가되었다.
- 멀티미디어(Multimedia) : 플래시 같은 플러그인 없이도 비디오 및 오디오 기능을 자체적으로 지원
- 그래픽(Graphics & Effects) : SVG, 캔버스를 사용한 2차원 그래픽 / CSS3, WebGL을 사용한 3차원 그래픽을 지원
- 통신(Connectivity) : HTML은 단방향 통신만이 가능하였으나, HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능
- 디바이스 접근(Device acess) : 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
- 오프라인 및 저장소(Offline & Storage) : 오프라인 상태에서도 애플리케이션을 동작시킬 수 있으며, 이는 HTML5가 플랫폼으로서 사용될 수 있음을 의미한다.
- 시맨틱 태그(Semantics) : HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있으며, 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
- CSS3 : HTML5는 CSS3를 지원한다.
HTML document는 .html 확장자를 갖는 순수한 텍스트 파일이다.
따라서 메모장 등으로도 편집할 수 있으나 다양한 기능을 제공하는 editor 또는 IDE 를 사용하는 것이 일반적이다.
HTML5 문서는 반드시 으로 시작하여 문서 형식(document type)을 HTML5 로 지정한다.
실제적인 HTML document은 2행부터 시작되는데 과 사이에 기술한다.
와 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
웹브라우저에 출력되는 모든 요소는 와 사이에 위치한다.



  
    
    Hello World
  
  
    Hello World
    안녕하세요! HTML5

👓 HTML5 기본문법

① Element

HTML요소(Element) 는 시작태그(start tag) 와 종료태그(end tag) 또 태그 사이에 위치한 content 로 구성된다.

HTML document는 요소(Element)들의 집합으로 이루어진다.
태그는 대소문자를 구별하지 않으나 W3C: World Wide Web Consortium에서는 HTML4의 경우 소문자를 추천하고 있으므로 HTML5에서도 소문자를 사용하는 것이 일반적이다.

② Nested Element

요소는 다른 요소를 포함하면서 정보를 나타내는데, 이 때 요소의 관계를 부자관계 라고 하며, 요소의 중첩(Nested Element) 이라 한다.



  
  
  
    Hello
    world!

위의 코드를 보면 html 요소는 body 요소를 포함하고, body 요소는 h1 과 p 요소를 포함한다.

③ Empty Element

빈요소(Empty Element) 란 컨텐츠를 가질 수 없는 요소를 말한다. 빈요소는 컨텐츠가 없고, 어트리뷰트 만을 가질 수 있다.

빈 요소 중 대표적인 요소는 다음과 같다. ( br / hr / img / input / link / meta )

④ Attribute

어트리뷰트(Attribute) 란 요소의 성질을 정의하는 명세이다. 요소는 어트리뷰트를 가질 수 있고, 이는 추가정보(이미지경로, 이름) 를 표시한다.

예제 소스에서 어트리뷰트는 img 파일의 경로, 파일명, 이미지 너비, 높이 정보를 브라우저에 알린다.

⑤ Global Attribute

글로벌 어트리뷰트(Global Attribute) 는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 자주 사용되는 글로벌 어트리뷰트는 아래와 같다.

id : 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class : 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden : css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
style : 요소에 인라인 스타일을 지정한다.
tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title : 요소에 관한 제목을 지정한다.

⑥ Comments

주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.


요소는 화면에 표시 된다.

🎇 HTML5 기초태그

① 문서 형식 정의 Tag

문서 형식 정의 (Document Type Definition, DTD) 태그 는 출력할 페이지의 형식을 브라우저에 전하는 태그 이다. 문서의 최상위에 위치해야 하고, 대소문자를 구별하지 않는다.

HTML5

- **HTML 4.01**

- **XHTML 1.0**



## ② html Tag
- `html 태그` 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 는 예외이다. 
- html은 글로벌 어트리뷰트를 지원한다. 특히 lang 어트리뷰트를 사용하는 경우가 많은데, 영어를 주언언어로 사용하려면 `en` 을 지정하면 된다.

title content ```

③ head tag

head 요소 는 메타데이터를 포함하기 위한 요소이며 html 문서 내에서 단 하나만 존재한다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.

title tag

문서의 제목을 정의한다. 제목은 브라우저 탭에 표시된다.



  
    제목

style tag

HTML 문서를 위한 style 정보를 정의한다.



  
    제목

link tag

외부 리소스와의 연계 정보를 정의하며, 주로 HTML과 외부 CSS 파일을 연계에 사용된다



  
    제목

script tag

client-side JavaScript를 정의한다.

meta tag

description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.

④ body tag

문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 포함된다.

참고📚

mozilla poiemaweb

[Internet] 브라우저? 개념정리 동작원리-IMBETPY

Sat, 04 Jul 2020 05:20:24 GMT

🌌 브라우저?

web browser 또는 browser 는 웹 서버에서 이동하며, 쌍방향으로 통신하고, HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다.

🚩 브라우저의 핵심기능

브라우저의 주요 기능은 웹 자원을 브라우저 화면상에 표현해 주는 기능을 한다.
서버에 리소스를 요청하고 수신하는 과정을 수행한다.
HTML 과 CSS 에 따라 HTML 파일을 해석하여 표시하며, 이는 W3C 에서 정한다.

🌉 브라우저의 구조

① 사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

② 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

③ 렌더링 엔진

요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

④ 통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

⑤ UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

⑥ 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행.

⑦ 자료 저장소

이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

🚦 브라우저 동작과정

① HTML, CSS 처리 과정

HTML, CSS는 렌더링 엔진이 처리한다.

브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다.
렌더링 엔진을 통해 HTML, CSS 문서를 파싱하고, 내부에서 DOM, CSSOM 노드로 변환한다.
렌더 트리로 결합된다.
이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

일련의 과정들은 점진적으로 진행되며, 네트워크로 부터 내용이 전송되기를 기다리는 동시에 내용의 일부를 먼저 화면에 표시한다.

② 자바스크립트 처리 과정

자바스크립트는 자바스크립트 엔진이 처리한다.

HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.
제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 자바스크립트 파일을 로드하고 파싱하여 실행한다.
자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 실행한다.

③ script 태그위치

브라우저는 동기적(Synchronous)으로 HTML, CSS, Javascript 를 처리한다.
때문에 태그의 위치에 따라 DOM 생성에 지연을 불러올 수 있다.
script 태그는 보통 body 요소의 가장 아래에 위치시키며, 이렇게 해야 스크립트 로딩으로 인한 HTML 랜더링지연이나 에러가 발생하지 않는다.

_아쉬움

브라우저의 동작에 대해서 정말 간략하게 정리하였다. 세부적으로 살펴본다면 렌더링엔진의 동작과정이나 파싱과정들을 살펴보아야 한다. 하지만 지금은 대략적인 지식을 빠르게 정리하고자 하여 이부분은 기회나 필요가 주어질 때 다시한번 정리하고 싶다.

참고📚

naver d2 - 브라우저는 어떻게 동작하는가? 브라우저 동작 원리

[Internet] 호스팅? 개념정리-IMBETPY

Fri, 03 Jul 2020 00:27:38 GMT

🎈 사전지식

웹은 클라이언트 프로그램과 서버 프로그램을 통해서 작동한다.
유저가 웹페이지에서 명령을 내리면, 클라이언트 프로르갬이 서버 프로그램에 명령에 대한 값을 요청을 한다.
이 과정에서 서버컴퓨터는 데이터베이스에서 값을 찾아 클라이언트 컴퓨터에 전달하고, 클라이언트 컴퓨터는 이를 유저에게 보여준다.
여기서 핵심은 웹페이지 운영을 위해서 자료가 저장되는 공간인 서버가 꼭 필요하다는 것이다.

🛒 호스팅 이란?

호스팅 이란 서버의 전체 혹은 일부를 이용할 수 있도록 임대해 주는 서비스를 말한다.

서버를 관리하기 위해서는 24시간 내내 안정적으로 전기를 공급해야 하고, 빠르고 안정적인 인터넷 회선을 사용해야 하며, 철저한 보안 시스템을 갖추고 있어야 한다.
집에 이런 서버를 운영하려면... 벌써부터 머리가 아프다.
이런 이유로 개인이 서버를 직접관리 하기보다는 전문업체의 호스팅 서비스를 사용하는 경우가 많은 것.

🚄 호스팅의 종류

① 웹 호스팅

웹호스팅 이란 여러 고객이 하나의 서버를 함께 사용하는 형태이다.
하나의 서버를 나누어 쓰기 때문에 가격이 저렴하며, 호스팅 업체의 통합관리를 받기 때문에 편리하다.
하지만 사용할 수 있는 하드웨어가 제한적이라는 단점이 있다.

② 서버 호스팅

서버호스팅 은 고객이 단독 서버를 사용하는 형태이다.
넓은 하드웨어 공간을 사용할 수 있으며, 권한이 많고, 빠른 속도를 가질 수 있다.
하지만 단독으로 서버를 이용하는만큼 비용이 높다.

③ 클라우드 서버

클라우드서버 는 서버 호스팅을 가상화한 것으로, 가상 서버를 단독으로 사용할 수 있는 형태이다.
필요할 때마다 서버 자원을 늘리거나 축소하여 유연하게 서버를 이용할 수 있다.
하지만 하나의 가상 서버에 문제가 생기면 연결된 다른 가상 서버에도 문제가 생길 수 있다는 단점이 있다.
대표적으로 AWS 서비스가 있다.

참고📚

wishket - 호스팅이란 무엇일까?

[Internet] DNS? 작동원리-IMBETPY

Thu, 02 Jul 2020 04:35:38 GMT

📱 DNS 란?

도메인 네임 시스템 (Domain Name System, DNS) 은 호스트의 도메인네임 (www.example.com)을 네트워크주소(192.168.1.0)로 변환하거나, 그 반대의 역학을 수행하는 시스템이다.

DNS 시스템은 이름과 숫자 간의 매핑을 관리하여 마치 전화번호부와 같은 기능을 한다.
DNS 서버는 사용자가 도메인 이름을 브라우저에 입력하면, 사용자를 어떤 서버에 연결할 것인지 제어한다. 이러한 요청을 쿼리 라고 한다.

🎰 DNS 서비스 유형

① 신뢰할 수 있는 DNS

개발자가 퍼블릭 DNS 이름을 관리하는 데 사용하는 업데이트 메커니즘을 제공한다.
이를 통해 DNS 쿼리에 응답하여 도메인 이름을 IP 주소로 변환한다.
신뢰할 수 있는 DNS는 도메인에 대해 최종 권한이 있다.
재귀적 DNS 서버에 IP 주소 정보가 담긴 답을 제공할 책임이 있다.

② 재귀적 DNS

보통 클라이언트는 신뢰할 수 있는 DNS 서비스에 직접 쿼리를 수행하지 않는다.
해석기 또는 재귀적 DNS 서비스라고 알려진 다른 유형의 DNS 서비스에 연결하는 경우가 일반적이다.
재귀적 DNS 서비스 는 호텔 컨시어지와 같은 역할을 한다.
DNS 레코드를 소유하고 있지 않지만 사용자를 대신해서 DNS 정보를 가져올 수 있는 중간자의 역할을 한다.
일정 기간 동안 캐시된 또는 저장된 DNS 레퍼런스를 가지고 있는 경우, 소스 또는 IP 정보를 제공하여 DNS 쿼리에 답을 하거나, 해당 정보를 찾기 위해 쿼리를 하나 이상의 신뢰할 수 있는 DNS 서버에 전달한다.

🧨 DNS 기본 동작 설명

위의 그림과 같이 PC 브라우저에서 www.naver.com 을 입력한다. 그러면 PC는 미리 설정되어 있는 DNS (단말에 설정되어 있는 이 DNS를 Local DNS라 부름, 위에서는 203.248.252.2) 에게 "www.naver.com 이라는 hostname" 에 대한 IP 주소를 요청한다.
Local DNS 에는 "www.naver.com 의 IP 주소"가 있을 수도 없을 수도 있다. 만약 있다면 Local DNS 가 바로 PC에 IP 주소를 주고 끝난다. 하지만 본 설명에서는 Local DNS에 "www.naver.com 의 IP 주소"가 없다고 가정 한다.
Local DNS는 이제 "www.naver.com 의 IP 주소"를 찾아내기 위해 다른 DNS 서버들과 통신(DNS 메시지)을 시작한다. 먼저 Root DNS 서버에게 "www.naver.com 의 IP 주소"를 요청하며, 이를 위해 각 Local DNS 서버에는 Root DNS 서버의 정보 (IP 주소)가 미리 설정되어 있어야 한다. Root DNS 서버 는 전세계에 13대가 구축되어 있다. 미국에 10대, 일본/네덜란드/노르웨이에 각 1대씩이며, 우리나라의 경우 Root DNS 서버가 존재하지는 않지만 Root DNS 서버에 대한 미러 서버를 3대 운용하고 있다고 한다.
Root DNS 서버 는 "www.naver.com 의 IP 주소" 를 찾을 수 없어 Local DNS 서버에게 "www.naver.com 의 IP 주소 찾을 수 없음. 다른 DNS 서버에게 물어봐" 라고 응답을 한다.
이 다른 DNS 서버는 com 도메인 을 관리하는 DNS 서버이다.
이제 Local DNS 서버는 com 도메인을 관리하는 DNS 서버에 다시 www.naver.com에 대한 IP 주소를 요청한다.
com 도메인을 관리하는 DNS 서버에도 해당 정보가 없으면, Local DNS 서버에게 "www.naver.com 의 IP 주소 찾을 수 없음. 다른 DNS 서버에게 물어봐" 라고 응답을 합니다. 이 다른 DNS 서버는 naver.com 도메인을 관리하는 DNS 서버 이다.
이제 Local DNS 서버는 naver.com DNS 서버에게 다시 "www.naver.com 의 IP 주소" 를 요청한다.
naver.com DNS 서버 에는 "www.naver.com 의 IP 주소" 가 있다. 그래서 Local DNS 서버에게 "www.naver.com에 대한 IP 주소는 222.122.195.6" 라는 응답을 한다.
이를 수신한 Local DNS는 www.naver.com 의 IP 주소를 캐싱을 하고 이후 다른 요청이 있을시 응답할 수 있도록 IP 주소 정보를 단말(PC)에 전달해 줍니다.

Local DNS 서버가 여러 DNS 서버에 차례대로 (Root DNS 서버 -> com DNS 서버 -> naver.com DNS 서버) 요청하여 그 답을 찾는 과정을 Recursive Query 라고 부른다.

참고📚

위키백과 한량개발자 aws netmanias

안녕 내 블로그 목적

Wed, 01 Jul 2020 04:18:48 GMT

2018년 부터 개발, 분석 공부를 시작하면서 배운 지식들을 나름 깔끔히 정리했다.

잘 정리하고 있다고 생각했지만... 착각이었나보다 😅

다시 사용하려 검색하거나, 정돈된 글을 썼나? 하는 면에서 부족함을 느꼈다...

아무래도 혼자서 볼 글이라 생각하고 정리했던 점이 문제인 듯 하다.

Notion 을 개인적인 부분이나 자료정리에 열심히 사용하면서 Markdown 과 친해졌고,

많은 서비스들이 Markdown 을 기반으로 출몰하면서

이제는 Velog 와 개인블로그 Github 를 통해서 개인지식위키 를 구축하고자 한다!!!! 화이팅!@..@

목표는 사람들에게 유용한 무언가를 만들기 위한 공부! 이고, 그렇기 위해 팀원들과 일하며 배우고 성장하려 한다.

아직 부족한 것이 많지만,,, 한걸음 한걸음 가다보면 되겠지? 복잡한 생각은 접어두고 가자~~

일단 Back-end 개발자로서 아주 기초적인 부분부터 내 언어로 깔끔하게 정리 해 보자!

https://github.com/kamranahmedse/developer-roadmap 의 개발자 로드맵을 참고하여 순차적인 학습과 함께,

일이나 프로젝트에서 배우는 내용을 최대한 기록하도록 노력할 것 이다.

------------ ( 2020.07.02 최준영 작성 )

💻 Back-end Developer

🎨 Front-end Developer

♾ Devops

[Internet] Domain Name? 개념잡기-IMBETPY

Wed, 01 Jul 2020 04:10:29 GMT

🏡 도메인네임(Domain Name) 이란?

Domain Name 은 웹사이트의 주소, 즉 웹사이트를 찾기위한 고유한 문자형 주소체계 를 말한다.
https://www.naver.com , http 는 통신방식(규칙)_을 말하며 www 는 _호스트(host) 이며 naver.com 이 실제 도메인주소이다.
통신망 환경에서 컴퓨터나 통신장비간 통신에 최적화된 주소체계는 IP Adress 이다. 하지만 이는 숫자로 이루어져 사람이 기억하기 힘들다. 이런 단점을 보완해 등장한 것이 문자형주소체계인 Domain name 이다.
문자주소체계인 도메인주소는 상호맵핑되는 구조 를 가진다. (IP Adress ↔ Domain name )
도메인만 알면 자동으로 통신과정 중 IP 로 변환되어 컴퓨터간 통신할 수 있게 자동처리 해주는 서비스를 DNS(Domain Name Service) 라고한다.

📬도메인 체계

도메인은 . 또는 루트(root)라 불리는 도메인 이하에 위의 그림과 같이 역트리(Inverted tree)구조로 구성되어 있다.
루트 도메인 바로 아래의 단계를 1단계 도메인 또는 최상위 도메인(TLD, Top Level Domain)이라고 부르며, 그 다음 단계를 2단계 도메인(SLD, Second Level Domain)이라고 부른다.

🎈 도메인 종류

도메인에는 국가도메인(ccTLD, country code Top Level Domain) 과 일반도메인(gTLD, generic Top Level Domain) 이 있다.
국가도메인 은 인터넷 상에서 국가를 나타내는 도메인으로 ‘.kr(대한민국) .jp(일본), .cn(중국), .us(미국) 등 영문으로 구성된 영문 국가도메인이 있습니다. 또한 ‘.한국(대한민국)’, ‘중국(중국), .러시아(러시아), .이집트(이집트)처럼 자국어 국가도메인이 있다.
일반도메인 은 ‘.com(회사)’, ‘.net(네트워크 관련기관)’, ‘org(비영리기관)’, ‘.biz(사업)’ 등 등록인의 특성에 따라 사용할 수 있는 도메인이다.

① 국가 최상위 도메인 (ccTLD)

인터넷 상에서 국가를 나타내는 영문 및 자국어 도메인 (ccTLD, country code Top Level Domain)

2자리 영문 국가코드 또는 자국어 국가코드로 이뤄짐.
관리기관 : https://www.iana.org/domains/root/db

②일반 최상위 도메인 (gTLD)

조직, 목적, 분류 등 명칭을 영문약자로 표현한 최상위 도메인 (gTLD, genertic Top Level Domain)

영문은 3자리 이상, 영문 외 다국어는 2자리 이상으로 이뤄짐
관리기관 : https://xn--3e0bx5euxnjje69i70af08bea817g.xn--3e0b707e/jsp/popup/domainGTLD.jsp

참고📚

위키백과 mixedcode 한국인터넷정보센터