프론트엔드 공부

npx craete-react-app 으로 프로젝트를 생성하면 reportWebVitals.js 파일이 생성된다.전에는 프로젝트 하느라 뭔지도 모르고 필요 없는 것 같아서 늘 지우고 시작했는데 프론트엔드를 깊이 공부하기 시작하면서 궁금증이 생겨 알아보았다.

데이터 바인딩이란, 뷰와 모델을 하나로 연결하는 것을 의미한다.  양방향 바인딩(2ways data binding)장점코드가 짧아진다.편하다.그래서 큰 프로젝트에서 사용하면 좋다.단점변화에 따라 DOM 객체 전체를 렌더링 해주는 과정에서 성능이 감소되는 경우가 있다

렌더링이란 무엇인가,서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것SSR과 CSR의 차이는 표시해줄 화면을 어디서, 어떻게 그리냐의 차이다. Client Side RenderingCSR은 쉽게 말해서 클라이언트에서 모두 처리하는 것인데, 서버에서 전체 페

Search Engine Optimization구글과 네이버와 같은 검색 엔진들은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML 문서를 분석해서 우리가 검색할 때 웹사이트를 빠르게 검색할 수 있도록 도와주는 것.이때 CSR은 HTML문서를 분석하는데 SSR에

TTV(Time to View)와 TTI(Time to Interact)의 공백시간  서버에서 만들어진 HTML 파일로 사용자는 바로 웹사이트를 볼 수 있다. 하지만 동적으로 제어할 수 있는 JS파일은 아직 받아오지 않았기 때문에 사용자가 클릭을 해도 아무런 이벤트가

React (프레임워크가 아닌 라이브러리임!)facebook에서 개발XML을 변형한 JSX 문법 사용 권장(이것 때문에 러닝커브가 낮다고 할 순 없다)컴포넌트를 재사용할 수 있어 생산성이 높고 유지보수에 유리하다.단방향 데이터 바인딩다양한 라이브러리를 선택할 수 있고

Framework와 Library의 구분차이는 Flow(흐름)에 대한 제어 권한이 어디에 있느냐이다. Framwork는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머가 그 안에 필요한 코드를 작성한다.Library는 사용자가 흐름에 대해 제어를 하며 필요한 상황

react 하면 빠질 수 없는 라이브러리가 상태관리 라이브러리라던데…Vue, Angular와 다르게 React는 단방향 데이터 바인딩이기 때문에 상태관리를 하는데에 있어서 불편함이 있을 수 있다. 그래서 큰 프로젝트에서는 거의 필수적으로 사용된다고 보면 된다. rea

세션 기반 인증쿠키 방식이라고도 부른다.인증 과정클라이언트가 로그인 시도로그인 성공하면, 서버에서 세션값 생성하고 전송세션값을 받은 클라이언트는 쿠키에 보관이후로 헤더에 쿠키 담아 데이터 요청서버에서 헤더에 담긴 쿠키를 파싱해 세션값 검증하고, 클라이언트가 유효함을 인

템플릿 엔진이란웹페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다.주어진 기능만 사용할 수 있으며, 기능 추가는 js로 가능하다.템플릿 엔진은 js를 사용하여 html을 렌더링할 수 있게 해준다.따라서 기존 html 문법과 살짝 다르기도

WebRTC란, 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술이다. 한마디로 요약하면 드라이버나 플러그인 설치없이 웹 브라우저 간 P2P 연결을 통해 데이

P2P란 동등 계층 간 연결 구조를 말한다.peer to peer network(동등 계층 간 통신망)는 비교적 소수의 서버에 집중하기보다는 망구성에 참여하는 기계들의 계산과 대역폭 성능에 의존하여 구성되는 통신망이다.여러 대의 컴퓨터가 동등한 개념으로 망을 이룬다.한

소켓이란,프로토콜, ip주소, 포트넘버로 정의 됨떨어져 있는 두 호스트를 연결해주는 도구로써 인터페이스 역할데이터를 주고 받을 수 있는 구조체로 일명 통로이다.소켓의 역할에 따라 클라이언트 소켓, 서버 소켓으로 구분된다.socket.io란,webSocket을 기반으로

webRTC(Web Real-Time Communication) : 추가적인 플러그인 없이 미디어를 주고 받을 수 있게 해주는 기술webSocket : 단방향인 http와 다르게 양방향 통신이 가능하다socket.io : webSocket을 좀 더 편하게 쓸 수 있게

React.lazy나 Loadable Components를 사용하면 간편하게 코드 분할을 할 수 있다. React.lazyReact.lazy: 컴포넌트를 렌더링 하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸함수Suspense: 리액트 내장 컴포넌트, 코드 분할된

웹팩은 프론트에서 가장 많이 쓰이는 번들러이다.파일 확장자에 맞는 로더에게 위임해서 하나로 묶어 최종 배포용 파일을 만든다.웹팩에서 모듈은 웹 애플리케이션을 구성하는 모든 자원을 의미한다.웹애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해

