본문 바로가기

Router3

[Vue vs. React 비교] (1) template 생김새, router 지난번 작은 웹페이지를 vue로 만드는 프로젝트를 포스팅(https://imagineu.tistory.com/60)했었는데, 그때 만들었던 Vue코드를 그대로 React코드로 바꿔보았습니다. 물론 같은 기능을 구현하더라도 여러가지 방법이 있기때문에, 언제나 저의 방법이 정답은 아니라는 점 미리 알아두셨으면 좋겠습니다. 둘 다 자바스크립트 기반 프레임워크라서 그렇게 큰 차이가 없었지만, Vue가 더 익숙한 제 입장에서는 그래도 Vue보다 React가 좀 더 오랜 시간이 걸렸던 것 같습니다 ㅠㅜ 그리고 빠른진행을 위해 UI프레임워크로 Vue는 vuetify를, React는 materialUI를 사용했고, 사용한 컴포넌트의 이름이나 디테일한 디자인같은 부분은 조금씩 다르겠지만 좀 더 쉽게 비교하기 위해 최대한.. 2022. 3. 8.
[Vue] options api로 웹사이트 만들기 - 9. 게시글 상세보기(2) ( + 파라미터 넘겨서 동적 라우팅) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번글에서 라우터를 연결해봤는데요! 이번글에서는 게시물 .. 2022. 3. 3.
[Vue] options api로 웹사이트 만들기 - 8. 게시글 상세보기(1) (+ router 연결) Router를 이용해서 게시글을 눌렀을 때 상세보기 창으로 라우팅해보겠습니다. 라우팅은 URL에 따라 보여줄 컴포넌트를 연결해놓고 , 해당 URL로 이동했을 때 연결된 컴포넌트를 보여주는 방법입니다. Vue Router의 기본적인 태그는 다음과 같습니다 : : 이동할 URL 변경 태그 : URL에 따라 연결된 component를 보여주는 부분 그럼 이제부터 vue-router를 사용해서 게시글 상세보기 창으로 이동하는 부분을 만들어보겠습니다! 1. vue-router 설치하기 우선 vue-router를 설치해줘야 하는데요, 그냥 npm install vue-router를 해보니, 저는 이런 에러 로그가 뜹니다! ERESOLVE unable to resolve dependency tree ~ 어쩌구 ~ F.. 2022. 3. 3.