일안하고블로그

개발을 하면서 input 태그를 사용하여 처리하는 것을 많이 사용 합니다 . 저도 input 태그를 엄청 사용하는데 사용할때마다 선언을 해주고 관리해주는게 정말 귀찮고 어렵습니다. 그래서 이전에 인강을 보고 정리해야지 미루었던 부분을 정리해보려고합니다. 이전에 봤던 인강 사이트는 노마더 코더님 사이트입니다. react hooks에 대해서 정말 정리도 잘해주시고 무료로 제공해주시는 좋으신 분이십니다. 재사용성을 높이기 위해 함수형으로 hook을 사용 하는 방법을 자세하게 설명해 주셨습니다. nomadcoders.co/react-hooks-introduction/lobby Watch Now - 노마드 코더 Nomad Coders nomadcoders.co 해당 프로세스에서 react hooks를 사용하고 +..

이번에 다룰 내용은 typescript interface /action / redux / reducer 을 통해서 counter 을 만드는 예제를 만들어 보겠습니다 . 이전에 react로 counter예제를 만들어 보셨으면 이해하기 편합니다. 타입스크립트하고 redux를 어느정도 이해하시면 내용은 조금 많지만 금방 이해하실수 있을거에요 . 1. 명령어를 입력해주세요 . yarn add redux next-redux-wrapper yarn add --dev redux-devtools-extension redux-logger next 와 react를 연결하기 위해서 next-redux-wrapper가 필요합니다. 나머지는 미들웨어 설정을 하면서 결과를 보기 위해 받습니다. 2. store 생성 import ..

드디어 Next Js를 다뤄 봅니다. Next Js 를 시작하기 전에 우선 알아야 할 것이 있습니다. 1장 2장 기초지식 ? 조금을 가지고 작업을 해야하기 때문에 이전 작업 내용을 확인해주세요. 2021/01/22 - [React/NextJS] - [Next Js ]1. React + Typescript +nextJs 적용 법 create-next-app 2021/01/22 - [React/NextJS] - [Next Js] 2. create-next-app 에 Eslint & prettier적용하기 또한 블로그에서 보는 내용 보단 아래링크에서 next js의 상세 설명을 조금은 보시고 작업하는게 정말 좋습니다. (저도 다이해한 것은 아닙니다 ㅠㅠ ) nextjs.org/docs Getting Start..

개발 tool은 vsocde로 사용을합니다. 개발을 할때 eslint와 & prettier 적용을 안하면 정말 많이 불편합니다. 설정을 제대로 하면 개발 시간이 2배이상 증가 할 거라고 생각될 만큼 저한테는 정말 중요한 설정입니다. 1. yarn add 해주세요 . (제가 사용하는 것들입니다.) yarn add --dev eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser 2. 로컬에 .eslintrc 파일을 추가합니다. {..

프론트엔드 개발을 하면서 빠르게 개발하고 쉽게 유지 보수를 하기 위해서 여러가지 방법을 사용하다가 타입스크립트 / 리액트 / NextJs를 사용하는 경우가 많아 졌고 기존에 create-react-app에서 create-next-app 을 사용 해 볼 기회도 많아지고 여러가지 프로젝트를 하면서 정리의 필요성을 느꼈습니다. 일주일만에 빠르게 사이트를 개발 할때 정말 빠르게 개발을 할 수 있습니다. nextJs같은경우 최근에 버전업을 해서 사용법도 조금 달라진부분이 있어서 2021년 1월 최신버전을 사용해 보려고 합니다. NextJs - create-next-app 적용 방법 yarn global add create-next-app // create-next-app 글로벌 추가 create-next-app ..

NODE_PATH 설정 NODE_PATH 설정을 하지않아도 개발을 하는데 문제가 발생하지는 않습니다. 하지만, 경로가 복잡해지면 경로 소스도 정말 복잡해져서 사용하기 힘들게 됩니다. NODE PATH 설정을 하는 것이 어렵지 않아 정리 해봅니다. mac 사용자: package.json 에서 script의 start와 build를 수정합니다. "start": "NODE_PATH=src react-scripts start","build": "NODE_PATH=src react-scripts build", 이렇게 설정을 하면 디렉토리가 src 기준으로 절대경로가 됩니다. windows 사용자: cross-env설치후 package.json 에서 script의 start와 build를 수정합니다. $ yarn ..

리액트 반복함수리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법이 있습니다. 자바스크립트 배열 함수를 사용 하는 것 인데요 , ES6문법과 배열을 다루는 법에 대해서 정리를 하면 좋을 것같습니다. 우선 , 프로젝트를 생성합니다. $ create-react-app dh-use-map 다음 프로젝트로 들어가서 $ cd dh-use-map프로젝트를 실행합니다. $ yarn start다음 화면이 뜨면 성공입니다. App.js를 변경 해보겠습니다. 다음, 리액트에서 map을 테스트 하기위해서 MapTest.js를 만들겠습니다. import React, { Component } from 'react';import './App.css';import MapTest from './MapTest'; class ..

React 이벤트 핸들링 기초 사용법리액트에서 onClick 과 같은 이벤트를 작성하는 방법이 약간 다르고, 기초 적이지만 중요한 부분을 정리를 해보았습니다. 1. 이벤트의 이름은 'onclick' 이 아닌 'onClick' 으로 (카멜케이스) 작성.2. 이벤트는 함수의 형태 값을 전달한다. 3. DOM 요소에서만 이벤트 설정 가능. 다음 3가지는 이론 적인 것이고 이제 실제로 예제를 만들어서 3가지에 대해서 정리를 해보려고 합니다. create-react-app으로 프로젝트를 만듭니다. $ create-react-app dh-event-input 설치가 완료 되었으면, 프로젝트 폴더 이동 $ cd dh-event-input 프로젝트 이동후, 실행. $ yarn start 화면이 나오면 성공입니다. 이제..

리액트 JSX - Fragment 사용 React에서 컴포넌트를 나누어서 개발을 할때 불필요하게 div를 반드시 감싸고 내부터 태그를 삽입 하다보면 불필요하게 DOM구조가 복잡해 진다고 느껴질때가 있습니다.Fragment를 통해서 불필요한 div 랜더링을 생략 할 수 있습니다. Fragment는 리액트 v16 이상에서 사용가능합니다. import React, { Component, Fragment } from 'react'; class FragmentTest extends Component { render() { return ( 테스트 ); }}export default FragmentTest;간단하게 class를 하나 만들어 봤습니다. 사용법1. 상단에 import {fragment} 추가. impor..

React-BootStrap 부트스트랩을 따로 배우거나 한 것은 아니지만, 회사에서 사용을 하고 있기때문에 사용법과 장점들을 많이 알고 있었던 상태에서 리액트에도 React-BootStrap이라는 라이브러리를 활용해서 적용 할 수 있다고 하여 정리를 하면 쉽게 쓸 수 있을 것 같아서 , 정리를 해봅니다. 참조 한 사이트는 여기 입니다. create-react-app으로 프로젝트를 만듭니다.$ create-react-app react-boot1설치가 완료 되었으면, 프로젝트 폴더 이동$ cd react프로젝트 이동후, 실행.$ yarn start화면이 나오면 성공입니다.다음으로, Command 혹은 Bash 창에서 start 프로젝트를 중지 합니다.정지 후, react-bootstrap을 설정해줍니다. $..