joshua1988/vue-camp

Everything to know about Vue.js

vue-camp's Issues

[doc] JavaScript call, apply, bind 문서 작성

이 부분이 없어서 정리 해보려고 합니다

Todo

• 스터디
• ...

ps. 생각났을 때 적어 놓질 않았더니 잊고 있었네요 🤔

[doc] Vuepress 문서 내용 보충

VuePress 문서에 Using Vue in Markdown 내용 정리하여 추가하도록 하겠습니다 !

• VuePress - Using Vue in Markdown

[tool] git log contributor 추가

문서의 contributor를 나타낼 수 있는 git log 플러그인을 추가하려고 합니다.

https://github.com/vuepress/vuepress-plugin-git-log

[doc] 컴포넌트 설계 문서화

Vue 컴포넌트 설계에 대한 부분을 레이아웃 패턴 관련한 예시로 풀어서 문서화 하겠습니다.

Todo

• 컴포넌트 설계 개요
• Vue.js의 slot 문법
• 레이아웃 패턴 예시

Reference

• vue-enterprise-boilerplate : Layouts

[doc] JavaScript 클로져 문서 보충

• 유일한 특징이라는 설명 확인 후 제거 또는 문장 수정 (java 8 에서 부터 closure 도입)
• 클로져 예시 추가 (함수형 프로그래밍 커링 외에 프라이빗 메서드, 모듈패턴 등)
• 클로져 단점 (혹은 주의 할 점) 추가 (메모리 릭)

위 내용으로 업데이트 되었으면 좋겠는데 기타 의견 부탁드립니다.
또는 직접 진행하시고 싶은분 계시면 코멘트 부탁드립니다!

[doc] JavaScript 스코프 문서 보충

좌측 메뉴에서 문단의 중간 제목이 잘 드러났으면 좋겠다 싶어서 중간 제목을 설정 하고
클로저 들어가기전에 언급되면 좋을 내용 간단하게 추가 하려고 합니다.

Todo

• 각 문단의 중간 제목 추가 및 수정 (글로벌 스코프 & 로컬(지역) 스코프)
• 스코프 체인 추가
• 렉시컬 스코프 추가
• 좌측 메뉴에 보이는 문서 위치를 클로저 바로 전에 올수 있도록 수정
• 오타 및 문서 작성 가이드에 맞게 수정

[doc] es6/promise문서 작성

es6 promise에 대해 문서화 작업 진행하겠습니다!

• 비동기처리 서치

• 콜백과 비교

• promise 설명

• Poiemaweb - 프로미스
• Promise MDN

[tool] 코드 블럭 복사기능 추가

사이트의 코드블럭을 복사할 수 있게 해주는 플러그인 적용해보겠습니다!
vuepress-plugin-code-copy

2회차 수업에서 언급한 자료

• MDN 문서
• Google Web Fundamentals

[doc] Markdown 기본 문법 가이드 작성

https://www.markdownguide.org/basic-syntax/

위 페이지 정리 + 한글 번역하는 것을 위주로
마크다운 기본 문법 가이드 작성하겠습니다.

VuePress 작업 방법

TBD

[doc] javascript map, set 내용 추가

map, set 에 대한 기본 정의가 없는거 같아서 javascript에 작성해보려고 합니다.

참고링크

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
• https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

TODO

• : map, set 정의
• : map,set 추가
• : map,set 삭제
• : map,set 순회

[doc] JS prototype

https://joshua1988.github.io/vue-camp/js/prototype.html 에 비어 있는 JS prototype 개념에 대한 조사를 진행한 후 정리하여 올리는 이슈.

참고할 문서 :

• [Learning JavaScript] 도서 9.2.3 프로토타입 파트

• MDN 'Object prototypes' 문서

• MDN '상속과 프로토타입' 문서

• Poiemaweb 'Prototype' 문서

• medium '[Javascript] 프로토타입 이해하기' 블로그 글

• 넥스트리 'JavaScript: 프로토타입(prototype) 이해'

• velog '자바스크립트 Prototype 완벽 정리' 블로그 글

[doc] Vue.js에서 스토리북 사용하기

• 스토리북 설명
• 스토리북 설치하기
• 애드온

[doc] vite

• vite 개념
• 튜토리얼

[doc] VuePress 내용 추가

VuePress 카테고리의 문서를 추가로 작성해보겠습니다.

참고 자료
https://limdongjin.github.io/vuejs/vuepress/

[doc] es6 Arrow Function this 문서 작성

• this 바인딩 변화 부분을 업데이트 합니다.

[bug] config.js 파일 충돌 수정

https://github.com/joshua1988/vue-camp/blob/master/docs/.vuepress/config.js#L218-L219

config.js 의 충돌내용이 수정되지 않은 상태로 pr 반영 된 것 같습니다.

[doc] textbook.md 상단 문단에서 Object 페이지로 연결

