웹TIL) 220324 리액트 대문자 에러, package-lock.json, 컴포넌트, JSX에서의 띄어쓰기

 

1. 리액트에서 프로젝트 이름은 대문자가 포함되면 안되는 것 같다. 전부 소문자로 해야 create-react-app을 할 때 에러가 나지 않는다. 

 

 

2. 명령 프롬프트에서 리액트 앱 실행

맨날 VSCode 터미널에서 npm start로 했었는데, CMD로는 처음 해보는데 신기했다. 

Local 주소는 3000번 포트를 이용하고(node.js) 내 네트워크에서는 192.168 ~ 로 시작되는걸 쓴다.

 

3. 리액트에서 웹팩과 바벨이 필요한 이유? 

리액트는 비교적 최근에 나온 기술이라서 일부 브라우저는 이해할 수 없는 코드로 구성되어 있다. 
그래서 웹팩과 바벨이라는 도구가 필요하고 이 도구로 리액트를 모든 브라우저가 이해할 수 있도록 컴파일 해야 한다. 


4. package.lock.json이 무엇인가? 
npm을 사용해서 node_modules 트리나 pack.json 파일을 수정하게 되면 자동으로 생성되는 파일 
파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다. 

모든 파일은 파일마다의 역할이 있다. 
당연하게도 package.json 파일이 제 역할을 다 하게 한다면, package-lock.json은 만들어질 이유가 없다. 

package.json에서는 버전정보를 저장할 때 version range를 사용한다. 
version range는 ex) "express":"~4.16.1" 이라고 한다면 
나는 4.16.1 버전 이상, 그리고 4.17.0 미만의 패키지를 사용할거야 라고 말함 

협업을 하기 위해 우리는 같은 package.json 파일을 이용해서 각자의 컴퓨터에 같은 패키지들을 설치해서
같은 개발환경을 구성하게 된다. 

>> 팀원끼리 사전에 npm --version 명령어를 통해 npm 버전이 일치하는지 사전에 확인 
이미 잘 못 깔아버린 node modules 삭제 
npm cache 삭제 
npm install로 다시 dependencies를 설치 

package-lock.json에는 package.json에는 틸드~로 명시되어 있는 모듈들이 
package-lock.json에는 버전명이 명확하게 명시되어 있다. (정확한 버전의 패키지를 다운받기 위함) 

npm install로 어떠한 모듈을 install하면 package.json과 함께 lock.json 파일이 생성된다

lock.json은 package.json으로는 부족한 정보를 도와주는 파일 


만약 package.json에 패키지 버전명을 정확히 명시하게 된다면, 프로젝트에서 사용하고 있는
패키지의 중요한 버그 수정이 이루어질 때마다 프로젝트의 package.json에 적혀있는 버전도 수정을 해야 한다. 
모든 크고 작은 패키지들의 릴리즈들에 대해 항상 추적하고 수정해야 하는 엄청난 귀찮음과 수고스러움을
version range 로 명시함으로써 이를 해결 

 

 

4. 웹 컴포넌트란? 

리액트를 사용하면서 컴포넌트라는 단어가 자주 등장한다. 컴포넌트가 영어 단어로 '요소'라는 뜻인 것은 알지만 정확한 의미가 와닿지가 않았다. 그냥 각각 개별의 요소인가?라고만 생각이 되어서 따로 찾아보았다. 

https://swimjiy.github.io/2019-05-17-js-web-component

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 

 

HTML이 기본적으로 제공하는 element는 브라우저와 운영체제에 따라 다르게 보이는 경우도 있고, 발전하는 웹 환경에 대응하기에 한계가 있다. 여기서 JS 기반 컴포넌트가 대안으로 제시되었으나 

JS 컴포넌트를 사용하려면 스크립트 파일과 CSS 파일을 포함하고 특정한 마크업 구조를 사용해야 하며, JS 컴포넌트는 상당한 크기의 JS 덩어리라 성능이 낮은 기기에서는 원활한 작동이 힘들다.

 

W3C에서는 이러한 문제를 개선하고자 웹 컴포넌트(Web Component)라는 명세를 만들었다.

웹 컴포넌트는 개발자가 자체적으로 HTML element를 만드는 기술이다. 

 

※ 웹 컴포넌트는 템플릿, 데코레이터, 커스텀 엘리먼트, 섀도 DOM이 있다. 일단 간단하게나마 작성해보았다.

Template는 <template> ~ </template>로 작성되며 <template> 태그 내의 element들은 DOM의 구조를 가지고 있지만 렌더링되지 않으며 이미지와 같은 리소스 파일을 내려받지 X 

<decorator> 엘리먼트를 오버라이드해 엘리먼트를 꾸미는 역할을 한다. (리모델링) 

<element> 커스텀 엘리먼트 : 개발자가 새로운 엘리먼트를 만든다. 

Shadow DOM : DOM의 구조를 가지고 있으나 외부에는 노출되지 X (DOM의 구조 캡슐화)

 

5. 컴포넌트 작성 방법 

.js 파일을 따로 만들고 App.js에서 import로 해당 컴포넌트 불러오기 or inline CSS 삽입 방법처럼 function a() { } 똑같이 작성 

 

6. 컴포넌트와 함수의 차이 

둘이 같은 건가?라고 헷갈렸는데 컴포넌트를 만들 때 함수를 사용하는 것이지 컴포넌트와 함수는 다른 개념이다. 

하나의 기능을 담은 파일이 컴포넌트 

 

7. 띄어쓰기 실행결과 

를 하면 브라우저에 실행 결과가 안나오는데 

이렇게 해야 실행결과가 정상적으로 출력된다. 

 

 

참고 (좋은 글들 감사합니다) 

https://darrengwon.tistory.com/m/942?category=858372

https://www.codeit.kr/community/threads/29838

코딩이 처음이라면, 코드잇

https://velog.io/@songyouhyun/Package.json%EA%B3%BC-Package-lock.json%EC%9D%98-%EC%B0%A8%EC%9D%B4