javascript (19) 썸네일형 리스트형 내가 아는 CSR과 SSR NextJS를 공부하는 주된 이유중의 하나가 SSR이다. 프론트엔드 구직 회사들의 채용조건들을 보다보면, NextJS가 있는걸 심심치 않게 볼 수 있다. 왜 그 회사들은 NextJS를 사용할까? 왜 CSR이 아닌 SSR일까? 이 물음에 답하기 전에 CSR과 SSR을 떠올려 보자.. CSR(Client Side Rendering) 클라이언트의 브라우저에서 렌더링을 담당하는 것. SSR(Server Side Rendering) 서버에서 렌더링을 담당하는 것. 렌더링은 뭐야??? 쉽게 말해 유저가 어떤 사이트에 들어 가면 서버에서 해당 사이트의 HTML 파일을 화면에 뿌려준다 이걸 렌더링이라고 한다. '서버'와 '클라이언트'의 대화를 통해 CSR를 한번 알아보자 1. User가 google(Website)에 .. JSON JSON은 JavaScript Object Notation 데이터 교환을 위해 만들어진 객체 형태의 포맷을 말한다. 네트워크(서버-클라이언트)에서 데이터를 주고 받을 때 송신자와 수신자 모두 같은 포맷의 형식으로 데이터를 주고 받아야 데이터 전송이 가능하고 데이터를 처리할수 있을 것이다. 데이터의 형식을 맞추기 위해 JSON을 사용한다. JSON 특징 JSON은 객체 형태이며 객체 안에 내용은 문자열(String)이다. * 객체는 타입 변환을 이용해 String으로 변환할 경우 객체의 내용은 바뀌지 않는다.(console.log result [object object]) JSON.stringify(): 객체를 JSON으로 변환 JSON.parse(): JSON을 객체로 변환 JSON.stringify().. TypeScript...? UDEMY에서 TypeScript 강의를 들으며 타입스크립트를 공부하고 있다. 왜 TypeScript를 쓰는가? TypeScript는 JavaScript의 발전,개선된 언어? 상위버전? 이라고 볼 수 있다. 타입스크립트를 왜 사용해야 하는지 알려면 자바스크립트와 비교해봐야 한다. JavaScript 자바스크립트는 동적 타입 특정 변수에 할당을 할때에 어떤 타입이 들어와도 오케이! 응 변수에 아무거나 들어와. 버그는 나중에 런타임에서 확인해 런타임(브라우저)에서 버그 잡을 수 있음 TypeScript TypeScript는 정적 타입 TypeScript는 특정 변수에 할당을 할때에 지정한 타입만 들어올 수 있어! 응 변수에는 지정한 타입만 들어올 수 있어. 버그? 바로 잡음 런타임 전 컴파일 과정에서 버그를.. 내장고차 함수 Array.reduce()에 대해 알아보자 내장고차 함수이면서 배열의 메서드로 사용하는 reduce 이해가 되다 가도 하다보면 헷갈리는 reduce.. 찬찬히 한번 보자 reduce의 과정 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축한다. (reduction) reduce의 특징 reduce(acc(누적값), cur(현재값or초기값)) 기존 배열을 수정하지 않는다. 배열을 하나의 값으로 만든다. 초기값을 정할 수 있다. 초기값이 없다면, 배열의 첫번째 요소가 초기값이 된다. 초기값을 정하면 배열의 첫번째 요소가 현재값이 된다. 값들을 누적해서 더해준다. 문자열이나 숫자를 합치거나 뺄 수 있다. 작은수, 큰수를 비교 할 수도 있다. acc에는 함수가 들어갈 수 있다. reduce는 이렇게 여러 데이터를, 하나의 데이터로 응.. 동기(sync)와 비동기(async) 비동기에 앞서 Blocking || Non-blocking과 callback에 대해서 짚고 넘어가자 Blocking || Non-blocking 전화와 문자를 예로 설명할 수 있다. 전화 문자 하던 일을 멈추고 받아야한다(blocking) 확인 후, 나중에 답장할 수 있다(none-blocking) 요청에 대한 결과가 동시에 일어난다(Synchronous) 요청에 대한 결과가 동시에 일어나지 않는다(Asynchronous) callback 앞서 공부한 callback에 대해서 알아야 한다. > calback in action : 반복 실행하는 함수 (iterator) [1,2,3,4].map(function(el, idx) { return el * el } ) > callback in action : 이.. class & instance (feat. OOP, ES6) class와 instance의 개념을 잘 잡아둬야 나중에 후회하지 않는다... class와 instance에 대해 알아보자 class 먼저 알아야 할것은 객체지향 프로그램이이다. 객체 지향 프로그래밍(OOP)은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 위의 설명에서 하나의 모델이 되는 청사진을 => class 그 청사진을 바탕으로 한 객체를 => instance 우리가 아는 객체와는 구분을 지어야 한다. 그냥 객체가 아니라 청사진을 바탕으로한 객체를 instance(object)라고 하고 청사진을 클래스(class)라고 한다. *ES5에서는 클래스는 함수로 정의 했고, ES6에서는 class라는 키워드로 정의한다. // ES5 .. 사고의 추상화(feat. filter, map, reduce) 추상화? 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화 우리 일상에서 추상화가 아닌것을 찾아보기 힘들다. 네이버 검색창에 검색어를 입력 했을 때, 검색어가 어떻게 입력이 되고 데이터가 전송이되고 어떻게 처리되는지... 알지 않아도 우리는 편하게 검색어만 입력해서 사용할 수 있다. 카카오톡에서 메세지를 보낼 때, 메세지를 입력하지만 이 메세지가 어떻게 입력이되고 어떻게 서버에 전송이되는지 알지 않아도 우리는 편하게 메세지를 보낸다. 이렇듯 추상화는 우리 일상의 대부분을 차지한다. 자바스크립트를 비롯한 대부분의 언어 역시, 추상화의 결과이다. 크롬 개발자 도구 console에서 코드를 입력하면 보이지 않는? 우리가 과정을 알지 못해도 코드의 결과를 볼 수 있다. 이 과정을 자바스크립트 .. Element와 node의 차이 DOM을 사용하다보면 element를 자주 보게 된다. 그렇다면 element와 node의 차이는 무엇일까?? node DOM 문서는 node의 계층 구조로 이루어져 있다. 계층 구조란? 상위에서 하위까지 단계를 말한다. 아래 그림처럼 각 층마다의 level 단계를 갖는다. node에는 요소, 텍스트, 주석 등 여러가지 유형을 가지고 있으며, element는 이러한 node 유형중 하나이다. element 태그로 작성된 노드를 말한다. element는 node의 여러 종류중 하나이다. 위 그림에서 element는 , , , , , ...등 이다. DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용한다. 이전 1 2 3 다음
