Question
- html 에서의 meta 태그나 여러가지 내용 head태그에 내용들이 많은데, React에는 이게 없는건가 ??
- 현재는 React.FC 타입이 없어진것인지?
Answer
- React 에는 보통 project를 create-react-app 이나 nextjs 를 통해 project를 구성하면 public 폴더의 index.html 에 html에 관한 내용이 적혀있고, 여기에 있는 에 ReactDOM.render를 통해 App 태그를 넣어주는 document.getElementById('root') 코드가 들어있다.
- 현재 추측하는 걸로는 화살표 함수를 사용하여 선언하는 경우에는 필요했지만, function 으로 선언하는 경우에는 필요가 없는듯함 .
HTML Tag 정리
head → meta tag 를 정리하는 공간. 이외의 내용으로는 title, link, script 등이 들어온다.
- link tag는 외부 리소스(css)에 대한 파일을 가지고 온다.(ex,
- script tag 는 client -side- javascript 를 정의한다. src 속성을 사용하면 외부 파일 로드 가능 (ex,
- ++) 문서 최상단에 은 출력할 웹 페이지의 형식을 브라우저에게 전달하는 역할로서 HTML5로 출력하겠다는 의미(?)
→ HTML5가 뭔지 ?
- meta charset="utf-8"에서 charset은 브라우저가 사용할 문자셋을 utf-8로 정의
→ 그렇다면 utf-8이 뭔지 ?
→ HTML은 버전별로 지원하는 태그가 조금씩 다르기 때문에, 내가 사용하는 HTML이 어떤버전으로 작성되었는지를 알려주기 위한 코드가 문서 최상단에 필요.(끝내는 이 없기때문에 태그는 아니다.)
meta tag 에서 http-equiv 속성의 역할?
→ 문서의 초기정보를 나타내는 속성
http-equiv 에 들어오는 값들은
- content-language - 기본언어 설정 ( content ="ko" )
- content-type - 문서의 MIME 타입이나 문서의 문자셋 설정(content="text/html ; charset=UTF-8)
- default-style - 기본 스타일 시트 설정
- X-UA-Compatible -
다음으로 브라우저 호환 설정을 할 수 있는 X-UA-Compatible 속성값이 있다. 이 속성값을 지정하면, 브라우저의 문서모드를 지정할 수 있다. 아래 같은경우 IE=edge 의 뜻은 최신버전으로 문서모드를 설정하라는 뜻이다. (호환성 보기 무시)(https://webisfree.com/2016-03-23/meta-태그-http-equiv-설정방법과-차이점)
- refresh - page reload 설정
호환성 보기 - ms사의 브라우저들은 모두 호환성 보기라는 옵션이 존재한다.
이는 해당 브라우저의 하위버전 브라우저와의 호환성을 극복하기 위한 방법으로, 요즘은 브라우저 표준기술에 맞춰 제작하기에 하위 버전의 익스에서는 상위 버전의 코드가 돌아가지 않을 수 있기 때문에 존재하는 옵션이다.
기본적으로 과거에는 전달하는 정보가 간단하여 ASCII 코드만으로도 표현이 가능하여 전송이 가능했는데, 현재는 음성, 영상, 사진 같은 파일들이 등장하고 이를 전송해야함에 따라, 텍스트 파일로의 변환이 필요해졌다. 이렇게 여러 타입의 파일을 텍스트 파일로 변환하는 과정을 Encoding, 텍스트 파일에서 다시 원 타입으로 변환하는 과정을 Decoding이라고 부른다.
Web Browser는 www에서 모든 정보를 볼 수 있도록 해주는 응용 프로그램 ,텍스트 파일을 읽기 위한 사용자 인터페이스를 총칭하는?
MIME type은 위의 인코딩을 하는 방법에 대한 이름이다(Multipurpose Internet Mail Extensions)
MIME로 인코딩한 파일은 Content-type 정보를 파일의 앞부분에 담게 된다.
→ 세부 내용 : https://juyoung-1008.tistory.com/4
typescript
interface - 클래스 또는 객체를 위한 타입을 지정
type - 특정 type의 별칭
→ interface로 type을 정의한 경우는 해당 type명으로 다른 별칭 타입을 만들 때,
변수로 할당
interface Person {
`name: string;`
`age?: number;`}
**const people: Person[] = [person, expert]**
→ type으로 정의한 경우
type Person = {
name: string;
age?: number;
}
**type People = Person[];**
**const people: People = [person, expert];**
→ type으로는 type에 대한 별칭을 또 지정 가능, but, interface는 불가능
// & 는 Intersection 으로서 두개 이상의 타입들을 합쳐줍니다.
// 참고: https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types++) 타입추론이 모두 깨진거나 다름이 없습니다. 결과가 any 라는 것은 즉 merged 안에 무엇이 있는지 알 수 없다는 것입니다.
generic → 다양한 type에 대해 정의해둘 때 그냥 any로만 채우게 된다면 type 검사가 불가능해진다.
→ 따라서 generic 이라는 것을 정의해두어 다양한 타입에 대해 열어두는 것이다.
→ generic을 정해두면 해당 type에 대한 변수를 지정해두는 것과 같다.
그렇게 값을 넣어두면 추후 호출시에 그 자리에 type값이 들어간다면 해당 type을 기억했다가 parameter에 정해둔 대로 argument에 값이 들어오면 해당 generic에 있는 type을 토대로 검사를 진행하는 방식인듯 하다.
가설 ) generic은 parameter쪽이 아니라 function name 뒤에 type을 정해줄 때 적용하는 걸로 보임
기대 return 값에 대한 정보를 generic에 넣어줌.
npx cra -project name- —typescript 로 생성 후
app.tsx 에 React.FC(Function Component) 가 있다면, 이에 대한 장-단점
< 장점 >
- React의 component인것을 인지하고 props단에 children 자동완성이 된다
< 단점 >
- children이 자동완성 된다는 점에서 type에 대한 optional한 정의가 따로 필요
(ex, interface {
name: string;
children?: React.ReactNode;
} )- defaultProps에 대한 값이 적용이 안된다.
(+++해결방법+++)
props에 값을 직접 넣어주면 해당 값이 비어있을 경우 default 값으로 들어간다.
→ const Example = ({ name, mark = '!' })
