WEB9 CSR & SSR SPA & MPA React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 기반으로 하여 SPA(Single Page Application)를 개발합니다. 하나의 페이지에서 Ajax를 통해 클라이언트에서 원하는 부분만 동적으로 렌더링 할 수 있습니다. MPA(Multi Page Application)은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아와서 페이지 전체를 새로 렌더링 하는 전통적인 방식입니다. SPA & MPA와 CSR & SSR SPA는 웹 애플리케이션에 필요한 정적 리소스를 초반에 모두 다운로드하고 그 후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아 클라이언트에서 페이지를 갱신합니다. MPA는 새로운 요청이 있을 때 서버에서 이미 렌더링 .. 2023. 7. 3. 네이티브 앱 & 웹 앱 & 하이브리드 앱 네이티브 앱 (Native App) 우리가 흔히 아는 안드로이드나 IOS 용으로 나눠서 만들어진 애플리케이션을 의미합니다. 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용한 Java 언어나 iOS 기반 SDK를 이용한 Swify 언어로 만드는 앱이 네이티브 앱에 속합니다. 예시 편의성과 기능이 중요한 게임 앱 지도, 교통 앱 - 카카오 맵, 네이버 지도 카메라 기능 위주 앱 - 인스타그램, 틱톡 편의성, 보안이 중요한 은행, 카드 앱 잦은 업데이트가 필요하지 않은 멤버십 앱 - 스타벅스, T멤버십 장점 성능이 웹앱, 하이브리드 앱에 비해 가장 높습니다. 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어 있어 기기마다 최적화가 가능합니다. 높은 디자인 완성도를 가집니다. 단점 플.. 2023. 6. 22. HTTP, HTTPS 프로토콜 프로토콜(Protocol)은 컴퓨터 네트워크에서 통신을 위한 규칙과 협약의 체계를 말합니다. 네트워크 상에서 데이터를 주고받기 위해선 송신자와 수신자 간에 약속된 규칙이 필요하며 이러한 규칙의 집합을 의미합니다. 데이터 송수신, 전송 방식, 오류 검출 및 복수, 인증, 암호화 등 다양한 측면을 다루며 통신할 때 데이터를 어떤 형식으로 구성할지 , 어떤 절차를 따를지 등도 규정합니다. 기본적으로 서버와 브라우저가 데이터를 주고받는 HTTP, 이메일 전송을 위한 SMTP(Simple Mail Transfer Protocol), 파일 전송을 위한 FTP(File Transfer Protocol), 네트워크 보안을 위한 SSL 등 다양한 프로토콜이 존재합니다. HTTP HTTP는 Hypertext Tr.. 2023. 6. 13. CORS SOP(Same Origin Policy) SOP는 다른 출처의 리소스를 사용하는 것을 제한하는 보안 방식이며 이는 URL의 프로토콜, 호스트, 포트가 같음을 의미합니다. 이 세 가지가 무엇이라도 하나가 다르면 다른 출처라고 판단을 하는 것입니다. 이는 토큰이 유출되어도 요청의 Origin을 확인하기고 다른 출처(cross origin)로 판단해 요청을 막을 수 있습니다. 그렇다면 다른 출처의 리소스가 필요하다면 어떻게 할까에서 CORS가 등장합니다. CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제입니다... 2023. 6. 8. Virtual DOM 등장 배경 https://iltae.tistory.com/43 브라우저 구조와 렌더링 과정 브라우저 기본 구조 7가지 ◎ 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 버튼, 북마크 등 요청한 웹 페이지를 제외하고 사용자와 상호작용 하는 서비스들 ◎ 브라우저 엔진 사용자 인 iltae.tistory.com 브라우저가 어떤 인터렉션에 의해 DOM 변화가 발생한다면 렌더 트리가 그때마다 재생성됩니다. 이때 다시 모든 요소들의 스타일을 다시 계산하여 구조를 잡고 칠하는 과정이 반복되게 됩니다. 장바구니에 상품을 추가하거나 댓글을 다는 행동을 하면 다시 전체 노드가 처음부터 다시 그려지는 것이었습니다. 이는 불필요한 반복을 야기하고 시간이 많이 소모됩니다. 게다가 SPA를 사용하게 되면서 DOM을 조작할 .. 2023. 6. 1. CSRF & XSS CSRF(Cross Site Request Forgery) 웹 애플리케이션 취약점 중 하나로, 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정한 웹사이트에 request 하도록 만드는 공격을 말합니다. 주로 해커들이 많이 이용하는 것으로, 유저의 권한을 도용해 중요한 기능을 실행하도록 합니다. 우리가 실생활에서 CSRF 공격을 볼 수 있는 건, 해커가 사용자의 이메일 계정으로 광고성 글을 보내는 것입니다. 정확히 말하면, CSRF는 해커가 사용자 컴퓨터를 감염시키거나 서버를 해킹해서 공격하는 것이 아닙니다. CSRF 공격은 아래와 같은 조건이 만족할 때 실행됩니다. 사용자가 해커가 만든 피싱 사이트에 접속한 경우 위조 요청을 전송하는 서비스에 사용자가 로그인을 한 경우 보통 자동 로.. 2023. 5. 25. 브라우저 구조와 렌더링 과정 브라우저 기본 구조 7가지 ◎ 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 버튼, 북마크 등 요청한 웹 페이지를 제외하고 사용자와 상호작용 하는 서비스들 ◎ 브라우저 엔진 사용자 인터페이스와 렌더링 엔진을 연결하는 엔진 ◎ 렌더링 엔진 HTML과 CSS를 파싱(코드 분석)하여 요청한 웹 페이지를 표시하는 엔진 ◎ 통신 각종 네트워크 요청을 수행하는 파트 ◎ 자바스크립트 해석기 자바스크립트 코드를 해석하고 실행하는 인터프리터(크롬의 경우 V8엔진) ◎ UI 백엔드 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 파트 ◎ 데이터 저장소 로컬 스토리지나 쿠기와 같이 보조 기억장치에 데이터를 저장하는 공간 렌더링 엔진의 목표 HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 .. 2023. 4. 28. REST API API API(Application Programming Interface)는 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말합니다. 쉽게 설명하자면 프로그램들이 대화하는 방법 정도로 볼 수 있습니다. 예를 들어 구글 지도 API란 구글 지도 서비스를 이용하기 위한 규칙을 정의해 놓은 것이라 할 수 있습니다. 이는 접근 방식에 따라 정해진 단체 내에서만 사용하고 외부에게 노출이 되지 않는 Private API, 누구에게나 공개하는 Public API(이 중에서도 접근하는 대상에 제약이 없다면 OpenAPI), 동의하는 특정인만 사용 가능한 Partner API로 나눌 수 있습니다. 그리고 설계구조(아키텍처)에 따라 REST와 GraphQL 등으로 나눌 수 있습니다. REST API.. 2023. 4. 27. 쿠키/세션, 웹 스토리지 그리고 토큰 등장 배경과 사용 이유 데이터를 주고받는 약속, HTTP 프로토콜의 특성 때문에 등장하게 되었습니다. 그 두 특성을 먼저 이해하고 넘어가 봅시다. 비연결성(connectionless) 초고~~ 급 식당, 오마카세가 아닌 이상 테이블 별로 개인 담당 서버가 있지 않고 주문을 받고 해결하는 흐름일 것입니다. 이는 서버가 최소한의 자원으로 일을 해결하기 위함입니다. 주문이 들어오면 서버는 응답을 보내고 연결을 끊습니다. 즉, 이 고객과 서버는 항상 연결되고 유지되는 것이 아닙니다. 반대로 연결 지향(connection oriented)은 담당 서버가 있고 주문을 하지 않아도 계속 물 부족하면 따라주고 냅킨 챙겨주고 음식 맛 괜찮냐 물어보고 그러겠죠? 그래서 서버의 자원을 계속 소모하고 있는 것입니다. 무상태성.. 2023. 4. 24. 이전 1 다음
