이번 포스팅에서는 React의 핵심 개념인 컴포넌트에 대해서 다루어 보겠습니다. 이제부터는 본격적으로 To Do List를 만들면서 진행하도록 하겠습니다. 소스코드는 To Do List의 오픈소스 프로젝트 사이트를 참고하였습니다. 1.컴포넌트(Component)란? 컴포넌트는 앱의 재사용가능한 작은 UI 조각입니다. To Do List를 예로 들어보면 위의 검은색, 분홍색, 보라색, 파란색 박스들이 모두 컴포넌트입니다. 위의 박스들 말고도 버튼, 글자들도 모두 컴포넌트에 해당됩니다. 이처럼 컴포넌트는 사용자가 정의하기 나름입니다. 2. 컴포넌트 렌더링 컴포넌트 정의하기 컴포넌트는 상호작용하는 마크업을 반환하는 Javascript 함수 형태입니다. 컴포넌트 안에 마크업과 기능이 모두 들어있죠. 먼저 Hel..

이번 포스팅에서는 JSX에 대해 다루겠습니다. 1. JSX란? JSX란 JavaScript XML의 약자로 Javascript 확장 문법입니다. React 개발 환경을 구축할 때 설치된 App.js, index.js파일을 보면 코드가 다음의 형태입니다. //App.js //import 부분 import React from 'react'; import logo from './logo.svg'; import './App.css'; //main 부분 function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; HTML파일에서 사용하는 "태그"들과 Javascript에서 사용하는 "function..

이번 포스팅에서는 React의 기본적인 동작인 엘리먼트 렌더링에 대해서 다루겠습니다. 1. 엘리먼트란? React의 엘리먼트란 "React 애플리캐이션을 구성하는 블록"입니다. const element = Hello World; 엘리먼트는 위의 코드처럼 화면에 보이는 것들을 기술하며, 한 번 생성된 이후에는 자식이나 속성을 변경할 수 없습니다. 2. 엘리먼트 렌더링 먼저 DOM이란 Document Object Model의 약자로 웹의 문서 객체 모델입니다. 페이지를 구성하는 모든 엘리먼트들은 React DOM에서 관리합니다. 엘리먼트를 렌더링하기 위해서는 DOM 엘리먼트를 ReactDom.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다. 저번 포스팅..

이번 포스팅에서는 React를 시작해 보겠습니다. React를 시작하기 위해 먼저 몇 가지 프로그램을 설치하고 작업 환경을 구성해야 합니다. 1. 기본 프로그램 설치 Node js 먼저 Node js 공식 사이트에서 LTS버전을 설치해 주세요. 설치 후 node.js Setup파일을 실행시켜 설치를 진행합니다. 설치 후 node -v 명령어를 통해 설치 여부를 확인할 수 있습니다. npm node를 설치했다면 npm이 자동으로 설치됩니다. 터미널에서 npm -v 명령어를 통해 확인할 수 있습니다. React 어플리케이션 설치 CRA로 React어플리케이션을 설치합니다. 다음 두 가지 명령어를 통해 React 어플리케이션을 설치할합니다. 파일 이름을 대문자로 할 경우 오류가 발생하니 소문자로 이름을 지어주..

최근 웹개발의 트렌드는 빠르게 변화하고 있습니다. 그만큼 여러 개발 도구들이 등장하고 발전하고 있는데요, React도 이러한 개발 도구들 중 하나입니다. 어떤 개발 도구나 프레임워크라도 "왜 쓰는지" 혹은 "그 툴의 장점이 무엇인지?"를 알고 쓰는 것이 중요합니다. 이번에는 React를 공부하기에 앞서 왜 React를 써야 하는지 React가 가지는 특징을 중심으로 알아보려고 합니다. 1. React란? 페이스북(현재 메타)에서 개발한 Javascript UI 라이브러리를 말합니다. 2. React의 등장 배경 2000년대 초 Web 2.0과 SPA(Single Page Application)의 등장으로 사용자가 웹페이지에서 정보를 주고받으며 상호작용할 수 있게 되었습니다. 이에따라 많은 웹서비스들이 등..

티스토리 블로그에 처음 입문했을 때는 기능들도 복잡하고 설정을 익히느라 정신이 없기 마련입니다. 하지만 초보를 벗어나는 단계가 오면 이제 블로그의 여러 기능들을 능숙하게 다룰 수 있게 됩니다. 이 때부터는 나만의 개성있는 블로그를 만들고 싶어지는데요 대표적으로 다음과 같은 것들을 할 수 있습니다. 나에게 맞는 플러그인 적용하기도메인을 구매하여 나만의 도메인 사용하기나만의 커스텀 스킨 적용하기이번 포스팅에서는 세 번째 나만의 커스텀 스킨 적용하기에 대해 다루어 보려고 합니다. 티스토리 스킨은 기본 제공 스킨과 커스텀 스킨 이렇게 두 가지가 있습니다. 기본 제공 스킨[블로그 관리 페이지]에서 [꾸미기] 목록의 [스킨 변경]에 들어가면 여러 기본 스킨들을 볼 수 있습니다. 이 중에서 원하는 스킨 미리보기하거나..

React 톺아보기 시리즈에서는 React 공식 문서를 바탕으로 기초부터 심화까지의 내용을 정리하도록 하겠습니다. 프로그래밍 공부는 프로젝트에 실전적으로 적용하면서 배우는 Project Based Learning이 정말 중요합니다. 따라서 공식 문서의 틱 택 토, To Do List를 만들어 보면서 React의 주요 내용들을 적용해 보도록 하겠습니다. 참고 자료들 React 공식 문서 리액트의 공식 사이트에 있는 문서입니다. React의 기본부터 심화까지 다룹니다. CRA CRA는 페이스북에서 만든 공식 React 개발용 Boilerplate입니다. 간단히 말해서 React 개발 환경 구축 툴입니다. React를 공부하면서 CRA를 굉장히 많이 사용할 텐데, 이 문서는 CRA에 대한 설명 뿐만 아니라 C..

1. 한국어 2. Pretter - Code formatter 3. Live Server 4. HTML Snippets 5. vscode icons 6. image preview