2021 Frontend Study

진행 방식

클론 코딩 모여서 각자 진행

환경

Vue3 + Typescript

실행 날짜

매주 일요일 15:00 ~ 19:00 (4시간), 온라인

날짜	내용
2021-01-10	https://kriss.io/building-medium-clone-with-vue-3
2021-01-17	https://codesource.io/build-hackernews-clone-with-vuejs-by-consuming-restful-api-with-axios/
2021-01-31	https://codepen.io/itslit/pen/MGzGab
2021-02-07	https://github.com/harps116/vuestagram

시작하기

• NodeJS - https://nodejs.org
• NPM - https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/
• Yarn - https://yarnpkg.com/
• Vue - https://v3.vuejs.org/guide/introduction.html
• Vue CLI - https://cli.vuejs.org/

1. 노드JS 설치
2. Yarn 설치
3. Vue CLI 설치

이후 진행 후보

인스타그램 https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408

해커스 뉴스 - Vue 3.0에 맞춰진 버전 https://github.com/raukaute/vue-hackernews-3.0

트위터 - 서버 필요 https://github.com/vue-bootcamp/twitter-clone

참고 자료

타입 스크립트 - https://www.typescriptlang.org/ 공식 문서 번역 - https://typescript-kr.github.io/

Vue Cli 설정

 Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.?
# In dedicated config files
  In package.json