본문 바로가기

전체 글

 (69)
191212(목) TIL-1. React, assign() [CODESTATES im16] React, assign() 1. Checkpoint A JavaScript library that builds on the premise of declarative and reusable components. : React 선언적이고 재사용가능한 구성 요소를 전제로 구축한 JS라이브러리 A structural framework for dynamic web apps. : Angular.jS 라이브러리: 사용자인 내가 필요한 코드를 갖다 씀 프레임워크: 구축된 틀에 사용자 코드가 얹혀짐. A predictable state container for JavaScript apps. : redux A JavaScript compiler that takes code written ..
191211(수) TIL-1. Recast.ly [CODESTATES im16] Recast.ly 1. Recast.ly recastly의 컴포넌트간 props 및 state flow 다이어그램 2. Sprint Office Hour 2-1. component 독립적이고, 재사용 가능한 코드의 집합 컴포넌트 합성: 컴포넌트 안의 컴포넌트 Class & function component 2-2. class vs function 차이: class: state, life cycle사용 가능 constructor는 상황에 따라 생략 가능(state를 사용하지 않는 경우 생성자를 쓰지 않아도 됨) 하지만 render()는 필수이다. function: class보다 가벼움 2-3. props HTML 속성을 통해 하위 컴포넌트에 전달되는 인자 부모 컴포넌트가 자..
191209(월) TIL-2. React Key Concept [CODESTATES im16] React Key Concept 1. Data flow 단방향 데이터 흐름 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐름. > 자식컴포넌트가 직접적으로 부모 컴포넌트에게 데이터를 전달해줄 수 없음. 2. 컴포넌트와 Props Props: 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터(속성) 단순히 사용만 할 수 있다. 변경할 수 없다. [React] 컴포넌트와 props 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 독립적으로 생각할 수 있음. 개념상 컴포넌트는 자바스크립트 함수와 비슷함. 임의의 입력 (“props”라고 부르는)을 받아들이고 어떤 게 화면에 나타나야 하는 지를 설명하는 React 요소를 반환함. 2-1. 함수형 및 ..
191209(월) TIL-1. React, 주요 ES6 문법 [CODESTATES im16] Start React 1. What is "React"? 관리해야 할 DOM이 많아질수록 상태 관리가 힘들어짐(요즘의 웹페이지는 한두가지 이상의 상태를 관리해야 함). => 프론트 엔드 라이브러리, 프레임웍이 많이 생김. 그 중 하나가 react. UI(User-Interface)를 만들기 위한 자바스크립트 Library. React가 DOM에 접근을 하는 도구들을 제공해준다는 점은 기본 JavaScript 또는 jQuery와 같지만, 언어의 구조가 사람의 생각 구조에 가깝게 직관적(Declarative)임. component(하나의 의미를 가진 독립적인 단위 모듈)에 집중 React 공식 한글페이지 선언형 React는 대화형 UI를 만드는 데 어려움을 줄입니다. 어플리케..
191206(금) TIL-1. Intro Express [CODESTATES im16] 1. Intro Express http 서버를 위한 작지만 강력한 툴을 제공하는 프레임워크 Express: 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크 Express 애플리케이션: 기본적으로 일련의 미들웨어 함수 호출입니다. Middleware: 중간 공정 Router: 어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정 wiki routing express: 예외처리를 자동으로 해줌. > 다른 url의 경우 404를 자동으로 보내줌 1-1. Middleware : 중간에서 받아들이는 것들. [Express] 미들웨어의 사용 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 ..
191205(목) 1. Chatterbox-server [CODESTATES im16] Chatterbox-server 1. Intro Chatterbox-Server 1-1. http 서버 만들기 서버: 무엇인가를 제공하는 주체 http 서버: http protocol을 통해 통신해서 API를 제공하는 주체 1-2. 각 요청 분기하고 분기에 따른 API제공하기 라우팅routing 데이터의 저장 일단 DB를 배우지 않은 상태이기 때문에 JS의 오브젝트에 저장할 수 있다. 하지만 이럴 경우 서버가 재시작되면 사라짐. node.js의 file system을 활용하기(Advanced) POST: fs.writeFile GET: fs.readFile 1-3. API문서 제공하기 꼭 들어가야 할 것. API 사용법(method, router, etc..) 기대되는 r..
191204(수) TIL-1. server intro [CODESTATES im16] server intro 역할을 바꿔서 생각해보기. 런타임이 OS. react: 변경점만 찾아서 반영해주는 기능이 있음. 가상의 dom 환경을 만들어서 실제 dom과 차이가 있을 때에 그것만 반영해주는 기능이 있음. 프로퍼티로 저장 -> 불러올때 빠르지만 dom이 무거워짐 매번 호출 -> 불러올때마다 시간소요가 있지만 dom이 가벼워짐 1. Event Loop [youyube. SconfEU] What the heck is the event loop anyway? 이벤트 루프에 대해 이해하기 좋은 유튜브 동영상. 한글자막도 있다! 시간 날 때 다시 보고 정리할 것임. event loop callback queue JS: single thread 언어 => 하나에 하나만 실행..
191203(화) TIL-1. Chatterbox [CODESTATES im16] Chatterbox 1. fetch로 POST하기 json을 전송하는 POST 요청을 보내기. const body = { name: 'zerocho' }; fetch('https://www.zerocho.com/api/post/json', { method: 'POST', body, headers: new Headers(), // 이 부분은 따로 설정하고싶은 header가 있다면 넣으세요 }).then((res) => { if (res.status === 200 || res.status === 201) { // 성공을 알리는 HTTP 상태 코드 res.json().then(json => console.log(json)); } else { console.error(res.st..

티스토리툴바