[24.06.04] Vue.js_라우트와 Axios 연동

ANGELA·2025년 1월 9일

vue.js

[KB]학습내용정리

목록 보기

56/57

01. 설계 단계

1. 화면 설계

데이터모양(투두리스트) , 화면설계(오늘할것) : 스토리보드 문서화시킴
피그마로 화면설계 많이 함 (옛날엔 피피티로 함)

1) 순서

CRUD에 필요한 화면이 뭔지 파악 → todo 에 맞춰서
출발은 보통 read부터 → 목록보기 먼저 파악한다.
각 화면에 맞는 url 매칭 파악
cud : 일종의 업데이트(성공, 실패) → cu는 종종 실패함 → 성공했다면, 즉시 다른 페이지로 이동(목록으로 이동), 실패했다면, 왜 실패했는지 알려주기

2) 라우터

공통(헤더) , 라우터 뷰 만들기
라우터 뷰 밑에 → 각각 탭 라우터 만들기

3) 데이터

누가 관리할거냐 판단
cud : app으로 한군데로 몰기
r : 어디서든 할 수 있게 해야한다
저멀리 있는 노드 연결시키는 방법
- props emit : 부모/자식, 바로 상위에 있는 노드만 가능
- 멀리 있는 노드연결 provide,inject →같은 조상 계층에 있어야한다.
우리는 provide,inject 방법 쓸것이다.

💡 여기까지가 설계 문서이다, 다음주 프로젝트때 이런 문서 만들면 된다.

2. 상태 데이터

json이랑 비슷하죵? 같이 써도 된다.

02.디렉토리 파일 구조

1. 설계구조를 보고 만들기

설계단계에서 이름 설정 끝내야한다.

1) 오류 파일 생성

라우터에서 관리할 코드는 → 404

2) 라우터

라우터 : 이동할때
유즈라우트 : 경로, 파라미터 쓸때

03. 헤더 파트

메뉴부분
카피해서 쓰면 된다

04. app 파트

상태데이터 고정 작성
수정, 삭제, 토글, 업데이트 작성
provide 시키기

05. 페이지 파트

1. addTodo, editTodo

항상 복사본을 넘겨줘야한다 : 얕은 복사로
{…}

06. 추천

1. 컴포넌트 : 출력에 구성 맞춰서

2. 업데이트, 수정 등→ 분리해서 따로 운영하는것을 추천

데이터 조작만하는 비지니스 로직이라고 부른다.

07. 오후강의

1. 에러

캐치에서 에러 잡으면 에러 찍어서 확인 가능

2. 얕은복사 , 깊은복사

1) 깊은복사 : 원댑스 → 안바뀜, 그냥 복사 개념
2) 얕은복사 : 투댑스 → 둘 다 바뀜

얕은복사의 예시 

var original = {
name: "suchit",
company: "google",
add: {
street: "pune",
pin: 1234,
},
};
var cloned = { ...original };
[cloned.name](http://cloned.name/) = "test";
cloned.add.pin = 5678;
console.log("original", original);
console.log("cloned", cloned);