Week_1

 

1주차 미션: Vanilla-Todo

 

세오스 1주차를 마무리하며...

 

자바스크립트만 이용해 todo를 만들어 본 적이 있어서 그리 어렵지 않을 것이라 생각했지만... 엄청난 실수였다^.^

요즘 한창 리액트 공부하다가 "자바스크립트만 써!!!" 라고 하니까 도무지 엄두가 안 나서 계속 멍..만 때리고 있었당...

바보가타....

 

 

---

 

새롭게 알게 된 부분 & 어려웠던 부분

 

우선 forEach()와 filter()함수를 굉장히 유용하게 잘 썼던 기억이 있다..

예전(?)에는 사실 이런 함수들이 크게 와닿지 않았고 이런 함수들의 기능이 필요할 때

어떡하지?!?!?!!?!;;;;;;

만 머리에 박혔는데

이젠 아~~ forEach 써야겠네~ 아~~~~filter쓰면 되겠네~~~ 라고 생각할 수 있게 됐다.... ㅋㅋ.. 

 

 

새롭게 알게 된 부분과 어려웠던 부분은 나눠서 쓰려고 했는데

막상 생각해보니까 어려웠고, 몰랐기 때문에 새롭게 알게된 게 과반수다....

 

---

 

1. window.onload

이게 머냐하믄...

[javascript] 자바스크립트 window.onload() 란 무엇인가요? (tistory.com)

[javascript] 자바스크립트 window.onload() 란 무엇인가요?

이런것임...

 

아직은 내가 주저리 주저리 가독성 없게 글 쓰는 것보다 남들이 잘~ 써놓은 멋깔난 글 읽는게 이해하기 쉽다 ㅜ

 

 

html에서 입력 창에 todo를 입력하면 addTodo라는 함수가 실행되도록 해놓고

이런 todo들을 화면에 그려주는 createTodoItem이라는 함수를 만들었는데

 

이 window.onload라는 놈을 쓰게 된 이유는 로컬 스토리지에 저장하면서 머리가 터져버렸기 때문이돵....

 

 

 

localStorage.getItem()과 localStorage.setItem() 함수 아.주 잘 사용했고

JSON.stringfy()로 문자열로 저장도 까먹지 않고 잘 했고!!!

JSON.parse()로 문자열을 객체로 전환까지 완벽하게 했는데!!!!!

 

 

화면에서 확인해보면 로컬에 저장은 되지만..? 새로고침하면 화면에 보이지가 않음.... 거지같음......

 

알고 보니.. 새로 고침할 때마다 createTodoITem 함수가 실행이 되어야 로컬에 있는 것들을 그려주는데

계~~~속 addTodo함수부터 실행되던 것.....ㅜㅜ

 

 

그래서 코드 마지막에 window.onload = createTodo(); 를 써주면 해결~~ 됐다~~ 뭐 이랬던 것>_^

 

 

 

 

2. slice(), from()

[JavaScript]배열 복사 방법 (tistory.com)

[JavaScript]배열 복사 방법

 

이 slice랑 from 두 놈은 todo를 삭제하는 함수를 작성하다가 알게 됐다.

 

x 버튼을 누르면 해당하는 투두가 삭제되도록 하기 위해 해당 투두를 인식하려고 했더니만

자꾸 안 먹히는거임!!!!!! 짜증나

 

콘솔로 찍어보니까 투두의 텍스트만 먹히는게 아니라 x버튼도 들어가져 있던 것....

 

그래서 slice라는 함수를 이용해 x버튼을 짤라뻐리고~~~ 투두를 삭제해줬당~!!!

 

그렇게 삭제하고 난 리스트를 새롭게 업데이트..? 시켜줘야 했는데

그냥 단순하게 삭제된 걸 새로운 배열로 복사하면 되잖아!!! 수법으로 Array.from함수를 사용했다고 한다...

 

 

이 외에도 헷갈리고... 우왕좌왕 난리도 아니였음..

---

 

+) vercel로 배포하는 건 처음이었는데.. 신기하고 편하도라

 

배포하고 pr까지 날렸는데 배포된 페이지에서 확인하니까 갑자기 에러뜨고 투두 입력이 안 되기 시작함

 

과제 제출 날이었는데 멘탈 나감

 

구원의 손길로 해결하긴 했는데 문제는 위의 onload()로 처음 실행시켰던 함수에서 처음에 로컬을 불러오는 코드를 작성했었는데 애초에 처음 페이지를 열면 로컬이 업짜나!!!

 

그래서 오류가 떴던 것~이었움,,,, 그래서 if문으로 로컬이 있는 지부터 확인해줬더니 정말 다 행 히 잘 돌아갔던 기억이 있다.... 아찔해 증말

 

 

---

 

코드 리뷰로 배운 점

 

1. append(), appendChild() 차이

https://blogpack.tistory.com/682

append() 와 appendChild()의 차이

여기 잘 설명이 되어있다...

 

appendChild로 중복해서 부모 노드에 삽입했었는데 append를 사용해서 ,로 연결하면 코드를 줄일 수 있다!!!

 

 

2. trim()

입력 창에 투두를 입력 받을 때, 공백이 입력되는 경우 예외 처리를 해주지 못 했었따ㅠㅠㅠ 이런 사소한 실수들도 캐치되는 게 너무 좋았다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

String.prototype.trim() - JavaScript | MDN

이런 부분들도 놓치지 않고 해야겠구낭..... 흑흑

 

 

 

이 외의 지적 부분들은 음.. 코드 중복되는 부분 조금 더 신경쓰고 함수 명도.. 조금 더 가시적으로 쓰면 좋을 것 같다는 것들... 정도??

 

 

흐아앙 머.. 그랬다.. 코드 리뷰하면서 다른 사람들이 어떻게 코드를 짰는 지도 볼 수 있고 내가 부족한 부분들, 새롭게 알게 되는 것들도 많아서... 으응.. 되게되게 많이 배움

 

 

앞으로 갈 길이 멀구나 아좌좌.....

 

 

+) 아 맞다 form 태그에서 submit 할 때

form 태그에 class명 지정하고 submit 이벤트 발생시 enter 키 입력되도록 할 수 있고

event.preventDefault 말고 button 태그에 type을 button으로 지정해도 리로드 방지할 수 있음!!