본문 바로가기

전체 글

HTTPS, CORS
HTTPS, CORS 2024. 5. 2. HTTPS(Secured HTTP)HTTPS는요청을 보내고, 응답을 받는 두 주체만 HTTP 요청 및 응답을 읽을 수 있도록 암호화 하는 것이다. 때문에 MITM(Man-In-The-Middle) 공격 방지가 가능하다. 단일 서버와 다수 클라이언트(웹 브라우저)에서, 단일 서버만 사용 가능한 키는 비공개키, 다수 클라이언트 모두 사용 가능한 키를 공개키라 칭한다.  만약 단일 서버의 비공개키가 빼앗긴다면 해당 서버인 것처럼 모든 요청을 받을 수 있다. 단일 서버의 비공개키 진짜 여부 인증을 위해 CA(인증 기관)를 통해 한 번 더 암호화를 거친다. 웹 브라우저도 마찬가지.* CA: SSL 인증서를 발급하는 기관, 신뢰할 수 있는 기관 대칭키 방식데이터의 암호화, 복호화 둘 다 동일한 키가 사용되는 방식...
Cookie, Session 그리고 Storage
Cookie, Session 그리고 Storage 2024. 4. 30. 웹 브라우저와 웹 서버의 저장소 HTTP는 Stateless Protocol이다 Stateless는 각 프로세스가 시작과 닫음으로 동작하기 때문에, 프로세스 간의 정보 공유가 없다. 때문에 웹 서버 입장에서는 매 요청이 어떤 웹 브라우저가 보낸 것인지 알 수가 없다.  Cookie와 Session으로 Stateful HTTP를 만들 수 있다 웹 서버가 각 웹 브라우저가 누군지 이름표를 붙이기 위해 쿠키와 세션을 사용한다. 가장 처음, 웹 브라우저가 웹 서버에 요청을 보내면 응답과 함께 요청자의 정보(요청한 웹 브라우저)를 반환한다. 웹 브라우저는 이를 요청자 웹 브라우저의 쿠키에 저장한다. 이후부터 웹 브라우저는 서버에 요청을 보낼 때 쿠키에 저장되어 있는 요청자 정보를 헤더에 함께 전달해 "내가 누군지..
웹 구성 간 흐름
웹 구성 간 흐름 2024. 4. 28. 웹 검색 엔진은 어떻게 작동할까만약 세계 모든 웹 서버의 웹 페이지 정보들에 접근이나 조회하고 싶다면, 모든 웹 서버의 도메인 네임(IP 주소)를 통해 직접 일일히 웹 페이지 정보들에 접근해야 할까? 만약 그래야 한다면, 아마 웹 페이지는 사용자 경험이 최악이라고 할 수 있을 것이다. 무엇인가가 대신 세계의 모든 웹 서버의 웹 페이지들을 미리 다 찾아놓고, 분류 및 정리한 뒤에 내 검색어에 따라 적합한 웹 페이지들만 골라 전달해주면 어떨까? 우리는 그 무엇인가를 Google로 정의해보자. Google의 경우 세계 모든 웹 페이지 정보를 수집하는 봇을 통해 웹 크롤링을 실시한다. 예를 들어 나만의 블로그를 개발할 때 sitemap.xml을 통해 "홈페이지 내부에 웹 페이지는 이렇게 연결되어 있다"고 Goo..
웹과 인터넷, DNS
웹과 인터넷, DNS 2024. 4. 24. 웹의 본질이란 무엇인가 웹의 본질은 요청을 주고 결과를 받는 그 사이의 모든 것을 의미한다. 그 요청 - 반환이란 무엇일까? 그 주체는 웹 브라우저와 웹 서버 2개로 구성된다. 웹 브라우저와 웹 서버의 요청과 반환은, 일반적으로 우리가 생각하는 프론트엔드와 백엔드 사이의 데이터나 웹 페이지 교환을 의미한다.  웹 서버와 웹 서버 간의 요청 반환은, Open API 등이 있다. 예를 들면, AWS의 감성 분석 모델인 Comprehend를 사용하려면 AWS Comprehend API를 요청해야 한다. 이는 프론트엔드가 아닌 백엔드에서 요청하기 때문에, 웹 서버간의 요청과 반환이 되겠다.  1. Monolithic 모놀리딕하나의 서버가 모든 서비스를 관장하는 것을 의미한다. 하지만, 만약 ..
JAVA 동작 원리와 객체 지향(은닉화/상속)
JAVA 동작 원리와 객체 지향(은닉화/상속) 2024. 4. 22. Java 동작 원리! 우리가 작성한 Java 코드가 어떻게 웹 서버(혹은 프로그램)가 되는 걸까 1. 기계어로 변환(ByteCode) 가장 기본 원리는 기계어(프로그램/정적)가 머신에서(해석되어) 실행(CPU 및 메모리가 할당되어 실행되면 프로세스/동적)되는 것 Java가 기계어로 변환하는 방법, 컴파일과 런타임 이렇게 기계어와 같은 저급언어로 변환할 때 Java는 컴파일러를 사용한다. 우리가 작성한 Java(.java) 코드를 자바 컴파일러(Javac)를 통해 Bytecode(.class)로 변경한다. 이후 Runtime 과정에서 Bytecodes(.class)를 기계어(Binary Code)로 변경한다. 이 때 자바 엔진(JVM)을 통해 이뤄진다. 자바의 인터프리터는 자바 엔진(JVM)이다. Java..
JavaScript 함수형 프로그래밍 패러다임 ~ 스코프 체인
JavaScript 함수형 프로그래밍 패러다임 ~ 스코프 체인 2024. 4. 16. 함수형 프로그래밍 패러다임 자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 객체지향 프로그래밍 패러다임도 지원한다. 자바스크립트의 핵심은 함수와 객체다. 클래스와 객체를 활용할 수 있으며, TS를 통해 인터페이스(다형성)을 도입할 수 있다. 때문에 JS 개발을 위해서는 함수형 프로그래밍에 대한 이해가 필요한데 (컴포넌트를 만들다보면 함수로 만들면 매우 좋은 것 같긴하다. 클래스로 만들면 중구난방 this로 인해 헷갈리게 될지도... hook을 함수로 만드는 것도 같은 의미 아닐까.) 함수형 프로그래밍은 2가지 조건을 만족하는 것을 의미한다. 1. 일급 함수: 함수 변수 + 함수 파라미터 + 함수 반환 함수 변수 할당 = 함수 표현식 var expression = function() { console..
Web Development 란 무엇이며, 어떻게 동작하나?
Web Development 란 무엇이며, 어떻게 동작하나? 2024. 4. 16. 웹 개발(Web Development)를 왜 배우는 걸까 우리가 크롬과 같이 자주 쓰는 웹 브라우저, 그리고 웹 서버가 존재하는데 이를 통칭하여 웹 개발이라고 부른다. 오늘날 웹과 앱 등은 필수다. 우리가 잘 알고 있는 App은 구동을 위한 머신이 필요한데, 그 머신을 안드로이드나 iOS 같은 모바일 OS로 국한된다. (물론 데스크탑 앱도 존재한다) 반면에 웹은 어디든지 적용 가능하다. 웹 브라우저는 어디든지 설치가 가능하다. 앱에서도 웹 브라우저를 띄울 수가 있다. 웹 개발 웹 페이지에 무엇인가 표기하는 것을 이야기한다. 페이지에 표기 방식인 Rendering을 다루는 건 프론트엔드, 웹 페이지가 표기 할 데이터와 조작은 백엔드에서 개발한다. 웹 페이지를 표기하기 위한 구성 요소는 HTML(구조), C..
[React] Hook과 useContext, useReducer 상태관리
[React] Hook과 useContext, useReducer 상태관리 2024. 4. 14. React의 Hooks? hooks는 React 16.8부터 React에 요소로 새로 추가되었다. 클래스형의 컴포넌트 고유 기능인 상태(state)관리와 라이프 사이클 관리 기능을 함수형 컴포넌트에서도 쓸 수 있도록 해주는 함수들을 총칭한다. Hooks라고... 불리는 이유... 숙어인 Hook in의 뜻인 "어떻게든 손에 넣다"에서 온 것으로 추측된다. hooks를 사용하면 함수형 컴포넌트를 개발하는 개발자의 손에도 클래스형 컴포넌트에서 쓸 수 있는 기능이 쥐어지기 때문이다. (낚시할 때 그 훅이라고 생각해도 좋을 듯) 클래스형 컴포넌트 자바스크립트의 this는 다른 언어의 this와 좀 다른 의미로 쓰인다. 자바스크립트의 this는 런타임에 결정된다. 컨텍스트에 따라 this가 바뀐다는 장점도 있지만..
[React] React의 탄생 이유
[React] React의 탄생 이유 2024. 4. 11. 초기의 프론트엔드 개발 이전 인터넷은 상호작용하는 웹 애플리케이션이 아닌 문서를 보여주는 웹 문서를 주고 받는 것에 가까웠다. 바야흐로 HTML 웹 문서 시대. 애초에 HTML는 마크업 언어로 개발 언어도 아니었다. 그러나 인터넷 속도가 개선되고, Google Map이라는 혁신적인 앱이 등장함에 따라 Ajax라는 개념을 통해 웹 문서가 시시각각 변했다. Ajax(Async JavaScript and XML)는 JavaScript로 서버에서 데이터를 즉각적으로 받아올 수 있던게 큰 특징이다. 또한, 당시에는 jQuery를 많이 사용했다. 이렇게 HTML 페이지를 일부 변경할 수 있게 되면서 브라우저 사이트 화면을 웹 페이지가 아닌 웹 애플리케이션이라고 부르기 시작했다. Angular의 등장 그러나 jQue..

티스토리툴바