고양이 두 잔

해싱은 특정 대상에게 해시 함수(Hash Function)를 적용하는 행위를 가리킨다. 계속해서 해시 함수란 임의의 길이를 갖는 임의의 데이터를 받아 고정된 길이의 데이터를 리턴하는 단방향 함수를 말한다. 예를 들어 자바에서 입력받은 숫자를 10으로 나눈 뒤 나머지를 리턴하는 '%10' 연산자도 해시함수라 할 수 있다. 나올 수 있는 해시값이 정해진 범위(0~9) 사이에 있기 때문이다. 또한 단방향이기 때문에 앞선 글에서 알아봤던 양방향 암호화/복호화와 달리 해싱은 암호화만을 가리키는 말이 된다. 해시값은 해시 함수와 함께 정확한 정보를 입력했는지 검증만 하는 용도이기 때문에 복호화 할 필요가 없기 때문이다. 해시 함수의 특징은 아래와 같으며, 비교적 간단한 알고리즘으로 시스템 자원을 덜 소모한다, 즉 ..

예전 글에서 TCP/IP를 사용하는 네트워크 집합체인 인터넷과 그 안에서 이루어지는 서비스인 웹, 그리고 클라이언트-서버 아키텍처와 그 사이의 메시지 교환 규약인 HTTP에 대해 알아봤었다. 또한 IP 프로토콜의 한계를 극복하는 프로토콜은 TCP 말고도 UDP가 존재하는데, 데이터의 신뢰성이 중요한 경우엔 TCP를 사용한다고도 했었다. 2022.08.02 - [Development/Network] - [네트워크]TCP/IP 2022.08.02 - [Development/Network] - [네트워크]URL, URI, Domain, DNS 2022.08.03 - [Development/Network] - [네트워크]CORS(Cross-Origin Resource Sharing) 2022.08.04 - [D..

지난번 글에서, 서버의 구성을 모르는 클라이언트를 위해 서버가 준비한 메뉴판이 API(Application Programming Interface)라고 했었다. 관련 글: https://gnidinger.tistory.com/441 [네트워크]HTTP HTTP(HyperText Transfer Protocol)는 하이퍼텍스트를 빠르게 교환하기 위한 프로토콜의 일종으로, 서버와 클라이언트가 어떻게 메시지를 교환할지를 정해 놓은 규칙이다. 프로토콜의 일종이라 함은 gnidinger.tistory.com 만약 식당에 갔는데 메뉴판이 아래와 같이 생겼다면 어떨까? 출처: https://blog.kulturekonnect.com/9-menu-design-fails 7 Restaurant Menu Design FA..

AJAX(Asynchronous JavaScript and XML)란, 이름 그대로 JavaScript와 XML을 이용한 비동기적 정보교환 기법이다. 위의 그림과 같은 SPA(Single Page Application)를 제작할 때 사용하며, 요즘은 XML보단 가벼운 JSON을 사용한다. 추가로 XHR(XMLHttpRequest)을 개선한 Fetch를 사용한다고 한다. AJAX의 가장 큰 특징은 SPA를 다룰 때도 말했지만 필요한 데이터만 비동기적으로 받아올 수 있다는 점이다. 구글 검색창을 예로 들면, 검색창에 한 글자를 입력할 때마다 단어들을 서버에서 받아와 추천 검색어로 보여준다. 글자를 입력할 때마다 페이지를 새로 로딩하지 않고 필요한 부분만 렌더링 하는데, 이때 사용되는 것이 AJAX이다. 또한..

HTTP(HyperText Transfer Protocol)는 하이퍼텍스트를 빠르게 교환하기 위한 프로토콜의 일종으로, 클라이언트와 서버가 어떻게 메시지를 교환할지를 정해 놓은 규칙이다. 프로토콜의 일종이라 함은 HTTP를 제외하고도 프로토콜이 존재한다는 것을 의미하는데, 대략 아래와 같다. 계층 이름 주요 프로토콜 기능 4계층 Application Layer HTTP, DNS, FTP, ... 애플리케이션에 맞추어 통신한다. 3계층 Transport Layer TCP, UDP, ... IP와 애플리케이션을 중재해 데이터를 확실하게 전달한다. 2계층 Internet Layer IP, ICMP, ARP, RARP 네트워크 주소를 기반으로 데이터를 전송한다. 1계층 Network Interface Laye..

SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이는 웹 개발에서 중요하다. 하나씩 간결하게 살펴보자. SSR(Server Side Rendering) SSR은 이름 그대로 Javascript가 서버에서 렌더링을 마친 후 클라이언트로 전송하는 방법이다. 완성된 html 파일을 받아와 클라이언트에서 완전히 렌더링 하는 방식이라고 보면 된다. 이때 데이터베이스의 데이터가 필요할 경우 서버가 데이터를 불러와 렌더링 한다. 클라이언트가 다른 경로로 이동하면 이 과정을 다시 수행한다. 장점 SEO(Search Engine Optimization)에 유리 빠른 초기 로딩 - 단일 파일의 용량이 작음 웹 페이지가 사용자와 상호작용이 적은 경우 유리(블로그, 신문사..

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 웹 애플리케이션이 다른 출처의 선택한 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 메커니즘이다. 지난번에 살펴본 URI 구조를 다시 살펴보자. 위 구조중 도메인, 프로토콜, 포트가 다른 주소에 요청을 보내는 것을 교차 출처 요청(Cross-Origin Request)이라고 한다. 웹 생태계에는 교차 출처의 리소스 요청을 제한하는 두 가지 정책이 존재하는데, 하나는 이 글의 주제인 CORS이고, 또 다른 하나는 SOP(Same Origin Policy)이다. SOP는 쉽게 말해 보안상의 이유로 같은 출처에서만 리소스를 공유할 수 있다는 정책인데, 교차 출처 요청은 이..

지난 글에서 네이티브 앱, 웹 앱과 TCP/IP에 대한 개념, 그리고 URL과 DNS에 대해 알아보았다. 2022.08.02 - [개발/Network] - [네트워크]TCP/IP 2022.08.02 - [개발/Network] - [네트워크]URL, URI, Domain, DNS [네트워크]URL, URI, Domain, DNS URL(Uniform Resource Locator)은 네트워크 상에서 자원의 위치를 말한다. 쉽게 말해 웹 상의 동영상이나 이미지, 게시글의 주소라고 할 수 있다. URL은 Scheme(Protocol), Host, Port, Url-Path로 구분할 수 있.. gnidinger.tistory.com 이번 글에선 웹 앱을 만들기 위한 사전작업으로 웹과 웹 앱의 구조에 대해 알아보..

URL(Uniform Resource Locator)은 네트워크 상에서 자원의 위치를 말한다. 쉽게 말해 웹 상의 동영상이나 이미지, 게시글의 주소라고 할 수 있다. URL은 Scheme(Protocol), Host, Port, Url-Path로 구분할 수 있으며, 그 구성은 다음과 같다. Scheme:// Host(Port) / Url-Path Scheme(Protocol) : 통신 방식을 결정. 일반적인 웹 브라우저에서는 http(s)를 사용. Host : 웹 서버의 이름이나 도메인, IP 주소를 사용. 주소를 나타냄. Port: 애플리케이션(작업) 식별 번호 Url-Path : 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냄. URI(U..

들어가기 전에 네이티브 애플리케이션(Native Application) vs. 웹 애플리케이션(Web Application) 네이티브 애플리케이션은 흔히 말하는 '앱'으로, 특정 플랫폼을 위해 만들어진 응용 프로그램을 말한다. 따라서 네이티브 앱은 Apple iOS, Android OS, Windows와 같은 실행환경에 종속된다. 웹 애플리케이션은 웹 브라우저를 통해 접근이 가능한 응용 프로그램이다. 정적인 웹사이트의 한계를 벗어나 동적인 상호작용을 하는 애플리케이션이라고 할 수 있다. 네이티브 앱 웹 앱 개발 언어 네이티브 전용 웹 전용 디바이스 고유기능 액세스 높음 낮음 화려한 UI 높음 낮음 업그레이드 유연성 낮음(반드시 앱스토어를 거침) 중간(일반적으로 앱스토어를 거침) 구현 난이도 높음 중간 네..