React

https://codepen.io/alphardex/pen/dyPorwJ Snow (Pure CSS)Inspired by: https://codepen.io/YusukeNakaya/pen/NWPqvWW This is a pure CSS version :d...codepen.io 위 css 효과를 React 페이지에서 적용해보려고 한다.우선 css 파일을 하나씩 살펴보자면body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white);}이 부분은 body 요소에 적용되는 스타일이다.height를 1..

React는 라이브러리이다. 정답은 바로 리액트 공식 사이트에 있다. 리액트는 web과 native UI를 위한 라이브러리이다. 여기서 native UI란 운영체제에서 제공하는 기본 컨트롤 및 구성 요소의 사용을 강조하는 디자인 스타일이다. 쉽게 예시로 말하자면 삼성 갤럭시와 아이폰의 운영체제가 다르니 그에 맞게 개발한 UI라는 얘기다. 프레임워크와 라이브러리 프레임워크(Framework) "소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합." 프레임워크는 원래 뼈대나 기반구조를 뜻하는 단어로, 어플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동과 같은 기능들을 위해 어느 정도 뼈대를 제공해주는 것이 프레임워크이다. 앱/서버 등의 구동, 메모리 관리, 이벤트..

CORS (Cross Origin Resource Sharing) 브라우저의 보안 정책 중에는 SOP(Same Origin policy)가 있다. SOP는 서로 다른 출처끼리 자원을 공유하지 못하도록 제한하는 정책이다. 다른 출처란 다음 3가지 중 하나라도 다른 경우를 말한다. 프로토콜 - http ≠ https 도메인 - google.com ≠ naver.com 포트 번호 - http://127.0.0.1:8000 ≠ http://127.0.0.1:5000 그렇지만 다른 출처끼리의 요청을 모두 제한할 수는 없기에 CORS가 존재한다. CORS는 SOP의 예외 조항이다. 기본적으로는 서로 다른 출처끼리는 자원의 공유가 제한되지만 둘이 협의한다면 공유가 가능하다. CORS 에러가 발생한다는 것은 클라이언트..

코드 스플리팅이란? 지금 당장 필요한 코드가 아니라면 따로 분리시켜서 필요할 때 불러와서 사용하는 것. 왜 필요한가? 리액트 앱은 SPA(Single Page Application)으로 하나의 js 파일에 모든 어플리케이션 로직들을 불러온다. 그래서 규모가 커지면 로딩 속도가 느려지게 된다. 이 때 당장 필요한 코드가 아니라면 따로 분리시켜놨다가 필요할 때 불러와서 사용하는 코드 스플리팅을 한다면 페이지의 로딩 속도를 개선시킬 수 있다. 코드 스플리팅 해보기 1. React 프로젝트 생성 2. 코드 스플리팅할 함수 준비 src/notify.js function notify() { alert("띵동") } export default notify; src/App.js import './App.css'; im..