Web/React

1️⃣ JSX란? 자바스크립트 문법을 확장시킨 것 ex. const element=Hello, world!; HTML의 h1코드와 자바스크립트 대입 연산자가 결합되어있음 2️⃣ JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침 JSX로 코드를 작성해도 최종적으로 자바스크립트 코드가 나오게 됨 JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는게 리액트의 createElement() JSX가 js로 변환되기 위해선 createElement가 필요함 순수하게 js만 사용했을때 jsx를 사용한 부분을 React.createElement로 대체해서 사용해야함 JSX 문법을 사용하면 리액트에서는 내부적으로 createElement라는 함수를 사용하게 변환됨 3️⃣ J..

1️⃣ HTML만으로 간단한 웹사이트 만들기 소플의 블로그에 오신 여러분을 환영합니다! 2️⃣ CSS를 사용하여 웹사이트 스타일링하기 h1{ color:green; font-style: italic; } 3️⃣ 웹사이트에 React.js 추가하기 소플의 블로그에 오신 여러분을 환영합니다! function MyBtn(props){ const [isClicked, setIsClicked]= React.useState(fasle); return React.createElement( 'button', {onClick: ()=> setIsClicked(true)}, isClicked ? 'Clicked!' : 'Click here!' ); }; // 리액트 컴포넌트를 DOM 컨테이너에 렌더링하는 코드 const ..

1️⃣ 리액트는 무엇인가? 💚 리액트의 정의 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리: 자주 사용되는 기능을 정리해 모아 놓은 것 💚 다양한 자바스크립트 UI 프레임워크 앵귤러JS: 프레임워크, 지원 종료 리액트: 라이브러리, 지원 중 뷰JS: 프레임워크, 지원 중 프레임워크 vs 라이브러리 프로그램 흐름에 대한 제어 권한 프레임워크는 개발자가 아닌 프레임워크에게 라이브러리는 개발자가 필요한 부분만 가져다 사용, 흐름에 제어 X 💚 리액트 개념 정리 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집 SPA를 쉽고 빠르게 만들 수 있는 도구 2️⃣ 리액트의 장점 💚 빠른 업데이트와 렌더링 속도 Virtual Dom 사용 웹페이지와 실제 DOM 사..

1️⃣ HTML 살펴보기 💚 HTML이란 무엇인가? Hyper Text Markup Language 마크업 언어의 한 종류 마크업: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미 태그()라고 부르는것을 사용하여 웹사이트 구조 만듦 💚 웹사이트의 뼈대를 구성하는 태그들 : 뼈대 : 웹사이트의 여러 속성 (제목, 설명) 등 메타 데이터를 담음. : 실제 웹사이트에서 보여지는 콘텐츠들 💚 SPA 여러가지 버튼이나 탭을 누르며 페이지를 이동할 때, 브라우저에서 나오는 내용이 바뀜 → 각 페이지별로 HTML 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시함 → 페이지 수가 너무 많아지는 문제 이를 해결하기 위해 SPA등장 (Singl..