styled-components 의존성 설치 styled-component를 사용하기 위해 styled-components와 @type/styled-components 를 의존서에 추가해야 한다. # with npm npm install --save styled-components # with yarn yarn add styled-components javacript에서 사용한다면 문제는 없지만, typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다. # with npm npm i --save-dev @types/styled-components # with yarn yatn add --dev @types/styled-components 첫 styl..

오류 내용 rollup으로 공통으로 사용할 ui 모듈을 생성하여, web app에 가져다가 사용하는 도중에 아래와 같은 오류가 발생했다. Uncaught TypeError: Cannot read properties of null (reading 'useState') 오류 내용은 null에서 useState를 읽으려고 하다보니 발생한다. 공통 모듈 개발 당시에는 문제없이 동작을 했는데, rollup 번들링을 하고 나면 오류가 발생한다. 공통 모듈 개발 당시 정상 동작 확인 오류 조치 rollup 빌드시 external 옵션에 react, react-dom을 추가해줘야 한다. (만약 styled-components를 사용한다면, 같이 포함해줘야 함) rollup.config.js // ... export d..

프로젝트 생성 본 글에서는 ui라는 이름의 디렉토리를 생성하여, esm 모듈을 만든다. mkdir ui cd ui 패키지 관리툴은 yarn berry 버전을 사용하기 위해, 아래 명령어를 수행한다. yarn set version berry package.json을 생성한다. yarn init -y { "name": "ui", "packageManager": "yarn@3.2.1", "version": "0.0.1", "main": "lib/index.js", "scripts": { "build": "" } } react 모듈을 만들기 위해, react와 react-dom을 의존성에 추가한다. yarn add --dev react react-dom package.json 에 react와 react-dom에..

