기술 창고(231)
-
[React] 클래스 Components VS 기능 Components
ReactApp에 state(상태)를 관리하고 제어하는 방법에는 크게 두 가지가 있는 것으로 알고있습니다. 그게 클래스 컴포넌트, 기능 컴포넌트 입니다. 기능 Components import React, { useState } from "react"; function FunctionalComponent() { const [count, setCount] = useState(0); function increase() { setCount(count + 1); } return ( {count} + ); } export default FunctionalComponent; 기능 컴포넌트는 제가 이전부터 공부하고 정리했던 내용들처럼 function 함수를 사용한 컴포넌트 구성이라고 볼 수 있습니다. 상태(state)..
2023.08.29 -
[React] React Form (추가 이벤트 핸들링)
이전에는 간단한 React 이벤트 핸들링에 대해서 정리해보았습니다. 이번에는 그보다 조금 더 심화적인 형식에 대해서 정리해보겠습니다. 웹 앱을 만들 때 로그인, 등록, 접근을 위한 형식을 만드는 것은 아주 흔한 작업이라고 볼 수 있습니다. 그리고 이 형식이 어떻게 동작하는지 이해하려면 상태를 설정하고 사용하는 법을 알아야 합니다. 그래서 이번에는 입력 요소로 사용자가 입력하는 값을 얻는 방법과 사용자가 입력한 정보를 사용하기 위해 버튼을 사용하는 방법을 살펴보겠습니다. 버튼을 클릭했을 때 onClick과 같은 속성을 통해 이벤트를 제어하는 것처럼 입력하는 동작에 있어서도 이벤트가 존재합니다. input 태그 안에 onChange라고 하는 속성을 사용하면 입력값이 바뀔 때마다 매번 트리거가 작동되어 사용자..
2023.08.29 -
[Spring Boot] Spring Boot Stater Projects
Spring Boot 에서 중요한 기능 중 하나는 Spring Boot Starter Projects 입니다. 일반적으로 어플리케이션을 빌드할 때에는 프레임워크가 많이 필요합니다. 예를 들어, Rest API를 빌드하려면 Spring 프레임워크, Spring MVC 프레임워크가 필요하고, Tomcat도 필요합니다. 어플리케이션을 실행하려면 json 변환까지 수행해야 합니다. 단위 테스트를 수행한다고 가정했을 때에는 Spring Test 프레임워크가 필요하고 Junit이나 Mockito 프레임워크가 필요합니다. 따라서 어플리케이션 기능을 빌드할 때마다 수많은 프레임워크가 필요합니다. 이러한 수많은 프레임워크들을 그룹화해서 어플리케이션을 쉽게 빌드할 수 있을까요? Starter Projects가 그 역할을 ..
2023.08.28 -
[Spring Boot] Spring Boot의 목표
spring boot 의 가장 중요한 목표는 프로덕션 환경에서 사용 가능한 어플리케이션을 빠르게 빌드할 수 있도록 하는 것입니다. 조금 더 길게 풀어 얘기해보자면 많은 기능을 가진 어플리케이션을 빠르게 빌드할 수 있는 것을 목표로 하는 것입니다. spring boot를 사용해 어플리케이션을 빠르게 빌드하는 기능들 (1) spring initializer (2) 웹사이트 활용 (start.spring.io) (3) spring boot starter projects - 프로젝트의 의존성을 빠르게 정의할 수 있습니다. (4) spring boot auto contiguration - 클래스 경로에 있는 의존성에 따라 자동으로 설정이 가능합니다. (5) spring boot devtools - 수동으로 서버를..
2023.08.28 -
[React] React 이벤트 핸들링
React의 이벤트 처리에 대해 좀 더 정리해보겠습니다. 사용자가 앱 또는 구성 요소와 언제 상호 작용하는지 어떻게 감지하는지 그런 이벤트에 따라 어떻게 반응하는지 이런 여러 이벤트에 대한 정리라고 볼 수 있을 것 같습니다. index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); [App.jsx] import React from "react"; function App() { return ( Hello Submit ); } export default App; 간단한 텍스트를 입력할 ..
2023.08.28 -
[Javascript] Object, Array Destructuring (분해)
자바스크립트에서 Object, Array 에 들어있는 데이터들을 Destructure 하여 사용하는 방법에 대해서 알아보겠습니다. 이렇게 사용하는 방법은 api를 연동하여 json 형식의 데이터들을 불러올 때 매우 유용하게 사용할 수 있습니다. animals.js const animals = [ { name: "cat", sound: "meow" }, { name: "dog", sound: "woof" } ]; export default animals; index.js import animals from "./data" // (1) console.log(animals); // 결과 : [Object, Object] // (2) const [cat, dog] = animals; console.log(cat..
2023.08.03