20200308 TIL

그동안 개인적으로 Notion에만 TIL을 적어왔지만 오늘부터는 Velog에도 한번 적어보기로 함.
아직 정해둔 틀은 없어서 오늘은 이렇게 남기지만 앞으로 좋은 방법을 찾아봐야겠다.

Question

1. URI 와 URL 차이점
2. styled component 벤더 프리픽스 (css-in-js 는 자체지원이라던데 이건??)
3. class 문법 자체가 es6문법인데 이를 사용한게 react, 그렇다면 해당 compiler가 내재되어있나 ?
4. react-scripts module은 뭔지 ?
5. npm run start, npm start 의 차이는 ?

Answer

1. https://velog.io/@pa324/개발상식-URI-URL-차이-정리

2. 역시나 가능, 하지만 정확히 구현해주는지에 대해서는 본게 없어서 아직 모르겠음.

→ 기존에 진행했던 프로젝트들을 확인해보니까 다 webkit에 대한 내용들이 잘 추가되어있음. 동작이 잘 된다.

→ ++) styled components 의 StyleSheetManager 라는 내장컴포넌트를 사용한다면

disableVendorPrefixes 속성을 넣어줬을 때 해당 컴포넌트에서 vendor-prefix를 제거할 수 있다.

3. class 문법을 compiler해주는 babel 모듈이 cra 설치 시에 자동으로 설치되어 있기 때문에 cra 에서는 class field 문법은 사용 가능. 이번 질문에서 나온 내용인 class 를 사용한 react는 Component 라는 부모 클래스를 미리 react에서 만들어두고, 이를 extends 해서 사용하는 것 이기 때문에 가능 ...?

→ 위 내용이 아니라, react project를 진행할 때에는 대부분의 문법이 es6를 활용한 문법이 많기 때문에(ex. class) 기본적으로 react-scripts라는 모듈을 설치하는데(cra 설치시에 자동설치) 이 모듈 내에 babel이 들어있어 arrow-function이나 class component와 같은 es6문법을 자유롭게 사용할 수 있는 것이다.

4. 이름 그대로 react코드를 dom 과 연결해주는 react-dom 처럼 script와 연결해주는 모듈로 보인다. → 그게 아니라 react로 프로젝트를 진행하기 편리하게 해주기 위해 babel이나 여러가지 모듈을 모아둔 모듈을 react-scripts 라는 모듈로 만들어 두었음

→ npm / yarn eject 할 경우에는 package.json에 있는 모듈중에서 이렇게 여러 모듈이 합쳐져 있는 모듈이나 babel에 대한 세부 사항들이 모두 분해되어 나타난다.

특히, scripts 에 대한 부분은 따로 폴더로 나타난다.

5. npm start 는 npm start의 축약형이다. 이는 package.json에 있는 scripts 를 읽어오는 코드.

+++ 혹시 틀린 내용이 보이신다면 언제든 교육해주시면 감사하겠습니다 (_ _)