제 3자 라이브러리제작사에서 만든 것이 아니라 다른 업체에서 만든 해당 툴 지원 라이브러리.제조사와 사용자 이외의 외부 생산자를 가리키는 뜻으로 쓰인다.프로그래밍 개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크를 서드파티로 볼 수 있다.서비스와 사용자 사이는 응

웹 브라우저는 동기적으로 html, css, javascript 를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다.웹 브라우저가 웹 서버에 필요한 자원(웹 페이지)을 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 사용자에게 보여준다. 자원은 주로 html

const 선언과 동시에 값을 지정해야하며,한번 넣은 값은 바꿀 수 없는 상수를 선언할 때 사용let선언과 값 정의를 따로 할 수 있고,넣은 값은 언제든지 바꿀 수 있다.var중복 선언이 가능하다.때문에 디버깅에 어려움이 있다.호이스팅 (변수가 속한 스코프의 최상단으로

문서 객체 모델 (Document Object Modal)문서 객체란 html, body 같은 html문서의 태그들을 javascript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다. 여기에 붙은 modal은 문서 객체를 '인식하는 방식'이라고 해석할 수

React에서 컴포넌트에 스타일링 하는 방법외부 .css 파일 작성하여 className으로 스타일 지정inline css를 react component안에 넣기css in js외부 .css 파일 작성하여 className으로 스타일 지정css 파일을 따로 만들어서 i

api에는 크게 rest-api, graphql-api 2 종류가 있다.주소처럼 생긴 이름 : http://naver.com/bord/1전체 데이터를 받아옴요청 : axiosC(POST), R(GET), U(PUT), D(DELETE)일반 함수와 같은 이름 :

IT 인프라는 IT환경을 운영하고 관리하는 데 필요한 소프트웨어, 하드웨어, 서비스 및 IT 자원의 조합을 의미한다.하드웨어(HW)운영체제(OS)네트워크(Network)미들웨어(Middleware)

사용자의 브라우저에 저장되고, 통신할 때 HTTP 헤더에 포함되는 텍스트 데이터 파일이름, 값 만료기간(지정 가능), 경로 정보가 있고 키와 값으로 구성되어 있다.해당 사용자의 컴퓨터를 사용한다면 누구나 쿠키에 입력된 값을 쉽게 확인할 수 있다.-> 보안성이 낮다최초

서버에 세션저장소를 사용하게 때문에 요청 많아지면 서버 과부화 옴토큰 임시 삭제 불가. 토큰 만료 시간을 반드시 기입해야 한다.정보가 많아질수록 토큰의 길이 늘어나 네트워크 과부화payload 탈취해 decode하면 데이터를 볼 수 있기 때문에 보안 문제 있긴 함.

단일 페이지로 구성된 웹 애플리케이션을 말하며, 화면 이동 시 필요한 데이터를 서버에서 html로 전달받지 않고, 필요한 데이터만 json 형태로 전달 받아 동적으로 렌더링기존 어플리케이션과 SPA의 차이기존 어플리케이션은 화면 이동 시에 서버에서 html을 전달받아

next.js를 사용하는 가장 큰 이유는 SEO를 위한 SSR을 가능하게 하기 때문이다.SEO : 검색 엔진 최적화 (Search Engine Optimizatioin)SSR : Server Side RenderingReact는 (CSR)Client Side Rende

자바스크립트의 내장 라이브러리로 별도 import가 필요없다.promise 기반으로 만들어졌기 때문에 데이터 다루기 편하다.내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.네트워크 에러 발생 시 response timeout이 없어 기다려야한다.json

여기서 document는 html문서를 말한다.트리 구조로 되어있는 객체 모델로써, javascript가 getElementbyid()와 같은 함수를 이용하여 html 문서의 각 요소(li, div와 같은 태그들)에 접근하고 사용할 수 있도록 하는 객체 모델이다.이 트

https://www.google.co.kr 입력사용자 브라우저의 호스트파일, 브라우저 캐시에 해당 url의 정보가 있는지 확인(캐싱이 적용되어 있다면, 별도의 DNS(Domain Name System) 요청 없이 URL을 띄울 수 있다.)DNS에 실 ip 주

두 파일 모두 Next.js 어플리케이션에서 모든 페이지에 대해 글로벌한 컨트롤을 할 수 있게 해준다.\_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트다. 페이지에 적용할 공통 레이아웃의 역할을 한다.Component 속성값은 서버에 요청한 페이지가

next에서 styled-components를 사용하면 css 로딩이 늦게 되어서 깜박이는 현상이 발생한다.따라서 \_document파일에 css를 미리 적용해야한다. \_document 파일은 Pages폴더 내부에 존재하는 모든 페이지에 global한 설정값을 줄 수

Asynchronous Javascript And Xml비동기식 자바스크립트와 xml브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, javascript를 사용한 비동

DOM, CSSOM 생성(서버로부터 받은 HTML, CSS를 다운로드)Render Tree 생성(DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성)Layout (브라우저 화면의 어느위치에 어느크기로 출력될지