FIF's 코딩팩토리

CSR은 Client Side Rendering의 약자이고, SSR은 Server Side Rendering 의 약자이다. 말 그대로 웹 페이지가 화면이 보여질 때 CSR은 클라이언트(브라우저: 크롬, 엣지등) 에서 렌더링하고 SSR은 서버측에서 렌더링 한다. CSR과 SSR에 들어가기 앞서 SPA와 MPA개념에 대해 먼저 알아야 한다. 1. SPA와 MPA의 차이점부터 톺아보기 오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. SPA SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면..

뷰엑스란 뷰의 상태 관리 패턴이자 라이브러리입니다. Vue.js에서 컴포넌트끼리 데이터 양방향 통신을 위해 props나 event-emit을 사용할 수 있지만, 컴포넌트들이 많아지면 공유되는 데이터들을 관리하기 어려워질 수 있습니다. 그래서 나온 뷰의 상태관리 라이브러리가 Vuex입니다. Vue3에서는 pinia를 권고하고 있지만 Vuex도 아직 많이 사용되고 있으므로 알고 있으면 좋습니다. (vuex와 pinia의 가장 큰 차이점은 아래 vuex의 기술요소에도 나오겠지만, pinia에서는 mutations가 없습니다.) 상태 관리란 현대 프런트엔드 프레임워크에서 모두 사용하는 개발 패턴입니다. 뷰에서는 뷰엑스(Vuex)라는 상태 관리 패턴을 사용합니다. 상태 관리가 필요한 이유는 컴포넌트의 숫자가 많아..

Spread Operator - ... 연산자 스프레드의 사전적인 뜻은 '펼치다' 정도 이다. 스프레드 오퍼레이터는 자바스크립트 표현식을 확장(펼칠 수 있는)할 수 있는 연산자 이다. 배열이나 객체에서 주로 사용하고 표현은 점3개 ... 로 한다. 아래는 사용 예이다. array1 배열에 1,2,3 값이 있다. array2 배열요소 안에 ...array1 이라고 하면 [1,2,3] 값을 일일이 쓸 필요 없이 사용할 수 있다. array1를 콘솔에 출력해보면 [1,2,3,4,5] 가 나온다. 펼치다(spread)는 것은 객체 혹은 배열의 속성을 가져올 수 있다는 것을 의미한다. const array1 = [1, 2, 3]; const array2 = [...array1, 4, 5]; console.log(..

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 ..

최근 다양한 프론트엔드 기술이 나오게 되면서 무조건 트렌드를 따르기보다 현재 기술을 왜 사용하고 그와 비교해 다른 기술의 특징과 장단점은 뭘까? 라며 왜? 라는 의문을 해결해보고자 합니다. Vue.js란? Vue.js는 Google Creative Laps에서 근무하던 Evan You가 개발하였으며, “AngularJS 에서 내가 좋아하는 특성만 담은 가벼운 라이브러리를 만들 수 있지 않을까?” 라는 점과 좀더 쉽게 접근할 수 있는 웹 프레임워크를 만들고자 탄생하게 되었습니다. Vue의 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하며, 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도..

Ajax 소개 Ajax는 'Asynchronous JavaScript and XML'의 약자입니다. Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법입니다. Ajax의 동작원리는 Browser에서 서버로 보낼 Data를 Ajax Engine을 통해 Server로 전송합니다. 이 때 Ajax Engine에서는 JavaScript를 통해 DOM을 사용하여 XMLHttpRequest(XHR) 객체로 Data를 전달합니다. 이 XHR을 이용해서 Server에서 비동기 방식으로 자료를 조회해 올 수 있습니다. Server에서 Data를 전달 할 때 화면전체의 HTML을 전달하지 않고 Text 또는 Xml형식으로 Browser에 전달합니다. 왜 Ajax인가? 물론 Ajax는 Browser의..

클로저란? MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게된다. 말로 설명하면 설명하기가 복잡하니 우선 코드를 보자. function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'variable 1' 위에서 정의한 getClosure()는 함수를 반환하고, 반환된 함수는 get..

올해 봄에만 해도 코딩에 대해서 지금보다 더 아무것도 모를때 "자바스크립트는 '자바'라는 글자가 들어가니까 '자바'의 일종(스크립트)인 언어구나!" 라고 오해했었다. 공부한지 시간이 몇 달 지난 지금에서 보면 왜 이름에 자바가 들어가는지 이해가 안된다. 최초 이름은 Mocha 모카였고 단 10일만에 만들어낸 언어라고 한다. 그 당시에 가장 핫한 언어가 자바였기 때문에 어떻게든 연관 시키고 싶어서 그렇게 되었다고 선생님이 말씀해주셨다. 자바스크립트가 처음 출현했을때는 한참 브라우저 별로 각자 다른 기능을 제공하던 시기여서 근본 없는 언어라는 오명을 받았지만 2005년에 Ajax가 발표되고 동적 웹사이트가 인기를 끌면서, 자바스크립트가 다시 뜨게되었고, jQuery, Prototype.js 와 같은 라이브러..