자바스크립트 엔진의 최적화 기법
JavaScript는 인터프리터 언어로 알려져있습니다. 최근 대부분의 모던 자바스크립트 엔진(크롬의 V8, 마이크로 소프트 엣지의 ChaKra 등)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결하였습니다. 이러한 방식을 Adaptive JIT Compilation 이라고 하는데, 이러한 엔진을 사용하게 된 흐름을 이해하려면 컴파일러, 인터프리터 , JITC 에 대해 알 필요가 있습니다. 컴파일러특징코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드(CPU가 바로 실행할 수 있는 기계어)로 변환한 후 실행합니다.실행 파일을 생성합니다.컴파일 단계와 실행 단계가 분리되어 있습니다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행합..
[카테캠 1주차] 웹에서 시작하기 / HTML 개요 / HTML 핵심 정리
브라우저 스타일 초기화왜 브라우저 스타일을 초기화 해야할까요? 브라우저 마다 기본 css가 달리 적용되어 있기 때문에 모두 리셋을 해주는 편이 후에 크로스 브라우징 개발에 유리합니다. 파일명.min.확장자와 같이 min 키워드는 파일이 난독화나 경량화 되었다는 것을 의미합니다. 우리가 외부에서 가져와 사용하는 플러그인, 라이브러리등은 직접 수정할 상황이 드물기 때문에 굳이 원본을 사용할 필요가 없습니다. Emmetdiv 작성하고 Tab 누르면 Emmet 을 사용할 수 있습니다. 나 왜 안쓰고 있었지? Emotion 써서 그런가. 알아두면 좋을 듯하다. HTML 기본 용어 Contents
[카테캠 1주차] VSC 단축키 / 무작정 시작하기
Visual Studio Code 단축키 바꾸기(대체): Cmd + Alt + F 한줄 복사 : Alt + Shift + Up / Down 탭 이동 : Cmd + Shift + [ or ] 편집기 분할 : Cmd + \ 분할 화면 이동: Cmd + 1 (첫번째 분할 화면으로) DOCTYPE 이란? 문서의 HTML 버전을 지정합니다. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도입니다. HTML, HEAD, BODY 문서의 전체 범위를 의미합니다. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 합니다. 문서의 정보를 나타내는 범위..
리틀 엔디안(Little-endian) 과 빅 엔디안(Big-endian) 이란?
바이트 저장 순서 컴퓨터는 데이터를 메모리에 저장할 때 Byte 단위로 나누어 저장합니다. 따라서 연속되는 바이트를 순서대로 저장해야 하는데, 이것을 바이트 저장 순서(Byte Order)라고 합니다. 이때 바이트가 저장된 순서에 따라 빅 엔디안, 리틀 엔디안 두가지 방식으로 나눌 수 있습니다. 빅 엔디안(Big-endian) 빅 엔디안 방식은 낮은 주소에 데이터의 높은 바이트(MSB : Most Significant Byte)부터 저장하는 방식입니다. 이 방식은 평소 사람이 사용하는 선형 방식과 같아 메모리에 저장된 순서 그대로 읽을 수 있으며, 이해하기 쉽습니다. 예를 들어, 아래와 같이 저장할 32bit 크기의 정수가 있을 때, 빅엔디안은 다음과 같이 저장합니다. 0x12345678 리틀 엔디안(L..
유니코드란 무엇일까? (UTF-8과 EUC-KR 비교)
https://norux.me/31 유니코드란 무엇일까? (UTF8과 EUC-KR 비교) 유니코드란 무엇일까? (UTF8과 EUC-KR 비교) 유니코드는 다국어를 지원하는 프로그래밍을 하다보면 가장 먼저 접하는 어려움이다. 일단 유니코드라는 용어의 개념부터 정리해보도록 하자. 조금 공 norux.me 위 글을 읽고 공부한 내용입니다. 유니코드란? 숫자와 글자, 즉 키와 값이 1:1 로 매핑된 형태의 코드입니다. 다시말하자면, 아스키코드로 0x41 = A 로 매핑된 것 처럼, 아스키코드로 표현할 수 없는 문자들을 유니코드라는 이름 아래 전 세계의 모든 문자를 특정 숫자(키)와 1:1 로 매핑한 것입니다. 유니코드 블록 U+ 라는 접두어가 붙어있으면 유니코드 라는 의미입니다. 아스키코드의 0x41은 대문자 ..
저장형(Stored) XSS(Cross-Site Scripting) 공격과 방어
XSS (Cross-Site Scripting) 이란? 가장 널리 알려진 웹 보안 취약점 중 하나입니다. 악의적인 사용자가 공격하려는 사이트에 악성 스크립트를 삽입할 수 있는 보안 취약점입니다. XSS를 통해 악성 코드를 제어하는 사이트로 리다이렉트 하거나, 사용자의 쿠키를 탈취하여 세션 하이재킹 공격을 할 수 있습니다. 대표적인 공격 방식은 다음과 같습니다. Stored XSS Reflected XSS DOM Based XSS Stored XSS 저장형 XSS 공격은 보안이 취약한 서버에 악의적인 사용자가 악성 스크립트를 저장함으로써 발생합니다. 비정상적인 방법이 아니라 서버에서 제공하는 게시판, 사용자 프로필에 악의적으로 동작하는 스크립트가 그대로 저장된 후 클라이언트의 브라우저로 전달되어 문제가 발..
반사형(Reflected) XSS(Cross-Site Scripting) 공격과 방어
XSS (Cross-Site Scripting) 이란? 가장 널리 알려진 웹 보안 취약점 중 하나입니다. 악의적인 사용자가 공격하려는 사이트에 악성 스크립트를 삽입할 수 있는 보안 취약점입니다. XSS를 통해 악성 코드를 제어하는 사이트로 리다이렉트 하거나, 사용자의 쿠키를 탈취하여 세션 하이재킹 공격을 할 수 있습니다. 대표적인 공격 방식은 다음과 같습니다. Stored XSS Reflected XSS DOM Based XSS Reflected XSS 악의적인 사용자가 악성 스크립트가 담긴 URL을 만들어 일반 사용자에게 전달하는 경우입니다. 악의적인 사용자는 URL 주소 뒤에 붙은 쿼리에 악성 스크립트를 작성하여 전달합니다. 후에 공부할 Stored XSS 는 데이터베이스에 스크립트가 저장되었지만,..
토큰을 어디에 저장해야할까요?
https://tecoble.techcourse.co.kr/post/2020-08-31-where_to_store_token/ 토큰을 어디에 저장할까? … tecoble.techcourse.co.kr 위 글을 공부한 내용입니다. 웹 서비스를 제공할 때 인증과 인가는 기본적으로 구현해야 하는 기능 중 하나입니다. 이를 구현하기 위해 쿠키/세션을 사용할 수도 있고 토큰을 이용할 수도 있습니다. 만약 토큰을 이용한다면 토큰을 어디에 저장해야할 지 생각해보아야합니다. 우선 쿠키와 세션에 대해 알아보도록 합시다. 쿠키 HTTP 통신의 Stateless(무상태성)을 보완해주기 위해 나온 것으로 서버가 클라이언트에 값을 저장하고, 읽을 수 있도록 해줍니다. 서버에서 접근할 수있고, 자동으로 요청에 포함된다는 점이 중..
[카테캠 1주차] 개요
프론트 엔드 개발이란? HTML CSS JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것. HTML, CSS 그리고 JS HTML (Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등의 웹의 구조를 담당. * 하이퍼 텍스트란? : 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동) 할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)를 의미합니다. CSS (Cascading Style Sheets) 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. JS (JavaScript) 콘텐츠를 바..
Transfer-Encoding: Chunked
https://withbundo.blogspot.com/2017/08/http-20-http-ii-transfer-encoding.html [HTTP 프로토콜 강좌]#20 HTTP 일반 헤더 II - Transfer-Encoding, Upgrade, Warning, Trailer 이전 시간에 이어 오늘은 General 헤더의 마지막 시간이다. 오늘은 포스팅 글 제목에 있듯이 4개의 헤더를 다룬다. Transfer-Encoding Upgrade Warning Trailer 1. Transfer-Encodi... withbundo.blogspot.com 위 글에서 소개하는 4가지의 헤더중 Transfer Encoding 에 대해 공부한 내용입니다. Transfer-Encoding Transfer-Encodi..