코드스테이츠(Immersive) 썸네일형 리스트형 Databases 스프린트 Schema and Query Design 세션 Schema : blueprint for your database 관계형 데이터베이스 : table간의 관계 일대다 classId 사용(foreign key) origin은 한개만 존재 다대다 두개의 classId 사용(join) ORM Intro 세션 관계형데이터베이스에서 객체를 사용해서 통역사역할(정보를 집어넣고 바꾸는) Sequlize(프로미스 기반 nodejs ORM) Server Side Techniques(Promise) 비동기란?(Asynchronous) : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 예시) ajax, setTimeout 동기(Syncronous) : 동시에 일어난다 비동기처리 방식의 문제점 해결 -> 콜백 함수 -> 콜백 지옥발생(콜백의 분리로도 해결가능) -> Promise, Aync 사용가능 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ Checkpoints 12 - Chatterbox Server 1번 - Assume you have the following in subject.js: var x = 10 var mod = require('./lib/my-module.js') var result = mod.x ...and the following in lib/my-module.js: var x = 20 exports.x = 30 After subject.js runs, what will be the value of result? 10 20 30 2번 - Assume you have the following in subject.js: var mod = require('./lib/my-module.js') var result = mod.x ...and the following in lib/my-modu.. Event loop 싱글스레드 모든 리퀘스트가 끝날때까지 브라우저는 다른일을 할 수 없다.(블로킹) 동기적으로 요청하는일들이 블로킹 -> 비동기 콜백 자바스크립트는 한번에 하나 Settimeout 은 브라우저 상의 명령어 webApis에서 실행 이벤트루프의 task queue에 들어감 이벤트루프는 콜스택과 테스크 큐를 주시 Node.js 이벤트 기반의 논블로킹 I/O 모델 논블로킹: 다음함수의 실행이 현재 함수의 종료를 기다리지 않는것 유저의 클릭이나 네트워크에 리소스를 요청하는 이벤트가 논블로킹으로 이루어지는 Input Output model Datatstructures - Tree const Tree = function(value) { const newTree = {}; newTree.value = value; newTree.children = []; extend(newTree, treeMethods); return newTree; } var extend = function(to, from){ for(var key in from){ to[key] = from[key] } }; const treeMethods = {}; treeMethods.addChild = function(val) { var nTree = Tree(val); this.children.push(nTree); } treeMethods.contains = function(target) { if(this.value ==.. 리액트 props Component로 작성한 엘리먼트를 발견시 JSX 어트리뷰트를 해당 객체에 단일객체로 전달(이 객체가 props) props는 읽기 전용이기 때문에 수정해서는 안된다. state 직접 수정 x -> setState() 업데이트는 비동기적일수도(this 사용에 주의) 업데이트는 병합 state 끌어올리기(https://view.ziteboard.com/shared/96522991256516) BoilingVerdict 컴포넌트 생성 (celsius prop을 받아서 온도가 물을 끓이기에 충분한지 여부 출력) function BoilingVerdict(props) { if(props.celsius >= 100) { return The water would boil } return The wate.. Web Architecture 브라우저 Url을 받아와서 그에 해당하는 정보를 얻어오는 프로그램 Url의 구성(http + 서버명 + 디렉토리명 + 파일명) http(프로토콜의 한 종류) : 웹이 서로 통신하기 위해 사용하는 약속 서버명(host) : 특정 컴퓨터의 위치(name 혹은 IP address) port number : 호스트 컴퓨터 안의 network application을 아이덴티파이 표준화되있음으로 생략 (80-http , 443-https) URL path: 서버 api http ajax n-queens 스프린트 진행 1. n-queens 문제의 설명 체스의 룩과 퀸의 위치에 따라 충돌이 일어나는지 여부와 이에대한 경우의수를 프로그래밍 하는것이다 (작은버전의 알파고라고 할까..?) 2. 문제를 풀기 위한 전략 설명 - Rook의 row의 경우 선택하는 열에 1이 두개가 된다면 충돌 발생으로처리(column의 경우도 비슷) - Queens의 배열의 위치를 좌표값처럼 사용해서 증감에 따라 major와 minor 대각선 충돌 처리 3. 코드 구현 중 어려웠던 부분들에 대한 부분 공유 - 전체적인 코드에서 어떤 부분을 어떤곳에 활용해야할지 파악하는것이 힘들었다. - 함수에서 인자를 어떻게 받아서 어떻게 사용해야될지 파악하는것이 힘들었다. - 로직은 어떤방향으로 진행해야겠다 생각했으나 구현에 있어서 부족함을 느꼇다. 4. 추가.. 프로토타입 [[prototype]] null 또는 객체며 상속 구현 [[prototype]] 값은 Prototype 객체이며 __proto__로 접근 가능하다 접근하게되면 내부적으로 Object.getPrototypeOf 호출되어 프로토타입 객체 반환 객체를 생성할때 프로토타입 결정되지만 프로토타입 객체는 다른 임의의 객체로 변경 (부모 객체인 프로토타입을 동적으로 변경할 수 있다는것을 의미 -> 상속 구현) [[Prototype]] vs prototype 프로퍼티 [[prototype]]은 객체라면 모두 갖고있고 상속을 위해 사용, 함수의 경우 객체이기 때문에 기본적으로 [[prototype]] 갖고 (Function.prototype) + 'prototype 프로퍼티' 소유 function Person(name.. Checkpoints 10 - Order of Execution 1번 - After the following code runs, what will be the value of result? var x = 10; function f () { x = x + 1; return x; } function add (x, y) { return x + y; } var result = add(x, f()); 20 21 22 2번 - After the following code runs, what will be the value of result? var x = 10; function f () { x = x + 1; } var result = x; f(); 10 11 12 3번 - After the following code runs, what will be the value of r.. 이전 1 2 3 4 5 다음
