• 함수는 기능 단위로 구현
• 함수 네이밍 규칙 알아보고 적용해보기
• 변수 네이밍 규칙 알아보고 적용해보기
• css 네이밍 규칙 알아보고 적용해보기

SPA 로 구현하기

• JavaScript로 DOM 접근하는 방법 ⇒ document.querySelector

  [before]
  const idInput = document.querySellector("#id");
  idInput.value = "hansol";
  [after] 
  

  • DOM이란?
  • 렌더링이란?
  • 브라우저 렌더링 작동 방법

• innerHTML

  • innerHTML을 제외한 DOM에 HTML 태그 넣는 방법 찾아보기

  const inputForm = document.querySelctory("#inputForm");
  inputForm.innerHTML += `<input placeholder="ID를 입력해주세요." />;
  

• template literal

  • 자바스크립트 코드를 문자열 내에서 사용하기 위한 방법

  const name = "hansol";
  const hello = `안녕하세요 저는 ${name} 입니다`;
  

  • DOM 에 노드 추가하는 방법

• addEventListener

  • 이벤트 등록 방법
  • 이벤트란?

  const test = document.querySelector(".test");
  const handleTestClick = () => console.log("Fighting!");
  
  test.addEventListener("click",handleTestClick); // test 노드에 click 이벤트가 등록
  

• API 호출 방법 ( fetch or axios )

  • API란?
  • RESTful API 란?
  • HTTP란?
  • Promise란?

  
  async function getData(){
  	const { data } = await axios.get(`http://localhost:4000/api/datas`);
  	return data;
  }
  

• async await

  • 동기와 비동기 차이는?
  • Promise를 사용하여 동기적 구현방법은?

• history 참고

  • Page 변환방법은?

  let state = {page_id : 1, data : 'test'};
  let url = location.origin + '/myPage';
  history.pushState(state, null, url);
  

  History.pushState() - Web API | MDN

MySQL을 사용하여 DB 구축하기

• 스키마란?
• query문 사용법
• mysql 설치방법
• dbms 이란 ?
• 관계형 db 란?

Express를 사용하여 Server 구축하기