[mission002] TODOS 시스템에 비동기/온오프라인을 고려하여 업데이트하기 by StellaKim1230 · Pull Request #14 · eastjun-dev/frontend

StellaKim1230 · 2019-12-25T08:08:42Z

#7 [mission002]

궁금한점.

코드 시도 후 아래와 같은 에러가 나왔는데, 이유를 모르겠습니다. 같이 고민해보아요!

fetchTodoData 안에 있는 this.setState is not function 이라고 나옴

function App() {
  const fetchTodoData = async () => {
    const data = await apiHandler({ url: 'http://todo-api.roto.codes' })
    this.setState(data)
  }
  fetchTodoData()
  this.setState = (data) => {
    this.todoList.setState(data)
  }
}

this.todoList.setState(data) 부분에서 this.todoList 가 undefined 라고 에러남

function App() {
  const fetchTodoData = async () => {
    const data = await apiHandler({ url: 'http://todo-api.roto.codes' })
    setState(data)
  }
  fetchTodoData()
  this.todoList = new TodoList({
    data: this.data,
  })
  function setState(data) {
    this.todoList.setState(data)
  }
}

fetchTodoData 안에 있는 setState(data) 에서 Cannot access ‘setState’ before initialization 이라고 나옴

function App() {
  const fetchTodoData = async () => {
    const data = await apiHandler({ url: 'http://todo-api.roto.codes' })
    setState(data)
  }
  fetchTodoData()
  const setState = (data) => {
    this.todoList.setState(data)
  }
}

1. call todo api. 2. add todo api.

3. remove todo api connect.

4. add toggle api connect 5. add all todo count.

1. 전체보기, 헤야할 일, 완료한 일 클릭시 데이터, 총 데이터 수 보여주기.

localStorage에 데이터 넣기.

s280493 · 2019-12-26T03:56:11Z

mission002/kimjieun/js/App.js

