본문 바로가기

분류 전체보기183

[PJ] Vue 공부중8 slot 언제하지ㅣ.... Q. package-lock.json, package.json 은 gitignore를 해야 할까요? A. NOPE! https://chanie.tistory.com/m/10 node modules와 gitignore, package.json의 관계 node module을 사용하는 자바스크립트, 노드js, 리액트 관련 프로젝트를 할때 Create React App으로 프로젝트를 생성을 하면 기본적으로 gitignore파일에 node modules 경로가 잡히게 된다. 변경사항을 추적하 chanie.tistory.com https://blog.naver.com/gingsero/222140320340 package-lock.json 은 git ignore 처리해야할까? https:/.. 2022. 10. 5.
[PJ] Vue 공부중7 Teleport 원하는 코드를 원하는 곳으로 이동 가능 index.html modal div 추가 pages/todos/index.vue style 투명도 추가 ... components/TodoList.vue index.html 에 있는 modal 로 이동시켜버림 모달이 위에 잘 뜸. API 연동 문제 - CORS - 해결 최 상단에 vue.config.js 파일 생성 module.exports = { publicPath: "./", devServer: { proxy : 'API URL' } }; Home.vue const getLists =async () =>{ try{ const res = await axios.get("/board"); console.log(res.data); } catch(err.. 2022. 10. 4.
[PJ] Vue 공부중6 Vue Lifecycle hooks 공식문서 onUnmounted를 활용한 메모리 누수 관리 const timeout = ref(null); // 페이지를 벗어날 때 timeout value를 clear 해준다. // 그럼 페이지 이동시 triggerToast의 setTimeout이 실행되지 않음. onUnmounted(() => { clearTimeout(timeout.value); }); const triggerToast = (message, type = "success") => { toastAlertType.value = type; toastMessage.value = message; showToast.value = true; // 페이지를 벗어났을 때 아래 부분을 실행 시킬 필요 없다. timeo.. 2022. 10. 3.
[PJ] Vue 공부중5 Todo Update submit 버튼으로 form submit 활용 template ... Save script const onSave = async () => { const res = await axios.put(`http://localhost:3000/todos/${todoId}`, { subject: todo.value.subject, completed: todo.value.completed, }); console.log(res); return { onSave }; }; 값이 잘 바뀌었다. JS 객체 복사/비교 js 자료형 : 원시 타입 - 값 자체 저장 , 참조 타입 - 메모리의 주소값 저장 lodash library 로 참조타입(객체) 값 비교! 수정시 데이터가 변동 되지 않았다면 save 버.. 2022. 10. 2.
[PJ] Vue 공부중4 Vue Router 페이지간의 이동을 위한 패키지 설치 - vue3 는 vue-router4 버전 설치해야함 npm install vue-router@4 router-link 페이지를 리로딩 하지 않고 화면을 불러온다. 2022. 9. 29.
[PJ] Vue 공부중3 json-server 를 이용한 DB 공식문서 설치 npm i json-server db.json 파일 생성 { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 실행 json-server --watch db.json 아래와 같이 데이터가 쌓여 있는 모습을 실시간으로 볼 수 있다. async vs sync (비동기 vs 동기) 동기는 일을 처리하는데 시간이 얼마나 걸리든, 일을 무조건 순차적으로 진행하는 것. 비동기는 일의 요청을 바로바로 받아서 .. 2022. 9. 28.