[Vue.js] 트위터 화면 클론 코딩하기 (1/4)

급하게 회사 프로젝트에서 프론트를 알아야되는 일이 있어서 Front-end를 공부하고 있다.

평소에 html, css, javascript 과 같은 프런트엔드문법을 글로만 배워서 각 컴포넌트들이 유기적으로 어떻게 작동하는지 몰랐는데, 

프로젝트하며 또 클론코딩하며 빠르게 배울 수 있어서 매우 만족 중!!

---

해당 포스트는 다음 강의를 보고 정리한 내용입니다.

https://www.inflearn.com/course/%ED%8A%B8%EC%9C%84%ED%84%B0-%ED%81%B4%EB%A1%A0%EB%A7%8C%EB%93%A4%EA%B8%B0

vue.js 실전 프로젝트(트위터 클론) - 인프런 | 강의

 

• 트위터 화면 클론 코딩하기 (1/4) - 클론코딩 프런트엔드 웹 페이지구성
  • https://semizero.tistory.com/24
• 트위터 화면 클론 코딩하기 (2/4) - tailwindcss 특징 및 사용법
• 트위터 화면 클론 코딩하기 (3/4) - vue.js 관련 문법
• 트위터 화면 클론 코딩하기 (4/4) - firebase로 백엔드 연결하기

---

[코드 설명]

소스코드: https://github.com/semi-zero/frontend-twitter_clone

GitHub - semi-zero/frontend-twitter_clone

 

해당 링크에 들어가면 강의를 들으며 따라한 vue.js + tailwindcss 문법을 볼 수 있다.

만약 강의를 통해 vue.js + firebase 연결만 따라하고 싶다면 해당 게시글에 'web' branch를 클론하면 된다.

---

[소스코드 Tree]

• src
  • components
    • Trends.vue: '나를 위한 트렌드' , '팔로우 추천'과 같은 화면 우측 구성을 담당
    • Tweet.vue: 트윗의 컴포넌트를 구성
  • pages
    • Home.vue: '홈' 클릭 시 이동하는 페이지
    • Messages.vue: '쪽지' 클릭 시 이동하는 페이지
    • Notifications.vue: '알림' 클릭 시 이동하는 페이지
    • Profile.vue : 프로필 클릭 시 이동하는 페이지
  • App.vue : 메인 페이지 구성, 계속 고정된 좌측 구성 및 라우터를 통해 다른 페이지 연결