본문 바로가기

분류 전체보기148

교차 출처 리소스 공유 (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.
[멀티미디어시스템] 멀티미디어의 미래 유비쿼터스와 멀티미디어 유비쿼터스 라틴어로 편재하다’(보편적으로 존재하다)’ 라는 의미다. PC가 아닌 모든 기기들이 네트워크화 되어 언제, 어디서, 누구나 대용량의 통신망을 사용할 수 있고, 낮은 요금으로 커뮤니케이션 할 수 있는 것을 가리킨다. 유비쿼터스 컴퓨팅 인간이 언제 어디에 있던 네트워크에 접속 된 컴퓨터를 자신의 컴퓨터로 사용할 수 있는 환경 유비쿼터스 특징 네트워크에 접속 되어야 한다. 사용자에게 잘 보이지 않아야 한다. 현실 세계 어디서나 컴퓨터 사용이 가능해야 한다. 사용자에 따라 제공될 수 있는 서비스가 달라야 한다. 유비쿼터스 컴퓨팅 기술 RFID(무선인식) 일정 주파수 대역을 이용해 원거리에서 무선으로 단말기와 사물 간, 또는 사물과 사물 간 각종 데이터를 주고 받을 수 있도록 하.. 2022. 12. 9.
[멀티미디어시스템] 모바일 멀티미디어 모바일 멀티미디어의 개요 이동성을 가진 모바일 기기를 이용하여 멀티미디어 데이터인 텍스트, 이미지, 동영상 등을 디지털 방식으로 녹음, 재생, 변환할 수 있는 서비스를 말한다. 이동통신 기술의 발전 1세대 아날로그 방식으로 음성통화를 목적으로 개발 미국의 AMPS 방식과 유럽의 TACS 방식이 대표적 2세대 ~ 2.5세대 디지털 방식으로 음성 외에 데이터의 송수신 비동기식의 TDMA 방식과 동기식 CDMA 방식으로 구분 유럽식의 TDMA 방식 주파수 대역을 시간 구간으로 나누어 순차적으로 이용하는 시간 분할 다중 접속방식 유럽의 GSM 방식 미국 퀄컴사의 CDMA 방식 코드분할 다중접속 방식 우리나라에서 최초로 상용화 2000년대에 CDMA2000 방식이 개발 2.5세대라고 하며, 모바일 기기에서 무선 .. 2022. 12. 9.
728x90

티스토리툴바