<TIL id="20210822일">npx serve, preventDefault와 폼, 컴포넌트의 독립적 사용</TIL>

1. npx serve

• html파일을 브라우저에서 바로 실행시킬 수 있는 커맨드이다. npm 으로 시작하는 커맨드는 써봤는데 npx 는 처음 써봤다.
• NPX : 패키지 무설치 실행. npm 5.2.0버전부터 npx 라는 커맨드가 추가되었다. 방대한 npm 라이브러리들을 설치하지 않고도 실행해볼 수 있어서 최근 많이 사용된다.

2. preventDefault 와 폼(form)태그의 기능

• html에서 태그의 고유한 동작을 중단시킴. (form 태그의 경우 input 데이터를 서버에 전달)

$form.addEventListener('submit', e => {
	e.preventDefault();
});

• 폼(form)의 내부 동작과정 [출처]
  1. 폼이 있는 웹 페이지를 방문
  2. 폼 내용을 입력
  3. 폼 안에 있는 모든 데이터를 웹 서버로 보냄
  4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
  5. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
  6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냄
  7. 웹 서버는 받은 html 페이지를 브라우저에 보냄
  8. 브라우저는 받은 html 페이지를 보여줌
• preventDefault와 비슷한 메서드로 stopPropagation이 있는데 이는 상위 엘리먼트로의 이벤트 전파를 중단함.

3. 컴포넌트들을 독립적으로 사용하는 방법

• TodoForm에서 TodoList를 불러온 후 TodoList에 직접 text를 넣어주는 방식을 생각했는데 이렇게 되면 TodoForm은 TodoList없이는 사용할 수 없어져서 TodoList에 의존할 수밖에 없다.
• TodoForm의 파라미터로 이벤트콜백을 넣어주는 방식을 사용해 각 컴포넌트를 독립적으로 만들어줄 수 있다.

✅ TodoForm 생성 파라메터에 이벤트 콜백을 넣고, text를 입력 받으면 해당 콜백을 통해 text넘겨주기