공부하는 김쨔뿌

이전에 올린 1, 2, 3을 보면 Vue3에 추가된 Composition API를 제대로 안쓰고 기존 방식으로 진행했었는데, 그제어제오늘 Compositon API를 쓸 때랑 안쓸때랑 비교해보니 쓰는게 확실히 편함. 그래서 미완코드를 Composition API로 바꿀거쉽니다. Composition API 관련된건 새글 파서 여기에 곧 링크를 걸을 예정. 대충 어떻게 바뀌는지만 보이자면 App.vue 기존 코드 App.vue Composition API script setup 사용한 코드 그릏다. script setup에서는 선언한 녀석들을 그냥 template에 때려박을 수 있다!!! 근데 반응형인 값은 ref나 reactive 를 써야하는데 reactive 는 좀 킹받는 부분이 있어서 ref 쓰는게 ..

어제 여기까지 했었다. 추가하기 기능을 먼저 만들건데, 그럴려면 제목과 내용 input 이 각각 하나, 저장하기 버튼 , 닫기 버튼이 들어간 컴포넌트를 만들고 추가하기 버튼을 크게 하나 만들어 눌러야 추가할 내용 넣는 컴포넌트가 뜨도록 할거시다. 근데 좀 신경쓰이니까 버튼 컴포넌트랑 input 컴포넌트 좀 만들어둘거임. //ButtonElement.vue //TodoCard.vue {{ item.title }} {{ item.comment }} edit remove 대충 버튼 컴포넌트 만들어두고 카드 컴포넌트의 버튼을 갈아끼워주자. 스타일은 나중에 할거임. 기능먼저하는게 맴이 편혀. 자식컴포넌트의 에는 부모컴포넌트에서 불러온 자식컴포넌트의 태그 사이에 들어가는 내용물이 들어간다. 여러개의 을 쓸 수도 있..

옙 원래 어제 밤에 적을 예정이었는데 밥먹고 9시 반에 기절하고 5시쯤에 깼다. 뭐지?? 이번 글에서는 컴포넌트 생성하고 store 연결까지만. 아침에 쓰고있는데 이따 회사가야함 ㅇㅇ cli를 맞치고 나면 초기 파일이 이렇게 들어가있다. 헬로월드 안쓰니까 지워주고.. App.vue 보면 아래와 같이 되어있는데 이거랑 script에 import 한 헬로월드 컴포넌트를 지워주고.... components 안의 것도 지워준다. 로고는 이쁘니까 쓸거임. 깰끔~ 그럼 이제 todo-list 에 무슨 컴포넌트가 들어갈 지 생각해보자. 카드형식으로 만들거니까 카드 컴포넌트 하나 만들어주고, 카드 컴포넌트들이 들어갈 부모컴포넌트 하나 만들어줘야겠다. 컴포넌트를 만들땐 두개이상의 단어를 사용하고 각 단어의 첫글자를 대문..

* 리액트하다가 Vue 공부 시작한 놈이 쓰는 글입니다! 누군가 보시고 잘못된 부분이 있다면 제발 이 불쌍한 중생을 구한다 생각하시고 알려주시길 바랍니다.. 원래 기존에 만들던 Todo list가 있었지만 cli를 잘못 해서 다시 시작. 내 맥의 상태 - node v16.13.2 - yarn 이 설치되어있다. - brew 도 있음 (의미가 있나?) - vscode 씀 1) Vue CLI 설치 $ yarn global add @vue/cli 이후 vue --version 을 치고 엔터를 눌러서 버전을 확인할 수 있다. 2) Vue 프로젝트 생성 $ vue create 프로젝트명 난 프로젝트 명을 'todo-list'라고 했다.. 그러면 터미널에 이런게 뜬다. ? Please pick a preset: (U..