Skip to content

[10기 soonysoo] TodoList with CRUD #211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: soonysoo
Choose a base branch
from
Open

[10기 soonysoo] TodoList with CRUD #211

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5a98520
프로젝트 구성
soonysoo Jul 6, 2021
24ef8da
App component 구조화
soonysoo Jul 6, 2021
083007d
App구조화
soonysoo Jul 6, 2021
5cb9313
component 생성
soonysoo Jul 6, 2021
be55af2
onaddtodo 기능구현
soonysoo Jul 7, 2021
76d96d8
state수정
soonysoo Jul 8, 2021
023bf9e
delete activate 기능 구현
soonysoo Jul 10, 2021
1fb2b3a
Filtering 기능구현
soonysoo Jul 11, 2021
e3074f6
updateTodo 기능 구현
soonysoo Jul 11, 2021
11807be
요구사항
soonysoo Jul 11, 2021
ab1f0c9
[refactoring] util기능 분류
soonysoo Jul 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 0 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,27 +109,4 @@ live-server 폴더명

<br/>

## 💬 1주차 미션 후기 블로그

아래 링크는 1주차 미션을 진행하면서 블로그를 작성해주신 분들의 글입니다. 미션을 진행하면서, 다른 분들의 문제 해결 과정이 궁금하다면 참고해주세요 😄
- [1주차 미션후기](https://www.notion.so/1-2-8b624729fbce4174b8b583efb10c3200)
- [블랙커피 프론트엔드 스터디 레벨1 후기](https://yujo11.github.io/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC/%EB%B8%94%EB%9E%99%EC%BB%A4%ED%94%BC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%ED%84%B0%EB%94%94-%EB%A0%88%EB%B2%A81-%ED%9B%84%EA%B8%B0/)
- [블랙커피 프론트엔드 스터디 회고](https://www.notion.so/bffb14daea984293a954ac7cdb4f7c1e)

<br/>

## 👏🏼 Contributing

만약 미션 수행 중에 개선사항이 필요하다면, 언제든 자유롭게 PR을 보내주세요.

<br/>

## 🐞 Bug Report

버그를 발견한다면, [Issues](https://github.com/next-step/js-todo-list-step1/issues)에 등록해주세요.

<br/>

## 📝 License

This project is [MIT](https://github.com/next-step/js-todo-list-step1/blob/main/LICENSE) licensed.
10 changes: 6 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>이벤트 - TODOS</title>
<title>TODOS</title>
<link rel="stylesheet" href="./src/css/style.css" />
</head>
<body>
<div class="todoapp">
<h1>TODOS</h1>
<div id="todoapp">
<!-- <h1>TODOS</h1>
<input
id="new-todo-title"
class="new-todo"
Expand All @@ -32,7 +32,9 @@ <h1>TODOS</h1>
</li>
</ul>
</div>
</main>
</main> -->
</div>
<script src="src/main.js" type="module"></script>

</body>
</html>
7 changes: 7 additions & 0 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Component from "./core/component.js";

class App extends Component{

}

export default App;
Empty file added src/components/Filter.js
View file
Open in desktop
Empty file.
Empty file added src/components/InputTodo.js
View file
Open in desktop
Empty file.
Empty file added src/components/TodoList.js
View file
Open in desktop
Empty file.
22 changes: 22 additions & 0 deletions src/core/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export default class Component {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공통된 컴포넌트의 사용이 좋네요!!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 하는 것이 모던한 JS 스타일인 것 같아요. 제가 이전에 본 장후님의 코드도 데이터 관리 부분, 그리는 부분, 컨트롤 하는 부분이 나누어 진 것을 봤어요. 마찬가지로 수은님도 그런 render(그리는 부분), setState(데이터 관리) 부분을 확인할 수 있어서 좋았습니다. 저도 앞으로 이렇게 해야 겠습니다. 😀

$target;
$props;
$state;
constructor ($target, $props) {
this.$target = $target;
this.$props = $props;
this.setup();
this.setEvent();
this.render();
}
setup () {};
template () { return ''; }
render () {
this.$target.innerHTML = this.template();
}
setEvent () {}
setState (newState) {
this.$state = { ...this.$state, ...newState };
this.render();
}
}
3 changes: 3 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import App from './App.js';

new App(document.querySelector('#todoapp'));