React

TIL] 리액트

SPA SPA란 Single Page Application을 뜻합니다! 말 그대로 서버에서 주는 html이 1개뿐인 애플리케이션입니다. 보통 웹사이트는 페이지를 이동할 때마다 서버에서 정적 자원을 내려준다면 SPA는 딱 한번 정적자원을 받아옵니다. 기존 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이었습니다. SPA는 위의 전통적인 웹사이트의 단점을 보완했습니다! SPA의 단점은 어떤 것이 있을까요? SPA의 단점은 딱 한 번 정적 자원을 내려받아 처음에 모든 컴포넌트를 받아옵니다. 따라서, 컴포넌트가 많다면 첫 로딩 속도가 느리다는 단점이 있습니다. 라우팅 html은 딱하나를 가지고 있지만 SPA도..

TIL] 리액트 기초

SCSS SCSS, SASS 둘 다 CSS를 편하게 쓰도록 도와줍니다. 기본 문법은 CSS와 동일합니다. 다른 점이 있다면 각 하위 태그들에 스타일을 줄 때 각각 다른 블럭을 만들어 쓸 필요가 없습니다! //scss div{ p{ color: 원하는 색; font: { family: 글씨체; size: 사이즈; } } div { background-color : 원하는 색 &:hover { background-color: 원하는 색 } $defaultSize: 원하는 사이즈 p{ font-size: #{$defaultSize}; } styled-components class 이름 짓는 것을 안 할 수 있습니다! 컴포넌트에 스타일을 적기 때문에 비교적 간단하고 직관적이라 할 수 있습니다! 내용 const ..

TIL] 리액트 기초

웹의 동작 개념 웹페이지는 서버에서 미리 준비한 것을 받아서 그려주는 것입니다. 1. 요청을 보냅니다 -> 2. 받은 HTML 파일을 그려줍니다. 1에서 요청은 서버가 만들어 놓은 API에 정해진 약속대로 요청을 보냅니다! 서버와 클라이언트 클라이언트 : 웹사이트를 보는 도구는 전부 클라이언트입니다. 서버 : 우리가 보는 웹사이트에 뿌려줄 것을 만들어서 클라이언트에 전달합니다. 서버리스 서버리스는 서버가 없는 것이 아닌 서버를 내가 만들 필요가 없단 것입니다! 서버리스는 백엔드 리스가 아닙니다! Component(컴포넌트) 컴포넌트는 클래스형과 함수형이 있습니다. 리액트가 레고라면 컴포넌트는 블록이라 할 수 있습니다! State와 Props state는 컴포넌트가 가지고 있는 데이터입니다. state는 ..