[TIL] 8/29

잡다한 TIL,,,

HTML name

name은 server에서 form handling을 하기 위한 속성이다. GET, POST 요청 등 서버와 통신 시에 name에 설정된 값을 이름으로 갖는 데이터가 전송된다.

<label><input type="radio" name="icecream" value="mint-choco">Mint Choco</label>
<label><input type="radio" name="icecream" value="choco">Chocolate</label>
<label><input type="radio" name="icecream" value="strawberry">Strawberry</label>

Mint Choco
Chocolate
Strawberry

예를 들어, 위의 radio 버튼은 각각 다른 value를 가지고 있지만 name은 icecream으로 동일하다. 셋 중에 어떤 버튼을 클릭하든 버튼의 value가 icecream을 키로 서버에 전송된다.
<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> 태그에 적용할 수 있다.

Property does not exist on type 'JSX.IntrinsicElements'.

하이아크 홈페이지 개발하다가 만난 에러다. Header.tsx에서 styled-components로 선언되었던 Slogan을 별도의 컴포넌트로 분리하려다가 발생했다.

Slogan.tsx 파일을 만들고 안에서서 sloganWrapper를 styled-components로 선언해서 사용했다. 다른 component를 생성할 때와 마찬가지로 Slogan이라는 FunctionComponent를 만들고 그 안에서 sloganWrapper를 호출했는데 분명 선언되어있는건데 빨간줄이 그어져서 확인해봤더니 해당 에러가 발생해있었다.

알고보니,,, sloganWrapper라는 이름이 문제였다. 이 글에 따르면 TS에서 component 이름은 모두 대문자로 시작해야한다고 한다. 실제로 이름을 SloganWrapper로 바꿨더니 해결됐다 ㅠㅠㅠ,,, 근데 저 valid name에 대한 명세가 어디에 되어있는 건지 궁금한데 찾지 못했다,,,

.ts와 .tsx 차이

현재 component는 .tsx 파일로 작성되고 있는데 옛~날에 typescript 찍먹했을 때 .ts 파일로 했던 게 기억나서 갑자기 궁금해졌다. js도 .js와 .jsx가 있던데 차이가 뭘까?!
ts 파일에는 순수한 Typescript 코드만 담을 수 있고 tsx에는 JSX를 포함할 수 있다고 한다. ts로 작성된 코드를 tsx로 옮기면 아무 문제가 없지만 tsx로 작성된 코드가 만약 JSX를 포함하고 있다면 ts로 옮겼을 때 에러가 발생한다~~!
현재 리액트 기반 개츠비로 개발 중이고 컴포넌트 파일마다 JSX가 들어있으니 tsx를 사용하는게 맞다!