What?

• MongoDB
  • 가입 후 무료 호스팅 받기
  • Database 자료 저장하기
• EJS
  • HTML을 쓰기 쉽게 도와주는 템플릿 엔진
  • vue, react, angular로 대체 가능
• DB데이터 읽기
  • MongoDB에서 데이터를 꺼낸 뒤에 해당 ejs 파일에 데이터를 넣어서 보여줌
• MongoDB id값
  • MongoDB에 데이터를 저장할 땐 꼭 _id 값을 넣어야한다.
  • DB에 항목을 추가할 때마다 자동으로 1씩 증가시킨다.
    • 거의 모든 데이터베이스에 있는 기능인데 mongodb에는 없음
  • updateOne : DB 데이터 수정
  • $inc : 증가값
• AJAX
  • 삭제 요청 (삭제 원하는 값을 서버로 보낸다.)
    • method: ‘DELETE’ / 요청을 한다.
    • url: ‘요청 할 경로’
    • data: ‘요쳥과 함께 보낼 데이터’
    • 서버에선 어떤 요소를 삭제할지 지정한다.
• URL parameter
  • 무작위의 문자를 붙일 수 있게 만들어주는 URL 작명 방식

What?

• Bootatrap
  • Bootatrap으로 UI 개발
• form - POST
  • form 데이터 전송을 위해 action=”/경로”, method=”POST” 속성 추가
  • 서버가 input들을 구분할 수 있게 input에 name 속성 추가
  • form 요청 정보를 쉽게 사용하기 위해 body-parser 사용
  • body-parser를 이용해 데이터 수신
• REST API
  • API 디자인 방법
  • Uniform Interface, Client-server, Stateless, Cacheable,
    Layered System, Code on Demand

What?

• Express
  • 서버 생성을 도와주는 라이브러리
• GET
  • 주소창에 URL을 입력해서 서버에 요청
  • app.listen(포트번호, function(){실행할코드})
• Nodemon
  • 서버 실행을 자동화 할 수 있게 도와주는 라이브러리
• 서버에서 HTML파일 전송
  • sendFile()
  • __dirname : 현재 파일 경로

What?

진행중🚀

• Node.js, MongoDB
• JavaScript 객체지향 & ES6 신문법 - 복습
  • this ~ rest 까지

완료✅

• Vue-project
• React-project
• JavaScript/jQuery

What?

• Vue devtools
  • 에러로 알려주지 않는 부분을 위해 설치 (크롬 확장 프로그램)
• Composition API
  • 파일을 쪼개지 않고 관련 기능을 한 곳에 모아두고 싶을 때 사용
  • setup() 이라는 hook 같은 걸 만들고 그 안에 코드를 짜면됨
  • 데이터는 ref() 담고 return{} 해줘야 위에서 사용가능
    • var 데이터이름 = ref(데이터)
    • return { 데이터이름 }
  • ajax 요청하는 법 동일함
    • axios 사용하면 됨
    • 단, 데이터 수정 방법은 다름
      • ref()로 만드는 데이터는 object 자료형이기 때문에 .value로 object 안의 데이터를 수정해줘야 함
  • json
    • 웹에서 서버랑 데이터를 주고 받을 때 항상 json 형식으로 주고 받아야함
  • Lifecycle hook
    • Lifecycle 함수명은 원래 이름 앞에 on만 붙이면 됨
• 결론: 모든건 선택사항이고 기존대로 Options API를 사용해도 된다.

What?

• Vuex
  • 데이터가 너무 많으면 씀
  • state : 데이터 생성
  • mutations : 데이터 수정 방법 정의
  • actions : ajax, 오래 걸리는 작업 정의
  • computed : state 꺼내는 코드 짧아짐
  • mapState : computed 코드 짧아짐
• PWA
  • 웹사이트를 모바일앱처럼 쓸 수 있게 만들 수 있음

What?

• style 속성 데이터 바인딩
  • :style=”코드내용”
  • object 데이터 형태로 여러자기 css 속성 넣을 수 있음
• ajax - 더보기 버튼
  • 새로고침 없이 서버에서 데이터를 가져와서 보여줄 수 있음
  • 호환성을 위해 axios 사용
• mitt 라이브러리
  • 먼 곳에 떨어진 컴포넌트에 데이터 전송할 수 있음

What?

• Hash mode
  • vue가 라우킹 해주기 전에 서버가 페이지를 보여주려고 할 수도 있음
    • 에러가 뜰 수 있기 때문에 서버에다가 vue에게 라우팅을 맡겨달라는 기능을 개발 하는 것
• HTML5 mode
  • #/ 뒤에 있는 내용들은 절대 서버로 전달되지 않는다.
  • 서버가 라우팅을 채가는 일을 방지 가능
  • vue router에게 라우팅을 맡길 수 있음
• Navigation guards
  • 특정 URL로 접속 시 뭔가 코드를 실행하고 싶은 경우 사용
    • ex) 마이페이지를 로그인한 사람만 보여주고 싶은 경우
  • hook 같은 거라고 보면됨
• build
  • build용 파일을 생성한 후 배포가능
  • 웹서버 가지고 있을 경우 : 서버에 api 작성

What?

• Nested routes
  • 다른 URL로 나누고 싶으면 사용
  • router 관련 문법 에러들은 터미널에 표기되지 않고 콘솔창에 나옴
• children
  • route들을 추가 가능
• named views
  • 여러개 컴포넌트 보여줄 수 있음

What?

• Bootstrap
  • 셋팅
• vue router
  • 라이브러리이며 설치시 라우터 이용가능
  • 페이지를 나룰 수 있음
• URL 파라미터
  • 현재 URL 정보를 담고있음