웹개념

쿠키, 세션, 캐시, 로컬스토리지 정리

Cookie vs LocalStorage vs SessionStorage 1.Cookie(쿠키) 쿠키는 클라이언트에 대한 정보를 이용자의 PC에 있는 하드디스크에 보관하기 위해 웹사이트에서 클라이언트 웹 브라우저에 전송하는 정보이다. 1-1. Cookie의 특징 쿠키를 웹 사이트 koras02.tistory.com 이전 시간에 정리한 블로그 글은 업데이트 한다는 마음으로 다시한번 개념에 대해 정리해보는 시간을 가지려 합니다. 우선 이것들을 알아보기전에 HTTP의 개념부터 알아봐야 하는데요. 간단하게 설명하자면 HTTP는 상태가 없는(Stateless) 프로토콜이기 때문에 사용자가 웹 브라우저를 통해서 특정 웹사이트에 접속하게 될 경우에 어떤 사용자가 접속을 했는지에 대한 정보를 파악할 수 없습니다. 따라..

[웹 개념] 절대경로와 상대경로

경로란? 경로는 프로그래밍 언어 또는 운영체제 등에서 파일을 찾아가는 방법을 경로라고 하며 경로에는 절대경로와 상대경로로 구분하여 사용할 수 있다. 즉 파일시스템 내에서 특정 파일의 위치, 이름을 나타내는 양식이다. 절대경로 작업 디렉토리와 관계없이 절대적인 위치를 가리키는 경로 예) '서울역' 의 위치 리눅스 예시: /etc/httpd/conf/httpd.conf 윈도우 예시: C:\Windows\System32\drivers\etc\hosts 상대경로 작업 디렉토리를 기준으로 상대적인 위치를 가리키는 경로 예) "가까운 이마트 또는 건물 옆 쇼핑몰"의 위치 리눅스 예시: /conf/httpd.conf 윈도우 예시: ..\dirvers\etc\hosts 최상위 디렉토리 (루트 디렉토리) / : 최상위 ..

[CI/CD] CI/CD란? - 지속적 통합 / 지속적 제공 기본개념

매번 개발자가 이슈가 생길때 코드를 수정하고 빌드와 테스트 배포까지 한다면 상당히 많은 시간이 소요되는 현상이 발생할 수도 있다. 하지만 git이라는 버전관리 시스템이 있다면 프로젝트의 코드만 올리는 것 만으로도 누군가가 빌드와 테스트, 배포까지 해준다면, 쓸데없는 시간을 단축시키고 개발에 더 많은 시간을 투자할 수 있을것이다. 이번시간에는 그 CI와 CD의 기본 개념에 대해 알아보겠다. CI : Continuous Integration 지속적 통합 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 레포지토리에 통합되는 것을 의미한다. CI란? CI란 간단히 요약해 프로젝트를 빌드/테스트 자동화 과정을 담당하는 과정이다. CI는 개발자를 위한 프로세스인 지속적 통합(Contin..

[웹개념] 웹 브라우적의 작동원리

주소창에 https://www.naver.com 혹은 https://www.youtube.com등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 것이다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹 페이지로 접속이 가능한 것 일까? 이번 포스팅에서는 주소 창에 URL 혹은 도메인을 입력했을 때 어떤 과정을 거쳐서 웹 페이지가 보이는 가를 알아보자. 1.브라우저란? 웹 브라우저는 동기(Synchronous) 적으로 HTML+CSS+Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어 이다. 동기 적인 이유는 ? script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다. HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생..

[HTTP] HTTP 상태코드

HTTP 상태코드란? HTTP 상태코드는 클라이언트가 보낸 HTTP(Hypertext Transfer Protocol) 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다. HTTP 상태 코드의 분류 상태 코드의 첫 번째 숫자에 따라 크게 5가지로 분류된다. 1xx : Informational 2xx : Success 3xx : Redirection 4xx : Client Error 5xx : Server Error HTTP 상태 코드 상세 자주 사용되는 HTTP 상태 코드를 정리해보았다 HTTP 상태코드는 크게보면 100 ~ 599 까지 다양한 상태코드가 존재한다. 여기서 중요할 만한 상태코드를 짜집어서 소개해 보겠다. 1XX : 조건부 응답 Request receiv..

CORS란 무엇인가?

이번시간에는 CORS이 무엇인가에 대한 포스팅을 시작하겠습니다. 웹 개발을 하다보면 CORS 정책위반으로 인한 에러가 발생하는 상황은 흔해서 누구나 한번쯤 겪게 된다고 해도 과언이 아닙니다. 주니어 프론트엔드 개발자들에게는 CORS의 문제가 어렵다는 것은 인지하고 있을 것입니다. CORS에 대한 문제점은 초기 개발자들이 많은 오해가 일어날 수 있는데 CORS를 해결하는 방법은 이미 존재하지만 그것들을 잘 모르는 경우도 많은 것 같다. CORS에 대한 사람들이 쉽게 오해할 만한 몇가지를 바로잡고, CORS로 인한 오류 해결방법을 제시해보겠다. CORS에 대한 몇가지 오해 프론트엔드 개발만 해본 웹개발자라면 해볼만한 CORS에 대한 오해가 몇가지 있다. 이것들을 풀고나서 해결방법을 알아보자. 오해 1 : C..

Cookie vs LocalStorage vs SessionStorage

1.Cookie(쿠키) 쿠키는 클라이언트에 대한 정보를 이용자의 PC에 있는 하드디스크에 보관하기 위해 웹사이트에서 클라이언트 웹 브라우저에 전송하는 정보이다. 1-1. Cookie의 특징 쿠키를 웹 사이트에서 설정하면 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. 쿠키는 개수와 용량에 있어 제한을 걸어두고 있다. 하나의 사이트에서 저장 가능한 최대 쿠키수는 20개이며, 하나의 사이트에서 저장 가능한 최대 쿠키 크기는 4KB로 제한되어 있다. 1-2. Cookie의 장/단점 장점 대부분의 브라우저에 지원이 다 된다. 단점 api가 한번 더 호출되면서 서버에 부담이 증가된다. 2. WEB STORAGE (웹 스토리지) HTML5에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조..

동기와 비동기 개념과 차이

데이터를 받는 방식인 동기와 비동기. 이 둘의 개념에 대해 알아보고 둘의 차이점을 알아보도록 하겠습니다. 1. 동기(synchronous: 동시에 일어나는) - 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속인데. 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 요청한 결과가 한자리에서 동시에 일어남 A노드와 B노드 사이의 작업 처리 단위(transaction)을 동시에 맞추겠다. 2. 비동기(Asynchronous: 동시에 일어나지 않는) - 비동기는 동시에 일어나지 않는다는 의미입니다. 요청한 결과는 동시에 일어나지 않을거라는 약속입니다. 요청한 그 자리에서 결과가 주어지지 않음 노드 사이의 작업 처리 단위를 동시에 맞추지 않아..

[Server] Cache(캐시)란?

1. 캐시(Cache)란 ? [ Cache ] Cache란 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 아래와 같은 저장공간 계층 구조에서 확인할 수 있듯이. 캐시는 저장 공간이 작고 비용이 비싼 대시 빠른 성능을 제공한다. Cache는 아래와 같은 경우 사용을 고려하면 좋다. 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우(서버의 균일한 API 데이터) 반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸네일 등) Cache에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근이 가능하다. 결국 Cache란 반복적으로 데이터를 불러오는 경우에, 지속적으로 DBMS 혹은 서버에 요청하는 것이 아닌 Memory에 데이터를 저장하였다가..

