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

Thrift 쓰리프트는 다양한 언어를 지원하는 RPC 프레임워크이다. 페이스북에서 개발했고, 현재는 오픈소스 아파치 프로젝트로 등록되어 있다. 쓰리프트는 RPC 프레임워크라서, 원격 메소드를 호출하여 개발자는 비지니스 로직에만 신경 쓸 수 있다는 RPC 특징을 똑같이 가진다. 정의된 인터페이스(또는 스키마)를 가지고, 다양한 언어로 코드를 생성해주는 엔진을 가지고 있고 아래와 같은 언어를 지원해준다. C++, Java, Python, PHP, Ruby, Erlang, Perl, Haskell, C#, Cocoa, JavaScript, Node.js, Smalltalk, OCaml, Delphi 예시로 아래와 같은 쓰리프트 파일을 각 언어에 맞게 코드를 생성해준다. enum PhoneType { HOME,..

처음 우분투를 사용하게 되면, 한글을 기본적으로 사용할 수 없다 직접 한글 설정을 해줘야 하는데, 아래 절차대로 수행한다. 우분투에서 한글 설정하기 지역 & 언어 설정으로 들어간다. Settings > Region & Language 처음에는 위 처럼 나오는데, Language를 한국어로 변경한다. 그리고, reboot를 한다. 그다음엔 Manage Installed Languages 클릭하면, 아직 설치되지 않은 언어팩(?)이 있다고 하면서 설치를 진행한다. 아래 사진처럼 '한국어'가 맨 위에 위치하는지 확인하고, 키보드 입력기가 'IBus'로 되어 있는지 확인 그럼 다시 첫 화면에서 + 버튼을 눌러서 입력 소스를 추가한다. 한국어 > 한국어 (Hangul) 아래처럼 '한국어 (Hangul)'이 추가된..

아이템 삭제 기능 개발 각 아이템의 우측에 있는 휴지통 버튼을 누르면 삭제가 되도록 해보자 실제로는 지우지 않고, 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와 ..