Pay it forward

http://instaclone-3team.s3-website.ap-northeast-2.amazonaws.com React App instaclone-3team.s3-website.ap-northeast-2.amazonaws.com https://youtu.be/xhn914C41pE https://github.com/kiwonbyun/hanghae_instaclone_FE GitHub - kiwonbyun/hanghae_instaclone_FE Contribute to kiwonbyun/hanghae_instaclone_FE development by creating an account on GitHub. github.com

https://wetube-kw.herokuapp.com/ Home | Wetube wetube-kw.herokuapp.com 드디어 노마드코더님의 유튜브 클론코딩 강의를 모두 마치고 에러가 조금 있는 결과물을 만들어 냈다. 사실 두번째 완강이다. 첫 번째 완강 때는 20~30% 정도 이해를 했었고, json이 뭔지, 어디까지가 프론트엔드고 어디가 백엔드이고 서버는 뭐고 데이터베이스는 뭔지 전혀 이해를 못했었다. 두 번째 완강을 하고 나니 한 60% 정도 이해를 하고 있다. 60% 정도의 이해로 하나의 결과물을 마무리지었고 약간의 에러와 조금 부족한 기능을 완성했다. 앞으로도 세번,네번째 완강을 할 계획이다. 세 번째에는 90%까지 이해할 수 있기를 바라며.. 개인적으로 프론트와 백엔드를 전부 다 작업하..

https://bkw9603.github.io/paintJS/ paintJS bkw9603.github.io

하지만 우리가 삭제한 값이 어떤 값인지 로컬스토리지에서 어떻게 알까? 알수있는 방법이 없다. 브라우저가 글을 읽을 수 있는것도 아니고. 그래서 애초에 toDos 배열에 사용자의 todo 가 추가될때, 단순한 문자열이 아니라 객체 object의 형태로 id를 가지고 들어온다면 구분할 수 있다. 처음으로 돌아가서 handletodoSubmit 함수에 newToDoObj 변수를 객체로 새로 정의한다. 객체에는 text와 id 키가 있고 text부분에는 사용자가 입력한 newToDo 변수가 들어간다. 그리고 id는 Date.now()를 입력한다. 이것은 밀리세컨드 단위로 현재 시간을 알려주는 함수인데, submit이 발생되는 그 순간의 유일한 밀리세컨드 단위의 순간만을 데이터 가지므로 유일한 id가 될수있다. ..

일단 toDos라는 배열을 localstorage에 저장할때 왜 JSON.stringify()가 필요했는지 이해를 해야한다. 기본적으로 로컬스토리지는 string데이터타입만 지원한다. 그래서 숫자, 객체 ,배열을 전달해도 string으로 변환해서 저장하기 때문에 위와같이 객체를 다시 불러올때 제대로 안오고 이상하게 보인다. 하지만 JSON을 쓰면 로컬스토리지에 객체나 배열도 넣고 자바스크립트에서도 쓸 수있는 형태로 get 할수 있다. 지금은 아는게 로컬스토리지 뿐이라서 잘 모르지만 서버와 통신할때도 사용하는 것 같다. JSON.stringify를 이용해서 살아있는 객체를 단순한 문자열로 저장했다가 , JSON.parse로 단순한 문자열을 살아있는 객체로 만들 수 있다.

todo 목록을 입력하고 리스트로 출력하는 코드 toDoForm에 submit 이벤트리스너를 만든다. 기본동작(새로고침)을 막아주고 사용자가 입력한 toDoInput.value를 새로운 변수로 받아서 저장하고 빈칸으로 만든다. 빈칸이 되었어도 newToDo라는 변수로 저장했기 때문에 상관없다. 그리고 paintToDo함수를 실행해서 사용자가 입력한 리스트를 그려주는 함수를 실행한다. ul태그 안에 li를 만들고 그 안에 문구와 버튼을 넣을것이므로 문구는 span태그 안에 넣는다. span을 li에 붙여주고 span의 innerText는 사용자가 입력한 바로 그 변수 newToDo이다. 그리고 li를 toDoList(ul태그)에 붙여준다. 여기까지 하면 todo항목을 입력하고 출력할 수 있지만 지우는 버튼..