오랜만에 다시 보는 프론트엔드 로드맵 - Javascript 까지 [로드맵에서 ++추가적인 것들]

이미지는 오키에서 따왔다. [최하단 참고]

웹 동작 원리

솔직히 TCP/IP 니 백날 아무리 이론으로 봐도 눈에 안보이니 모르겠고 그냥 그런 규약있는데, 2개의 프로토콜로 이루어져있고 IP프로토콜 위에 TCP 프로토콜 놓여져있는데 전송 통신 규약인거 둘째치고 어쨋든 인터넷 연결하고 cmd에 ipconfig 치면 나온다. 뭐 인터넷 규약 위에 전송규약 있는격이고 당연한 원리다.

신입일 때 티스토리에 썼었지만 다시 정리하자면 모든 것들은 보내는 시작점이 있고 그걸 우편함에 넣는 거리가 존재하고 그 존재를 연결하고 우편통에 넣으면 그걸 배달국에서 배달받고 다시 받는사람에게 전달하게 된다. (IP = 받는 사람의 배달지, TCP = 배달부의 이동방법 정도로 보면 된다.)

어쩃든 랜 꼽고 브라우저 키면 브라우저에서 웹서버 쌍뱡향으로 연동해서 보면 인터넷이 된다.

HTTP란?

Hyper Text Transer Protocol 이다.
월드 와이드 웹의 토대이며 하이퍼텍스트 링크를 사용하여 웹페이지를 로딩하는데 사용되는 통신 규약이다.

브라우저는 어떻게 동작하는가?

브라우저 키면 위에서 말했다 웹 서버 연동되서
시피 쌍방향 통신으로 연동된다.

D2에서 찾아봤는데 막 당연한 말 길게 써져있다. 아마 현업에서 소통할 때 편리하게 하기 위해서 단어를 갖다 붙인 것 같다.

DOM 트리 구축 위한 HTMl 파싱 => 렌더 트리 구축 => 렌더 트리 배치 => 렌더 트리 그리기

어쨋든 데이터가 원래 파싱하고 뭐 메모리 스택에 쌓던가 그런식으로 한 다음 데이터가 배치되고 보여지지 않나 싶다.
근데 우리나라에선 보여지기식이 중요하니까 아는척이 더 중요한 것 같다.

DNS서버는 어떻게 작동하는가?

Browser가 DNS 에게 실제 도메인 주소를 요청하고 가장 깊게 들어가있(DNS Root)는 DNS에 전송한다. 그 DNS는 LOCAL DNS에게 DNS 서버를 요청하고 이걸 다시 .com 도메인 서버에 전송한다. 그러면 이걸 다시 DNS 에 보내고 이걸 LOCAL DNS에 다시 반환하여 브라우저에 표시한다.

도메인 네임이란?

인터넷의 실제 IP주소와 연결된 기억하기 쉬운 이름
https://www.naver.com 에 naver.com 을 의미한다.

호스팅이란?

어떠한 서비스를 빌려서 사용하는 것
예를들면 워드프레스 호스팅 서비스

HTML

Hyper Text Markup Language
페이지간에 링크되는 문구들을 Markup 하는 언어

Scope Chain

Block 범위 내부에 있는 요소를 동작 시키는 행위를 의미한다.
이렇게 하면 함수 내부 블록 속성의 요소를 동작시킬 수 있다.

var nums = 5;
function App(a){
  function HelloWlrd(){
    let a = 2
  	return a + nums
  }
  return HelloWorld();
}
const gg = App();
gg();

Class형 Component와 Function형 Component

컴포넌트화 시키는 방법은 두 가지 종류가 존재한다.
하나는 Class형 Component와 Function형 Component가 존재한다.
하지만 리액트에서도 class component 가 없어지는 추세이고 Vue도 3으로 업뎃되면서
class-component 라이브러리 지원을 안하고 있기 때매 라이브러리나 프레임워크를 사용할때는 굳이(?) 쓸 필요 없을 것 같다. ㅠ

// class 생성
class Polygon {
  // 생성자 함수
  constructor() {
    // class내부에서 데ㅣㅇ터를 생성할때는 this를 이용하여 생성한다. name 생성
    this.name = 'Polygon';
  }
}
// poly1 에 Polygog() 함수를 new를 통해 새로 생성한다.
const poly1 = new Polygon();
// poly1 안에 내부 name 객체를 받아온다.
console.log(poly1.name);
// Expected output: "Polygon"
}

// Function 생성
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 끝에 ;(세미콜론)을 붙이지 않습니다.

Form and Validation

무슨 뜻인지 잘 몰라서 그냥 구글링해봤는데 그냥 Form 에있는 걸 검증하는 역할을 의미하나보다. 예를 들면 Form은 내부에 있는 input이나 button에 관여한다.
input type에 대한 유효성 검사 이런것들의 검증을 의미한다.

