1. createReactApp 말고 다른 방법으로 하는 방법 예시 코드 하나 작성 --------- 1. History API가 뭔데 - history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 - 뒤로 가기, 앞으로 가기, 페이지 이동 등을 조작할 수 있음 - history 란 세션 기록(페이지 방문 기록)에 대한 접근 방법과 메서드를 제공하는 것 - history.back() : 뒤로가기 - history.forward() : 앞으로 가기 - history.go() : 세션 기록 내 페이지로 이동 // chrome 켜서 확인 시켜주기 2. BrowserRouter 요소의 기능, History API와의 관련성 3. Route 사용법 및 데이터 형식 4. export ..

리액트의 특징 3가지 1. 선언형(Declarative) : 한 페이지를 보여주기 위해 html, css, js로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 const name = 'yoonhyewon' const element = Hello,{name} 2. 컴포넌트 기반 (Component-Based) - 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함 3. 범용성 (Learn Once, Write Anywhere) - js 프로젝트 어디에든 유연하게 적용 가능 - facebook 에서 관리되고 있어 안정적이며, 유명하고, 리액트 네이티브 모바일 개발도 가능함 - 2020년 기준 가장 유명한 프론트엔드 기술 - ..

[], {}, () 대괄호 [] 1. list 나열 혹은 list 인덱스 지정 ex) list[0], list[1] 중괄호 {} 1. dictionary 만들때 {'key':'value'} 2. style tag 지정 시 3. 특정 function에 대해 정의 할 때 function test(){} 형식이 되겠죠.. 4. for / if 등의 문법 상 필요할 때 소괄호 () 1. for나 if 같은 문법에 조건 식 넣을 때 JSON (Javascript Object Notation) 데이터를 저장하거나 전송할 때 많이 사용되는 "경량" Data 교환 형식 쉽게 말해서 javascript에서 객체를 만들 때 사용하는 표현식을 의미 -- 사람 기계 모두 이해하기 쉬우며 용량이 작아서 데이터 전송에 많이 쓰이..

// settimeout : 실행할 함수, 초(밀리세컨 단위) [callback] 콜백함수 : 간단하게 다른 함수에 매개변수로 넘겨준 함수를 의미 매개변수로 넘겨받은 함수는 일단 매개변수 먼저 넘겨받아둔 상태에서 일정 시점(때)가 되면 나중에 호출(call back)한다는 의미 // 콜백함수가 필요한 이유 1. 변수의 유효범위 (scope) 2. 동기/비동기(synchronous/Asynchronous) -> 이런 걸 위해서 함수를 활용하는 하나의 방법론적인 부분 유용한데.. 내가 a~z까지 console 찍는 행위를 제어하고 싶으면 코드가 너무 복잡해진다.. -> Callback Hell -- 작성자 입장에서는 크게 문제가 안될 수도 있으나 이걸 추후에 누군가 유지보수 한다고 생각하면? hell 이다...

'part-2/02_promiseConstructor.js' 파일을 구현하고, 테스트를 통과합니다. callback이라는 매개변수(parameter) 대신, Promise의 resolve, reject 함수를 이용하세요. part-2/03_basicChaining.js은, 앞서 작성한 getDataFromFilePromise를 이용해서 풀어야 합니다. fs 모듈을 직접 사용하는 것이 아닙니다. getDataFromFilePromise를 이용해, 'files/user1.json' 파일과 'files/user2.json' 파일을 불러오고, 두 파일을 합쳐서 최종적으로 두 객체가 담긴 배열을 만드는 것이 목표입니다. 파일 경로를 찾을 때, user1Path 및 user2Path를 이용하세요. then이 어떤 ..

1. each // [ for-each ] // 1. collection(배열 혹은 객체)과 함수 iteratee(반복되는 작업)를 인자로 전달받아 (iteratee는 함수의 인자로 전달되는 함수이므로 callback 함수) // 2. collection의 데이터(element 또는 property)를 순회하면서 // 3. iteratee에 각 데이터를 인자로 전달하여 실행합니다. _.each = function (collection, iteratee) { // TODO: 여기에 코드를 작성합니다. if (Array.isArray(collection)) { for (let idx = 0; idx 인자가 짝수판별 조건에 부합하는 지에 대한 결과 값을 true 로 뱉어 줄거임 if (짝수판별(짝수판별 인자값..

