시리즈

FE개념정리

1.HTML과 HTML5

HTML(Hyper Text Markup Language, 하이퍼텍스트와 마크업 언어의 조합)은 World Wide Web의 기본 언어, 즉 웹 페이지 개발을 위한 기본 언어이다. HTML5는 HTML 표준의 5번째 업그레이드 버전이다. Multimedia suppor

2022년 10월 24일

2.TCP와 UDP 간략비교

TCP와 UDP는 데이터를 전송할 때 사용하는 프로토콜. TCP는 연결 지향 프로토콜이다. 여기서, 연결 지향이란 통신을 맺고 끊는 과정에서 클라이언트와 서버 간 확인 절차를 거치는 걸 의미한다. 데이터를 전송하기 전 연결을 확인하고, 데이터를 전송한 후에 연결을 끊어

2022년 10월 27일

3.Packet / Fragment / Frame / Datagram / Segment

인터넷과 같은 컴퓨터 네트워크를 통해 전송된 데이터는 packet으로 쪼개진다(보통 packet은 byte 단위이다). 그리고 이 쪼개진 packet은 수신하는 컴퓨터 혹은 장치에서 다시 재결합된다. cf) 네트워크란 2대 이상의 컴퓨터가 연결된 그룹을 말하며, 인터넷

2022년 11월 3일

4.Session와 Cookie

웹사이트의 다양한 페이지에서 활용될 수 있도록 서버에서 일시적으로 정보를 저장한다. 유저 세션은 유저가 특정 네트워크 어플리케이션에 로그인할 때 시작되고 사용자가 프로그램에서 로그아웃하거나 시스템을 종료될 때 끝난다. 세션 값은 binary or encrypted 형태

2022년 11월 4일

5.IIFE

즉시 호출 함수 표현식.함수 선언(Function Declaration)과 함수 표현(Function Expression)의 차이는? 함수 선언은 중복될 수 있다는 문제점이 있다. 마지막에 만든 함수가 적용된다는 것. 즉, 호이스팅 문제. 반면 함수 선언문보다 안전한

2022년 11월 8일

6.Framework와 Library

개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 혹은 뼈대를 의미한다. 어플리케이션 개발 시 필수적인 코드, 알고리즘 DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 프로그래머(사용자)가 코드를 작성해 어플리케이션을

2022년 11월 8일

7.브라우저 저장소 (cookie, webStorage)

때때로 웹사이트 내 다른 페이지에서 사용할 수 있도록 client side에 정보를 저장해야 하는 경우가 있다. javascript를 사용해서 client side에 정보를 저장하는 방법으로 2가지를 떠올릴 수 있다. 즉, "Cookie"와 "webStorage(loc

2022년 11월 9일

8.JS 비동기&동기 처리 (+callBack 함수& Promise & async/await 문법 )

