잇!(IT) 블로그

- 실행 구조 1. Spring Boot - Spring Boot는 내장된 웹 서버(Tomcat 등)을 사용하여 백엔드 서버를 실행한다. - 애플리케이션을 실행하려면 Java 개발 환경을 설정하고, 해당 애플리케이션을 빌드하여 실행해야 한다. 2. Vue.js - JavaScript 라이브러리이다. - Vue.js 애플리케이션은 일반적으로 정적 파일로 빌드되며, 이러한 정적 파일을 웹 서버(Apache, Nginx 등)를 통해 제공할 수 있다. - Vue.js 애플리케이션을 실행하기 위해서는 Node.js와 npm을 설지하고, 필요한 종속성을 설치한 후 개발 서버를 시작해야 한다. - Vue.js 설치 1. Vue.js는 JavaScript 라이브러리이기 때문에 Node.js와 npm을 기존에 설치해놓아..

- 위 화면의 왼쪽은 새로운 글을 작성하는 화면, 우측은 작성된 글을 수정하는 화면이다. - 아래 코드를 통해 자세히 알아보겠다. - New.js import { useEffect } from "react"; import DiaryEditor from "../components/DiaryEditor"; const New = () => { // 상단 title 바꾸기 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정 일기장 - 새일기`; }, []); return ( ); }; export default New; - 새로운 일기를 작성하기 위환 화면이다. Di..

- 위 사진은 최종 결과물의 홈화면이다 - 아래는 코드에 대한 분석이다. - App.js는 React 애플리케이션의 핵심 컴포넌트 중 하나로, 전체 애플리케이션의 렌더링 구조를 정의하는 역할을 한다. - React 애플리케이션은 컴포넌트들의 계층 구조로 이루어지며, App.js는 이 계층 구조의 최상위 컴포넌트이다. - App.js import React, { useEffect, useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Link, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/..

- Router - Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리이다. - 클라이언트 사이드 라우팅은 사용자가 웹 애플리케이션 내에서 다양한 페이지 또는 뷰로 이동할 수 있는 기능을 제공하는 것을 의미한다. - 페이지를 새로 로드하지 않고도 애플리케이션 내에서 다른 컴포넌트나 뷰로 전활할 수 있게 해준다. 1. Route : Route 컴포넌트를 사용하여 URL 경로와 연결된 React 컴포넌트를 정의한다. 2. Router : Router 컴포넌트는 애플리케이션의 최상위 컴포넌트로 사용된다. 2.1. BrowerRouter : HTML5 History API를 사용하여 URL을 관리한다. 대부분의 경우에 사용된다. 2.2. HashRouter : URL의 ..

- index.html - 위의 코드에서 가 React 애플리케이션을 렌더링할 컨테이너 역할을 한다. 1. JavaScript 파일 작성 : React 애플리케이션의 JavaScript 파일을 작성한다. 이 파일은 React 컴포넌트를 정의하고, 이 컴포넌트를 'ReactDOM'을 사용하여 'index.html' 파일의 컨테이너에 렌더링 하는 역할을 한다. 2. 'ReactDOM.render' 또는 'ReactDOM.createRoot' 사용 : 'ReactDOM'은 React 엘리먼트를 'index.html' 파일의 컨테이너에 렌더링하는 메서드를 제공한다. React18부터는 'createRoot' 메서드를 사용하여 렌더링을 시작할 수도 있다. - 임의의 js 파일 import React from 'r..

- useReducer - useReducer는 컴포넌트에서 상태변화 로직을 분리하기 위해 사용한다. const [state, dispatch] = useReducer(reducer, initialState); ----------------------------------- function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } ------------------------------------- dispatch({ type:..

useState: useState Hook은 함수 컴포넌트에서 상태를 관리하는 데 사용됩니다. 상태 변수와 해당 변수를 업데이트하는 함수를 반환합니다. useRef: useRef Hook은 DOM 요소 또는 다른 값을 참조하는 데 사용됩니다. current 프로퍼티를 통해 참조된 값을 유지합니다. useEffect: useEffect Hook은 부수 효과(side effect)를 수행하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 특정 작업을 실행하거나 정리할 때 사용합니다. useMemo: useMemo Hook은 계산 비용이 높은 계산 결과를 캐싱하고, 의존성 배열에 변화가 없는 한 결과를 재사용하는 데 사용됩니다. React.memo: React.memo 함수는 컴포넌트를 메모이제이션하여, 컴포넌트..

1. git clone으로 다른 컴퓨터에서 사용 - 터미널에서 작업 할 디렉토리로 이동하여 git clone으로 해당 repository를 복사해 온다. - 위와 같이 clone된 파일들이 보인다. * 새롭게 git init을 하여 새로운 저장소를 만들게 되면 기존의 저장소의 히스토리가 없기 때문에 관리가 복잡하기 때문에 주의하자 - branch - branch는 기존의 저장소 흐름에서 새로운 흐름을 새롭게 생성하여 독립적으로 개발 및 관리하기 위한 것이다. - 추후에 기존의 저장소 흐름에 합칠 수 있다. git branch "..." -> 새로운 브랜치 생성 git checkout "..." -> 해당 브랜치로 이동 - 위와 같이 새로운 브랜치를 생성하여 해당 브랜치로 이동하게 되면 새로운 흐름이 생성..

useMemo - useMemo란 1. 성능 최적화를 위해 사용된다. 2. 이전 결과를재사용함으로써 렌더링 성능을 향상시킬 수 있다. 결과값이 변하지 않을 경우 리렌더링 할 때 마다 연산을 하게 되면 성능 최적화가 되지 않기 때문이다. - 위와 같이 각 일기(객체)에는 감정 점수를 할당 할 수 있고, 중간에 결과값 같이 감정에 따른 비율을 측정하는 코드를 추가할 것이다. - App.js ....... const getDiaryAnalysis = () => { console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goo..

https://insoobaik.tistory.com/505 React - 사용자 입력 처리 / DOM 조작(useRef) / API 호출 * 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. insoobaik.tistory.com - 앞서서 사용자 입력, DOM 조작(useRef), API 호출에 대해 알아보았다. - 리스트 렌더링 / 데이터 추가, 삭제, 수정 - 이번에는 받아온 데이터 리스트를 렌더링하고, 데이터 추가, 삭제, 수정 하는 것에 대해 알아 볼 것이다. - App.js ...... return ( ); } - DiaryList 컴포넌트로 onEd..