전체태그 보기

#리액트 (21개의 포스트)

Planning the Movie Component
poburi
좋아, 자 이제 우리는 컴포넌트 라이프 사이클을 알게 됐어. 이제 영화 컴포넌트를 구성해보자. 어플리케이션을 시작하면 '마운트'가 생겨나는 것! 마운트 사이클을 이용해서 간단하게 로딩 화면을 만들어보자 보다시피 componentDidMount는 컴포넌트가 마운트되자마자 호출되었어. 그리고 setTimeout을 활용해서 3초후에 페이지 로드 완료 효과...
Component Life Cycle
poburi

Component Life Cycle

5일 전0개의 댓글
컴포넌트 라이프 사이클 마운트 - 화면표시 - 웹사이트 - constructor() - render() - componentDidMount() - constructor(): constructor는 시작 전에 호출됐고 그 다음에 render가 호출된다. - componentDidMount(): render 다음에 호출되는 녀석. '이봐 이 컴포넌트는 ...
TypeScript 환경에서 Redux를 프로처럼 사용하기
velopert
이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다. 그런데 프로처럼 사용해...
dankim

2019.09.30 React && TIL

2019년 9월 30일0개의 댓글
삼항연산자 && - 삼항연산자 - 조건이 true 와 false 일때 각각 다른 결과값을 보여줌 image.png
dankim

2019.09.30 React

2019년 9월 30일0개의 댓글
1. React? - 2. ES6? - ES6 문법을 알아야 리액트가 편해진다. - Destructuring - spread operator - rest parameters - default parameters - templete literals - arrow function - for-of loo...
TypeScript 환경에서 리액트 Context API 제대로 활용하기
velopert
이번 튜토리얼에서는 타입스크립트 환경에서 Context API를 제대로 활용하는 방법에 대해서 다뤄보도록 하겠습니다. Context API를 사용함에 있어서, 코드의 구조를 어떻게 가져갈 지에 대해서는 딱 정해진 방법이 존재하지 않습니다. Context 를 준비하는 과정에서 클래스형 컴포넌트를 사용 할 수도 있고, 함수형 컴포넌트를 사용 할 수도 있죠. 함...
타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)
velopert
이번 섹션에서는 타입스크립트를 사용하는 리액트 컴포넌트에서 `useState` 및 `useReducer` 를 사용하여 컴포넌트의 상태를 관리하는 방법과 `useRef` 를 사용하여 컴포넌트 내부에서 관리하는 변수 및 DOM 을 이용하는 방법에 대해서 알아보겠습니다.
리액트 컴포넌트 타입스크립트로 작성하기
velopert
이 튜토리얼에서는 타입스크립트가 적용된 리액트 프로젝트를 만드는 방법을 알아보고, 리액트 컴포넌트를 타입스크립트로 작성하는 방법에 대하여 다뤄보게 됩니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리액트 프로젝트를 만들어볼까요? 타입스크립트를 사용하는 리액트 프로젝트를 만들때는 다음과 같이 명령어를 사용하세요. 제 yarn start를...
리액트 프로젝트에서 타입스크립트 사용하기
velopert
이번에 올리게 될 개발 튜토리얼 시리즈에서는 리액트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보겠습니다. JavaScript 는 Weakly-typed 된 언어이기 때문에 특정 숫자 변수를 선언 한 다음에 그 안에 다른 타입의 값을 담을 수 있어요. 예를 들자면, 숫자로 선언한 변수에 문자열을 넣을 수도 있고, null을 넣을 수도 있고 배열...
어제 일상 이야기... (Socket.io 문제해결)
kjs100184
리액트 훅 연습 겸 기존에 코드 작성했던것을 리액트 훅으로 변경해보았다.. 결과는 망함.... 훅 자체는 어렵지않았다. useState, useEffect, useContext(mobx-react-lite 조합 굿굿굿)!! 하지만 socket.io로 실시간 통신을 끼얹으니... 내 생각 범위를 벗어나는 일이 벌어져버렸다.. 솔직히......
jeonghoheo
React hooks image Hook은 React 버전 16.8에 새로 추가되었습니다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 우리가 리액트에서 state에 라이프 사이클을 다루기위해서 Clsss를 사용한는것은 필연적이 였습니다. 이제 우리는 Hook을 사용해 Class없이 함수만으...
npcode9194

