개발일기

컴포넌트를 통해 UI를 재사용 가능한 개발적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 js함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 react엘리먼트를 반환합니다.함수 컴포넌트와 클래스 컴포넌트컴포넌트를 정의하는 가장 간단한 방법은 javascript함수를 작성하는 것 입니다.function Welcome(props) { return Hello, {props.name};}이 함수는 데이터를 가진 하나의 "props(속성을 나타내는 데이터)" 라는 객체 인자를 받은 후 react 엘리먼트를 반환하므로 유효한 react 컴포넌트입니다. 이러한 컴포넌트는 javascript함수이기 때문에 말 그대로 "..

엘리먼트는 리액트 앱의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용을 기술합니다.const element = Hello, world;브라우저 DOM 엘리먼트와 달리 react 엘리먼트는 일반 객체이며, 쉽게 생성할 수 있습니다. react dom은 react엘리먼트와 일치하도록 dom을 업데이트 합니다.DOM에 엘리먼트 렌더링하기이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트(root) DOM 노드라고 부릅니다. 리액트로 구현된 애플리케이션은 하나의 루트 DOM노드가 있습니다. React를 기존 앱에 통합하려는 경우, 원하는 만큼 많은 수의 독립된 루트 DOM노드가 있을 수 있습니다.(루트 노드는 하나가 아닐 수 도 있다.)React 엘리먼트를 렌더링하기 위해..

웹팩 ? 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 도구, 번들러module bundlerHTML, CSS, Javascript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구webpack프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음, 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러.여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러.자바스크립트 어플리케이션을 위한 정적 모듈 번들러. 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링 하는 역알.플러그인을 끼우면 번들링 뿐만 아니라 훨씬 확장적인 기능을 사용할 수도 있음.장점의존 모듈이 하나의 파일로 번들링 되기 떄문에, 별도의 모듈 로더가 필요..

정적 및 동적 렌더링정적 경로에서는 컴포넌트가 빌드 시점에 서버에서 렌더링 됩니다. 작업 결과는 캐시되어 후속 요청에서 재사용됩니다.동적 경로에서는 요청 시점에 컴포넌트가 서버에서 렌더링 됩니다.정적렌더링(기본값)정적렌더링은 모든 렌더링 작업이 미리 수행되고 사용자와 지리적으로 가까운 CDN(콘텐츠 전송 네트워크)에서 제공될 수 있으므로 성능이 향상됩니다.layout이나 page에서 동적 함수 또는 동적 데이터 가져오기를 사용하여 동적 렌더링을 선택할 수 있습니다. 이렇게 하면 요청 시점에 전체 경로를 동적으로 렌더링 합니다.경로가 정적으로 렌더링되는 경우, 데이터 요청이 캐시되고 동적 함수가 없다.정적 렌더링 페이지들은 프로젝트 빌드 시점에 HTML 파일이 생성되고, 모든 요청에 재사용된다.그리고 가까..

Vite란빠르고 간결한 모던 웹 프로젝트 개발 경험에 맞춰 탄생한 빌드 도구이며, 두가지 컨셉을 중심으로 한다.개발시 네이티브 ES Module을 넘어 다양한 기능을 제공한다.번들링 시 rollup기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(pre-configured)을 제공합니다.지원하는 브라우저기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.meta를 지원하는 브라우저를 타깃으로 빌드를 수행합니다. 레거시 브라우저는 @vitejs/plugin-legacy 플러그인을 통해 지원이 가능합니다.index.html 그리고 프로젝트의 루트만들어진 vite 프로젝트를 유심히 보면..

자바스크립트의 엔진 v8, 자바스크립트는 단일 스레드이거나 콜백 대기열을 사용한다는 것을 알고는 있다.자바스크립트 런타임에 대한 이해자바스크립트의 엔진자바스크립트의 엔진은 자바스크립트 코드를 실행하는 프로그램, 인터프리터자바스크립트의 v8 엔진은 google에서 개발하고, c++로 작성된 오픈 소스.크롬 및 node.js내에서 사용됩니다.엔진은 두가지 구성 요소로 구성됩니다.메모리 힙 : 메모리 할당이 발생하는 곳호출스택 : 코드가 실행될 때 스택 프레임이 있는 곳런타임브라우저에는 자바스크립트에서 사용해온 api 가 있다.(ex. setTimeout),이 api는 엔진에서 제공되지 않는다. 어디서 오는걸까요?브라우저에 의해 제공되는 dom, ajax, settimeout 그리고 다른 많은 web API가..

