Trainings/이전 TIL 기록
-
[TIL] 2020-03-13Trainings/이전 TIL 기록 2020. 3. 13. 22:48
[groomedu] 가장 핫한 프런트엔드 라이브러리🔥, React 가지고 놀아보기 [생활코딩] React state까지 수강 [배운 내용] - React는 페이스북에서 만든 웹 프레임 워크이다. - 예전에는 단순히 정적인 정보만 보여주는 사이트가 많았다. - 하지만 지금은 웹상에서 정보를 입력하면 그 정보가 바로바로 업데이트된다. - 그렇기 때문에 요즘 웹 애플리케이션은 쉽게 동적 인터페이스를 나타내 줄 수 있다. - 하지만 이런 동적 인터페이스에는 수 많은 상태 관리가 필요하기 때문에 React가 만들어짐 - 페이스북은 수 많은 타임라인이 존재하고, 이 타임라인 안에 수많은 요소가 들어간다. (사진, 글, 좋아요, 댓글) - 하지만 웹 라이브러리의 도움 없이 HTML, CSS, Javascript로 이..
-
[TIL] 2020-03-12Trainings/이전 TIL 기록 2020. 3. 12. 23:30
[노마드 코더] ReactJS로 웹 서비스 만들기 #4. 2 Styling the Movies까지 수강 [배운 내용] App.js import React from "react"; import axios from "axios"; import Movie from "./Movie"; import "./App.css"; class App extends React.Component { state = { isLoading: true, movies: [] }; getMovies = async () => { const { data: { data: { movies } } } = await axios.get( "https://yts-proxy.now.sh/list_movies.json?sort_by=rating" ); t..
-
[TIL] 2020-03-09Trainings/이전 TIL 기록 2020. 3. 9. 23:45
[노마드 코더] ReactJS로 웹 서비스 만들기 #3.3 Planning the Movie Component 까지 수강 [배운 내용] [code] class App extends React.Component{ constructor(props){ super(props); console.log("Hello"); } state = { count: 0 }; add = () => { this.setState(current => ({ count: current.count + 1 })); }; minus = () => { this.setState(current => ({ count: current.count -1 })); }; componentDidMount() { console.log("component rend..
-
[TIL] 2020-03-08Trainings/이전 TIL 기록 2020. 3. 8. 23:54
[노마드 코더] ReactJS로 웹 서비스 만들기 #3.1 All you need to know about State까지 수강 [배운 내용] this의 값은 함수를 호출하는 방법에서 결정된다. 1. 전역에서 this console.log(this); // window {...} this.a = 'A'; console.log(window.a) // 'A' this.hello = 'world'; console.log(window.hello) // 'world' cat = "Meow"; console.log(window.cat) // 'Meow' console.log(cat) // 'Meow' thist는 기본적으로 전역 객체인 window에 바인딩된다. 2. 함수에서의 this function foo() {..
-
[TIL] 2020-03-07Trainings/이전 TIL 기록 2020. 3. 7. 23:53
[노마드 코더] ReactJS로 웹 서비스 만들기 #2 JSX & Props 까지 수강 [배운 내용] React 란? Facebook이 만든 UI 컴포넌트 라이브러리이다. React 특징 1. 컴포넌트 기반 아키텍처 - 템플릿언어가 아닌 자바스크립트로 컴포넌트 작성한다. - 특정 관심사에 집중된 기능 블록(관심사의 분리) 2. JSX 3. Virtual DOM 4. 단방향 데이터 흐름 지향 map() 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); result 배..
-
[TIL] 2020-03-06Trainings/이전 TIL 기록 2020. 3. 6. 23:00
[노마드 코더] 1. 바닐라 JS로 게임 만들기 수강 완료! 2. ReactJS로 웹 서비스 만들기 #2.0 Creating your first React Component까지 수강 [배운 내용] cmd 명령어 "mkdir" 은 명령어 뒤에 디렉토리명을 적어 새로운 디렉토리를 생성해준다. // mkdir helloworld "cd" 원하는 디렉터리로 이동하는 동작을 한다. // cd helloworld "ls" 명령어로 하위 디렉토리명을 확인 가능하다. git 명령어 git init : Git 저장소를 만들어주는 명령어. 실행하면 현재 디렉터리를 Git 저장소로 만들어준다. // git init git remote : 변경 내용을 반영할 원격 저장소를 조작한다. 'git remote'로 원격 저장소의 이..
-
[TIL] 2020-03-05Trainings/이전 TIL 기록 2020. 3. 5. 23:45
[노마드 코더] 바닐라 JS로 게임 만들기 #2.6 Saving the Image까지 수강 [스스로 미니 프로젝트 만들기] 바닐라 JS로 간단하게 틀린 그림찾기 만듬 [배운 내용] addEventListener 마우스 이벤트 [종류] mousemove : 마우스가 해당 객체의 영역에서 커서가 움직이는 순간 발생 mouseleave :해당 영역에서 커서가 빠져나가는 순간 발생 mousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생 mouseup : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생 offsetX, offsetY - 이벤트 발생한 객체(태그)의 좌측상단을 기준점 - 많이 사용(relative) JavaScript 타이머 함수 setInterval(function, du..
-
[TIL] 2020-03-04Trainings/이전 TIL 기록 2020. 3. 4. 23:23
[노마드 코더] 바닐라 JS로 게임 만들기 #2. 2 Recap! 까지 수강 [생활코딩] HTML - form 태그 복습 [프로그래머스 JS 강의] Callback Function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 setTimeout( function, time ) time 시간이 지난 경우 function 함수를 콜백하는 함수 time 은 millisecond (1/1000초) 단위 timerId를 반환함 clearTimeout( timerId ) setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음 setInterval( ..