프론트엔드/Web Env

'왜 package-lock.json이 갑자기 수정되었을까? 협업을 하다보면 의도치 않게 package-lock.json이 업데이트가 되는 경우가 있는데 이유를 알고싶었다.' 1. 의도치 않게 package-lock.json이 수정된 이유 package-lock.json이 수정되었다는 것은 의존성이 새로 추가되었거나, 기존의 의존성이 버전이 변경되었음을 의미합니다. 먼저 의존성이란 우리가 프로그램을 만들 때 의존하고 있는 코드 모듈입니다. package-lock.json과 package.json에 있는 dependencies들이 우리가 사용중인 의존성 목록입니다. 새로운 의존성이 추가되면 당연히 package-lock.json이 변경될 것이지만, 기존 의존성의 버전이 변하는 것은 어떤 경우가 있을까요? ..

들어가기전 렌더링이란? 어떠한 웹 페이지 접속시 그 페이지를 화면에 그려주는 것. SSR(Server Side Rendering) 사용자가 요청시마다 서버측에 새로운 페이지에 대한 요청을 하고, 서버측에서 렌더링 후 사용자에게 반환하는 방식입니다 CSR(Client Side Rendering) 최초 1번 서버측에서 전체 페이지를 로딩 이 후, 사용자의 새로운 요청이 있을 때마다 자바스크립트 파일을 이용해 브라우저측에서 렌더링하는 방식입니다. CSR & SPA (Single Page Application) SPA는 CSR 방식을 이용하고 있는 대표적인 방법이다. 모바일의 비중이 커지는 시기가 오면서 모바일에 최적화된 환경이 필요해졌다. 컴퓨터와 달리 성능이 낮은 모바일에 최적화 시키기 위해 나온 것이 SP..

들어가기전 WEB STORAGE이란 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이타를 조회하는 패턴이다. 내부적으로는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 분리되어 데이터 지속성에 따라 선택적으로 사용이 가능하다. Web Storage는 웹 환경에 Cookie와 유사한 개념이다. Web Storage vs cookie 차이점 서버전송 web storage는 데이터를 클라이언트에만 저장할 뿐 서버로 전송은 이루어지지 않는다. cookie는 매번 서버로 전송된다. 객체저장 Web Storage는 문자열 이외에도 구조화된 객체를 저장할 수 있다는 개발 편의성을 제공해준다. 단, 브라우저의 지원 여부를 확인해 ..

브라우저의 핵심 기능 사용자의 요청을 서버에 요청(Request)하고, 서버의 응답(Response) 받아 웹페이지에 표시한다. 브라우저의 동작 원리 01. 서버 요청과 응답 1. 사용자의 요청을 서버에 요청(Request) 하고, 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 02. HTML, CSS 처리 (렌더링 엔진) 1. 렌더링 엔진의 HTML,CSS 파서에 의해 파싱(Parsing)되어 2. DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 3. 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. * 렌더링 엔진이란 요청받은 내용을 브라우저 화면에 표시하는 역할을 한다. 03. Javascript를 처리 ( 자바스크립트 엔진) 1. 렌더링 엔..