이전에 Bootstrap이 어떠한 것인지 어떠한 용도로 사용되는 것인지 얼마나 개발자에게 효율적으로 도움을 줄 수 있는지 확인해 보았습니다. 이번에는 제가 원하는 사이트를 BootStrap 으로 빠르게 만들어보겠습니다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com Bootstrap을 잘 사용하기 위해서는 해당 ..

App.jsx import React, { useState } from "react"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { const newValue = event.target.value; setInputText(newValue); } function addItem() { setItems(prevItems => { return [...prevItems, inputText]; }); setInputText(""); } return ( To-Do List Add {items.map(todoItem => ..

어플리케이션의 복잡한 설정을 지정하는 방법에 대해서 알아보겠습니다. 현재 통신하고 있는 통화 서비스가 있고, 이 서비스의 여러 값을 설정한다고 가정해보겠습니다. 위의 이미지와 같이 application.properties에 설정값들을 설정하고 그 외에 다른 기타 부수적인 설정들도 존재한다고 가정하겠습니다. Spring Boot를 사용하여 이 어플리케이션 설정들을 관리할 수 있는 방법은 무엇일까요? 여기서 Property 값을 정의하고 Spring Boot 어플리케이션에서 활용할 수 있는 방법은 무엇일까요? 어플리케이션을 위해 어필리케이션 설정을 많이 생성하려고 하는 경우 Spring Boot 에서 권장되는 방식은 Configuration Properties를 사용하는 것입니다. Configuration ..

이번에는 프로덕션 환경에서 사용 가능한 어플리케이션을 쉽게 만들어 배포할 수 있도록 하는 Spring Boot의 중요한 기능을 몇 가지 알아보겠습니다. Profile 기능 첫 번째로 살펴볼 기능은 Profile을 사용하여 어플리케이션 설정을 관리하는 기능입니다. 어플리케이션에는 다양한 환경이 있습니다. 개발 환경, QA 환경, 스테이지 환경, 프로덕션 환경 등등. 동일한 어플리케이션의 다양한 환경에서는 다양한 설정이 필요합니다. 동일한 코드에서 다양한 환경에 대한 다양한 설정이 있어야 할 필요가 있죠. 다른 데이터베이스와 통신하거나 다른 웹 서비스를 호출할 수도 있습니다. 개발 환경은 개발 데이터베이스와 통신하고 테스트 환경은 테스트 데이터베이스와 통신하며, 프로덕션 환경은 프로덕션 데이터베이스와 통신합..

DevTools를사용하면 개발자의 생산성을 높일 수 있습니다. 개발자들이 어플리케이션을 빌드할 때면 아주 빠르게 빌드하기를 바랍니다. 그래서 개발자에게 있어 생산성은 정말 중요하다고 볼 수 있습니다. 흔히 처음 개발을 접하거나 주니어 개발자들이 코드를 변경하거나 할 때 수동으로 서버를 재시작하는 모습을 볼 수 있는데 그렇지 않고 자동으로 서버를 다시 시작하고 코드에 대한 변경사항을 적용하는 것을 DevTools를 통해 수행할 수 있습니다. DevTools 사용 DevTools를 사용하려면 pom.xml을 사용하거나 build.gradle을 사용해야 합니다. 저의 경우 gradle 환경이기 때문에 build.gradle을 사용합니다. 그리고 spring-boot-devtools 디펜던시를 추가해줍니다. 그..

Spread 연산자는 기존에 길게 작성되었던 코드를 단순화하여 줄일 수 있는 연산자입니다. 예를 들어 if문으로 여러 조건을 가진 코드를 spread 연산자를 통해 줄여줄 수 있습니다. 이를 arrow function과 useState 에 접목해서 사용하는 방식에 대해서 알아보겠습니다. 기존 방식의 긴 코드 작성 App.jsx import React, { useState } from "react"; function App() { const [contact, setContact] = useState({ fName: "", lName: "", email: "" }); function handleChange(event) { const { name, value } = event.target; setContact..