프론트엔드
-
[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-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( ..
-
[TIL] 2020-03-03Trainings/이전 TIL 기록 2020. 3. 3. 22:34
[노마드 코더] 바닐라 JS로 게임 만들기 #1Setup + Styles까지 수강 [프로그래머스] 자바스크립트와 웹 프론트엔드 파트 2. DOM + JS까지 수강 [배운 내용 정리] HTML, CSS, JS의 개념 HTML : 웹 페이지의 구조를 나타낸다. CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타낸다. JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있다. 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공한다. window 객체 Javascript 실행 시 가장 상위에 존재하는 객체이다. 변수를 선언하거나 함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있다. [종류] window.loc..
-
CSS - 문법CSS/CSS 2020. 3. 2. 23:17
오늘은 CSS 문법에 대해 알아보자! 다음은 가장 간단한 CSS 코드이다. h1 { color: red} h1, color, red 세 개의 단어가 의미하는 것은 무엇인가? 이 세 개의 단어들을 각각 선택자, 속성, 값이라고 한다. h1 -> 선택자(selector) 선택자(selector)란 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻이다. color -> 속성(property) 속성(property)이란 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다. red -> 값(value) 값(value)은 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻이다. 즉, CSS 코드는 이렇게 구성된다. selector { property: value} /* 선택자 {속성: 값}..
-
[TIL] 2020-03-02Trainings/이전 TIL 기록 2020. 3. 2. 22:42
[CSS] 문법 정리 [노마드 코더] 바닐라 초급 JS 수강 완료! [배운 문법] API란? → Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스는 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. “ 운영체제나 프로그래밍 언어가 제공하는 기능 ” → SK의 날씨정보, Daum의 지도정보, 카카오페이를 뜻한다. “응용 프로그램” → 우리가 만든 서비스라고 생각하면 이해가 편하다. fetch() 인자로 전달된 데이터를 서버로부터 서버에게 요청하는 방법이다. "Hello World!" fetch('html'). then(function(response){ response.text(). ..