SSR과 CSR[그림] SSR vs CSR SSR vs CSR이 콘텐츠에서는 SSR과 CSR(Client Side Rendering)의 차이점을 설명합니다. 웹 개발에서 이 두 가지의 차이점을 아는 것은 매우 중요합니다. 먼저 SSR과 CSR의 정의와 차이점을 설명합니다.What is SSR?[그림] SSR SSR은 Server Side Rendering의 줄임말입니다. Javascript 가 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링합니다.빗대어 표현한다면, 온라인에서 가구를 주문했을 때 배송 출발지에서 조립을 완료한 상태로 보내는 것입니다.브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도..
Network네트워크를 학습하러 오신 여러분 환영합니다!이번 학습에서는 우리가 그동안 접해왔던 웹 애플리케이션이 동작하는 원리에 대해 학습하게 됩니다. 우리가 사용하는 웹 브라우저의 동작 원리나, 실제 서버와 클라이언트에 대해 학습하게 됩니다. 왜 클라이언트와 서버로 나누어져 있는지, 실제 통신이 이루어지는 과정을 학습하게 됩니다.학습 목표웹 애플리케이션 네이티브 애플리케이션의의 기본 개념에 대해 이해할 수 있다.네트워크를 만드는 기술을 이해할 수 있다.TCP/IP의 기본에 대해 이해할 수 있다.IP의 기본개념에 대해 이해할 수 있다.TCP와 UDP 개념과 그 차이를 이해할 수 있다.PORT의 개념과 그 차이를 이해할 수 있다.URL, DNS의 기본에 대해 이해할 수 있다.DNS 기본적인 작동원리를 이해..
실습 과제 - React Twittler SPAReact Twittler SPA이번 React Twittler SPA 스프린트에서는 기존 React Twittler Intro 에 React Router 기능을 담은 Twittler 로 발전시킵니다.학습 목표npm 을 이용해 react-router-dom을 설치할 수 있다.컴포넌트 단위로 Client-side routing 을 할 수 있다.react-router-dom 를 활용하여 Twittler SPA를 구현할 수 있다.시작하기Repositoryjs-sprint-react-twittler-spa 에서 과제를 fork 합니다. 터미널에서 git clone 명령어로 레포지토리를 클론 후 과제를 진행합니다. npm script 소개npm install을 통해 ..
비동기비동기 쉽게 이해하기커피숍에서 커피를 주문하려고 줄을 서는 모습을 상상해 보세요. 커피숍 사정상, 커피를 주문한 먼저 온 김코딩이 주문한 커피를 받을 때까지, 줄 서 있는 박해커가 주문조차 할 수 없다고 하겠습니다. 이를 우리는 블로킹(blocking)이라고 부릅니다. 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"입니다.박해커는 김코딩이 주문한 커피가 나오고 나서야 커피를 주문할 수 있습니다. 김코딩의 커피 주문 완료 시점과 박해커의 커피 주문 시작 시점이 같습니다. 이렇게 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다."라고 합니다.효율적인 커피숍 운영을 위해서 아래와 같이 커피숍 주문 과정을 변경해 봅시다.커피 주문이 블로킹(blocking) 되지 않고, 언..
[JavaScript] 고차 함수JavaScript 프로그래밍의 단계를 한 단계 높이는 방법에 대해서 학습합니다. 산 정상에서 내려다보면 더 넓은 시야를 가질 수 있습니다. 프로그래밍도 마찬가지로 높은 수준에서 생각하면, 높은 수준의 결과물이 나올 수 있습니다. 고차 함수를 통해 높은 수준에서 사고하는 방식을 학습합니다. 그리고 지금까지 학습한 내용을 종합하여, 좀 더 복잡한 알고리즘을 직접 구현할 수 있습니다.Before You LearnJavaScript 기초 문법타입원시 자료형과 구분되는 참조 자료형의 특징에 대해 이해해야 합니다.함수함수에 대한 전반적인 이해가 필요합니다.배열배열 요소의 조회, 추가, 변경, 삭제를 할 수 있어야 합니다.반복문을 이용하여 배열의 모든 요소를 순회할 수 있어야 합니다..
[JS/브라우저] DOMHTML을 학습할 때, HTML은 웹페이지의 구조를 만드는 마크업 언어, 그리고 JavaScript에 대해서는 HTML로 만들어진 구조에 기능을 더 할 수 있는 프로그래밍 언어라고 설명했습니다. 기억하고 계신가요? 카카오톡과 같은 메신저로 예를 든다면, HTML로 텍스트를 입력할 수 있는 입력폼을 만들 수는 있지만, 버튼을 클릭했을 때 입력폼에 입력된 텍스트가 채팅창에 띄워지도록 만들 수는 없습니다. 이런 작업은 JavaScript로 해야 하는 작업입니다.이처럼 JavaScript를 이용하면 단순한 웹 문서를 웹 애플리케이션으로 바꿀 수 있습니다. 여러분도 이 유닛을 학습한 후에는, 브라우저 환경에서 JavaScript를 이용해 HTML을 조작할 수 있게 됩니다.Before You..
Chapter4. ES6 신규 문법JavaScript에도 일종의 버전이 있다는 사실을 들어 보셨나요? 바로 JavaScript의 표준인 ECMAScript(이하 ES)입니다. 현재까지 가장 최신 버전은 2019년에 출시된 ES2019이지만, 2015년에 출시된 ES6(ECMA Script6)에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었습니다. 여러분이 이미 학습한 let 키워드와 const 키워드, 템플릿 리터럴 등이 모두 ES6부터 적용된 문법입니다. 이번 챕터에서는 ES6에서 새롭게 적용된 문법 중 spread/rest문법, 구조 분해 할당(destructing), 화살표 함수를 학습합니다.학습 목표spread/rest 문법을 사용할 수 있다.구조 분해 할당을 사용할 수 ..
계산기 구현하기Getting Started계산기 과제 Github 리포지토리Github 리포지토리에서 파일을 다운로드해 진행합니다. 이 레포지토리에는 어느 정도 완성된 계산기가 구현되어 있습니다. 튜토리얼을 참고하여 이 계산기의 가장 기본적인 연산 기능을 구현합니다.Bare Minimum RequirementsBare Minimum Requirements는 소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항입니다. 소프트웨어의 프로토타입을 빠르게 만들고, 프로토타입을 두고 기획자, 디자이너와 함께 회의를 하고 유저 경험을 개선할 수 있습니다. 개발자도 프로토타입을 생성하고 공유하고, 테스트하는 과정에서 이 소프트웨어에서 생길 수 있는 오류를 좀 더 빠르게 예측할 수 있습니다.튜토리얼 1버튼이 잘 눌렸..
Chapter2-3. Boolean 타입개념학습: Boolean 타입을 다루는 방법에 대해 학습하고 실습한다.퀴즈: Boolean 타입에 대한 이해도를 퀴즈를 통해 점검합니다.개념학습Boolean 타입Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.true;false; falsy불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.// 대표적인 falsy 값false0-00n""''``nullundefinedNaN 비교연산..
Chapter3. CSS Selector이전 유닛에서 id와 class를 사용하여 HTML 태그에 CSS 속성을 적용할 수 있다는 것을 학습하였습니다. 이처럼 CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector라고 합니다. 지금까지는 id와 class를 사용해 적용하는 방법을 주로 사용했지만, 이번 챕터에서는 보다 다양한 CSS selector를 학습합니다. 학습 후에는 CSS selector의 실제 사용 예시를 익히는 퀴즈를 풀어보겠습니다.Chapter3-1. 다양한 CSS selector개념학습: 다양한 CSS Selector에 대하여 학습합니다.개념학습앞서 학습한 선택자는 class 선택자(.)와 id 선택자(#)였습니다. 실제 환경에서는 선택자를 더욱 다양한 방법으로 사용할 수 있..
