TIL
1.Recoil
Recoil 이란 Recoil은 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리 이다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습
2.REST, REST API
REST란 무엇인가 "REpresentational State Transfer" 의 약자로, 자원을 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 상태 전
3.HTTP
인터넷 네트워크 IP (인터넷 프로토콜) 역할 지정한 IP주소에 데이터 전달 패킷(Packet)이라는 통신 단위로 데이터 전달 패킷 = 패키지 + 버킷(package + bucket) 한계 비연결성 : 패킷을 받을 대상이 없거나 서비스 불능 상
4.인터넷 네트워크
인터넷 네트워크 IP (인터넷 프로토콜) 역할 지정한 IP주소에 데이터 전달 패킷(Packet)이라는 통신 단위로 데이터 전달 패킷 = 패키지 + 버킷(package + bucket) 한계 비연결성 : 패킷을 받을 대상이 없거나 서비스 불능 상
5.브라우저의 렌더링 과정
브라우저 렌더링 과정 HTML, CSS, JS, Image, Font, File 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 렌더링 엔진은 서버로부터 응답된 HTML,CSS를 파싱하여 DOM과 CSSOM을 생성한 후 이들을 결합하여 렌더 트리를 생성한다
6.CORS 란
다른 출처의 리소스를 사용하는 것에 제한 하는 보안 방식URL의 Protocol, Host, Port를 통해 같은 출처인지 다른 출처인지 판단할 수 있다.ex) http://github.com:443 : http : 프로토콜, github.com : 호스트,
7.SSR과 CSR
SSR이란 단어 그대로 서버에서 렌더링 작업을 하는것을 의미합니다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 하며 서버에서는 html, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다.위의
8.실행 컨텍스트
실행 컨텍스트
9.this
this
10.React - useState는 동기적 비동기적
들어가기 전에 useState 란 useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다. state와 Hook
11.React - Virtual DOM
Document Object Model (문서객체모델)의 약자이다.문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 <html 태그> 들을 객체 (object) 로 만든 것이다. DOM은 애플리케이션의 UI를 나타
12.React - useRef Hook
useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상
13.useLayoutEffect vs useEffect
MountUpdate (when state changes based on any event)UnMountRun lazy initializer RenderReact updates DOMRun Layout EffectsBrowser paints the screenRuns
14.반응형 디자인
PC || Tablet영역들이 가로로 여러 줄 배치 됨Mobile영역들이 세로로 한줄 씩 배치 됨PC, Tablet, Mobile 등 각각의 기기별로 웹 페이지가 최적화되어 보여지는 기능.화면이 작은 기기에서는 작은 화면으로 최적화해서 보여주고 큰 화면을 가진 기기에서
15.Vue 입장에서 작성한 Vue VS React & Vue 기본 문법
프레임워크 vs 라이브러리 특징 FrameWork 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것 Library 소프트웨어를
16.FE MV* (1)
View (화면)웹 프론트에서 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미함즉 최종 사용자에게 무엇을 UI로 보여주기위한 역할Model (데이터)데이터를 다루는 영역Model의 범주javascript의 Object서버의 API로 받는 데이터Controller
17.FE MV* (2)
Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처 스타일대규모 애플리케이션에서 데이터 흐름을 일관성 있게
18.양방향 바인딩 - v-model
프론트엔드에서 입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 있는데, 이 작업을 단순화 하고 양방향으로 데이터 바이딩할 수 있게 Vue.js에서 제공하는 메서드 입니다v-model 속성은 v-bind:value와 v-on:inp
19.테스트 코드 작성하는 이유
장점사람이 수행해야 하는 반복된 테스트를 자동화 할 수 있음 (비용 감소)사람이 수행하는 것보다 훨씬 빠르게 테스트할 수 있음사람이 수행하는 것보다 더 신뢰할 수 있음단점감각적인 요소(시각, 청각) 등 사용자 경험과 관련된 문제를 찾아낼 수 없음실제 환경에서 벌어지는