본문 바로가기

Frontned Development/WEB

(7)
[WebApp] WebView [학습 키워드]1. React-Native2. WebView3. CodePush (올해 3월 31일 삭제 예정)WebView란?네이티브 앱에서 웹 페이지를 불러와서 iframe 처럼 사용하는 것Native 기능(알림, 카메라)을 직접 사용하지는 못하고, bridge를 이용하여 간접적으로 앱 기능 사용 가능WebView 구조bridge : superApp 마냥 Native와 Web을 통신시켜주는 도구WebView 선택 이유(상대적으로) 빠른 MVP 개발 속도특히, 웹 개발자들이 바로 앱을 만들 수 있음MVP 단계에서 성능 저하가 크지 않을 것으로 예상Next.js로 개발한 부분은 바로 web으로 배포하여 크로스플랫폼 지원유지보수가 편리함 (심사없이 수정 가능)네트워크 의존성RN은 버그가 많음장기적으로는 r..
[WEB] Multipart/form-data Multipart/form data의 정의 rfc1341 문서에서 multipart content-type을 아래와 같이 정의하고 있다. A "multipart" Content-Type value, which can be used to combine several body parts, possibly of differing types of data, into a single message. 즉, 여러 종류의 데이터를 하나의 메시지로 결합하여 보낼 수 있는 헤더 필드로 공식적인 MIME(Multipurpose Internet Mail Extensions) 타입입니다. Multipart 형태로 요청을 보낼 경우, http 프로토콜의 바디 부분에 데이터를 여러 파트로 나눠서 보내게됩니다. 일반적으로 파일 또는..
[WEB] Rest API Rest API(REpresentational State Transfer API)란? 로이 필딩의 박사학위 논에서 웹의 장점을 최대한 활용할 수 있는 Rest 아키텍처가 발표되었습니다. 이 아키텍처 스타일의 디자인 원칙을 준수하는 API를 Rest API 또는 Restful API라 합니다. 2000년도에 발표되어서 이미 보편화가 되어버린 방식으로, 현재는 쉽게 접할 수 있습니다. Restful API는 개발자들에게 비교적 높은 수준의 유연성과 자유를 제공하는 장점이 있습니다. Rest API 디자인 원칙 Rest API는 자유롭고 다양한 지원이 가능하지만, 아래 6가지 디자 원칙을 지켜야합니다. 균일한 인터페이스 : 요청이 어디에서 오는지와 무관하게, 동일한 리소스에 대한 모든 API 요청은 동일하게 ..
[WEB] Web server vs Web application server 정적 웹 정해진 js, css, html을 웹 서버에서 다운 받음 DB, 비즈니스 로직이 없는 고정된 웹 페이지를 사용자에게 제공 동적 웹 js, css, Html 뿐만 아니라 클라이언트 요청에 따라 DB에게 필요한 정보를 받아오고 수정할 수 있음. Web Server client에게 정적인 컨텐츠를 제공하는 프로그램 WAS를 거치지 않고 정적인 컨텐츠를 Client에게 제공합니다 WAS에게 동적인 정보를 요청합니다. Web Application Server DB 조회 및 다양한 로직 처리 시 동적인 컨텐츠를 제공하는 애플리케이션 서버, 미들웨어(엔진) 입니다. 웹 서버의 역할인 정적인 데이터를 전달할 수 있으며, DB와 통신하여 동적인 정보도 전달할 수 있음. 트랜잭션 관리 가능 WAS만이 아니라 We..
[WEB] CORS 에러와 SOP 웹에서 흔히 CORS 에러를 마주치고는 한다. 이 에러가 왜 발생하는 지 이유를 알아보고, 해결책을 찾아보자 출처란? 먼저, 출처(Origin)을 알고 넘어가자. 위 사진에서, Protocol, Host, Port를 합친 것으로, 이 세 가지가 동일하다면 같은 출처라 정의한다. SOP(Same-origin policy)란? SOP는 지난 2011년, RFC 6454에서 처음 등장한 보안 정책으로 같은 출처(Origin)에서만 리소스를 공유할 수 있다는 정책이다. 이런 규제가 생긴 이유는 웹 보안을 강화하기 위해서입니다. 출처가 다른 두 애플리케이션이 쉽게 통신할 수 있다면, CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 공격에 너무나 취약..
[WEB] HTTP vs HTTPS HTTP란? 정의 : HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜입니다. 원리 : HTTP는 OSI(Open Systems Interconnection) 네트워크 통신 모델의 애플리케이션 계층 프로토콜입니다. HTTP는 여러 유형의 요청과 응답을 정의합니다. 문제점 : HTTP는 암호화되지 않은 데이터를 전송합니다. 즉, 브라우저에서 전송된 정보를 제3자가 가로채고 읽을 수 있습니다. HTTPS란? 정의 : HTTPS는 위에서 설명한 보안상 문제점을 극복하기 위한 HTTP입니다. HTTPS 웹 사이트는 독립된 인증 기관(CA)에서 SSL/TLS 인증서(공개 키 구성요소)를 획득하여 이를 바탕으로 공개키와 세션키를 이용하여 ..
[WEB] 반응형 웹(Responsive Web)과 적응형 웹(Adaptive Web) 서두 디자이너 분과 이야기하다가 반응형 웹과 적응형 웹에 대한 이야기가 나왔다. 적응형 웹이란 단어를 처음 들어봐서, 이에 대해 정리하고자 합니다. 반응형 웹(Responsive Web) 의 정의 흔히 반응형 디자인의 창시자로 에단 마코트(Ethan Marcotte)를 거론합니다. 이전에도 개념은 존재했지만, 2010년에 아단 마코트가 반응형이란 용어를 처음 정의하였습니다. 반응형웹은 한 줄로 정의하면, 웹의 해상도, 레이아웃 등이 디바이스에 따라 반응하여 유동적으로 변환되는 웹페이지입니다. 특히, Google은 2015년 4월 21일에 모바일 친화적인 사이트를 더 높게 평가한 대규모 업데이트를 출시한 이후 항상 반응형 웹 디자인(RWD)을 권장해왔습니다. 일반적으로 미디어쿼리와 유동형 그리드와 유연한 ..