Javascript 공부123 비동기로 작동하는 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. React에서 조건문 사용하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Ternary Expression으로 조건문 사용하기 JSX에서 if 문으로는 조건문을 사용할 수 없다. 대신 Ternary Operator를 이용해서 조건문을 작성해야 한다. return ( Hi, I'm a React App This is really working! Switch Name { this.state.showPersons ? My Hobbies: Racing : null } ); Ternary Expression를 작성할 코드를 {} 전체 중괄호.. 2019. 12. 10. 오렌지색 터널 안녕하세요, 자바스크립트를 기반으로 개발자가 되기 위해 공부하고 있는 soldonii입니다. 날씨가 급격하게 추워지면서 본격적으로 겨울, 그리고 연말이 다가옴을 알리고 있습니다. 2019년의 마지막이 점점 다가오니 자연스레 생각이 많아지는 요즘입니다. 그 동안 udemy에서 학습한 내용, TIL, 학원 후기 등을 주로 기록했었는데 머리 속의 생각을 꺼내서 기록하는 것도 필요하겠다는 생각이 들어서 '오렌지색 터널' 게시판을 하나 개설했습니다. '오렌지색 터널'이라는 표현은 제가 가장 좋아하는 힙합 뮤지션 중 하나인 빈지노의 'If I Die Tomorrow'라는 곡에서 빌려온 표현입니다. 워낙 유명한 곡이라 많은 분들이 아시겠죠? # 오렌지색 터널 빈지노가 어떤 의미로 썼는지는 본인만 알겠지만, 저는 개발.. 2019. 12. 6. 리액트 useState() Hook : 함수형 컴포넌트로 state 관리하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. useState() 메소드로 state 관리 및 조작하기 최초 리액트가 등장했을 때는 state를 다룰 필요가 있을 경우 class 기반으로 컴포넌트를 만들고, state 조작이 필요없는 경우에 함수형 컴포넌트로 만드는 방식이 표준이었다. 그러나 리액트가 업데이트 되면서 함수형 컴포넌트에서도 state를 관리할 수 있게 진화했다.(그러나 강의가 촬영된 시점을 기준으로, 여전히 실무에서는 class 컴포넌트로 state를 관리하는게 대체로 표준이라고 한다.) 기.. 2019. 12. 5. 바닐라코딩 prep 코스 이후 안녕하세요, 바닐라코딩 prep 코스 수강 이후 부트캠프 7 과정 시작을 앞둔 일개 예비 개발자입니다.ㅎㅎ 보잘 것 없는 블로그인데, 그래도 1000명 정도 방문해서 제 글을 읽어주셔서 많은 분들께 감사의 말씀 드립니다. 통계를 보니까 거의 절반에 가까운 분들이 제 바닐라코딩 후기 글을 보러 많이 방문해주시는 것 같아서 혹시 도움이 될까 싶어 prep 코스 이후 진행 상황을 간략하게 기록하고자 합니다. 바닐라코딩 등록을 고민하는 분들, prep 코스의 진행 방식 등 각종 궁금하신 점들에 대해서 댓글로 남겨주시면 답변해 드리겠습니다. 굳이 이 글을 따로 남기는 이유는, 저 또한 처음 개발자가 되겠다고 결심한 이후 여러 블로그 후기 글을 읽으면서 좋은 학원을 찾기 위해 부던히도 애썼는데, 그럼에도 시행착오를.. 2019. 12. 3. 리액트 실습 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 2 3 4 5 6 7 ··· 14 다음
