본문 바로가기

전체 글

 (138)
DeepDive - 48장. 모듈 48.1 모듈의 일반적 의미 - 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. - 이때, 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export라 한다. - 모듈 사용자는 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있으며 이를 import라 한다. 48.2 자바스크립트와 모듈 - 자바스크립트는 태생적으로 모듈 시스템을 지원하지 않는다. 즉, 모듈이 성립하기 위해 필요한 파일 스코프와 im..
DeepDive - 47장. 에러 처리 47.1 에러 처리의 필요성 - 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. - try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. - 우리가 작성하는 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. 47.2 try... catch... finally 문 - try... catch... finally 문은 일반적인 에러 처리 방법이라고 한다. - finally 문은 불필요하다면 생략 가능하다. catch 문도 생략이 가능하지만, catch문 없는 try 문은 의미가 없으므로 생략하지 않는다. console.log('[Start]'); t..
HTTP 대신 HTTPS를 사용해야하는 이유 HSTS(HTTP Strict Transport Security) - Web Site에 접속할 때, 강제적으로 HTTPS Protocol로만 접속하게 하는 기능이다. - 즉, HTTPS Protocol을 지원하는 웹 사이트에서 HTTPS Protocol만을 사용해서 통신할 수 있음을, 접속하고자 하는 브라우저에게 알려주고 브라우저에게 HTTPS Protocol만 사용하도록 강제하는 기능이다. - 이는 해커와 같은 공격자가 중간자공격을 하여 중간에 Proxy Server를 두고, 사용자와는 HTTP 통신을 하고 실제 웹 사이트와는 HTTPS 통신을 해도 사용자는 이를 인식하지 못하며, 사용자와 실제 웹 사이트가 주고 받는 모든 정보는 공격자에게 노출되게 된다. 이를 SSL Stripping 공격이라고 하며..
REST API - REST API : REST를 기반으로 만들어진 API를 말한다. 1. REST(Representational State Transfer)란? - REST는 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. - HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시하고 - HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 - 해당 자원(URI)에 대한 CRUD(Create, Read, Update, Delete) Operation을 적용하는 것을 의미한다. 2. REST 구성 1) 자원(Resource) : HTTP URI 2) 자원에 대한 행위(Verb) : HTTP Method 3) 자원에 대한 행위의 ..
AJAX란? 1. AJAX(Asynchronous Javascript And XML) - 비동기식 자바스크립트와 xml의 약자 - 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 - JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱싱할 수 있다. - Ajax의 가장 핵심적인 구성 요소는 XMLHttpRequest 객체이며, 이는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다. * 서버와는 다음과 같은 형태의 데이터를 주고 받을 수 있다. - JSON - XML - HTML - 텍스트 파일 등 * Ajax 장점 - 웹페이지의 속도향상 : 페이지 전체가 아닌 필요한 부분만 업데이트할 수 있기 ..
웹 서버와 WAS(Web Application Server) 1. 웹 서버(Web Server) - 웹 서버는 클라이언트(사용자)가 브라우저 주소창에 url을 입력하여 어떤 페이지를 요청하게 되면 http 요청을 받아들여 HTML 문서, CSS, 이미지, 파일 등과 같은 정적인 콘텐츠를 사용자에게 전달해주는 역할을 한다. - 웹 서버는 저장된 웹 리소스들을 클라이언트로 전달하고, 클라이언트로부터 콘텐츠를 전달받아 저장하거나 처리한다. - 만약 사용자로부터 동적인 요청이 들어왔을 때 해당 요청을 웹 서버 자체적으로 처리하기 어렵기 때문에 해당 요청을 WAS에게 요청한다. - 대표적인 웹 서버 종류 : Apache, Nginx 등 2. WAS(Web Application Server) - WAS는 웹 애플리케이션과 서버 환경을 만들어 동작시키는 기능을 제공하는 소프트..
CORS란 무엇인가? 1. CORS(Cross-Origin Resource Sharing) - CORS는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. - 즉, 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하도록 브라우저에 알려주는 체제이다. - 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한하는데, cross-origin 요청을 하려면 서버의 동의가 필요하다. 만약 서버가 동의한다면 브라우저에서 요청을 허락하고, 동의하지 않으면 브라우저에서 거절한다. - 이렇게 허락을 구하고 거절하는 매커니즘을 HTTP-h..
CSR, SSG, SSR Next.js를 공부를 시작하면서 웹 사이트의 랜더링 방법에 대해서 학습하게 되었다. 그동안 React를 사용하면서 CSR 개념은 알고 있었지만, CSR과 더불어 다양한 웹 사이트의 렌더링 방법에 대해서 정리해보고자 한다. 1. CSR(Client Side Rendering) - CSR은 렌더링 하는 주체가 클라이언트(브라우저)다. - 서버는 빈 HTML(index.html)과 모든 로직을 처리하는 자바스크립트 번들을 반환한다. - HTML, React 라이브러리 소스 코드, 개발자가 작성한 js(React) 코드를 서버로부터 받고 브라우저가 렌더링을 실시한다. 장점 - 처음 페이지가 로딩된 이후에는 부드럽고 빠른 사용자 경험을 제공한다. - 그 이유는 처음 렌더링을 할 때 필요한 파일들을 모두 서버로부..

티스토리툴바