I T H

- Drag and Drop 기능을 사용하기 위해 설치 해준다. npm install react-beautiful-dnd --save - Drag and Drop기능을 Lists.js에 넣어준다. [Lists.js] import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; export default function Lists({ todoData, setTodoData }) { const handleCompleteChange = (id) => { let newTodoData = todoData.map((data) => { if (data.id === id) { data.compl..

컴포넌트를 App.js, Form.js, Lists.js로 컴포넌트를 분리시키고, TailWindCss를 사용해본다. - 아래 링크를 클릭하고 tailwindCss를 설치하고 사용해보자! https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com [ App.js ] import React from "react"; import "./App.css"; import { useState } from "react"; im..

[ 클래스형 컴포넌트 ] - App.js import React, { Component } from "react"; import "./App.css"; export default class App extends Component { state = { todoData: [], value: "", }; btnStyle = { color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float: "right", }; getStyle = (completed) => { return { padding: "10px", borderBottom: "1px #ccc dotted", textDecoration: comp..

Node.js를 설치해준다. Node.js는 웹 브라우저환경이 아닌곳에서도 자바스크립트를 사용할 수 있는 자바스크립트 런타임이다. 런타임이란 - 프로그래밍 언어가 구동되는 환경을 말한다. 1. node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 설치완료 후 CMD 창에 들어가서 제대로 설치되었는지 확인 (단축키는 윈도우키 + R) 3. Visual Studio Code를 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Stud..

이번 챕터에서는 메이븐을 이용한 프로젝트 빌드 및 운영 서버 배포 방법에 대해 작업을 진행하고자 한다. [ pom.xml ] Pom.xml 파일의 내용 중 프로젝트명을 일괄 수정하여 준다. Homepage -> myPortfolio 228 라인 쯤에 파이널 네임이 "myPortfolio" 와 같이 수정되어야 한다. 파이널 네임이 최종적으로 만들어질 xxx.war 파일의 이름이 된다. 추가로 쿼리 매핑이 되어있는 xml 파일들을 빌드 시 포함시키기 위해 아래 구문을 추가하여 준다. myPortfolio src/main/java **/*.xml src/main/resources .. 생략 [ 이미지 업로드 경로 수정 ] 로컬 환경과 운영서버의 환경이 서로 다르므로 이미지를 업로드 하는 경로를 다르게 수정해주..