CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저의 렌더링 방식으로 CSR과 SSR의 영어 풀이 그대로 렌더링을 클라이언트 측에서 하냐, 렌더링을 서버 측에서 하냐입니다. 즉, 브라우저 상에 그릴 콘텐츠를 어디서 만드는가가 기준입니다. 두 개념 다 궁극적인 목표는 같습니다. 결과적으로 웹에서 콘텐츠를 만들어 유저에게 보여주겠다는 목표는 같으며, 그 목표를 이루기 위한 방법으로 CSR은 클라이언트에서 HTML을 DOM을 이용해서 만들어 화면에 그리는 것이고 SSR은 서버에서 HTML을 만들어서 내려보내준다는 점의 차이가 있을 뿐입니다. 클라이언트 사이드 렌더링 (CSR) 클라이언트 사이드 렌더링은 말 그대로 렌더링이 클라이언트 쪽에서 일어나는 것입..

브라우저란? 브라우저란 웹 서버에서 쌍방향으로 통신하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람하기 위한 GUI 기반의 소프트웨어 프로그램입니다. 프론트엔드 개발자라면 단순히 코드 개발을 하는 것을 뛰어넘어 브라우저가 어떻게 동작을 하는지, 어떻게 렌더링을 수행하는 지에 대해 아는 것이 굉장히 중요합니다. 브라우저를 화면에 표시하기 위해서는 렌더링 엔진이 반드시 필요한데 브라우저마다 다른 엔진을 가지고 있어 개발자는 브라우저 간의 지속성을 유지하기 위해 웹 표준을 고려해야합니다. (ex. Chrome: Blink, Safari: Webkit...) 브라우저 렌더링 방식 렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다...

웹 개발자라면 한번쯤은 CORS(Cross-Origin Resource Sharing) 정책 때문에 골머리를 앓는 경험을 하게 됩니다. 저도 프로젝트를 하는 동안 몇번의 CORS 에러를 경험했었는데 오늘은 CORS 문제에 대해서 포스팅해보겠습니다. CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보도록 합시다. SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻합니다. 말 그대로 “같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책입니다. 출처는 Protocol과 Host, 포트 번호까지 모두 합친 것을 의미합니다. 하나라도 다르면 동일한 출처로 보지 않습니다. 예시) https://www.origin.com vs http://www.origin.com..

REST API에서 REST는 “Representational State Transfer”의 약자로 REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. 특정 기술을 의미하는 것이 아님! REST 구성 자원 (Resource) - URI 행위 (Verb) - HTTP Method 표현 (Representations) REST의 특징 Uniform - HTTP 표준에만 따른다면, 특정 언어나 기술에 종속되지 않고 모든 플랫폼에서 사용할 수 있으며, URI로 지정한 리소스에 대한 조작이 가능한 아키텍처 스타일을 의미합니다. Stateless - REST는 무상태성 성격을 가진다. 작업을 위한 상태정보..

번들링 번들링(Bundling)이란 기본적으로 여러 개로 흩어져 있는 파일들을 하나의 파일로 모아주는 역할을 합니다. 더 정확하게 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업입니다. 하나의 파일에 많은 코드를 작성하게 되면 가독성이 떨어지고 그렇게 되면 코드를 관리하기가 어려워집니다. 그렇기 때문에 관련된 기능을 하나로 묶어 다른 코드와의 결합도를 줄이고, 재사용성을 높이기 위해 모듈화를합니다. 하지만 이렇게 되면 웹페이지에서 많은 양의 파일을 한번에 로드해야 하고 네트워크 병목현상이 발생할 수 있습니다. 번들링을 통해 이 문제를 해결할 수 있습니다. 작업할 때는 여러 개로 나누어서 작업하고 최종적으로 웹서버에 올릴 때는 하나의 파일로 압축하여 올리는 것 입니다. 번들링을 이용하게 되면 이전에 각..

개념 React는 메타(페이스북)가 주도하여 개발한 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다. 장점 React는 방대한 커뮤니티와 자료가 있어 쉽게 접하고 배울 수 있다. CRS (Client Side Rendering), SSR (Server Side Rendering) 둘 다 지원한다. 가상돔 (Virtual DOM)을 사용하여 어플리케이션의 성능을 향상시킨다. Component를 사용하기 때문에 가독성이 높고 재사용에 용이하다. 단점 View 만 담당하기 때문에 Vuew 이외의 기능은 Third Party Library를 사용하거나 직접 구현해야한다. Component 란? 컴포넌트(Component)란 프로그래밍에 ..