연습장

개발은 뭐랄까... 코드를 짜고 있으면... 레포트나 논문, 자소서를 쓰던..그시절 창작의 고통이 떠오르며 예술가가 되는 기분이 든다. 특히.. css에서 많이 그렇게 생각한다.  기존의 요구사항에 있던 다른 조건들에서는 할 수 있는건 거의다 한것 같고..'선택구현' 에 있던 조건들은 표현이 애매모호하거나, 개발환경 세팅을 다시해야되는것들이 남아있다.  그래서 이제는 미루고 미뤘던 css를 작성 할 때가 온 것 같다.  대충 쪼개서 보면 크게 3가지로 고려할 수 있지 않을까? 1. 상단 부분 (Item 추가 / 필터 버튼 / 정렬 버튼)--  2. 개별 Item -- 각 workState 에 따라서 ( wait / going / end )  테두리 색을 다르게 줘도 좋을것 같다. ?  3. 전체적인 배치..

목록 구현수정버튼을 눌렀을때 수정모달이 띄워져야 한다.모달 구현할일 / 진행중에 수정버튼 또는 아이콘을 누르면 모달창이 떠야한다.모달창은 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..

https://velog.io/@hjoo3355/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%A0%95%EB%A6%AC 프론트엔드 +클론코딩 정리프론트엔드 구현해보고 싶은 것들:필수제한 - 하나씩 일주일이라는 시간을 둘 것1\. TODO List제한사항순수 자바스크립트로만 구현SPA 로 구현하기SCSS 전처리기 사용Babel 과 Webpack 으로 환경 세팅Pretvelog.io  필수제한 - 하나씩 일주일이라는 시간을 둘 것...? 1. TODO List제한사항1. 순수 자바스크립트로만 구현-> 리액트는 순수 자바스크립트일까? -> 리액트는 자바스크립트 라이브러리로 jsx 문법을 사용하기 때문..