연습장

목록 구현수정버튼을 눌렀을때 수정모달이 띄워져야 한다.모달 구현할일 / 진행중에 수정버튼 또는 아이콘을 누르면 모달창이 떠야한다.모달창은 X 버튼을 누르거나 모달 바깥영역을 선택하거나 키보드의 ESC 를 누르면 닫혀야 한다.모달창은 입력폼과 동일하게 제목과 내용이 입력가능하다.각 입력창에는 수정하기 이전의 티켓 내용이 입력되어 있어야 한다.validator 나 시간은 입력폼과 동일한 스펙을 갖는다.모달이란?? -> 기존 페이지 위에 검은배경 깔리고, 집중하게 페이지 작은거 하나 보여주는것.  css 로 다른거 못누르게 만드는것..  모달은 어떻게 만드는 걸까..? 방법 1. display 속성을 block none 을 조절하는 방법방법 2. state 를 관리하여 모달을 보여주거나 사라지게 함 .--> ..

모달 창을 하려고 했는데,  그전에 버그 수정 items 에 들어가야할 item 들이 this.state 에 바로 저장되고 있는것을 확인    this.addEvent('click', '.updateBtn', () => {      item.write = true;      updateItem(item);      inputFocus(`[data-Item${item.seq}] .upTitle`);    });    this.addEvent('change', '.workState', e => {      item.workState = e.target.value;      updateItem(item);      setWorkCount();    }); updateItem 이 문제가 있는듯 하다. 기존   ..

삭제 기능삭제 버튼 클릭시 해당 Item 이 삭제됨-> this.state.items 의 해당 seq 가 제거   에서 deleteItem 함수 생성  // 삭제하기  deleteItem(contents) {    // contents : Item.seq 를 받아온다.    let seqArray = this.state.items.map(item => item.seq);    let delIndex = seqArray.findIndex(item => item == contents);    this.setState(this.state.items.splice(delIndex, 1));  }  까지 전달하고 '삭제' 버튼과 연결    this.addEvent('click', '.deleteBtn', () =>..

목록 구현목록은 총 세가지필드가 존재한다. 할일 / 진행중 / 종료할일 / 진행중 에 등록된 티켓은 수정 및 삭제가 가능하다.할일 / 진행중 / 종료 로 서로간에 이동이 가능하다.각 티켓에는 제목, 내용, 제출 또는 수정날짜가 나타나야 한다.수정버튼을 눌렀을때 수정모달이 띄워져야 한다.  이번 글에서 구현할 내용할일 / 진행중 에 등록된 티켓은 수정 및 삭제가 가능하다.할일 / 진행중 / 종료 로 서로간에 이동이 가능하다.              할일        진행중        종료       select-option 를 선택시 해당 값이 반영하기     this.addEvent('change', '.workState', e => {      console.log(e.target.value);   ..

목록 구현목록은 총 세가지필드가 존재한다. 할일 / 진행중 / 종료할일 / 진행중 에 등록된 티켓은 수정 및 삭제가 가능하다.할일 / 진행중 / 종료 로 서로간에 이동이 가능하다.각 티켓에는 제목, 내용, 제출 또는 수정날짜가 나타나야 한다.수정버튼을 눌렀을때 수정모달이 띄워져야 한다.보기 불편해서 임시로 html 에서 간단하게 css 좀 주고     style>        .itemList >div {            margin: 10px;            padding: 10px;            border: 1px solid;            width : 400px        }    style> 각 Item 은 진행 상태 - 할일 /진행중/종료 를 가지며 -> 이는 변경이 ..

필수구현입력폼 구현입력에는 제목과 내용을 입력할 수 있다.둘중 하나라도 값이 없는경우 사용자에게 알려줘야 한다.alert 또는 입력창 하단에 문구 노출 방식첫 페이지가 렌더링 되었을때 제목에 포커스가 맞춰져야 한다.제출은 키보드의 Enter 를 누르거나 입력 버튼을 누르면 제출이 되어야 한다.제출 후에는 입력값들이 초기화 되어야 한다.제출 후 할일 목록에 티켓이 생성되고 티켓에는 제목, 내용, 제출 시간이 표시되어야 한다.ItemAdd.js : 내용 추가기능 method 전달 확인 // src/app.js// state , method 관리import Component from './core/Component.js';import ItemList from './components/ItemList.js';i..

제한사항1. 순수 자바스크립트로만 구현2. SPA 로 구현하기3. SCSS 전처리기 사용4. Babel 과 Webpack 으로 환경 세팅5. Prettier & ESLint 적용  다음과 같이 webpack , babel , scss, prettier , eslint 세팅  https://js0616.tistory.com/322 [최종] 바닐라 javaScript 세팅webpack (babel + sass + img + html)  + eslint + preitter  // package json 생성npm init -y // webpack 설치npm install --save-dev webpack webpack-cli// babel 관련 설치npm install --save-dev @babel/core..

webpack (babel + sass + img + html)  + eslint + preitter  // package json 생성npm init -y // webpack 설치npm install --save-dev webpack webpack-cli// babel 관련 설치npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime babel-loadernpm install core-js@3 @babel/runtime-corejs3// scss 관련 설치npm install --save-dev sass css-loader sass-loadernpm install --save-dev min..

정리 1. package.json 생성npm init -y 2. airbnb 스타일 관련 설치npx install-peerdeps --dev eslint-config-airbnb 3. prettier 설치 npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier 4. .eslintrc.js 생성// .eslintrc.jsmodule.exports = {  extends: [    'airbnb-base',    'plugin:prettier/recommended', // Prettier 관련 규칙 추가  ],  env: {    browser: true,    node: true,    es2021: true,  },  r..

package.json npm init -y airbnb 스타일 관련 설치npx install-peerdeps --dev eslint-config-airbnb package.json // devDependencies 에 설치 확인 {   ...   "devDependencies": {    "eslint": "^8.2.0",    "eslint-config-airbnb": "^19.0.4",    "eslint-plugin-import": "^2.25.3",    "eslint-plugin-jsx-a11y": "^6.5.1",    "eslint-plugin-react": "^7.28.0",    "eslint-plugin-react-hooks": "^4.3.0"  }} 폴더 구조 세팅 app.js 오류..