웹 프론트엔드42 [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 지난 시간에는 스토리북 설치와 실행을 해보았습니다. 이번에는 스토리북에 자주 사용하는 확장 도구 JSX, actions 두 가지를 추가해보겠습니다. 이 두 가지 말고도 다양한 Addon이 있으니 공식 사이트를 확인 바랍니다. 1. addon-jsx 첫 번째로 스토리북 화면에서 바로 JSX코드를 확인할 수 있는 확장 도구입니다. 먼저 프롬프트 창에.. 2020. 10. 6. [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 이때까지의 포스팅은 스타일이 적용되지 않은 기본적인 컴포넌트 형태였습니다. 그래서 바로 지난 포스팅인 Input 컴포넌트를 기반으로 스타일을 적용해볼 예정입니다. 하지만 그전에 컴포넌트의 디자인과 기능 등을 시각적으로 편리하게 확인할 수 있는 스토리북을 설치하고 사용해 보겠습니다. 먼저 명령 프롬프트에서 아래와 같이 입력합니다. 마지막은 버전인데 미지정시 최신 버전입니다. > yarn add --dev @storybook/react@5.3.0 그럼 자동으로 인스톨이 .. 2020. 10. 6. [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 이때까지의 포스팅은 리액트의 가장 기초적인 내용이었다면, 지금부터는 그 내용을 토대로 좀 더 활용 가능한 것들을 다루도록 하겠습니다. 그래서 오늘은 가볍게 지난 시간에 다루었던 아이디, 비번 입력 Input 컴포넌트를 재활용 가능하도록 뼈대만 남기는 작업을 해보도록 하겠습니다. 그럼 Input.jsx 만들어보시죠! // ..\test_project\src\components\Input.jsx import React, { PureComponent } from "react"; import PropTypes from "prop-types"; class Input extends Pu.. 2020. 10. 6. [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 지금까지 총 13번의 포스팅으로 개발환경 구축부터 기본적인 Input 컴포넌트 개발까지 해보았습니다. 이번에는 앞으로 더 어려운 과정을 나아가기 위해, 기초 관련 글들을 정리하는 시간이 되겠습니다. ① 리액트 개발환경 구축 첫 번째 노드 버전 매니저(NVM)를 설치하고, 그것을 이용해 Node.js , NPM , yarn 등을 설정했습니다. ② Visual Studio Code 및 관련 플러그인 설치 개발환경 구축의 연장으로 VSCode 설치와 Reactjs code snippets , Prettier 플러그인을 설치했습니다. ③ 리액트 테스트 앱 생성 및 수정 yarn을 이용해 테스트 앱을 생성하고 기동 했으며, 아주 간단하게 Hello, world! 수준의 수정을 해보았습니다. ④ 리액트에서 사용하는.. 2020. 9. 29. [React] 아이디, 비번 입력 Input 컴포넌트를 만들어보자 2020/08/18 - [Web프론트엔드/리액트] - [React] 리액트 개발환경 구축 2020/08/21 - [Web프론트엔드/리액트] - Visual Studio Code 및 React 관련 플러그인 설치 2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 .. 2020. 9. 29. [React] 컴포넌트의 DOM 관련 이벤트 - 무한 scroll 예제 오늘은 ref라는 특수 프로퍼티를 사용하여 DOM 객체에 접근하는 방법과 onClick 같은 이벤트 프로퍼티에 대해 알아보겠습니다. 쉽게 말씀드리면 getElementById()로 받은 객체를 addEventListener()로 등록한 함수에서 사용하는 것입니다. 자바스크립트를 아시는 분은 근방 이해하실 테니, 아래 무한 scroll 예제를 한번 보시죠! // ..\test_project\src\components\ScrollComponent.jsx import React from "react"; class ScrollComponent extends React.PureComponent { constructor(props) { super(props); this.state = { listEnd: 20, //.. 2020. 9. 28. [ES6] 배열 함수 forEach , map , reduce 2020.09.21 - [웹 프론트엔드/자바스크립트] - [ES6] 프로토타입 prototype에서 class 클래스로 이번 포스팅을 쓸까 말까 고민했습니다. ES6 이전 버전에도 이미 배열 함수는 있었고 ES6에서도 크게 다르지 않기 때문입니다. 하지만 글의 카테고리가 자바스크립트인 만큼, 배열 관련 글은 빠질 수가 없기에 간단히라도 집고 넘어가 보겠습니다. 예시로는 URL의 Query String 형식 문자열을 파싱 하는 것으로 해보겠습니다. // 웹 주소에 포함된 이름=나이 정보 var queryString = "kim=18&lee=35&park=29"; // 쿼리 스트링 파싱 함수 function queryStringParse(str) { var list = str.split("&"); var r.. 2020. 9. 25. [React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습 2020/09/24 - [Web프런트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 jiguin-hankun.tistory.com 이번 글을 읽기 전에 꼭 이론 편을 보고 오시길 추천드리며, 될 수 있으면 이론 화면을 같이 보시는 것이 더욱 좋습니다. 그럼 실습에 들어갈 텐데 이번 코드는 좀 복잡할 수 있어, 실행 화면을 먼저 보여드리고 설명 후에 진행하겠습니다. 이번 실습은 일부로 잘 못된 코드도 넣었고 콘솔 로그.. 2020. 9. 24. [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 거칩니다. 그 과정에서 개발자는 총 8가지의 생명주기 함수를 이용할 수 있으며, 호출하는 타이밍은 리액트가 정합니다. ○ 생성 과정의 함수 1. constructor( props ) 너무나 자주 봐왔던 생성자 함수입니다. props인자와 가장 위에 super(props)는 필수입니다. 주로 초기화하는 데 사용하며, 특히 스테이트(state)는 여기서 초기화해야 합니다. 2. static getDerivedStateFromProps( props , state ) 이름이 긴 정적(static) 함수입니다. 동적이 아닌 .. 2020. 9. 24. 이전 1 2 3 4 5 다음
