모듈을 사용하는 이유? 모듈은 쉽게 말하면 '부품'이라고 생각하면 됩니다. 부품처럼 각 기능별로 모듈화하여 파일을 만들고, 필요한 파일만 불러와서 프로그램을 만들 수 있습니다. 한 파일로 작성된 코드는 보기에도 복잡하고 유지 보수를 하기도 어려운 단점이 있습니다. 하나의 파일을 기능별로 나눠, 여러 파일로 관리를 하게되면 유지보수하기에 편리하고 복잡성이 낮아집니다. 얻을 수 있는 효과? 자주 사용되는 코드를 별도 파일로 모듈화하여, 재활용성을 높일 수 있음 모듈로 나눠서 관리하게되면, 관련된 파일만 수정하면 됨 필요한 로직만 로드하기 때문에 메모리 낭비를 줄일 수 있음 모듈 표준 모듈 표준에는 여러가지가 있지만, 본 글에서는 아래 2가지를 소개합니다. CommonJs: Node.js에서 채택한 modul..

웹 개발을 위한 기초 언어 3가지 웹개발에서 사용하는 언어는 대표적으로 HTML, CSS, Javascript 3개가 있습니다. 프론트엔드(Front-end) 개발자라면 반드시 알아야 하는 언어중 하나입니다. 다른 프로그래밍 언어에 비해 쉽다고 생각할 수도 있지만, 또 그렇게 쉽지도 않아서 우습게봐선 안됩니다. 항상 기초가 튼튼해야한다는 것을 기억해야합니다. HTML 웹의 구조를 담당하는 HTML은 Hyper Text Markup Language의 약자입니다. 단순히 웹 페이지의 구조(뼈대)를 만들기 위해 사용하기 때문에 HTML만으로는 디자인적으로 예쁘게(?) 만들 수 없습니다. 애초에 용도가 꾸미기 위한 용도가 아니기 때문입니다. HTML과 HTML 태그에 대한 상세정보는 아래 링크 참고 2021.1..

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

이미지를 정사각형으로 만들기 단순히 image의 width와 height를 동일하게 해도 되지만, 그렇게하면 이미지가 늘어지거나 축소된다. (보기 좋지 않음) index.html index.css body { padding: 0; margin: 0; width: 100%; } img { width: 500px; height: 500px; } 본 글에서는 위와같이 하는 방법이 아닌, 비율은 유지하면서 정사각형을 벗어나는 부분은 보이지 않도록 하는 방법을 소개한다. 이미지를 정사각형 모양으로 자르기 아래와 이미지 같이 가로, 세로의 길이가 다른 이미지가 있을때 정사각형 모양으로 이미지를 자르는 방법을 살펴보자 (아래 '브레이브걸스' 이미지는 세로보다 가로가 더 길다) 정사각형 영역을 벗어나면 이미지의 비율은..

express 설치 npm 또는 yarn을 이용하여 express 를 설치한다. 본 글에서는 yarn을 사용 $ yarn add express npm을 사용할 경우 npm install --save express 명령어를 수행한다. hello world 출력 아래와 같이 server.js 파일을 생성 const express = require("express"); const app = express(); const port = 3000; // port 번호 설정 app.get("/", (req, res) => { res.send("Hello World"); }); app.listen(port, () => { console.log(`Example app listening at http://localhost..

아이템 삭제 기능 개발 각 아이템의 우측에 있는 휴지통 버튼을 누르면 삭제가 되도록 해보자 실제로는 지우지 않고, 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 사용하면 편하다. 필수는 아니기 때문에 설치하..

세션과 쿠키를 사용하는 이유? 세션과 쿠키를 사용하는 이유를 알기 위해 HTTP 프로토콜의 특징을 알아야 한다. HTTP 프로토콜 통신은 connectionless, statless 특징을 가지고 있다. connectionless TCP 통신과 다르게 클라이언트와 서버는 연결관계를 가지지 않는다. 즉, 클라이언트가 요청하고, 서버가 응답하면 연결을 끊는다. statless 클라이언트와 서버가 요청과 응답을 주고 받고 통신이 끝나면, 상태를 따로 저장하지 않는다. 위와 같은 이유로 세션과 쿠키를 사용하여 상태에 대한 정보를 저장한다. 만약, 세션과 쿠키를 사용하지 않으면 쇼핑몰 사이트에서 로그인을 하고 페이지를 이동하면 다시 로그인해야 하는 번거로운 상황이 발생할 수 있다. 세션과 쿠키 세션과 쿠키는 둘 ..

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

사전 준비 본 글에서는 Homebrew를 이용하여 node, yarn, docker를 설치한다. node.js 설치 $ brew install node yarn 설치 $ brew install yarn docker 설치 homebrew 최신버전에서는 brew cask install 대신에 brew --cask install 을 사용한다. $ brew --cask install docker React 프로젝트 생성 # create-react-app을 이용하여 리액트 프로젝트 생성할 예정 $ yarn add global create-react-app 프로젝트 생성 $ yarn create react-app test-app 만들어진 app을 실행시켜 본다. $ cd test-app $ yarn start (저..