ivorycode

이 글은 Webpack에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Webpack이란? Webpack이란, 오픈 소스 자바스크립트 모듈 번들러(Module Bundler)로써 여러 개로 나눠진 파일들을 하나의 자바스크립트 코드로 압축하고 최적화한다. 간단한 정의부터 알아보려고 했더니, 뜬금없이 모듈 번들러라는 녀석이 등장했다. 지금부터 모듈 번들러의 개념을 이해하고 Webpack을 파헤쳐보자!! Module Bundler Module 먼저 모듈(Module)이란, 특정 기능을 갖는 작은 코드 단위를 말한다. 즉, 프로그램을 구성하는 구성 요소의 일부다. 모듈은 관련 데이터와 함수들을 묶어 파일 단위로 나누는 것이 일반..

이 글은 Babel에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Babel이란? JavaScript Compiler Babel 공식문서에 따르면, Babel은 JavaScript(이하 JS) Complier(이하 컴파일러)라고 정의되어 있다. 다시 정리하면, Babel은 JS의 컴파일러로서, 최신 JS 문법을 이전 단계의 JS문법으로 변환 가능하게 해주는 도구다. Babel, 왜 필요할까??? 끊임없이 발전하는 브라우저와 ES6 몇 년 전만 해도 가장 인기가 많고 많은 개발자들이 선호했던 jQuery가 빠르게 잊혔던 것처럼 프론트엔드 개발언어(다른 개발 분야도 마찬가지다.)는 빠르게 발전한다. 그와 동시에 브라우저 역..

이 글은 JavaScript의 this에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 내가 JavaScript를 처음 공부할 때, 가장 어려워했고 이해하기 힘들어했던 개념 중 하나다. 여담으로 정말 이 개념이 어려워서 부트캠프 진행하는 내내 구시렁댔던 기억이 난다. 그래서 오늘은 this에 대해 깊이 있는 공부를 해보려고 한다. this 사전적 의미와 비슷한 JavaScript의 this this는 사전적 의미로 '이것'이라는 뜻을 가졌는데, 지금부터 알아볼 this는 사전적 의미와 비슷한 기능을 가졌다. JavaScript의 this는 함수 내에서 호출 맥락(Context)을 의미하고 있다. 조금 말이 어려운데 쉽게 ..

이 글은 CORS에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 예전에 React를 이용하여 프로젝트를 진행하다 팀원 중 한 명이 CORS와 관련된 이슈와 마주한 적이 있었다. 당시 개발 초보자였던 우리에겐 이 이슈는 너무 강적이었기에 오로지 이슈 해결에만 집중하였고, CORS에 대한 개념을 정리하지 못했었다. 오늘은 그때 간과했던 부분들을 되짚어보고자 CORS에 대해 포스팅해보겠다. CORS Cross-Origin Resource Sharing CORS는 W3C에서 서로 다른 Origin에서 자원(Resource)을 공유할 수 있도록 하기 위해 내놓은 정책을 말한다. 여기서 서로 다른 Origin이라는 것은 도메인 또..

이 글은 SSR(Sever Side Rendering)과 CSR(Client Side Rendering)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Rendering 렌더링의 개념부터 다시 짚고 넘어가자! 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링의 과정은 아래를 참고하자! - 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다. - DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다. - CSS설정 및 위치를 설정한다. - Render트리가 그려지고 브라우저 화면에 표시된다. SSR Server Side Renderin..

이 글은 Storage에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 개발자 도구 Application 탭을 열어보면 Storage라는 카테고리가 있다. 여기엔 크게 로컬 스토리지, 세션 스토리지, 쿠기가 있고 그 밖에 IndexedDB와 Web SQL을 확인할 수 있는데, 도대체 이것들이 무엇이고 언제 사용하는지, 그리고 서로에 대한 차이점에 대해 알아보자!! Cookie 쿠키가 무엇인가? 쿠키란, HTTP의 일종으로써 인터넷 사용자가 어떤 웹페이지를 방문할 경우, 그 페이지가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 쿠키의 종류는 다음과 같다. - Session Cooki..

이 글은 브라우저 렌더링 과정에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 브라우저(Browser)란? 브라우저, 웹 브라우저라고 불리는 이것은 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어를 말한다. 쉽게 말해 브라우저를 통해 사용자들은 영상, 이미지 등 자료들을 주고 받을 수 있고 공유도 할 수 있다. 대표적인 브라우저는 구글 크롬, 모질라 파이어폭스, 오페라, 사파리, 인터넷 익스플로어 등이 있다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원(Resource)을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통..

이 글은 Rest API 와 GraphQL에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! REST API(RESTful API)와 GraphQL를 알아보기 전에 API에 대해 간략히 짚고 넘어가자!! API(Application Programming Interface) 언제나 그랬듯 알기쉽게 예시를 들어보겠다. 우리가 식당에 가면 홀에서 서빙하는 직원이 메뉴판을 가져다 준다. 그 메뉴판을 통해 음식을 정하여 점원을 통해 주문을 하게 되면, 점원은 주방 요리사에게 주문내용을 전달하게 된다. 주문을 받은 요리사는 그 즉시 요리를 시작할 것이고, 요리가 완성되면 다시 점원을 통해 요리를 전달받고 비로소 먹을 수 있게 된다. ..