기존 React App에 Typescript 적용하기 Typescript 의존성 추가 타입 스크립트를 적용하기 위해 필요한 라이브러리들을 package.json에 의존성을 추가한다. (아래 명령어 참고) $ yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev 위 명령어를 수행하면 아래와 같이 package.json > devDependencies 에 의존성 라이브러리들이 추가된다. { ... "devDependencies": { "@types/jest": "^27.4.1", "@types/node": "^17.0.21", "@types/react": "^17.0.39", "@types/react-dom": "^17..

배포할 프로젝트 생성 create-react-app 또는 yarn init으로 리액트 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고) 2020.06.15 - [Front End/React] - 리액트 설치 및 처음 시작하기 리액트 설치 및 처음 시작하기 NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version 을 입력해보자 # npm -v.. memostack.tistory.com 2022.01.06 - [Front End/React] - babel, webpack 으로 react 프로젝트 생성하기 babel,..

목표 babel과 webpack을 이용하여 컴파일 및 번들링을 한다 컴파일 및 번들링이 완료된 컴포넌트를 npm에 배포한다 React 프로젝트 생성 본 글에서는 npm 대신 yarn을 이용한다 package.json 생성 yarn init 명령어를 사용하여, package.json을 생성한다. $ yarn init yarn init v1.22.17 question name (simple-component): simple-component question version (1.0.0): 0.1.0 question description: simple component for deploy test question entry point (index.js): src/index.js question repositor..

Gatsby 란? Gatsby는 정적 웹 사이트 생성기라고 생각하면 된다. 본 글에서는 getsby를 통해 생성된 정적 웹 파일을 github pages에 호스팅하는 방법을 소개한다. gatsby-cli 설치 아래 npm 명령어를 사용하여 gatsby-cli를 전역(global)으로 설치한다. npm i -g gatsby-cli 설치가 끝났다면 버전을 확인해보자 gatsby --version Gatsby CLI version: 3.10.0 참고. yarn으로는 안되는건가.. yarn으로 설치해서 해보니 나중에 gatsby-cli 명령어를 수행했을때, 아래와 같은 메세지와 함께 실행이 안된다. 'gatsby'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 현재로서는 ..

React 프로젝트 생성 create-react-app을 이용하여 React 프로젝트를 생성한다. 프로젝트 생성 참고 create-react-app 설치 $ yarn global add create-react-app 설치된 create-react-app 모듈을 이용하여, 프로젝트 생성한다. $ yarn create react-app myapp gh-pages 설치 github에 호스팅을 하려면 gh-pages 모듈이 필요하다. 아래 명령어를 사용하여 모듈을 설치한다. https://www.npmjs.com/package/gh-pages $ cd myapp $ yarn --dev add gh-pages package.json의 devDependencies에 추가되었는지 확인한다. { ... "devDepe..

아이템 삭제 기능 개발 각 아이템의 우측에 있는 휴지통 버튼을 누르면 삭제가 되도록 해보자 실제로는 지우지 않고, deleted 플래그 값으로 안보이게 할 예정 deleted 플래그 추가 지웠다는 것을 표시하기 위해 deleted 라는 플래그 값을 기존 state에 추가한다. InputBox.jsx const InputBox = ({ todoList, setTodoList }) => { // ... const onClickAddButton = () => { // todoItemList에 값 추가 const nextTodoList = todoList.concat({ id: todoList.length, text, checked: false, deleted: false, // 삭제 Flag 값을 추가한다. ..

아이템 내용 수정 기능 개발 '연필' 모양의 버튼을 눌렀을때 해당 아이템의 내용이 태그로 변하도록한다. 그리고, 입력을 받아 아이템의 내용을 변경할 수 있도록 한다. 연필 모양의 버튼은 submit 버튼으로 변하도록 한다. 버튼 클릭시 input 태그로 변하도록 하기 ToDoItem.jsx 수정 버튼을 눌렀을때, edit 모드가 토글 되도록 함 그리고 수정 버튼은 👌 버튼이 되도록 한다. const ToDoItem = ({ todoItem, todoList, setTodoList }) => { const [edited, setEdited] = useState(false); // 수정 모드인지 확인하기 위한 플래그 값 ... const onClickEditButton = () => { // 클릭시 edit..

완료 목록 조회 기능 개발 이전 글에서는 '할 일' 목록 조회 기능을 개발했지만, 이번엔 완료 목록 조회 기능을 개발한다. 할 일과 완료한 일을 구분하기 위해 checked 라는 플래그(Flag) 값이 필요하다. true: 완료한 일 false: 아직 완료하지 않은 일 체크박스 체크 또는 체크 해제 기능 우선, 체크 박스를 체크 했을때, checked의 값이 바뀌도록 해보자 InputBox.jsx import React, { useRef, useState } from 'react'; import PropTypes from 'prop-types'; const InputBox = ({ todoList, setTodoList }) => { const [text, setText] = useState(''); c..

할 일 목록 조회 기능 개발 목록을 출력하기 위해, 아래와 같이 컴포넌트에 아래 props를 넘긴다. todoList: 목록 setTodoList: 목록의 값을 조작하기 위해 title: 목록의 제목(Title) Home.jsx import React, { useState } from 'react'; import InputBox from '../components/InputBox'; import ToDoItemList from '../components/ToDoItemList'; const Home = () => { const [todoList, setTodoList] = useState([]); return ( {/* ToDo Item을 추가할 수 있는 input 박스 */} {/* 할 일 Item 리..

Item 추가 기능 개발 우선 값을 입력받는 기능부터 개발한다. input에 입력한 값 가져오기 useState()를 사용하면, input에 입력한 값을 가져올 수 있다 import React, { useState } from 'react'; const InputBox = () => { const [text, setText] = useState(''); // (1) const onChangeInput = (e) => { // (2) setText(e.target.value); }; return ( {/* 아이템 내용 입력 input */} {/* 입력 후 아이템 추가 버튼 */} 추가 ); }; export default InputBox; (1): useState() Hook으로 빈 문자열의 text와 ..

전체적인 틀 개발 기능 구현전에 대략적으로 UI를 개발한다. 디렉토리 구조 디렉토리는 아래와 pages와 components로 구성한다. pages는 화면 단위로 jsx 파일 생성 components에는 화면을 구성하는 component를 단위로하여 jsx 파일 생성 현재는 하나의 페이지만 있어도 되지만, 추후에 여러개의 페이지가 생길 수도 있으니 pages 디렉토리를 따로 만들었다. 개발할 페이지와 컴포넌트 리스트업 Pages Home: 첫 화면 (ToDo List를 보여줌) Components ToDo Item 입력을 받을 수 있는 컴포넌트 ToDo Item 리스트 컴포넌트 (ToDo Item 컴포넌트들을 포함) ToDo Item 컴포넌트 개발 시작 jsx 파일 생성 아래와 같이 components와..

구현할 기능 기획 ToDo List인 만큼 CRUD는 필수적으로 들어가야함 기본 기능 ToDo Item 추가 ToDo Item 수정 ToDo Item 삭제 ToDo Item 할 일 완료 체크 / 체크 해제 할 일 완료한 전체 목록 보기 (히스토리) 아래 기능은 나중에 추가하면 좋을거 같다 기한 설정 기능 장소 입력 기능 Item을 여러개의 step으로 나눌 수 있는 기능 '알고리즘 정렬 공부하기'는 '오전에 삽입정렬', '오후에 병합정렬 공부하기'로 2step으로 나눠짐 데이터를 DB로 관리 화면 구성 기획 우선은 기본 기능만 생각하고 화면을 기획했다. 아래 기능들을 모두 구현했을때, 버전 v1.0.0으로 한다. 맨 위에 할 일을 추가할 수 있는 입력창과 버튼이 존재 그 아래에는 ToDo Item 목록이..

목표 프로젝트를 생성 prettier와 eslint를 설정 프로젝트 생성 react-create-app으로 프로젝트를 생성한다. 아래 명령어 수행 $ yarn create react-app todo-app 생성 후 실행 확인해보자. 아래 명령어 수행 후 localhost:3000으로 접속 $ cd todo-app $ yarn start (리액트 로고가 뱅글뱅글 돌아가는 화면이 나온다) vscode에서 prettier와 eslint 설정 본 프로젝트는 vscode를 이용해서 개발할 예정이므로, vscode 환경에서 본 글을 작성한다. prettier와 eslint의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 ..

registry 설정과 마찬가지로 사내에서 개발하다보면 proxy를 설정해야하는 상황이 발생하기도 한다. proxy 설정을 할때는 npm config set 또는 yarn config set을 이용한다. 프록시 설정 본 글에서는 npm과 yarn을 사용해서 프록시 설정하는 방법을 모두 소개한다. using npm > npm config set proxy http://username:password@host:port > npm config set https-proxy http://username:password@host:port using yarn > yarn config set proxy http://username:password@host:port > yarn config set https-proxy ..

혼자서 개발할때는 필요없는 설정이지만, 인터넷이 막혀있는 사내에서 개발할때는 필요할 수 있다. 사내 넥서스 설정 기본적으로는 https://registry.yarnpkg.com 을 바로보게 되어있다 아래 명령어를 통해 확인 가능 > yarn config list registry의 값을 사내 저장소의 url로 바꿔주면 된다. 바꾸는 방법은 아래 명령어를 이용한다. > yarn config set registry https://your.company.registry.com 그리고, 다시 yarn config list 명령어로 제대로 바뀌었는지 확인해 본다. 만약에 잘못 설정했다면 yarn config delete registry 명령어를 이용하면 된다.

Nodejs 설치 아래 사이트에서 설치 파일 다운로드 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2021.07.08 기준으로 LTS 버전은 14.17.3이다. 본 글에서는 14.17.3을 다운로드 받는다. 설치가 끝나면 cmd 창에서 node -version 명령어를 입력해본다 > node --version v14.17.3 위와같이 버전이 나오면 설치 성공 Yarn 설치 (필수 아님) node 모듈을 다운로드 받을때 npm 을 이용해도 되지만, npm 보다 빠르고 의존성까지 한번에 받아주는 yarn 사용하면 편하다. 필수는 아니기 때문에 설치하..

React Router Dom 설치 React Router Dom 사용을 위해 모듈을 설치한다. # yarn 설치 $ yarn add react-router-dom # or npm 설치 $ npm install react-router-dom Switch 설정 아래 3가지 경로를 설정한다. http://localhost:3000/about -> about에 관련된 내용 http://localhost:3000/users -> 사용자 프로필에 관련된 내용 http://localhost:3000/ -> 홈 화면 import { BrowserRouter, Link, Switch, Route } from 'react-router-dom' function App() { return ( about users home ..