+  }
+
+  onKeyDown = async (e) => {
+    if (e.key === ENTER) {


e.key를 썼을 때, input value가 한글일 경우 리스트에 두 개씩 추가되는 버그가.. 있더라구요.
이건 e.key 대신 e.keyCode를 쓰면 해결되는데, keyCode가 표준이 아니라서ㅜㅜ..
다른 분들은 어찌하셨는지 궁금하네요.

동준님이 해결해주셧녜요 ㅠㅠ

저는 e.code일때 두번 입력되어서 e.key로 변경하고 작동도 정상이라 해결했다고 생각했는데 e.key도 동일한 증상이 있나요?

@StellaKim1230 혹시 동준님이 어떻게 해결하셨는지 알려주실 수 있나요??

e.key를 썼을 때, input value가 한글일 경우 리스트에 두 개씩 추가되는 버그가.. 있더라구요.
이건 e.key 대신 e.keyCode를 쓰면 해결되는데, keyCode가 표준이 아니라서ㅜㅜ..
다른 분들은 어찌하셨는지 궁금하네요.

@StellaKim1230 동준님 PR #15 리뷰내용 중 엔터 연속입력시 처리방법 말씀하시는 거였군요. e.key랑은 다른 문제였네요. 😓

s280493 · 2019-12-29T07:05:23Z

mission002/kimjieun/utils/api.js

@@ -0,0 +1,22 @@
+const username = 'kimjieun'
+
+export const apiHandler = async ({ url, method, body, customUrl }) => {


apiHander 함수를 만들어서 하나로 쓰는 게 인상깊습니다.
중복코드가 많이 줄어들 것 같아요.

s280493 · 2019-12-29T07:05:41Z

mission002/kimjieun/utils/url.js

@@ -0,0 +1 @@
+export const hostUrl = 'http://todo-api.roto.codes'


hostUrl만 따로 url.js로 관리하시는 이유가 있을까요?
username은 api.js에서 관리하고, hostUrl은 url.js에서 관리하는 기준이 궁금합니다 :)

제가 실수한 부분입니다ㅎㅎ 따로 관리하는게 맞을것 같아요 ㅎㅎ

s280493 · 2019-12-29T07:06:24Z

mission002/kimjieun/js/App.js

+  }
+
+  onKeyDown = async (e) => {
+    if (e.key === ENTER) {


Enter 키를 눌렀을 때 -> input value가 비어있으면, 값이 추가되지 않는 조건을 넣어주면 어떨까요?

오! 꼼꼼한 리뷰 감사합니다!

s280493 · 2019-12-29T07:06:41Z

mission002/kimjieun/js/App.js

+      }
+    }
+
+    this.fetchTodoData()


input에 값을 칠 때마다 get api가 불러와지네요.
Enter키를 눌러 값이 추가되었을 때만 불러와도 될 것 같습니다.

s280493

올려주신 궁금한 점 1, 2, 3이 제 컴퓨터에서는 재현이 안 되더라구요!
아무 콘솔 오류도 없어요.

지은님 컴퓨터에서는 어떻게 보이는지 궁금하네요~

ganeodolu · 2020-01-06T09:01:15Z

mission002/kimjieun/js/App.js

+    this.fetchTodoData()
+  }
+
+  onTodoCheck = (todoStatus) => {


해야할 일, 완료한 일 필터를 눌렀을 때 필터클래스에 selected를 넣어서 필터주위에 빨간 테두리가 유지되어있으면 더 좋을 것 같아요.

ganeodolu · 2020-01-06T09:27:42Z

mission002/kimjieun/index.html

+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <div id="app">


<div id="app">를 <div id="app" class="todoapp">로 변경하면 기존 css가 잘 적용될 것 같아요.

YongHoonJJo

리뷰 늦게 드려 죄송합니다.ㅜ 눈에 보이는 몇 가지에 대해 리뷰 남겨보았습니다..!!
그리고, 질문 1, 2, 3은 해결 되신건가요?
1, 2 는 this 에 해당 프로퍼티들이 없어서 발생한 문제 같아 보여서요..ㅜ

YongHoonJJo · 2020-01-07T05:30:45Z

mission002/kimjieun/components/TodoCheck.js

+    this.$selector.addEventListener('click', (e) => {
+      if (e.target.className === ACTIVE) this.onTodoCheck(ACTIVE)
+      if (e.target.className === COMPLETED) this.onTodoCheck(COMPLETED)
+      if (e.target.className === ALLSELECTED) this.onTodoCheck(ALLSELECTED)


위에서 만족하는 조건식이 있어도 나머지 조건식들에 대한 검사가 이루어질 것 같아요!! switch-case 문이나, this.func() 실행 후 return 을 통해 함수를 확실히 종료해주는 것은 어떨까요?

용훈님 말씀대로 return 이나 swtich case 문으로 바꿔 주는 것이 좋겠네요! 필요없는 로직 검사가 안이루어지니깐 ㅎ 조언 감사합니다

YongHoonJJo · 2020-01-07T05:34:27Z

mission002/kimjieun/components/TodoList.js

+  init = () => {
+    this.$selector.addEventListener('click', (e) => {
+      if (e.target.className === DESTROY) this.onDeleteTodo(e.target.parentNode.dataset.idx)
+      if (e.target.className === TOGGLE) this.onToggleTodo(e.target.parentNode.dataset.idx)


const className = e.target.className 과 같이 프로퍼티 캐싱처리 후 위에서 언급했던 것 처럼 switch-case 문이나 if 문 뒤에 return 으로 종료시켜주는 것은 어떨까요?

YongHoonJJo · 2020-01-07T05:44:35Z

mission002/kimjieun/components/TodoList.js

+
+  createLiClassName = (isCompleted) => {
+    if (!isCompleted) return 'view'
+    if (isCompleted) return 'completed'


isCompleted 의 경우 T/F 만 존재하기 때문에,

if (!isCompleted) return 'view' return 'completed'

와 같이 하면, 굳이 return '' 를 넣지 않아도 될거 같아요.

그리고 return isCompleted ? 'completed' : 'view' 와 같이 처리할 수도 있구요!!

그렇네요! 항상 삼항연산자는 다른사람이 리뷰해주면 생각나는듯 ㅠㅠ 습관화시켜야겠어요 ㅠ

YongHoonJJo · 2020-01-07T05:46:12Z

mission002/kimjieun/components/TodoList.js

+  createTodoListHtmlString = ({ content, isCompleted, _id }) => {
+    return `<li class=${this.createLiClassName(isCompleted)}>
+              <div data-idx=${_id} class="view">
+                <input class="toggle" type="checkbox" ${isCompleted === true && 'checked'}>


isCompoled 가 false 면 <input class="toggle" type="checkbox" false> 이런식으로 남게 되지 않을까요? (전에 제가 이렇게 했었지만요..ㅎ)

ㅎㅎ 테스트해보겠습니다! ㅎ

false 안남는것으로 확인했습니다 ㅎㅎ

YongHoonJJo · 2020-01-07T05:53:26Z

mission002/kimjieun/js/App.js

+    const todoData = this.data.filter(d => {
+      if (todoStatus === ACTIVE) return !d.isCompleted
+      if (todoStatus === COMPLETED) return d.isCompleted
+      if (todoStatus === ALLSELECTED) return this.data


this.data 는 항상 true 를 리턴해야하기 때문에 이렇게 두신건가요?

전체 할일 선택시에는 모든 데이터가 나와야 하기 때문에 저렇게 구현 한 것 같아요!

StellaKim1230 · 2020-01-07T14:38:18Z

올려주신 궁금한 점 1, 2, 3이 제 컴퓨터에서는 재현이 안 되더라구요!
아무 콘솔 오류도 없어요.

지은님 컴퓨터에서는 어떻게 보이는지 궁금하네요~

제가 new App()을 안했었던 것 같기도 허고 ㅠㅠ 다시 해봐야겠네요 ㅠㅠ

StellaKim1230 · 2020-01-07T14:39:33Z

리뷰 늦게 드려 죄송합니다.ㅜ 눈에 보이는 몇 가지에 대해 리뷰 남겨보았습니다..!!
그리고, 질문 1, 2, 3은 해결 되신건가요?
1, 2 는 this 에 해당 프로퍼티들이 없어서 발생한 문제 같아 보여서요..ㅜ

아뇨 아직 ㅠ this에 해당 프로퍼티 들이 없다는 말씀은 this.setState() 이 함수자체가 없다는 말씀이신가요??ㅠㅠ
아니면 제가 new App() 을 안해서 발생한 거 같기도 하고 ㅠㅠ 헷갈리네요 항상 ㅠ

YongHoonJJo · 2020-01-18T10:21:42Z

리뷰 늦게 드려 죄송합니다.ㅜ 눈에 보이는 몇 가지에 대해 리뷰 남겨보았습니다..!!
그리고, 질문 1, 2, 3은 해결 되신건가요?
1, 2 는 this 에 해당 프로퍼티들이 없어서 발생한 문제 같아 보여서요..ㅜ

아뇨 아직 ㅠ this에 해당 프로퍼티 들이 없다는 말씀은 this.setState() 이 함수자체가 없다는 말씀이신가요??ㅠㅠ
아니면 제가 new App() 을 안해서 발생한 거 같기도 하고 ㅠㅠ 헷갈리네요 항상 ㅠ

new App() 을 안하면 function App() { ... } 은 그냥 함수이기 때문에, this 가 존재하지 않을 것 같아요!!
Obj.method() 에서 this 는 Obj 가 되는데, method 를 호출한 주체를 확인해보셔야 할 것 같아요.!

kim Stella and others added 9 commits December 23, 2019 14:08

create folder directory with mission002

9d8edc6

add todoinput api.

702d964

tododata fetch api 연결 작업중.

aef0908

함수표현식, 선언식 수정 작업중.

bdaeac8

이슈 반영

a7631bc

1. call todo api. 2. add todo api.

이슈 반영

e5242fe

3. remove todo api connect.

이슈 반영

f314346

4. add toggle api connect 5. add all todo count.

이슈 반영

c24899b

1. 전체보기, 헤야할 일, 완료한 일 클릭시 데이터, 총 데이터 수 보여주기.

이슈 반영

278526a

localStorage에 데이터 넣기.

StellaKim1230 self-assigned this Dec 25, 2019

StellaKim1230 requested review from YongHoonJJo, ganeodolu and s280493 December 25, 2019 08:10

fetch 해오는 부분 try~catch 적용.

d20f675

StellaKim1230 changed the title ~~[mission002] todolist 비동기/온오프라인 고려하여 업데이트하기~~ [mission002] TODOS 시스템에 비동기/온오프라인을 고려하여 업데이트하기 Dec 26, 2019

s280493 requested changes Dec 29, 2019

View reviewed changes

코드리뷰 반영.

4db3d6e

ganeodolu reviewed Jan 6, 2020

View reviewed changes

YongHoonJJo requested changes Jan 7, 2020

View reviewed changes

mission002 리뷰 반영.

5999841

		@@ -0,0 +1,22 @@
		const username = 'kimjieun'

		export const apiHandler = async ({ url, method, body, customUrl }) => {

		@@ -0,0 +1 @@
		export const hostUrl = 'http://todo-api.roto.codes'

Conversation

StellaKim1230 commented Dec 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

궁금한점.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

s280493 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ganeodolu Jan 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YongHoonJJo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YongHoonJJo Jan 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

StellaKim1230 commented Jan 7, 2020

Uh oh!

StellaKim1230 commented Jan 7, 2020

Uh oh!

YongHoonJJo commented Jan 18, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

StellaKim1230 commented Dec 25, 2019 •

edited

Loading

ganeodolu Jan 6, 2020 •

edited

Loading

YongHoonJJo Jan 7, 2020 •

edited

Loading