input value 초기화
: input의 defaultValue와 value 두가지속성 ==>
defaultValue => input태그에서 처음에 보여줄 값으로 입력을 한다면 수정이 가능하다.
value => input태그에서 계속 보여지는 값으로 이 경우에는 입력을 한다고해도 입력이 되지 않고 지정해준 value값만 보여지게된다.
input창이 변경되고 초기화되도록하려면 value에 해당 state값을 넣어주어야한다.
이벤트 버블링
특정화면요소에서 이벤트 발생시 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미.
쉽게말해, 자식요소의 이벤트가 상위까지 전달되어 실행되는 것을 의미한다.
자식에게 onClick속성이 있고 부모에게도 onClick속성이 있다면 자식이 클릭됨과 동시에 이벤트 버블링으로인해 부모의 onClick도 실행되게된다.
여기서 부모 - 자식간 ==> 어떠한 태그가 하나가 있다면 그것을 감싸는 태그가 부모, 그 안의 태그는 자식들이고ㅡ 자식들끼리는 형재관계 라고 할 수 있다.
부모요소에만 onClick을 주면 되는것 아닌가?
부모요소에 onClick을 준다면 onClick은 실행이 된다. 그런데, 만약 특정 게시물을 가져오려고 id값을 주었다면 다른 태그들에서는 id값을 받아오지 못한다.
이벤트는 이벤트 버블링으로 자식요소를 클릭했을때도 자식에서 부모로 이벤트가 전파되어 결국 부모의 이벤트도 실행이 되는 그러한 형태가 되어 이벤트는 적용된다
다만, 이 경우에 event.target.id를 적용한다면 문제가 생긴다.
event.target.id : 현재 클릭한 태그를 의미. 이것을 사용할 경우 클릭한 태그에 id가 없다면 id를 받아오지 못함.
event.currentTarget.id
: event가 실행됨 태그의 id를 가져옴.
그렇다면 딱 클릭한것만 실행되게 하는 방법은 무엇일까?
- event.stopPropagation()
을 사용한다 => 더이상 이벤트가 전파되지 않게한다.
- event.currentTarget.id
=> 현재 클릭한 부분의 id를 가져온다.
이벤트 버블링과는 반대로 전파되는 (부모 --> 자식) 이벤트 캡쳐링이라는 것도 있다. 이 경우는 따로 설정을 해주어야 하는 개념이기는 하지만 알아두도록하자.
: 기본값은 이벤트 버블링!!
협업시의 규칙
코드 규칙정하지 - eslint와 prettier 사용 && husky 사용.
코드린터 : eslint사용.
'문법상 에러는 아니지만 에러로 약속하자 ' 라는 규칙을 정하는것.
eslint의 오류로 빨간줄이 그어지더라도 실행하는데는 문제가 없다. 다만, 규칙에 어긋난다는 얘기이다.
- eslint 의 규칙 : 중복선언금지,
==금지 등.. 이 있을 수있다.
eslint자체에 포멧터 기능도 약간 있다.
설치 후 yarn lint라는 명령어를 활용하면 규칙에 어긋나는 코드를 잡아준다.
코드포멧터 : prettier사용.
코드를 보기좋게 예쁘게 만드는 것이다.
prettier의 규칙으로는 띄어쓰기, 자동줄바꿈.. 등이 있다.(기본적으로 띄어쓰기는 2칸으로 설정되어있다.)
추가로 저장시 자동적으로 코드포맷터가 작동하도록 할 수 있다. => 최상단 경로에 .vscode폴더를 생성 -> settings.json파일을 만들고 (철자주의) ->
{ "editor.formatOnSave":ture, "editor.defultFormatter": "esbenp.prettier-vscode" }
이렇게 내용을 채워주면 저장시 자동으로 코드정령를 해준다. ==>
물론, vscode에서 설정을 해주면 되지만, 그렇게된다면 내 컴퓨터에서만 가능한것이기에 팀 프로젝트를 위해아야 최상단 경로에 .vscode라는 폴더를 만들어 안에 설정 파일을 넣어준다.
husky
소스코드를 git commit 하기 전에, 기존의 규칙을 지켰는지 검증하는 도구로, 규칙에 맞지않는다면 commit이 되지 않게 막는 것을 말한다.
.git이 해당 폴더에 있는지 확인을 하고 .git이 있는 경로에서 진행해야한다.
- 허스키 설치하기
yarn add --dev husky
- .husky 라는 폴더를 만들기
npx husky install해당 폴더 내부에 .husky 라는 폴더가 생긴것을 확인할 수 있습니다.
- 깃에 commit하기 전에 실행할 명령어를 적어주기
npx husky add .husky/pre-commit "yarn lint"이렇게 되면 git에 commit 하기 전에 “yarn lint” 명령어를 실행하게 되고, 오류가 있다면 commit을 진행하지 않습니다.
해당 husky부분은 설치를 진행할 수 없었다.
수업중에 git 사용을 익숙하게 진행할 수 있게 모든 프로젝트를 묶은 최상위 폴더에 .git폴더가 있어서 설치가 곤란했다.
실무에서는 한 프로젝트 폴더당 .git + husky가 있으니 명심할것.
(husky 버전이 올라가면서 최상위 폴더에는 안되는.. 뭐 그런게 생긴것 같다는데 그 부분은 잘 모르겠다)