[ ES5 ] function BbangFrame(zearyo1, zearyo2){ this.base = zearyo1; this.main = zearyo2; } var creambbang = new BbangFrame('밀가루', '크림') console.log(creambbang) var strawberrybbang = new BbangFrame('쌀가루','딸기') console.log(strawberrybbang) [ ES6 ] class BbangFrame2{ constructor(zearyo1,zearyo2){ this.base = zearyo1; this.main = zearyo2; } } let patbbang = new BbangFrame2('밀가루','팥x2') console.log(p..

1. filter : 배열 메서드 - 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드 - filter 메서드 사용 예시 // 함수 표현식 const isEven = function (num) { return num%2 === 0; } let arr = [1,2,3,4]; // '짝수'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달된다. let output = arr.filter(isEven); console.log(output); // ->> [2,4] const isLteFive = function (str) { // Lte = less than equal return str.length > ['hello', 'code', 'happy'] - filter 활용 ..

고차함수 Higher order function - 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수 콜백함수 callback function - 다른 함수(caller)의 전달인자(argument)로 전달되는 함수 - 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백함수라는 이름이 붙혀짐 커링 함수 - 함수를 리턴하는 함수 - 따로 커링 함수라는 용어를 사용하는 경우에는, 고차 함수라는 용어를 '함수를 전달인자로 받는 함수'에만 한정해 사용하기도 함 - 고차 함수가 커링 함수를 포함 '함수를 리턴하는 함수'와 '함수를 전달인자로 받는 함수' 모두, 고차 함수로 사용 1. 다른 함수를 인자로 받는 경우 function double(num) { re..

1단계. 문제 이해 및 설계 범위 확정 기능적 요구사항 파일 추가. 가장 쉬운 방법으로는 구글 드라이브 안으로 drag-and-drop 가능하도록 파일 다운로드 여러 단말에 파일 동기화. 한 단말에서 파일 추가 시 다른 단말에도 자동으로 동기화 파일 갱신 이력 조회(revision history) 파일 공유 파일이 편집되거나 삭제되거나 새롭게 공유되었을 때 알림 표시 비기능적 요구사항 안정성: 저장소 시스템에서 안정성은 매우 중요. 데이터 손실 발생하면 안됨 빠른 동기화 속도 네트워크 대역폭: 너무 많이 사용하면 사용자 불편 초래 규모 확장성: 아주 많은 양의 트래픽도 처리 가능해야 함 높은 가용성: 일부 서버에 장애가 발생하거나, 느려지거나, 네트워크 일부가 끊겨도 시스템은 계속 사용 가능해야 함 개략..

1단계. 문제 이해 및 설계 범위 확정 아래와 같은 기능을 갖는 비디오 스트리밍 서비스 설계에 초점을 맞출 예정 빠른 비디오 업로드 원활한 비디오 재생 재생 품질 선택 기능 낮은 인프라 비용 infrastructure cost 높은 가용성과 규모 확장성, 그리고 안정성 지원 클라이언트: 모바일 앱, 웹 브라우저, 그리고 스마트 TV 개략적 규모 추정 일간 능동 사용자DAU 수는 5백만(5million) 한 사용자는 하루에 평균 5개의 비디오 시청 10%의 사용자가 하루에 1비디오 업로드 비디오 평균 크기는 300MB 비디오 저장을 위해 매일 새로 요구되는 저장 용량 : 150TB CDN 비용 클라우드 CDN을 통해 비디오를 서비스할 경우 CDN에서 나가는 데이터의 양에 따라 과금 아마존의 클라우드프론트C..

검색어 자동완성 (autocomplete, typehead, search-as-you-type, incremental search)에 관한 이야기. 1단계. 문제 이해 및 설계 범위 확정 요구사항 빠른 응답속도 : 사용자가 검색어를 입력함에 따라 자동완성 검색어도 충분히 빨리 표시되어야 함 페이스북 공식 문서 기준 시스템 응답속도는 100밀리초 이내여야 한다 연관성 정렬 : 시스템의 계산 결과는 인기도(popularity) 등의 순위 모델(ranking model)에 의해 정렬되어 있어야 한다. 규모 확장성 : 많은 트래픽을 감당할 수 있도록 확장 가능해야 한다. 고가용성 : 시스템의 일부에 장애가 발생하거나, 느려지거나, 예상치 못한 네트워크 문제가 생겨도 시스템은 지속 가능해야 함 개략적 규모 추정 ..