React 개발환경(create-react-app)

2019년 5월 26일0개의 댓글
1. React? - react.png React는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리 입니다. React는 DOM을 복사해서 Virtual DOM을 만들고 변화가 생겼을 때 페이지 전체를 렌더링 하지않고, 변화한 부분만 실제 DOM에 적용하는 방식을 사용합니다. 2. 개발 환경 - 1) Node.js / npm B...
im_gonna
리액트를 다루는 기술 책을 써주신 Velopert님에게 감사합니다. 덕분에 리액트에 흥미가 생깁니다! 실제로 완성하고, 배포하려면 웹을 만들자. > 무엇인가 만들어내 유저에게 보여주려면? => 웹 실제로 만들어 내서 평가받을 수 있고, 완성이라도 할 수 있을
나의 첫 리액트 앱(기존 프론트 개발과의 느낌)
gksdnr89
소개 인프런에서 김정환님의 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발강의를 보고 해당 강좌의 내용을 리액트 소스코드로 재구성해봤습니다. 기초적인 리액트 앱이며 Live Demo와 요구사항 분석을 참조해주세요. 시작 이번에 프론트엔드 개발로 취업준비를 하면서 리액트는 필수인 것 같았다. (우대가 아닌 자격조건! 👿) 지금...
[TOY] 리액트를 이용한 모멘텀 만들기 #2
bosco
⏰ Clock Component 구조 Weather 컴포넌트 추가 api를 호출하는 시간이 있기 때문에 화면 날씨정보가 바로 나타나지 않을 수 있습니다. 결과화면 스크린샷 2019-02-18 오전 10.39.50.png...
[TOY] 리액트를 이용한 모멘텀 만들기 #1
bosco
프로젝트 선정 평소 벨로그에 있는 글들을 눈팅으로만 보다가 글을 남기고 싶어 고민하던 중 최근에 공부하고 있는 리액트를 이용한 작은 토이프로젝트를 진행하고 만드는 과정을 올리면 좋겠다고 생각하여 이 글을 작성하게 되었습니다. 리액트를 공부하기 위해서 평소 벨로퍼트님의 포스트 글들과 노마드 아케데미의 니콜라스님 강의를 많이 보았는데 니콜라스님 강의 초보자를...
dongwon2
hooks 원본 글 Hooks는 React 16.8 버전에 새로 추가되었습니다. Hooks는 여러분이 class를 사용할 필요 없이 state와 React의 특징들을 사용할 수 있게 합니다. useState는 우리가 Hooks에 대해 처음으로 배우게 될 함수입니다. 그러나 이 예제는 티져에 불과합니다. 아직 이해가 안 되어도 걱정하지 마세요! 당신...
Server Side Rendering 레시피 3가지
leejh3224

Server Side Rendering 레시피 3가지

2018년 12월 13일3개의 댓글
서버 사이드 렌더링을 직접 구성하는 일은 너무 까다습니다. 특히 최근에 웹팩이 버전 4로 업그레이드 되면서 설정 관련해서 많은 부분이 바뀌어서 참조할만한 코드도 줄어들었습니다. 그래도 얼마간의 삽질(?) 끝에 웹팩 4 및 여러가지 스택과 함께 사용할 수 있는 보일러
dever
CSS Module과 Sass를 같이 사용하는 설정
dever

리액트 배우다가 하소연..

2018년 10월 31일2개의 댓글
벨로퍼트님 책 사서 리액트 배우고 있는데 산지 며칠만에 CAR가 V2로 업데이트 되면서 많은게 바뀌었나봐요..ㅠㅠ 우선 eslint와 prettier 설정이 예전 책 사기 전부터 잘 안돼서 고민이었는데 이번에 올려주셔서 완전 기뻤어요.. eslint덕분에 개발 서버가 잘 작동 안되기 전까진.. 원래는 eslint에서 오류나더라도 개발서버에서 오류가 나진...