JavaScript46 리액트 라우터(React Router)로 라우팅하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트에서 라우팅하기 리액트로 구현하는 웹페이지는 대부분 Single Page Application, 즉 HTML 파일은 하나만 가지고 있고, 나머지는 자바스크립트로 화면을 통제하여 서버와의 요청/응답 주고받기를 줄여 웹페이지의 로딩 속도를 줄이는 방식을 취하고 있다. 속도 측면에서는 SPA가 장점이 뚜렷하지만, 페이지 간 이동 시 주소의 문제가 발생한다. 예를 들면, 원래는 페이지에 따라서 url link가 달라지게 된다. www.soldonii... 2019. 12. 14. 리액트의 생명 주기(LifeCycle) 메소드 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 생명 주기의 1단계 - 생성(Mounting) 생성 단계는 컴포넌트가 constructor에 의해 초기화되고, rendering 과정을 거쳐 DOM에 최초로 그려지는 단계이다. 이 곳의 주요한 생명 주기 메소드는 componentDidMount가 있다. 생성 단계의 흐름을 순차적으로 정리해보자. 1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다. 2. 초기화가 완료되면 render() 메소드가 실행된다. rend.. 2019. 12. 12. 비동기로 작동하는 setState 이해하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 비동기로 작동하는 setState 메소드 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor() { super(); this.state = { meaningOfLife: 47 } } render() { return ( {this.state.meaningOfLife.. 2019. 12. 11. 리액트에서 state를 다룰 때 주의해야 할 점 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. state 객체는 reference type! DOM에서 P 태그가 있는 부분을 클릭했을 때 해당 데이터가 DOM에서 사라지도록 해보자. App.js 파일에 deletePersonHandler 메소드를 추가한다. deletePersonHandler = (personIndex) => { const persons = this.state.persons; persons.splice(personIndex, 1); this.setState({persons: persons.. 2019. 12. 10. 오렌지색 터널 안녕하세요, 자바스크립트를 기반으로 개발자가 되기 위해 공부하고 있는 soldonii입니다. 날씨가 급격하게 추워지면서 본격적으로 겨울, 그리고 연말이 다가옴을 알리고 있습니다. 2019년의 마지막이 점점 다가오니 자연스레 생각이 많아지는 요즘입니다. 그 동안 udemy에서 학습한 내용, TIL, 학원 후기 등을 주로 기록했었는데 머리 속의 생각을 꺼내서 기록하는 것도 필요하겠다는 생각이 들어서 '오렌지색 터널' 게시판을 하나 개설했습니다. '오렌지색 터널'이라는 표현은 제가 가장 좋아하는 힙합 뮤지션 중 하나인 빈지노의 'If I Die Tomorrow'라는 곡에서 빌려온 표현입니다. 워낙 유명한 곡이라 많은 분들이 아시겠죠? # 오렌지색 터널 빈지노가 어떤 의미로 썼는지는 본인만 알겠지만, 저는 개발.. 2019. 12. 6. 리액트 실습 2 - Monsters Rolodex *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Search Box 컴포넌트 searchBox 컴포넌트는 class 대신 함수를 이용해서 컴포넌트를 생성할 것이다. class를 이용하는 것과 함수를 이용하는 것의 근본적인 차이는 다음과 같다. 1) 컴포넌트 내부에서 state를 생성 및 조작하거나, 2) React Component 클래스에 내장된 life-cycle 메소드를 사용해야 할 경우에는 class를 이용해야 하고, 그렇지 않을 경우에는 함수를 이용할 수 있다. 단지 state를 props로.. 2019. 11. 29. 리액트 실습 1 - Monsters Rolodex *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Card-list 컴포넌트 만들기 // card-list.component.jsx 파일 import React from 'react'; export const CardList = (props) => { console.log(props); return Hello; } 새로운 컴포넌트 CardList를 만든 후, App.js에서 import할 수 있도록 export 시켰다. import React, { Component } from 'react'; impo.. 2019. 11. 29. 191120(수) : response 순서대로 가져오기 등 1. Response 순서대로 가져오기 바닐라코딩 어드미션 테스트 합격 후 추가과제로 받은 Hacker News API를 이용하여 Hacker News website 카피하기 과제를 며칠 붙잡고 헤맸다. 다른 부분은 큰 문제는 없었는데, 제이쿼리를 이용해 비동기로 데이터를 요청한 후, 요청한 순서대로 데이터를 받아서 DOM에 추가해야 했다. 우선 전체 story의 id가 담긴 정보를 받는 것은 단순한 요청이라 어렵지 않았다. $.get('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty', (storyArr) => { let top30 = storyArr.slice(0, 30); } 상위 30개 article만 먼저 보여주면 되기 때문.. 2019. 11. 20. 리액트 1 *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. create-react-app create-react-app은 개발자가 다른 것들은 신경쓰지 않고, 오로지 개발에만 집중할 수 있도록 기본적인 모듈들이 포함된 패키지이다. 이를 통해 새로운 프로젝트 폴더를 생성하면, 여러가지 폴더가 생성된다. # src 폴더 : react app과 관련된 모든 코드들이 들어있는 공간이다. 앱을 개발하면서 필요한 파일들을 저장하는 곳이라 보면 된다. # public 폴더 : create-react-app 패키지에는 bab.. 2019. 11. 20. 이전 1 2 3 4 5 6 다음