crp 를 찾을때 상위 카테고리'성능 지표 용어'CRP(Critical Rendering Path)crp는 문서(html, js, css)를 화면에 표현하기 위해 거치는 일련의 과정을 말하다.html문서가 브라우저에 의해 구문 분석될때 dom트리와 css dom 트리를 구성한다.css dom 트리와 dom 트리를 결합하여 render 트리를 구성하고, 레이아웃을 통해페이지에 그려질 요소들의 크기와 위치를 결정한다(layout). 마지막으로 그려질 위치가 정해지면 그리기(painting) 과정을 통해 픽셀이 화면에 그려진다.더 나은 성능과 우수한 사용자 경험을 제공하기 위해서 crp 최적화 하는 것은 중요하다.CRP 최적화 요소 찾기chrome 개발자도구, lighthouse웹 앱의 품질을 개선하는 오픈 ..

browser renderinghtml을 파싱하여 dom 노드를 만든다. 이 노드들을 병합하여 dom트리를 만든다.css를 파싱하여 css dom 트리를 만든다.dom트리와 css dom 트리로 render트리를 생성한다.render 트리를 배치한다.render 트리를 화면에 페인팅한다.뷰에서 브라우저에 렌더링 되는 원리빌드를 하면 파일이 번들링 된다. 바벨이 템플릿과 스크립트를 컴파일해서 virtual dom 객체화를 진행한다. 이것이 바로 dist/js 아래로 만들어진 .js 파일이다. 브라우저에서 vue-router로 설정한 경로로 서버에 요청이 드렁오면 트랜스 파일링된 자바스크립트 파일이 브라우저로 로드가 된다. 브라우저는 이 자바스크립트 파일로 렌더링 엔진 작업이 진행된다. virtual dom..

프로젝트 초기 설정을 할 때마다 마주했던 문제다. API 서버에서 데이터를 가져오려고 하면 꼭 항상 마주하는 문제이고, 항상 여기서 한시간 넘게 해맨다. 해매도 해매도 모른다는거다. 이정도면 알려고 안하는게 아니시냐.. 바보가 아니면 이제는 알아두셔라..vue 에서 proxy 설정을 해주는 이유일반적으로 프록시, 프록시 서버는 클라이언트와 서버의 간의 중간다리 역할을 한다.vue CLI 서비스를 사용하여 개발에서 앱을 실행하는데, 개발 환경에서 /api/reservation.. 로 요청을 하면 자동으로 http://localhost:8080/api/reservation 로 호출이 된다.요청하려는 서버에서 localhost, 내 IP는 허용된 도메인이 아니기 때문에 데이터를 요청하면 접근할 수 없다는 CO..

SOP (Same-Origin Policy)동일 출처 정책이라고 한다. 말 그대로 같은 출처에서만 리소스를 공유하게 하는 정책이다. 그러나 웹에서 다른 출처에 있는 리소스를 가져와 사용하는 일은 흔한일이라 예외 조항을 두고 허용하는데, 그중 하나가 cors정책을 지킨 리소스 요청이다.CORSCORS란, 기존의 동일 출처 정책에 의존하는 응용프로그램의 호환성을 유지하면서, 다른 출처의 자원을 공유할 수 있도록 한다. CORS는 오히려 보안을 지키면서 동시에 교차 출처를 가능하도록 하는 사양이다.api 주소에서 로컬 주소로 가져오기 위한 엑세스가 cors 정책에 의해 차단되었다는 내용이다.CORS 접근 제어 시나리오간단한 요청 (simple request)사전 점검 요청(prefilght request)인증..