SSR과 CSR

SSR(Server Side Rendering) 대부분 웹사이트들은 페이지를 이동할 때마다 서버에 요청을 하는 방식을 채택하고 있습니다. 이러한 방식을 서버 사이드 랜더링이라고 합니다. SSR 방식은 서버에서 렌더링을 마치고, 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링하는 방식이다. 새로운 페이지로 이동할 때마다 서버에 페이지를 요청한 후 새로고침 되며 깜빡이는 현상을 말합니다. 장점 CSR에 비해 다운 받는 파일이 많지 않아 초기 로딩 속도가 빨라 사용자가 빨리 컨텐츠를 볼 수 있다. HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 단점 매번 페이지를 요청할 때마다 새로고침 되기 때문에 UX가 다소 떨어짐 페이지를 이동할 때마다 매..

[GraphQL] GraphQL과 REST API의 차이점

REST API 1.소프트웨어간 정보를 주고받는 주체들간 약속된 형식 2.URl 형식(어떤 정보를) X 요청방식(어떻게 할 것인가) O GraphQL 이전부터 사용됨 GraphQL과는 '다른' 방식 - 용도와 작업 특성에 따라 적합한 것 사용하면 됨 구성요소 1.HTTP Method(행위) 2.URl - 데이터 접근 3.Representation - 자원의 표현 HTTP Method 종류 요청 형식 용도 GET 정보 받아오기 POST 정보 입력하기 PUT 정보 전체 수정 PATCH 정보 일부 수정 DELETE 정보 삭제 REST API의 장단점 HTTP 표준 프로토콜을 따르는 모든 플랫폼에서 호환된다. HTTP 프로토콜을 사용하므로 REST API 사용을 위한 인프라를 구축할 필요가 없다. HTTP 메서..

웹개념_HTTP통신

0. 웹 통신 1) 웹 통신 & Protocol 인터넷 상에서의 통신을 말함 많은 정보들이 주고 받기에 인터넷에 엄격한 규약이 존재함. 이것을 Protocol 이라 말함 2) 웹 Protocol 종류 일반적인 프로토콜 Http: Hyper Text Transer Protocol Https: secure Hyper Text Transer Protocol TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜 FTP: File Transfer Protocol 파일 전송 프로토콜 Talnet : Terminal Network SSH: Secure Shell 보안된 소켓 통신을 위한 프로토콜 SMTP: Simple Mail Transfer Protocol 기타 TCP/UDP : ..