Chapter1. 웹 애플리케이션 아키텍처 1-1. 클라이언트 - 서버아키텍처 클라이언트-서버 아키텍처를 이해할 수 있다. HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다. API의 개념을 이해할 수 있다. 클라이언트 - 서버 아키텍처 (2 티어 아키텍처) 설계방식 쇼핑몰 앱을 예로 들어서, 인터넷 연결 없이 앱 사용이 불가능하다. 앱 안의 데이터는 인터넷 서버에서 받아오기 때문이다. 판매하려는 상품 정보가 전부 앱 안에 담긴 경우 앱과 연결된 서버가 존재하지 않는다면? 끊임없이 앱을 업데이트해야 한다. 기존 버전을 잘 사용하더라도 새 상품을 업데이트하면 기존버전에는 신상품에 대한 정보가 없어서 앱 자체를 업데이트해주어야 한다. 앱을 사용하는 사람들에게 상품 정보를 실시간으로 전달하기 어렵고 금..
더보기 state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다. React 컴포넌트(React Component)에 props를 전달할 수 있다. 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다. 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다. 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다. React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다. JSX 문법의 기본과..
SPA 전통적인 웹페이지에서는 한 부분만 바뀌더라도 페이지 전체를 로딩 했어야 했다. 웹사이트가 복잡해지면서 사용자와 상호작용이 더 빈번하게 일어나게 되었는데 그럴때마다 중복된 요소들을 매번 불러오는것이 서버와 불필요한 트래픽을 발생시켰다. 반면에 SPA에서는 화면에 필요한 데이터만 서버에서 전달받아서 브라우저에 해당하는 부분만 업데이트 하는 방식으로 작동한다. Sounds Great! However! 🥝 SPA 단점 1. 로딩하는데 오래걸린다. html은 화면로딩시에 script태그로 javascript를 받아오는데 이때 대부분의 코드가 javascript에 들어있으니 무거워져서 로딩하는데 시간이 걸린다. 2. 최적화가 어려워진다. 검색로봇이 웹페이지에 있는 정보수집, 분석해서 인덱스에 저장하고 사용자..
🍅동기와 비동기 실행 요청을 하고 결과를 기다리는 주체가 누구인가에 따라 동기, 비동기로 나뉜다. 동기는 요청을 한 주체가 결과를 받고 비동기는 요청을 한 주체가 아닌 다른 주체가 결과를 받는 것이다. from 냠냠맨 - 이부분은 실행컨텍스트를 공부하고 나면 이해할 수 있는 부분이라 가볍게 상기 시키고 넘어가 본다. 동기처리 : 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음코드를 실행하는 것 비동기처리 : 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 실행하는것 - 여기서도 블로킹/논블로킹 개념이 있으나 실행컨텍스트 이해가 필요하다 동기 처리는 실행순서가 보장되지만 속도가 느리고 비동기 처리는 속도가 빠르지만 실행순서가 보장되지 않는다. console.log("바로 나타났으면 좋겠당..
🥙 프로토타입 체인이란 OOP의 개념중 하나인 상속을 구현하려면 프로토타입 체인을 사용합니다. 자바스크립트에서 객체의 속성이나 매서드를 찾을 때, 해당 객체의 프로토타입을 따라 올라가면서 마치 유전자를 탐색하듯 검색을 합니다. 만약 해당 객체에서 찾는 속성이나 메서드가 없다면 그 객체의 프로토타입을 따라 올라가며 검색하고 더이상 프로토타입이 없을 때까지 계속해서 검색합니다. 이과정에서 프로토타입 체인에 있는 모든 객체의 속성과 메서드를 사용할 수 있습니다. 객체를 생성하는 Tv템플릿에 tv1이라는 인스턴스를 생성해서 데이터가 들어간 객체를 만들 수 있습니다. 부모는 자식에게 name과 price라는 속성을 상속해줍니다. 자바스크립트에는 prototype는 사람의 유전자와 비슷한역할을 합니다. 부모의 유전..
🌷프로토타입이 무엇인지 설명할 수 있다. 프로토타입은 마치 자동차 공장에서 만들어지는 차량의 원형과 비슷합니다. 자동차 공장에서는 한 번에 많은 차량을 만들어내기 위해 차량의 원형을 만들고, 그 원형을 기반으로 여러 대의 차량을 만듭니다. 이때, 차량의 원형은 디자인과 구조가 이미 결정되어 있으며, 만들어진 차량은 이 원형을 기반으로 하여 일부분만 수정하거나 추가하는 것으로 제작됩니다. 자바스크립트에서도 객체를 만들 때 비슷한 방식을 사용합니다. 객체를 만들기 위해 먼저 해당 객체의 원형인 프로토타입을 만들고, 그 프로토타입을 기반으로 다수의 객체를 생성합니다. 이때, 프로토타입은 객체의 기본 디자인과 기능을 정의하며, 객체는 이를 기반으로 하여 필요한 속성이나 메서드를 추가하거나 수정할 수 있습니다. ..
🍎 절차적 지향 프로그래밍 - 초기의 프로그래밍 언어는 단순하게 함수같이 절차를 따라 이동하는것이 전부였다. 🍎 객체 지향 프로그래밍 (OOP) - 그러나 객체지향 프로그래밍은 변수와 함수로 순차적으로 작동하는 것을 넘어서 - 데이터의 접근, 처리 과정에대한 모형을 만들어 내는 방식을 고안해냈다. - 데이터와 동작기능을 한 번에 묶여서 처리할 수 있게 되었다. 예를들어서, 원의 반지름이라는 속성이 있다. 속성을 가지고 원의 지름, 둘레,넓이를 구할 수 있다. 이때 반지름은 상태를 나타내는 데이터(프로퍼티) 원의 지름, 둘레, 넓이를 구하는 것은 동작(메서드)이다. - 이처럼 객체 지향 프로그래밍은 객체의 상태를 나타내는 데이터(프로퍼티)+상태 데이터를 조작할 수 있는 동작(메서드) 을 하나의 논리적인 단..
🍏 클래스란 무엇이고 왜 사용하는가? 클래스는 중복되는 객체를 일일히 적어주지 않아도 여러개의 객체를 쉽게 만들 수 있다. 따라서 클래스는 객체의 템플릿이라고 할 수 있다. 원하는 모양의 class틀 에다가 비슷한 모양의 객체를 넣고 찍어내는 붕어빵기계와 비슷한 맥락이라 할 수 있다. function Car(color) { } // class let avante = new Car('red'); let benz = new Car('orange'); let lamborghini = new Car('yellow;); // instance 붕어빵 기계인 Car(color)를 만들고 ➡️ class 붕어빵인 객체 (Car의 색상)를 class에 넣어 만드는 ➡️ instance 프로그래밍패턴이 바로 OOP, 객체..
