js-study-lv2

목적

• 프레임워크의 구조를 파악한다.
• 프레임워크에 사용된 객체지향 패러다임을 이해한다.
• MVVM에 대해 이해한다.

스터디 과정

• 1주차: React, Vue로 TodoList 만들기
• 2주차: Web Component 구성
• 3주차: 옵저버 패턴 적용
• 4주차: Store 구성

들어가기 전에

Editor 혹은 IDE

• VSCode
  • 대부분의 프론트엔드 개발자가 사용하는 무료 에디터
  • 장점
    • 강력한 플러그인 지원
    • 직관적인 UI
    • 빠름
  • 단점
    • 설치 직후 다운 받아야 하는 것들이 너무 많음
    • 즉, 커스텀이 힘듦
• Intellij
  • 대부분의 개발자가 사용하는 유료 IDE
  • 장점
    • 학생 이메일이 있을 경우 무료로 Ultimate 사용 가능
    • 필요한 모든 기능이 탑재되어 있음
  • 단점
    • 기본적으로 기능이 너무 많아서 헷갈림
    • 고사양 PC가 아닐 경우 버벅임

git

git 명령어에 대해 이해해야 합니다.

• git download
• git 간편 안내서

git 명령어 요약

git 설치가 완료되었다면

• mac의 경우 terminal을 열어서 git을 입력하여 설치 되었음을 확인
• window의 경우 폴더 혹은 바탕화면에서 마우스 우클릭으로 git bash 존재 여부 확인

########## 설치한 직후에 email, name 설정 ##########
$ git config --global user.name "junilhwang"          # 본인의 github id 입력
$ git config --global user.email "junil.h@kakao.com"  # 본인의 github email 입력
#################################################

# 프로젝트 코드 가져오기
$ git clone https://github.com/DKU-STUDY/js-study-lv1

# 프로젝트 폴더로 이동하기
$ cd js-study-lv

# 원격 저장소 존재 여부 확인
$ git remote  
> origin # origin은 `https://github.com/DKU-STUDY/js-study-lv1`의 별칭으로 등록된 원격 저장소

# 테스트 파일 추가 
$ echo "테스트 파일 추가" > test.txt

# git 파일 추가 
$ git add test.txt

# 파일에 대한 커밋 로그 작성
$ git commit -m "테스트 파일 추가"

# 커밋 로그를 원격 저장소에 업로드
$ git push origin main

# 위의 명령어는 다음 명령어와 똑같음
$ git push https://github.com/DKU-STUDY/js-study-lv1 main

• 잘 이해가 되지 않을 경우 디스코드 채널에 질문 남겨주세요!

Github

• Github Pull Request에 대해 이해해야 합니다.
• 이 동영상을 보면서 튜토리얼을 진행해주세요.

Reference

• 객체지향의 기본 이론
• MVVM System 만들기
• Vanilla Javascript로 웹 컴포넌트 만들기
• Vanilla Javascript로 상태관리 시스템 만들기