💡불변성이란? 사전적 의미에서 불변성(Immutability)은 값이나 상태를 변경할 수 없음을 의미한다. 그리고 프로그래밍에서의 불변성은 메모리 영역에서 값이 변하지 않도록 하는 것을 의미한다. "불변성을 지킨다"라는 말은 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다. 왜 React에서 불변성을 유지해야 할까? React는 상태(State)를 업데이트할 때, 이전 상태와 새로운 상태를 비교하여 렌더링을 결정한다. 이를 위해 React는 얕은 비교(Shallow Comparison)를 수행하는데, 이는 객체나 배열의 참조 주소만 비교한다는 의미이다. 만약 상태를 업데이트할 때 불변성을 유지하지 않으면, 이전 상태와 새로운 상태가 동일한 참조를 가리키게 되어 React가 상태 ..
Back-End는 Spring으로, Front-End는 React 환경으로 개발 환경을 만들어 보도록 하자. 한 프로젝트 내에서 Spring으로 백엔드를 구축하고 React로 프론트엔드를 개발하는 방식은 백엔드와 프론트엔드를 동시에 관리하고 통합하는 편리한 방법이다. 이와 같은 구조를 사용하면 하나의 코드베이스에서 모든 업무를 처리할 수 있으며, 백엔드와 프론트엔드를 동시에 빌드할 수 있어 개발과 배포를 간편하게 관리할 수 있다. 하지만 이러한 구조에도 단점은 존재한다.🤔 React는 정적인 앱으로, 백엔드가 종료되어도 프론트엔드는 여전히 작동할 수 있다. 그러나 이러한 구조에서는 백엔드가 종료되면 프론트엔드도 동시에 종료되므로 전체 시스템의 안정성에 대한 리스크가 있다. 또한, 두 애플리케이션의 빌드가..
Spring Boot와 React 프로젝트 간 Rest API를 연동하는 방법에 대해 알아보도록 하자. 이를 통해 백엔드와 프론트엔드 간의 통신을 설정하여 데이터를 주고받을 수 있다. 💡Spring Boot 프로젝트 생성 Spring Starter Project Spring Starter Project로 새로운 Spring Boot 프로젝트를 생성한다. 의존성 라이브러리로는 Spring Boot DevTolls, Lombok, WebSocket, MyBatis Framework, Oracle Driver, Thymeleaf, Spring Web을 추가하였다. 또는 Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성하여 Import해도 된다. Application.jav..
💡프로젝트 구조 React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다. 이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다. 프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리 index.js 살펴보기 프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다. src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 ..
💡React React는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다. 간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다. 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점 React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다. Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다. 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. ..
