코드스테이츠(Immersive)/스프린트 썸네일형 리스트형 Server and Node 복습 토이알고리즘 Achievement Goals 프론트엔드 개발자를 위해 API문서 작성 가능 http 서버를 켜기 위해 nodeJS를 사용가능 웹브라우저를 이용해 서버와 통신 가능 export, require 사용가능 package.json에 scripts 수정가능 node module node application 디버깅 express 활용해서 서버코드 리팩토링 Sessions Sprints mini-node-server sprints handle post data in nodejs OPTIONS method cors Sprint Office Hour Deployment and Build Tools Achievement Goals Deployment의 의미를 파악, 코드를 남에게 배포가능 최소 AWS 서비스 블럭에서 3개 이상의 서비스를 활용하고 설명가능(S3, EC2, RDS) ssh접속의 의미 gitignore 사용가능 Sessions 환경변수 설정, --save, dependencies, 배포 전략 1. SPA server strategy (Single page application) build파일 서브를 위해 Amazon S3사용 2. Server Application deploy strategy 외부인의 로컬호스트 접속 차단해야함 Amazon EC2 에 있는 노드 설치후 서버 어플리케이션을 올린후 사용 EC2 : 유저가 원격 접속할 수 있는 AWS를 가진 컴퓨터 데이터베이스도 셋업 가능하지.. Authentication and Full Stack Development 스프린트 진행 (intro session > 프로젝트 코드 둘러보기 > 런코 문서 확인 > Directory 문서 확인 > User flow api 생성하기 > Authentication Session > 암호화, 세션 적용 > Advanced) shortly > url 변경 로그인 로그아웃 회원가입 유저관리 API 구현 유저인증 Authentication Session(일정시간동안 상태정보 유지, 서버에서 관리) - cookie(사용자 정보 브라우저 관리), token Encrytion - hasing(암호화), salting 하나의 서버 여러개의 요청 models의 users.js associate 파악(sql join?) 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/ 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. 추가.. 이전 1 2 다음