입문의 "자바스크립트 기본" 링크는 첫번째 위치한 Variable 페이지로 잘 연결이 되고 있는데,
상단의 문단에서 "기본적인 자바스크립트 개념" 링크는 어색하게 중간에 있는 Object 페이지로 연결이 되고 있는 이슈가 있습니다!

[bug] Vue.js in Legacy Projects 실습 부분 url 404 오류

Form, Wrapping External Library I, Wrapping External Library II 부분에서 예시, 정답 코드 url이 404가 뜨네요.

[tool

[doc] Vue 에서 d3 사용하기

Vue 에서 d3 를 사용하는 방식에 대해서 작성해보면 좋을 것 같아서 진행 해보려고 합니다.

참고 링크

• stackoverflow - how-can-i-cohabitate-d3-and-react-js-or-vue-js
• medium - Composing D3 Visualizations With Vue.js By Tyrone Tudehope

To do

• d3 간단 설명
• Vue 에서 d3 를 사용할 때 주의 할 점
• 코드 예시

[docs] HOW_TO_CONTRIBUTE.md 문서에 있는 오타 수정

HOW_TO_CONTRIBUTE.md 문서의 'Create Pull Request' 부분에 보면

remote 라고 나와야 하는 부분이
emote라고 나와 있다.

해당 오타를 수정하는 이슈

[문서] Open Source에서 Pull Request 하기

Open Source Project의 소스를 수정하고 Pull Request 를 어떻게 하는지에 대해 문서화 합니다.

• Repository Fork
• Pull Request to Origin Repository
  의 내용을 작성하고자 합니다.

참고자료

• How to create a pull request on github
• What open source project should I contribute to

[doc] 네비게이션 가드 설명 보충

네비게이션 가드의 종류 중 하나인 컴포넌트 가드에 대해서 설명을 추가하고자 합니다.

• 간단한 소개
• 활용 예시
• 주의점

개발 환경 구성

• Chrome
• Node.js LTS 버전
• Visual Studio Code(VSCode)
• Vue.js Devtools

[tool] 테스트 서버 환경 구성

할 일

• 테스트 서버 설정

[doc] Vue Testing Library 기본 테스트 환경설정 문서 작성

목표

vue.js 테스팅 도구 중 하나인 Vue Testing Library의 기본 테스트 환경설정에 대한 문서를 작성

To do

• 라이브러리 설명
• npm/yarn 명령어 사용법
• package에 설치되는 모듈에 대한 설명
• 적용한 설정에 대한 설명
• 샘플 테스트 코드

비주얼 스튜디오 플러그인 목록

비주얼 스튜디오 코드 플러그인 목록

• Auto Close Tag
• Color Picker
• GitLens
• Material Icon Theme
• Night Owl
• Material Syntax - Dark
• Flat Ui(밝은색 코드 컬러)
• Project Manager
• Vetur
• ESLint
• TSLint
• Open in browser
• Live Server

[tool] 프로젝트 레벨 린트, Prettier 설정

내용

• ESLint, Prettier 프로젝트 설정
• 설정 후 가이드 문서 작성
  • 어떤 설정을 했는지
  • 설정한 내용을 개개인별로 어떻게 설정할 수 있는지

추가로 고민해보면 좋을 내용

• 마크다운 린트 적용
• git hook을 이용한 커밋, 푸시 레벨에서 린트 자동 적용

[doc] 뷰 CLI 문서 최신화

AS-IS

• 3.x 버전을 최신 버전으로 소개하고 있음

TO-BE

• 최신 뷰 CLI 버전에 맞게 보완

문서: 뷰 CLI
21.08.17 기준 Vue CLI 버전 4.5.13

[doc] ES6 Destructuring 뷰에 적용하는 구조 분해 문법 2 문서 작성

• 활용 예시 작성

[doc] vuex state vs data 내용 추가

state management 의 state vs data 페이지 내용을 추가하려고 합니다.

참고자료
https://vueschool.io/articles/vuejs-tutorials/deep-dive-into-vue-state-management/
https://kr.vuejs.org/v2/guide/state-management.html

[doc] 자바스크립트 Optional chaining 문서 작성

ES6 카테고리 명을 ES6+ 로 수정하고 Optional chaining 연산자 가이드 문서를 작성하려고 합니다.

[doc] 테스트 코드 튜토리얼 작성

테스트 코드 튜토리얼을 작성해보려고 합니다.

[doc] npm vs yarn 문서 작성

npm과 yarn를 비교하는 문서 작성하기

Originally posted by @joshua1988 in #58 (comment)

[tool] 사이트 툴링 아이디어 리스트

사이트 툴링 아이디어 리스트

Github Actions

정기적으로 vue 관련 article 수집(크롤링) 및 게시

• 일반 개발 article
• 공식 문서
• 등등

🙄 Actions를 이용해서 재미있는 아이디어가 생각이 날듯~ 말듯~ 하네요~

테스트 코드 자동화

개인적으론 자동화의 꽃이라고 생각하는데 테스트 코드가 없군요... 😢

• 🤔 어떤 테스트 코드를 작성해볼 수 있을까요?

404 페이지 꾸미기

길을 잃은 학습자에게 나아갈 길을 안내해주세요!

• 현재 상태를 알려주는 친절한 설명과 기본 페이지로 안내해주기
  • 메인 페이지 또는 이전 페이지(브라우저 history 기준) 등등
• github 404 예시

다크 테마

흰바탕에 검은 글씨... 눈이 너무 침침하네요. 안구 보호해주실분~

플러그인 왕창 설치하기

VuePress Community Plugins를 둘러보면서 우리 프로젝트에 쓸만한 게 있으면 설치해봐도 좋을 것 같아요!

해볼만한 플러그인

• git-log 페이지에 문서 기여자 새기기 🤔 문서 가독성을 떨어트리지 않는 선에서 괜찮지 않을까요?
• medium-zoom, zooming 이미지 확대 효과 😏 정적 웹 페이지이긴 한데 너무 정적인거 아닐까요?
• nprogress 다른 문서 전환 시 로딩 진행률 (수정됨)
• reading-progress 문서 읽기 진행률 (추가됨)
• 코드블록 복사하기

이 외 다양한 자료가 모여있는 awesome-vuepress에서 확인해보세요

[tool] 404 페이지 꾸미기

404 페이지가 왜 떴는지 학습자들도 쉽게 이해할 수 있도록 404 페이지를 수정할 예정입니다.

VuePress에 나와있는 config 부분을 참고하겠습니다.

Vue.js Reactivity와 관련된 내용

• Reactivity in Depth
• Object.defineProperty() - MDN

[tool] PR 머지시 메인 페이지 컨트리뷰터 목록에 추가되게 작업하기

PR이 머지되고 나면
자동으로 github 페이지 Contributors 목록에
기여자 목록과 기여 항목이 추가되는 작업을 진행한다

3회차 수업에서 언급한 자료

• 자바스크립트 비동기 처리와 콜백 함수
• 자바스크립트 Promise 쉽게 이해하기
• HTTP 프로토콜 소개 글
• 자바스크립트 동작 원리
• Axios Instance
• Axios Interceptor
• 리눅스 명령어

[style] back-to-top plugin styling

사이트 스타일링

• back to top plugin 에서 제공하는 버튼(화살표)에 스타일 주기
• 해당 플러그인이 모바일에선 display: none 속성이 주어지는데, 모바일에서도 스크롤을 위로 올리는 기능이 필요할 것 같아서 보이도록 수정

[doc] vue testing

Todo List:

@yahma25

• jest 환경설정 구성
• vue-router를 사용했을 시 테스트 코드 작성 및 설명
• vue-composition-api를 활용한 todo-app 테스트 코드 작성 및 설명

@dngwoodo

• vue-test-utils를 활용한 todo-app 테스트 코드 작성 및 설명
  • 프로젝트 셋업
  • 할 일 추가하기
  • 테스트 코드 리팩토링
  • 할 일 삭제하기
  • 할 일 체크하기
• vue-testing-library를 활용한 todo-app 테스트 코드 작성 및 설명
• vuex를 활용한 todo-app 테스트 코드 작성 및 설명

[doc] @nuxtjs/axios 문서화

Nuxt 항목에 Nuxt용 axios에 대한 설명을 추가하고자 합니다.

• 기존의 axios와 어떤 차이가 있는지
• 실제 활용 예

[doc] javascript for of 반복문 내용 추가

javascript Loop 중 for of에 대한 설명을 추가해보고자 합니다.

• for of 예시코드
• 간단한 개념 설명와 for in 구문과의 차이점
• 참고 자료 : https://jsdev.kr/t/for-in-vs-for-of/2938 / https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

[doc] @nuxt/content 문서화

Nuxt 항목에 content에 대한 설명을 추가하고자 합니다.

• content의 간단한 정의 (Git-based Headless CMS에 대한 설명도 추가)
• 실제 활용 예
• Docs 테마 설명

[doc] ec6/class 문서 작성

ec6의 class에 대해서 문서화 작업하겠습니다.

• Class 설명

• EC6의 class 특징

• class 예시

• 참조
  poiemaweb-es6 class
  MDN-Classes
  모던 JavaScript 튜토리얼-classes

[doc] axios 설명 보충

Axios에 대한 사용법을 더 보충하려고 합니다.

• Axios HTTP 메소드 종류 (GET, POST, PUT, DELETE 등)
• then과 catch에 대한 설명

[tool] vue press 환경 개선

• vue press version up
  ...

[tool] page scroll progress bar 추가

문서를 얼마나 읽었는지 진행률 확인에 용이한 scroll progress bar를 추가할 예정입니다.

plugin: vuepress-plugin-reading-progress