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..

기존 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..

아이템 삭제 기능 개발 각 아이템의 우측에 있는 휴지통 버튼을 누르면 삭제가 되도록 해보자 실제로는 지우지 않고, 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의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 ..

혼자서 개발할때는 필요없는 설정이지만, 인터넷이 막혀있는 사내에서 개발할때는 필요할 수 있다. 사내 넥서스 설정 기본적으로는 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 명령어를 이용하면 된다.

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 ..

NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version을 입력해보자 # npm -version 6.14.4 위와 같이 나오면 설치 완료 참고 yarn 설치 yarn은 npm과 같이 패키지 매니저 프로그램으로 개발자 취향에 맞게 nbm을 쓰거나 yarn을 쓴다. 설치는 자유 (npm을 사용해도 됨) 본 글에서는 homebrew를 이용해서 yarn을 설치한다. # brew install yarn 리액트(React) 프로젝트 생성 npm 또는 yarn을 이용하여 react 프로젝트를 생성한다. 아래 명령어는 npm 또는 ya..

서론 자바 스크립트 자바스크립트는 한때 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 보여주기 위한 용도로 씀. 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 함. 더 나아가 서버 사이드, 모바일, 데스크 톱 애플리케이션에서도 사용함. 자바스크립트 기반 프레임워크 자바스크립트만으로 대규모 프로젝트를 진행할 수 있게 됨. 하지만, 순수 자바스크립트로는 어려움이 있음. 대규모 프로젝트를 어떻게 관리할까? AngularJS, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js ... 위 프레임워크들은 아래와 같은 방법으로 구조화를 함 MVC: Model View Controller MVVM: Model Vie..