스켈레톤 UI

로딩화면 구축하는 UI 이다.

변환 그리고 가장 최고의 연습?

가작 최적화된 HTML의 표준을 의미하는건가 싶다.

접근성

브라우저가 키보드들로 element들을 조작할 수 있도록 한다.
캡 키를 눌러 하나의 버튼을 skip하고 다음 button으로 이동하는 등에 대한 접근성을 의미한다. 혹은 div를 통해 버튼을 조작하게 할 수 있는 기능들을 구현할 수 있는데 이런 것들은 권장하지 않는다.
이렇게 사용할 경우 기본적인 button element가 갖고 있는 css요소와 각 tab을 이용한 접근성 등을 잃어버리기 때문이다. 이렇게 되면 우리가 직접 css요소와 tab 버튼에 관련된 기능들을 직접 구현해야한다.

SEO Basics

SEO는 검색 엔진 최적화를 의미한다. 검색 트래픽을 늘리는 과정이며 검색엔진의 유기적 결과에서 더 높은 순위를 차지하고 표시하는데 도움이 되는 작업을 수행한다. 키워드 연구나 콘텐츠 제작, 페이지 내 SEO, 링크 빌딩, 검색 엔진이 콘텐츠를 효율적으로 찾거나 크롤링하고 색인을 생성하도록 돕는다.

HTML의 기본

가장 기본적인 것들을 학습하면 좋을 것 같다.
여기저기 정보는 많다 .

레이아웃 제작

css속성에 여러 배열을 조작하는 구조를 갖고있다.
하단의 이미지에서 보면 나오지만 float, position, display,. box model, css grid, flex box 등이 있다.

Javascript

Javascript 문법 생성

여러가지 자바 스크립트 문법이 존재한다. class를 작성하고 constructor() 로 생성자 함수를 호출한다거나, 혹여나 모듈화 시키는 언어를 이용하여 외부로 노출시키는 코드를 작성할 수 있다.
혹은 원시타입의 객체, 원시 값을 갖고 있는 객체 등 여러가지 조합을 갖고 사용할 수 있다.

반응하는 디자인과 미디어 쿼리

css속성 뿐 아니라 Javascript를 통해 화면단의 스타일 속성을 컨트롤 할 수 있다. css보다 동적으로

DOM 조작

아래와 같은 방법으로 DOM에 접근할 수 있다.

const ele = document.body.children[1];
children.parentElement;

여기에서 더해 craeteElement, querySelector, textConent, classList 등과 같은 여러 방법을 이용해 dom을 조작할 수 있다.

Fetch API, AJAX

AJAX는 기존에 정리해놓은 내용이 있는데 api통신을 하기 위한 방법 중 일부이다. Fetch API는 ES6이후 생긴 백엔드와 API통신을 위한 API이며 ES6이후 생긴 Promise를 반환하는 구조로 되어있다.

ES6 and modular Javascript

ES6는 Javascript의 꽤 많은 변화가 이루어진 시점이다.
Javascript moudle에 관한 것들 또한 알아두면 어떤 라이브러리와
어떤 프레임워크가 어떤 구조로 차이점이 있는지 알 수있다.

https://velog.io/@canyon920/ES6-%EC%97%90-%EB%94%B0%EB%A5%B8-Javascript%EC%9D%98-%EB%B3%80%ED%99%94

테스트 주도 개발 TDD(Test Driven Development)

디자인 => 테스트 코드 작성 => 설계 디자인 수정 => 디자인 => 테스트 코드 작성
에자일 패턴으로 어떠한 환경에서 갑자기 디자인이 변경되거나 할 때 사용되는 개발 방법론

테스트 주도 개발 TDD(Test Driven Development)

디자인 => 테스트 코드 작성 => 설계 디자인 수정 => 디자인 => 테스트 코드 작성
에자일 패턴으로 어떠한 환경에서 갑자기 디자인이 변경되거나 할 때 사용되는 개발 방법론

Static Site Generator

SSG 라고 부르며 정적인 HTML, CSS, Javacsript를 생성(Geneartor)하는 것을 의미한다.
Jekyll이나 nextjs 와 같은 프레임워크가 존재한다.

Flex : Grid

flex 는 1차원 배열 요소 안에서 여러 Content에 대한 공간을 조절할 수 있으며
Grid는 여러 Gird를 세분화해서 조절할 수 있다.

Flux : MVVM(Model View ViewMOdel)

Flux는 사전적인 의미로 선속이라는 의미를 지녔다. Model View ViewModel은
데이터의 흐름이 직접적으로 템플릿 혹은 모듈 내부에서 이루어지지만 Flux의 경우
어떠한 데이터를 관리하는 특정 저장소에서 어떠한 데이터를 담고 특정 이벤트를 행동시키거나 변화시키는 것을 의미한다.

