STUDY/CS9 URI, URL, URN 에 대해서 알아보기 URI, URL, URN 에 대해서 알아보기 URl (Identifier) 자원의 식별자 URL와 URN 을 감싸는 모체 URL (Locator) 자원의 위치로 자원 식별 URN (Name) 고유한 이름으로 자원을 식별 Protocol Domain Port Path To The File Parameters URI O O O O O URL O O O O X URL 과 URN의 차이점 URL은 리소스를 어떻게 얻을 것이고, 어디에서 가지고 와야 하는지를 명시하는 URI이다. URN은 리소스를 어떻게 접근할 것인지 명시하지 않고 경로와 리소스 자체를 특정하는 것을 목표로 하는 URI 이다. 2023. 1. 2. 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 이란? 웹 브라우저와 서버 사이에 HTML 문서와 같은 리소스 들을 주고 받을 수 있도록 해주는 통신 프로토콜 이다. 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이다. HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고 서버는 클라이언트의 요청에 대한 응답을 반환한다. 연결 상태를 유지하지 않는 비 연결성 프로토콜이며, 요청과 응답(request, response) 방식으로 동작한다. 연결 상태를 유지하지 않는다는 말은 서버는 응답 메시지를 반환한 후에 클라이언트의 상태를 저장하지 않는다는 것입니다. 때문에 HTTP 프로토콜은 상태가 없는 프로토콜, 무상태성(stateless)라고도 불립니다... 2022. 12. 28. 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 란? HTTP 헤더 기반 메커니즘으로 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외 모든 출처(도메인, 스키마 , 포트)를 서버가 표시 할 수 있도록 한다. , , , 태그 → 기본적으로 Cross-Origin 정책을 지원함 태그의 href 에서 다른 사이트의 .css 리소스에 접근 하는 것이 가능 태그의 src 에서 다른 사이트의 .png .jpg 등의 리소스에 접근하는 것이 가능 태그의 src 에서 다른 사이트의 .js 리소스에 접근하는 것이 가능 (type = “module” 속성은 제외) XMLHttpRequest, Fetch API → 기본적으로 Same-Origin 정책을 따름 다른 도메인에게 .. 2022. 12. 28. 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 이란? 클라이언트(브라우저) 가 렌더링을 처리 하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 모든 처리를 하게 된다. 사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다. 사이트에 접속 한다. 서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 ) html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다. 받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다. CSR.. 2022. 12. 28. 서버 사이드 렌더링(SSR, Server Side Rendering) 서버사이드 렌더링(SSR, Server Side Rendering) 이란? 클라이언트에서 모든 것을 처리하는 방식이 아닌 서버로부터 html 파일을 받아와 페이지 전체를 렌더링 하는 방식이다. (JSP/Servlet 아키텍쳐 방식) 사이트에 접속 한다. 서버에서 이미 만들어진 index 파일을 받아오게 되고, 사용자가 볼 수 있다. ( js를 받아오지 않아서 동적으로 제어 할 순 없다) ( TTV ) 자바스크립트 파일을 서버에서 받아온다. 동적인 구현 클릭이나 인터랙션이 가능하게 된다. ( TTI ) 사용자가 사이트를 볼 수 있는 시간과 인터랙션을 할 수 있는 시간에 대한 공백이 존재하는 편이다. 장점 첫번째 페이지에 해당하는 문서만 브라우저에 우선 전달하여 렌더링을 하기 때문에 첫 페이지 로딩 속도가 .. 2022. 12. 28. 검색 엔진 최적화 (SEO, Search Engine Optimization) 검색엔진 최적화(SEO) 란? 검색 엔진은 웹 사이트 나 페이지의 데이터나 기능들을 봇이 읽어(크롤링)가서, 홈페이지의 구조와 기능을 파악하여 포털(검색엔진) 사이트에 노출을 시키게 된다. 이 과정에서 홈페이지의 구조와 페이지를 검색 엔진이 이해하기 쉽도록 개발하여, 상위에 노출 시킬 수 있도록 하는 작업을 검색엔진 최적화라 한다. 검색엔진 봇은 데이터를 크롤링 하는 과정에서 JavaScript 파일을 해석하지 못하고, html 문서 기준에서 정보를 수집해 가기 때문에 구조적 설계를 잘 해줘야 한다. CSR(Client-Side Rendering) 방식의 페이지 들의 경우 JS를 읽어 페이지를 구성해주는 형식이기에, JS를 사용하지 못하는 상태에서는 HTML문서에 아무것도 나타나지 않아, 검색 엔진이 제.. 2022. 12. 28. 아토믹 디자인 (Atomic Design) 개요 물질 순서로 화학의 개념을 웹에 적용하여, 인터페이스를 세분화한 디자인 시스템을 만드는 방법론 [출처] - Atomic Design Methodology 1. Atoms (원자) 원자는 모든 물질의 기본 구성 요소다. 각 원소마다 고유한 특성을 가지고 있으며, 더 이상 분해 할 수 없다. (가장 작은 단위) 2. Molecules (분자) 원자가 모인 원자의 그룹이다. 원자의 조합은 고유한 특성을 가지며, 원자보다 더 유동적인 작동이 가능하다. (원자의 그룹) 3. Organisms (유기체) 하나의 기능을 하는 분자들의 집합체이다. 이러한 유기체는 단순한 기능부터 매우 정교하고, 복잡한 기능이 있는 유기체에 이르기까지 다양하다. (분자의 그룹) 과학에서 나타나는 원자 - 분자 - 유기체 까지 의 .. 2022. 12. 27. 뷰 에셋 컴포넌트 (VAC, View Asset Component) 개요 JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데, 목적을 둔 컴포넌트 설계 방법론이다. Normal Pattern 특징 Business Logic과 UI 처리를 바인딩 하여 개발을 하게 된다. jsx, view logic, business logic 이 혼합(같이)하여 사용 FE 데이터 작업 과정에서 단순한 props 나 state 를 수정함에 있어서도, JSX 영역에 대한 수정이 필요하다. 이때, UI 처리와 바인딩 부분이 같은 페이지였을 경우, 영역 겹침으로 인한 코드 충돌이 발생한다. VAC Pattern 특징 view logic과 JSX 와 컴포넌트로 분리에 대한 가이드를 제공하는 디자인 패턴. 반복, 조건부 노출 등 스타일 제어 렌더링에 관련된 처리만 수행 props 를 통.. 2022. 12. 27. [CS] Proxy Server (프록시 서버) Proxy Serve? 원래는 서버(back) 와 클라이언트 (fornt) 의 양방향 통신을 하지만, 실행 주소가 달라 주고 받는 요청이 다르기 때문에, cors err가 뜨고 요청이 막히게 된다. 그럴 때, font 의 target 을 바꿔 받는 주소를 맞춰주는 역할을 해주는 게 proxy server 이다. proxy의 기능 아이피 주소를 임의로 바꿔 접근 하는 사람의 ip를 모르게 하고, back과 font 의 주소 값을 맞춰주는 역할 ( 데이터도 가능) 방화벽 기능 웹 필터 기능 캐시 데이터, 공유 데이터 제공 기능 ( 캐시 데이터에 담아두어 유저 에게 전달 하기도 함) proxy server 사용 이유 사람들의 인터넷 사용 제어 캐시를 통한 빠른 인터넷 서비스 제공 보안 제공 제한 사이트 접근 .. 2022. 12. 26. 이전 1 다음 728x90
