개념정리
-
[TIL] 2020-03-16Trainings/이전 TIL 기록 2020. 3. 16. 22:20
[ groomedu ] 처음 만난 React(리액트) Componenets and Props까지 수강 [ 배운 내용 ] - 리엑트를 구성하는 구성요소라는 뜻을 가지고 있다. - 레고 블록을 조립하듯이 컴포넌트들을 모아서 개발하는 것과 같은 맥락이다. - 리엑트 컴포넌트에서 입력은 Props이고 출력은 React element이다. 붕어빵 컴포넌트가 존재, 다른 말로 붕어빵 틀이 존재한다면 그 컴포넌트를 가지고 다양한 element, 붕어빵을 만들 수 있다. 다양한 붕어빵(element)를 만들 때, 필요한 것이 Props라는 것이며 이것은 속성이라는 뜻을 가진다. 붕어빵에 들어가는 재료들을 Props라고 이해하면 쉽다. 즉, component의 속성은 Props..
-
[TIL] 2020-03-14Trainings/이전 TIL 기록 2020. 3. 14. 21:51
[groomdue] 가장 핫한 프론트엔드 라이브러리🔥, React 가지고 놀아보기 [배운 내용] - index.js 파일에 들어가면 ReactDOM.render(, document.getElementById('root')); 가 존재한다. - 이 코드가 의미하는 것은 "App 컴포넌트를 root라는 id를 가진 element에 render하라"라는 뜻이다. - 그리고 publib/index.html 파일로 들어가면, 코드가 있을 것이며, 바로 여기에 렌더링 되는 것이다. - 원래 HTML Element에 클래스명을 설정하기 위해서는 class 속성을 사용해야한다. - 하지만 React에서는 class가 아닌 className이라는 속성을 사용해서 클래스명을 지정한다. 왜냐하면, React에서 class는..
-
[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'로 원격 저장소의 이..