태기의 개발 Blog 태기의 개발 Blog

react

• [TIL] 2020-03-25

  Trainings/이전 TIL 기록 2020. 3. 25. 22:47

  [ groomedu ] - 웹 표준 사이트 만들기(2019) 헤더 타이틀 & 웹 폰트까지 수강 [ 노마드코더 ] - ReactJS로 웹 서비스 만들기 재수강 [ 배운 내용 및 회의록 ] - 둘다 클론 코딩으로 이루어졌기 때문에, 코딩을 하는 것을 따라서 진행하는 중이다. - 웹 표준 사이트를 만들 때, 레이아웃을 구분하기 위해 div에 id값으로 header, contents, footer를 적용해서 기본 틀을 만들고, 또 그 안에서 div로 header안에 또 다른 레이아웃을 구성하고, 또 contents안에 또 다른 레이아웃을 구성하는 방법을 배우고 있다. - 다른 React 강의를 듣고 있지만, 너무 이론 위주이고 중간중간에 모르는 개념들이 많아서, 노마드코더 React강의를 다시 재수강하면서 기본..

  Read More
• [TIL] 2020-03-22

  Trainings/이전 TIL 기록 2020. 3. 22. 23:32

  [ groomdue ] - 처음 만난 React(리액트) 조건무 랜더링 중간까지 수강 - 웹 표준 사이트 만들기(2019) 01강 수강 [ 배운 내용 ] [ HTML ] - header, nav, side, contents, footer을 이용해 레이아웃을 알맞게 배치하는 연습함. [ React } Condition Rendering 이란? - 조건이라는 의미를 가지고 있으며, 조건에 따른 렌더링을 의미한다. - 쉽게 말하자면, 조건이 True(참)이면 버튼을 보여주고, False(거짓)이면 버튼을 가리는 것과 같이 조건에 따라서 다른 결과를 보여준다. // 회원인 경우 function UserGreeting(props) { return Welcome back! } // 회원이 아닌 경우 function..

  Read More
• [TIL] 2020-03-19

  Trainings/이전 TIL 기록 2020. 3. 19. 23:46

  [ groomedu ] - 처음 만난 React(리액트) Handling Events까지 수강 [ 배운 내용 ] Event란? 어떤 특정한 하나의 사건을 의미하며, 버튼 클릭을 하는 사건, 즉 버튼을 클릭하는 이벤트를 뜻한다. 사용자가 웹 페이지에서 어떠한 버튼을 클릭한 사건이라고 볼 수 있다. 예를 들어, Activate Lasers 버튼이 하나가 있고, onClick이 안에 어떠한 함수를 선언해 놓았다. 버튼을 클릭 했을 때, 이 이벤트가 발생을 하고 이 이벤트가 발생했을 때, 어떠한 처리를 하겠다는 의미를 뜻한다. DOM에도 이벤트가 있고, React에도 이벤트가 있다. [ HTML ] Activate Lasers [ React ] Activate Lasers - React 같은 경우에는 소문자 대..

  Read More
• [TIL] 2020-03-18

  Trainings/이전 TIL 기록 2020. 3. 18. 22:35

  [ groomedu ] - 처음 만난 React(리액트) State and Lifecycle까지 수강 [ 배운 내용 ] state란? - 상태라는 의미를 가지고 있다. 즉, 리엑트 컴포넌트의 상태를 의미한다. - 리엑트에서는 데이터를 의미하며, 컴포넌트에 대한 변경 가능한 데이터이기도 하다. - state는 사용자가 정의한다. - 렌더링이나 데이터 흐름에서 사용하는 값들만 state에 포함시켜야 한다. - 그렇지 않은 데이터는 그냥 정적인 데이터로 관리하는 것이 좋다. - state는 자바스크립트의 객체라고 보면 된다. - state는 직접 수정할 수 없다.(하면 안 된다) - 리엑트에서 관리하기 때문에 우리가 수정하면 이상한 방향으로 흘러갈 수 있기 때문이다. - state는 꼭 setState()를 ..

  Read More
• [TIL] 2020-03-16

  Trainings/이전 TIL 기록 2020. 3. 16. 22:20

  [ groomedu ] 처음 만난 React(리액트) Componenets and Props까지 수강 [ 배운 내용 ] - 리엑트를 구성하는 구성요소라는 뜻을 가지고 있다. - 레고 블록을 조립하듯이 컴포넌트들을 모아서 개발하는 것과 같은 맥락이다. - 리엑트 컴포넌트에서 입력은 Props이고 출력은 React element이다. 붕어빵 컴포넌트가 존재, 다른 말로 붕어빵 틀이 존재한다면 그 컴포넌트를 가지고 다양한 element, 붕어빵을 만들 수 있다. 다양한 붕어빵(element)를 만들 때, 필요한 것이 Props라는 것이며 이것은 속성이라는 뜻을 가진다. 붕어빵에 들어가는 재료들을 Props라고 이해하면 쉽다. 즉, component의 속성은 Props..

  Read More
• [TIL] 2020-03-14

  Trainings/이전 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는..

  Read More
• [TIL] 2020-03-13

  Trainings/이전 TIL 기록 2020. 3. 13. 22:48

  [groomedu] 가장 핫한 프런트엔드 라이브러리🔥, React 가지고 놀아보기 [생활코딩] React state까지 수강 [배운 내용] - React는 페이스북에서 만든 웹 프레임 워크이다. - 예전에는 단순히 정적인 정보만 보여주는 사이트가 많았다. - 하지만 지금은 웹상에서 정보를 입력하면 그 정보가 바로바로 업데이트된다. - 그렇기 때문에 요즘 웹 애플리케이션은 쉽게 동적 인터페이스를 나타내 줄 수 있다. - 하지만 이런 동적 인터페이스에는 수 많은 상태 관리가 필요하기 때문에 React가 만들어짐 - 페이스북은 수 많은 타임라인이 존재하고, 이 타임라인 안에 수많은 요소가 들어간다. (사진, 글, 좋아요, 댓글) - 하지만 웹 라이브러리의 도움 없이 HTML, CSS, Javascript로 이..

  Read More
• [TIL] 2020-03-12

  Trainings/이전 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..

  Read More