React란? React는 공식 홈페이지에서 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리라고 소개되어있다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 메타(Meta)에서 개발한 오픈 소스 자바스크립트 라이브러리이며, 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적인 웹에서 엄청나게 빠른 퍼포먼스를 낼 수 있다. 그리고 기본적으로 모듈형 개발이기 때문에 생산성도 높다. 또한 React Hooks라는 강력한 메소드들을 지원하고 있다. 장점 프레임워크가 아닌, 라이브러리이다. 리렌더링..

상태란? 리액트(React)에서 state는 컴포넌트의 현재 상태를 나타내며, 사용자 상호작용이나 다른 이벤트에 의해 데이터가 변할 때 UI를 갱신하는 데 사용된다. state는 컴포넌트 내에서 캡슐화되어 있으며, React의 useState 훅을 사용해 관리된다. Counter.tsx import {useState} from 'react'; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); } const onDecrease = () => { setCount(count - 1); } return ( // 0에서 출발, 1씩 증가 / 1씩 감소 {count} ..

가 아닌 로 사용하는 것을 셀프 클로징 태그라고 한다. ES Module이란 무엇인가? ES6에 도입된 모듈 시스템. import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다. CSS 파일을 사용하여 스타일링하기 MyHeader.tsx 내보내기(export) const MyHeader = () => { // 컴포넌트 내에 return 필요 return 헤더; }; export default MyHeader; App.css .App, h2, #bold_text 추가 .App { background-color: black; } h2{ color: red; } #bold_text { color: green; } App.tsx React에서는 html 태그에서 class 속성..

보호되어 있는 글입니다.

node.js를 설치한 후에, 리액트 프로젝트를 생성한다. node.js 설치하기 이전 게시글을 참고 https://dev-wisdom.tistory.com/167 [node.js] node.js 설치하기(feat. Homebrew 설치) node.js를 설치하기 전, 먼저 패키지 관리프로그램인 homebrew를 설치한다. Homebrew 설치하기 링크: https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh Homevrew 홈페이지에 접속해서 dev-wisdom.tistory.com 리액트 프로젝트 생성 터미널을 실행한 후 아래 명령을 입력한다. npx create-react-app [프로젝트..

spring initaializr spring initaializr로 spring 시작환경 구성하기 spring boot 기반으로 프로젝트를 생성해주는 사이트로 project를 다운로드 하여 쉽게 사용할 수 있다. 링크: https://start.spring.io/ Dependencies 프로젝트 내에서 사용할 라이브러리를 선택한다. 추가한 dependencies Lombok Spring Configuration Processor Spring Boot DevTools Spring Web Spring Web Service MariaDB Driver Spring Data JPA Lombok Java 라이브러리로 반복되는 getter, setter, toString등의 메서드 작성 코드를 줄여주는 코드 다이어..