HTML 배경지식

form 태그

• action 속성:
  폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시
• method 속성:
  폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시. get과 post 두 가지 선택 가능.
  
• entype 속성:
  폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시
  

textarea

• name 속성:
  textarea 태그의 이름을 명시. 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용되거나 자바스크립트에서 요소를 참조하기 위해 사용됨
  (input의 name속성과 동일)

lable 태그

• for 속성: 라벨과 결합될 요소의 id 속성값을 명시

JS 배경지식

window 객체

• .onload 메서드:
  웹페이지의 구성요소가 전부 준비되어야 실행된다.

addEventListener(이벤트, 함수)

• change 이벤트:
  타겟의 값이 비슷한 대체 옵션으로 변경되었음을 의미

formData

• .append(키, 값) 메서드:
  FormData 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가함
• .set(키, 값) 메서드:
  FormData 객체의 기존 키의 값을 새로운 값으로 대체하거나, 키가 없는 경우 키를 추가함
• 이미지 보내기

const formData = new FormData() 
formData.append('img', this.files[0])
axios.post('/post/img', formData)
	.then((res)=>{
    	document.getElementById('img-url').value=res.data.url;
    	document.getElementById('img-preview').src=res.data.url;
    	document.getElementById('img-preview').style.display=inline;
        })

axios

location

• location.reload
  새로고침
• location.href
  속성. 문자열로 주소 제공함
• location.replace
  메서드. 주소 저장되지 않음