(React들어가기전)크로스 브라우징,웹 통신,Node.js,Package-lock.json

2022-06-28

React를 공부하기 전 기초 지식을 먼저 알아보자. 크로스 브라우징,JS_웹 통신,Node.js, Package-lock.json 등을 알아 보겠다.

크로스 브라우징

브라우저의 엔진이 다름을 고려하여 모든 브라우저에서 동일하게 동작할 수 있도록 작성하는 기법

브라우저마다 엔진이 달라 HTML5, CSS, JS가 제대로 작동하지 않을 수 있음.
특정 브라우저에서 JS 코드 에러, CSS 깨짐 등이 발생 가능함.
- 예: IE 등 구형 브라우저는 W3C 웹 규격을 완벽히 따르지 않아서 이런 문제가 생김.
Babel 같은 크로스 브라우징 도구가 이런 문제를 해결해줌.
이와 유사하게 응용 프로그램에서는 크로스 플랫폼이 있음.

HTTP는 요청과 응답으로 구성된 데이터 교환 규칙

클라이언트가 HTTP Request를 서버로 보내면, 서버는 HTTP Response를 돌려주는 구조.
HTTP는 stateless(상태 저장 안 함)이기 때문에 데이터가 필요하면 매번 요청/응답을 해야 함.
HTTP는 StartLine, Headers, Body 세 부분으로 나뉨.
- StartLine: 시작라인 (Request Line, Status Line 등).

HTTP요청_응답

GET, POST, PUT, PATCH, DELETE, OPTIONS 등의 메소드가 있음
또 Headers, Body를 통해 추가적인 데이터와 상태 등 첨부하여 보낼 수 있음

req

응답 상태 코드, Headers, Body로 구성됨

res

www.google.co.kr 접속

요청 후 응답을 기다리지 않는 통신 방식.

런타임 환경 = 실행 환경(모든 언어에서 통일된 말)

Node.js는 자바스크립트를 브라우저가 아닌 환경에서 실행할 수 있게 해주는 런타임 환경

프레임워크라 알려져 있으나 C언어의 VS(gcc) 또는 Java의 Eclipse(JVM, JRE)와 같은 역할
또한 서버 언어로 알려져 있으나, 이 또한 Node.js의 기능 중 하나
- Express.js, Next.js 프레임워크가 서버 개발로 유명
참고로 브라우저처럼 ECMAScript사양 따르나, 브라우저와는 환경이 다르므로 차이 있음
- 예로 브라우저에서만 사용하는 alert메소드라든지 등..

package-lock.json은 정확한 버전을 기록해 설치 문제를 방지함.
package-lock.json이 있다면 npm install로 모듈을 설치할 때 package.json이 아닌 package-lock.json을 이용해 자동 설치

만약 package.json에 버전명을 정확히 입력한다면 아주 작은 버그 수정이 이루어질 때마다 매번 버전 업그레이드를 package.json에서도 수정해야 하기 때문. 이를 version range를 사용해 수고를 덜고 있었던 것이다.