1. 컴포넌트를 페이지에서 렌더링하기 App.js import "./App.css"; const Header = () => { return ( header ); }; function App() { return ( ); } export default App; 리액트는 다른 컴포너트를 태그로 감싸 사용한다. 이때 App처럼 다른 컴포넌트를 return문 내부에 포함하는 컴포넌트를 '부모 컴포넌트'라고 하며, App의 return문에 포함된 컴포넌트를 '자식 컴포넌트'라 한다. Index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const r..
프론트엔드
1. 엘리먼트(Element)란? 엘리먼트는 리액트 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술한다. const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. 하지만 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이며 상대적으로 DOM 엘리먼트가 리액트 엘리먼트에 비해 많은 정보를 담고 있어서 크고 무겁다. 1) 엘리먼트 렌더링 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다. 이 코드는 root라는 id를 가진 태그이다. 이 안에 들어가는 모든 엘리멘트는 리액트 DOM에서 관리하기 때문에 이것..
1. 리액트(React) 란? React는 사용자 인터페이스를 구축하기 위한 자바스크립트(JavaScript) 라이브러리이며, “컴포넌트”라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 사이트의 규모가 커지면 커질수록 필요한 수많은 페이지를 잘 만들어 관리한 다는 것은 쉬운 일이 아니다. 따라서 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트라 할 수 있다. 2. JSX란? JSX는 자바스크립트의 확장 문법이다. JSX의 대표적인 코드는 아래와 같다. const element = Hello, world!; const element 까지는 자바스크립트에서 흔히 사용하는 변수 선언이다. 하지만 그 옆을 보면 HTML 코드가 등장하는 것을 볼 수 있다. 즉 ..
1. 웹 와이어프레임(Wireframe)이란? 웹 와이어프레임은 웹사이트의 기본 레이아웃과 구조를 시각적으로 표현하는 것입니다. 일반적으로 흑백 또는 회색 톤으로 표현되며, 주로 한글이나 워드에서 간단한 선, 상자, 텍스트 등으로 구성됩니다. 웹 사이트를 만들 때 효과적인 UI 설계를 위해서는 목표는 무엇인지, 사용자는 누구인지, 사이트 맵, 정보 구조 등등을 고려하여 순차적으로 진행하는 것이 일반적입니다. 하지만 해당 글은 HTML 실습을 위하여 웹 사이트 만들기를 진행하는 것임으로 일련의 과정들을 생략하고 메인 페이지의 레이아웃과 요소 배치부터 실행하려 합니다. 초보자들은 충분한 배경지식이 없는 상태에서 바로 레이아웃을 배치하는 것이 쉽지 않습니다. 그러므로 추천드리기는 비교적 레이아웃 배치가 간단한..
