vue 투두리스트(feat.인프런)

#투두리스트 만들기

1.npm install -g @vue/cli (해당프로젝트는 vue2)

2.vue create 프로젝트명

$ cd vue-todo $ npm run serve

4.컴포넌트 만들기 - 파스칼케이스법으로 작성 - 첫단어는 대문자로 시작

5.컴포넌트 등록하기 - App.vue

6.public - index.html 에 뷰포트, 파피콘 등 메타태그와 필요한 font, icon 등록하기 - cdn 이용

1 : https://www.favicon-generator.org/ - 파비콘만들기

2 : https://fonts.google.com/ - 구글 웹폰트(요즘은 눈누도 많이씀!)

3 : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag - 뷰포트(반응형을 위해서 사용)

7.작업이 완료 되어도 리액티비티가 일어나지 않아 리스트가 바로바로 갱신되지 않는 문제가 생김

8.App.vue을 중심을 데이터 문제를 해결(이벤트, props 이용)

😊추가작업_by.써니

1. 날짜 추가, getTime()으로 로컬스트리지를 정렬했음 1970년 1월 1일 자정을 기준으로 현재시간을 숫자로 나열한것
2. 작업을 완료했을경우 아래로 내리고 최신글이 위로오게 sort 작업 -이부분은 완료 유무로 filter로 작업한 후 sort하여 합침
3. todo 갯수와 완료된 갯수 = data로 작업후 props로 내렸음 sort 작업에서 모두 완료 처리가 될거같아서 vue 생명주기인 beforeUpdate 시에 호출함

#로컬스트로지와 세션 스트로지

Web Storage API는 key/value 데이터를 저장

로컬 스토리지는 브라우저를 종료해도 데이터가 계속 남아 있지만, (비회원 장바구니, 자로그인등)

 세션 스토리지는 세션이 종료되면 데이터도 사라진다.(회원가입입력폼, 일회성 로그인등)

각각의 오리진에 대해 다른 스토리지 객체가 localStorage와 sessionStorage에 사용된다.

(*오리진: 도메인, 서브도메인, 스킴, 포트 번호를 포함한 것)

- 로컬스트로지는 setItem,getItem,removeItem,clear 을 제공한다.

😉개발자 도구의 Application 탭에서 Key-Value를 확인할 수 있다.

	로컬 스토리지	세션 스토리지
데이터 영구	O       (사용자가 지우지 않는 한)	X (윈도우, 탭 닫을시 내용 제거)
사용방법	자동 로그인	일회성 로그인
주의사항(공통사항)	비밀번호와 같은 중요 정보는 절대 저장 X

 

++++윈도우 마다 같게 떠야한다면 로컬스트로지, 계정마다 다르게 떠야한다면 세션스트로지🙄

 

+++쿠키는

쿠키는 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하게 하기위해 서버에서 데이터를 묶어서 클라이언트의 컴퓨터 혹은 브라우져의 메모리에 저장되는 key value로 이루어진 작은 텍스트 파일 - (쇼핑몰사이트의 장바구니 : 다시로그인을 해도 남아있음!)

도움받은곳

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

https://nykim.work/75

 

 

# 쿠키

 

1.  저장하기
// setCookie(변수이름, 변수값, 기간일);
setCookie("변수이름", "변수값", 1);

 2. 가져오기

// getCookie(변수이름)

let 담을변수 = getCookie(" 변수이름 ");
console.log( 담을변수 );

 

3. 삭제하기
// deleteCookie(변수이름)
deleteCookie(' 변수이름 ');

 

 

#뷰라이플사이클

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

도움받은곳

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

#JSON.stringify

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식

위에서는 로컬스트로지에 value를 객체로 넣었기 때문에 브라우저에서 console로 찍을경우 object object가 찍힌다

이부분을 문자열로 변환시켜 주기 위해서 JSON.stringify(JavaScript 값이나 객체를 JSON 문자열로 변환)를 사용한다

 

반응형

#JSON.parse

JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성 - JSON.stringify 반대개념

로컬스트로지에서 가져온 값은 json 이므로 자바스크립의 배열이나 객체 넣을때 JSON.parse()를 이용하여 변경해서 사용 한다.

도움받은곳

https://steemit.com/kr-dev/@cheonmr/json-stringify

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

#sort

배열의 요소를 정렬하는 것

sort문 안에 a,b를 받아서 비교하여 return 하여 정렬할 수 있다.

로컬스트로지는 for문을 활용하여 불러올때 순서가 보장되지 않는다. 

따라서 나의 경우에 Key-Value생성시 벨류에 get.time을 이용하여 이부분을 벨류에 넣어준후 불러와서 솔트 기준으로 만들었다.

falseItem.sort(function (a, b) {
    return b.value.time - a.value.time; //내림차순
});

////this.todoItems.sort((a,b) => a.completed === b.completed ? 0 : a.completed? 1 : -1); //true, bool은 됨

목표는 boolen값으로 한 후 그것을 내림차순으로 할려고했음

생각보다 머리가 아프고 복잡해서 검색해보니 차라리 map,filter 로 거른 후 sort를 쓰는게 좀더 덜 복잡한거 같길래 

filter로 거르고 sort하여 두 객체를 합하여 리스트로 뿌려주었다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

#느낀점

그렇게 만든 나의 투두 리스트! 

배포까지 하였다  https://vue-todo-zeta.vercel.app/

소스는 여기에!  https://github.com/miseon920/vue_intermediate/tree/main/vue-todo 

리액트를 배웠으나 회사 취업후 뷰를 하여서 뷰2, 뷰3 까지 하지만 아직 부족한거 같아 스스로 공부하며 작업하고 있다.

프레임워크는 달라도 방식은 다 비슷하므로 배울수록 재밌는 거 같다.

뭔가 뷰를 배우면서 리액트를 이해하게 되는 신기한 현상도 생긴다.😊😚👋