비동기 함수

일반적인 Javascript의 동작원리는 코드를 읽어내리며 메모리 스택에 쌓고 힙이 동작하는데 이러한 이유는 싱글 쓰레이드 이기 때문이다. 하지만 이러한 Javascript에서 멀티 스레드를 흉내낼 수 있는 코두가 있는데 그걸 비동기 함수라고 부른다.

이러한 비동기 함수에서 주이해야할 점은 어떠한 특정 이벤트를 button을 통해서 구현해 내었을 때 그 함수가 실행되는 시점에 비동기 함수가 실행이 되는데, 이 비동기 함수는 런타임 환경에서 실시간으로 실행이 되는 코드 이기 때문에, 이러한 이벤트가 동작이 되는 과정에 계속해서 버튼으로 실행 시킨 함수가 계속해서 구현이 될 수 있기 때문에 비동기 함수의 중복 코드 구현에 대해 주의해야 한다.

호이스팅과, 이벤트 버블링, 스코프, 프로토타입, shadow DOM, strict

호이스팅이란 기존에 var에 값을 선언하기 전에 미리 할당하는 것을 의미한다. 전역 변수이며, 잘못사용할 시 TDZ오류를 범한다.

버블링
거의 모든 이벤트는 버블링 된다.

focus 이벤트와 같이 버블링 되지 않는 이벤트도 존재하지만 거의 모든 이벤트는 버블링에 포함된다.

event.target과 this(event.currentTarget)의 차이점은

• event.target은 실제 이벤트가 시작된 타깃의 요소이며 버블링 되도 변하지 않는다.

• this는 현재 요소로 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

아래 코드를 살펴볼 경우 form.onclick 은 하나밖에 없고 이 핸들러에서 폼 안의 모든 요소에서 발생하는 클릭 이벤트를 잡아내고 클릭 이벤트가 어디서 발생했ㄷ느 상관없이 form 요소까지 이벤트가 버블링되어 핸들링 시키기 때문이다.

즉 정리하면
this(event.currentTarget) 은 form 요소에 있는 핸들러가 동작했기 때문에 form 요소를 가리킨다.

event.target 폼 안쪽에 실제 클릭한 요소를 가리킨다.

하지만 form 요소를 정확히 클릭했을 때는 event.target 과 this가 같다.

form.onclick = function(event) {
  event.target.style.backgroundColor = 'yellow';

  // chrome needs some time to paint yellow
  setTimeout(() => {
    alert("target = " + event.target.tagName + ", this=" + this.tagName);
    event.target.style.backgroundColor = ''
  }, 0);
};

버블링 중단하기

이벤트 버블링 타깃 이벤트에 시작해서 html 요소를 거쳐 document 객체를 만날 때 까지 각 노드에서 모두 발생한다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다. 이 때도 모든 핸들러가 호출된다.

이벤트 객체의 메서드인 event.stopPropagation()을 사용하면된다.

```js 
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>

event.stopImmediatePropagation()
한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.

event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못한다.

버블링을 멈추고 요소에 할당된 다른 핸들러에 동작도 막으려면
event.stopImmediatePropagation() 을 사용하면 된다.
이 메서드는 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.

Scope는 블록 범위 내에 있는 소스 코드, 즉 그밖에 파일에서 컴파일을 하더라도 Scope 영역은 외부로 노출되거나 영향을 주지 않는다.

Prototype은 Javascript가 의지하는 기반의 언어이다.
모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로서 프로토타입 객체를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지다. 이를 프로토타입 체인이라 부르며 다른 객체에 정의된 메소드와 속성을 한객체에서 사용할수있도록 하는 근간이다.

Shadowm DOM은 숨겨진 DOM을 의미한다. Javascript로 만든 코드로 client로 부터 직접적으로 노출되지 않는다.

strcit 는 "use strict"를 strict를 적용하고 싶은 코드 위에 기재 으로써 적용할 수 있다. 전체 스크립트 또는 부분 함수에 적용이 가능하며, {}로 묶여진 블럭문에는 적용이 되지 않는다. 컨텍스트와 같은 곳에 적용을 시도해도 동작하지 안흔다. eval코드 Function코드, 이벤트 핸들러 속성, windowTimers.setTimeout() 과 연관된 함수들에 전달된 문자열이 전체 스크립트이며 여기에서 엄격모드가 예상대로 동작한다.

특정 라이브러리에서 사용하는 Component 모듈화 또한 strict 코드에 속한다. 모든 브라우저에서는 엄격모드를 지원하지 않지만 우리는 바벨이라는 것을 사용해서 구 버전과 최신버전 구분하지 않고 라이브러리나 프레임워크를 사용할 경우 문제 없이 stricit 모드가 적용된 웹 사이트를 탐험할 수 있다.

도움이 되셨다면 좋아요 눌러주세욥