자바스크립트는 브라우저 환경이 아니더라도 사용이 가능하지만 기본적으로 웹 페이지용 스크립트 언어이다. 그리고 일종의 lightweight, interpreted, object-oriented programming language이다. 자바스크립트는 항상 동기식(sync

2022년 11월 10일

9.ajax, axios, fetch

AJAX : Asynchronous JavaScript And XML의 약자간단히 말해서 서버와 통신하기 위해 XMLHttpRequest(XHR) 객체를 사용하는 것을 말한다. AJAX의 가장 매력적인 특징은 '비동기(asynchronous)' 특성이다. 페이지를 새로

2022년 11월 14일

10.OOP (TypeScript/JavaScript)

Object-oriented programming (OOP)객체지향 프로그래밍은 많은 프로그래밍 언어의 기본이 되는 프로그래밍 설계 패러다임(혹은 패턴) 중 하나이다. 주요 개념은 아래와 같다. ObjectClasses and instances 상속(Inheritanc

2022년 11월 15일

11.브라우저 동작 과정

사용자가 주소창에 특정 웹 페이지 주소를 입력하면, 브라우저는 DNS 서버에 도메인 이름을 검색하기 전에 캐싱된 DNS 기록을 확인한다. 캐싱된 IP 주소가 있다면 바로 반환하고, 없다면 DNS 서버에 IP 주소를 요청한다.

2022년 11월 17일

12.Web Worker API

자바스크립트는 항상 단일 스레드(Single Thread)로 동작한다. 예를 들어 HTML 페이지에서 스크립트를 실행할 때 스크립트가 완료될 때까지 기다려야 한다. 심지어 `setTimeout`, `setInterval`, 그리고 `ajax callbacks`들조차도

2022년 11월 18일

13.this와 binding (in JS)

this 키워드는 자바스크릡트 function과 밀접한 관련을 갖는다. this와 관련해 중요한 건, 함수가 호출되는 위치를 이해하는 것이다. 자바스크립트에서, Lexical Environment란 코드가 물리적으로 작성되는 곳을 말한다. 아래 코드예제에서 변수 nam

2022년 11월 21일

14.디버깅 (Chrome / VSCode)

개발자 도구에서 Sources 패널 열기 (맥북 단축키 cmd+option+i) 스크립트 코드에서 간단한 코드(a+b)를 작성하고, 개발자 도구 어디서든 esc를 누르면 아래쪽에서 콘솔화면이 등장한다. 디버깅을 하기 위해서, 프로그램 중 어디에서 일시정지를 할 것인지를

2022년 11월 22일

15.Execution Context

자바스크립트에서, Lexical Environment란 코드가 물리적으로 작성되는 곳을 말한다.아래 코드예제에서 변수 name은 함수 sayName() 내부에 lexically하게 존재한다.Execution Context 는 현재 실행 중인 코드와 이를 실행하는 데 도

2022년 11월 24일

16.HTTP 맛보기

HTTP(HyperText Transfer Protocol)는 TCP/IP 모델의 응용 계층에서의 다양한 프로토콜 중 하나이다. HTTP는 TCP 기반으로 만들어진 프로토콜인 것이다.

2022년 12월 3일

17.HTTP와 HTTPS 비교

웹을 통해 하이퍼텍스트를 전송하는 데 사용되는 프로토콜. 웹을 통한 데이터 전송에 널리 사용되는 프로토콜(데이터 요청과 응답에 사용되는 프로토콜)이지만, 안전하지 않다. 암호화되지 않은 평문 데이터(plain text)를 전송하므로, 브라우저와 서버 사이 오고 가는 데

2022년 10월 29일

18.HTTP/0.9, HTTP/1.0, HTTP/1.1, HTTP/2

HTTP의 초기 버전. 요청을 단일 라인으로 구성되며 리소스에 대한 경로로 가능한 메서드는 GET이 유일했다. 응답도 매우 단순했다. 헤더가 없으므로 HTML 문서만 전송할 수 있었다. 상태/오류 코드도 없어서 오류 발생시 문서 내에 오류 내용을 추가해 전송하는 방식이

2022년 11월 23일

19.REST API

REST는 protocol이나 standard가 아니라 a set of architectural constraints이다. REST는 REpresentational State Transfer의 약자로, 자원의 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주

2022년 10월 31일

20.Proxy와 VPN

proxy는 '대리'라는 뜻을 갖고 있다. 클라이언트가 프록시를 거쳐 다른 네트워크에 접속할 수 있도록 중간에서 대리 역할을 하는 서버를 말한다. 즉, 웹에서 클라이언트를 대신해서 데이터를 가져오는 서버. 프록시 서버의 기본 목적은 인터넷 클라이언트와 인터넷 리소스의

2022년 11월 1일

21.DNS

DNS는 IP 주소 변환 서비스의 hostname이다. DNS는 name 서버의 계층 구조로 구현된 분산 데이터베이스이다. 클라이언트와 서버 간 메시지 교환을 위한 응용 프로그램 계층 프로토콜이다. 모든 host는 IP 주소로 식별되지만 사람들이 숫자를 일일이 기억하는

2022년 11월 2일

22.Reflow와 Repaint (+ 브라우저 렌더링 과정 요약)

브라우저가 렌더링하는 방법은 다음과 같다. 사용자가 URL을 입력하자마자, 브라우저는 서버에서 HTML 소스코드를 가져온(fetchs) 다음 해당 HTML을 구문 분석하여(parses) <head>, <body>, <div>와 같은 토큰(tokens)으

2022년 12월 3일

23.베지어곡선 / 애니메이션(CSS/JS)

베지어 곡선(Bezier Curve)은 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선이다. CSS 애니메이션 등에서 도형을 그릴 때 사용한다. 베지어 곡선은 n개의 점으로부터 얻어지는 n-1차 곡선이다. 베지어 곡선은 조절점(control point)을 사용해 정의한

2022년 12월 5일

24.SGML, XML, XHTML // DTD // MIME TYPE(Content-Type) // standards mode와 quirks mode

XML, XHTML

2022년 12월 7일

25.setTimeout()과 requestAnimationFrame()

setTimeout() 메서드는 타이머를 설정한다. 지정한 시간 이후에 함수나 특정 코드가 실행된다. 보안에 취약하기에 code는 사용하지 않고 function을 사용한다. 뒤에 붙는 delay나 param들은 생략이 가능하다. param은 함수에 전달할 추가 매개변수

2022년 12월 8일

26.자바스크립트 동작 원리와 event loop // blocking과 non-blocking 차이

브라우저 측 자바스크립트의 실행 흐름은 Node.js와 마찬가지로 이벤트 루프에 기반한다. 이벤트 루프(event loop)는 태스크(task)가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우 잠드는, 끊임없이 돌아가는 자바스크립트 내

2022년 12월 12일

27.이벤트 버블링, 캡처링, 위임

한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 올라가며 각 요소에 할당된 핸들러가 동작한다. 모든 이벤트가 버블링되는 건 아니다. focus와 같이 버블링되지 않는 이

2022년 12월 16일

28.자바스크립트 문서 조작

자바스크립트는 원래 웹 브라우저에서 사용하려고 만든 언어이다. 자바스크립트가 돌아가는 플랫폼은 호스트(host)라고 불리며, 각 플랫폼들은 각각의 호스트 환경(host environment)을 갖는다. 호스트 환경은 플랫폼에 특정되는 객체와 함수를 제공한다. 웹브라우저

2022년 12월 17일

29.Iterator와 Generator

UI에 데이터를 바인딩하기 위해서는 반복(Iterate)이 필요하다. 자바스크립트는 collection에 대한 iterating하는 다양한 방법(간단한 for loops부터, map(), filter() 등등.)을 제공한다. 이때 Iterators와 Generators

2022년 12월 19일

30.Image Sprite

이미지 스프라이트(Image Sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 방식이다. 웹 페이지에서 이미지가 사용될 경우, 해당 이미지를 다운로드 받기 위해 웹 브라우저는 서버에 이미지를 요청한다. 사용되는 이미지가 많으면 많을 수록 그 수만큼 웹

2023년 1월 8일