TIL (52) 썸네일형 리스트형 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.. 191202(월) TIL-1. Interaction With Server [CODESTATES im16] Interaction With Server API를 활용해서 UI를 만드는 스프린트 웹개발을 하는 것에 대한 기본적인 flow를 익히는 스프린트 1. Web Architecture API: Application Programming Interface 프로그래밍되어있는 애플리케이션과 의사소통 가능한 매개체 UI: User Interface 유저와 의사소통 가능한 매개체 1-1. Interface 사물과 사물, 사물과 인간간의 의사소통이 가능하도록 만든 객체 [wiki] 인터페이스(컴퓨팅) 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템 client: 서버에 데이터를 요청하고 받아서 보여줌 Ajax: 서버에 필요한 정보를 요청. JS로 DOM만 바꿈. server: 클라.. 191128(목) TIL-1. CSS [CSS] 자료 1. 웹의 구성을 재미있게 해주는 HTML/CSS 효과들 http://rwdb.kr/interestedeffects/ 여러 유용한 CSS들을 CODEPEN을 이용해 소개한 사이트. rainbow effect와 hover effect가 필요해서 찾다가 발견한 사이트이다. [CODEPEN] Material Navigation Pure CSS [CODEPEN] CSS Hover Effects for Links [CODEPEN]Rainbow Effect Button 2. Rainbow Gradient Border https://codepen.io/unnegative/pen/dVwYBq 말 그대로 무지개 테두리를 만드는 codepen 3. 마우스 오버 버튼 CSS3 효과 https://codepe.. 191125(월) TIL-1. N-Queens [CODESTATES im16] N-Queens 숫자 오름차순 순서로 수도코드를 짰음. 정리하다 보니 더 나은 방법이 떠올랐기 때문에 현재로써는(내가 짤 수 있는 로직 기준) n queens가 가장 효율적임.(n rooks도 그 방법으로 할 예정) 1. findNRooksSolution() : returns a single solution to the n-rooks problem 2. countNRooksSolutions() : returns a count of the total number of solutions to the n-rooks problem 3. findNQueensSolution() : returns a single solution to the n-queens problem 4. coun.. 이전 1 2 3 4 5 6 7 다음
