옥수수, 기록

들어가기 앞서 인터넷 연결없는 쇼핑몰 앱은 동작하지 않는다. 상품정보를 어딘가에 있는 서버에서 받아오기 때문 앱이 서버와 연결되어 있지 않다면 어떤 문제가? 앱 자체에 상품 정보를 넣어두어야 하는데 상품이 추가, 변경될 때 마다 앱을 업데이트 해줘야해서 상품 관련 정보를 실시간으로 제공하기 어렵다. 결제를 해야하는데 은행 서버와 연동이 되어있지 않아 결제도 불가능하다. 2-Tier 아키텍처 / 클라이언트-서버 아키텍쳐 빈번한 데이터 업데이트가 필요한 경우, 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시키는 것이 유리하다. 그리고 이렇게 분리시킨 것을 2티어 아키텍쳐 or 클라이언트-서버 아키텍쳐라고 부른다. 클라이언트 - 서버 클라이언트 - 리소스를 사용하는 앱 서버 - 리소스를 제공하는 곳 클라..

SPA의 등장 배경, 개념, 장단점 왜 등장했을까? - MPA가 불편해 전통적인 웹사이트(Multi Page Application)는 이벤트 발생시 혹은 페이지 전환시 페이지 전체를 불러왔다. 페이지 이동시 화면이 깜빡이고 전부 렌더링될 때 까지 기다려야한다. 하지만 웹사이트가 복잡해지고 애플리케이션의 형태를 가지며 사용자와 서비스간 상호작용이 증가했다. 중복되는 요소(네비게이션 바)들을 상호작용시마다 불러와 불필요한 트래픽 발생시켜 유저가 느린 서비스를 경험하게 했다. AJAX(비동기)를 이용해 어느정도 이런 문제를 해결할 수 있었지만, 페이지 새로고침은 해결이 안됐다. SPA? Single Page Aplication 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아, 브라우저에 해당하는 부..

리액트란? 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 리액트의 3가지 특징 선언형 웹의 한 페이지를 보여주기 위해HTML, CSS, JS로 코드를 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문, 기능 자체에 집중해 개발할 수 있다. 나중에 유지보수, 유닛테스트에도 장점 범용성 기존 JavaScript 프로젝트 어디든 유연하게 적용이 가능 Facebook에서 관리를 하고 있어 안정적이고 유명하며, 리액트 네이티브로 모바일 개발도 가능 JSX란? React에서 UI를 구성할 때 사용하는 문..

callback 일반 함수 구현 예 function cry() { // cry함수를 실행하면 울고 console.log("cry"); } function sing() { //sing 함수를 실행하면 노래하고 console.log("sing"); } function dance() { // dance 함수를 실행하면 춤추고 console.log("dance"); } 이거를 함수로 활용할 때 1. 기본 함수 기분 좋을때 춤을 추고 싶으면 sing()함수에 dance()로 변경해야함 function checkMood(mood) { if (mood === "good") { sing(); } else { cry(); } } checkMood("good"); checkMood("sad"); 콜백 함수 설명에 앞서 일..

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다. extends 키워드 extends 키워드는 부모 클래스(base class)를 상속받는 자식 클래스(sub class)를 정의할 때 사용한다. ex) class extends 형태로 사용한다. class Computer { constructor (monitor, speaker, internet, keyboard) { // Computer에 속성부여 this.monitor = monitor; this.speaker = speaker; this.internet = internet; this.keyboard = keyboard; } // 메서드 추가 생성 Shouting() { console.log(`Im using ${this.monitor}..

class 문법이란? 기존 생성자 함수, 프로토타입, 클로저를 사용해 객체 지향 프로그래밍을 구현하던 ES5와 다르게 ES6에서 class 키워드를 사용한 더 단순명료한 문법이 등장하였다. 그것이 바로 class 문법이다. 클래스 이름의 첫글자는 대문자를 사용하는게 일반적이다 (오류가 발생하지는 않는다) class Computer { // constructor (생성자) constructor (monitor, speaker, internet, keyboard) { // Computer에 속성부여 this.monitor = monitor; this.speaker = speaker; this.internet = internet; this.keyboard = keyboard; } // 메서드 추가 생성 Sho..

** 이하 속성(property), 객체(object) 프로토타입 체인? 자바스크립트는 객체에 속성을 조회할 때 해당 속성이 없으면 숨겨져 있는 [[Prototype]]속성을 조회하게 되는데 이것을 프로토타입 상속이라고 한다. __proto__ 속성을 사용하면 자신의 [[prototype]] 객체에 접근할 수 있다. let computer = { mouse: 'logitec', speaker: 'harman', monitor: 'LG', internet: 'SKB' [[Prototype]](안보임) } let macbook = { mouse: 'apple', speaker: 'apple', monitoer: 'LG' } macbook.internet; // JS : 없는 속성이네 Prototype을 참조..

1. 단순한 문제 해결 function getLengthOfElements(arr) { // arr에 string 타입요소 배열 // 배열을 입력받아(arr) 각 요소의 길이를 요소로 갖는 새 배열 리턴 // 반드시 arr.map을 사용할 것 arr.map((string) => { // 여기 return을 붙이지 않아 계속 undefined가 나오던 것.. 허무 return string.length; }) } 함수안에 고차함수를 또 사용할 때는 return 이 함수를 사용한 만큼 들어간다는 사실.. 잊지말자 2. function computeAverageOfNumbers(arr) { // const a = arr.reduce((acc, cur) => { return acc + cur; }) return ..