잇!(IT) 블로그

** - post 전송 시 crsf 까먹지 말기!! ** 1024 포트 이하 sudo 꼭 붙여서 실행하기 1. git bash에서 프로젝트 폴더로 가서 ./gradlew build 를 통해 jar 파일을 생성한다. - plain은 사용하지 않는다. - java 설치해야한다. - 보안 그룹 확인 잘하기 - 앱 계속 유지되게 하기위해 사용한다. - 애플리케이션 끄는 방법 - 뭔 aws에 배포할 때 return 앞에 /money/moneyForm처럼 /를 맨앞에 붙이게되면 //로 인식되어 오류가 발생한다!!! 조심!!! - filed를 통해 값을 전달 할 수 있다. object 이름이랑 전달 받는 객체명이랑 같으면 매핑되서 전달된다. - 주소값이 다르기 때문에 문자열이 서로 다른 것으로 인식되기 때문에 equ..

https://insoobaik.tistory.com/518 Vue, Spring - 간단한 블로그 만들기 - 2 (views 생성 및 Spring 데이터 요청 및 응답) https://insoobaik.tistory.com/517 Vue, Spring - 간단한 블로그 만들기 - 1 (Vue 설정) - 실행 구조 1. Spring Boot - Spring Boot는 내장된 웹 서버(Tomcat 등)을 사용하여 백엔드 서버를 실행한다. - 애플리케이션을 실행 insoobaik.tistory.com - 이전 블로그의 Home 페이지, Read 페이지에 이어 글을 작성하는(Write) 화면과, 글을 수정하는(Edit) 화면에 대한 작업을 할 것이다. - Header.Vue의 코드 중 Home Write 위 ..

https://insoobaik.tistory.com/517 Vue, Spring - 간단한 블로그 만들기 - 1 (Vue 설정) - 실행 구조 1. Spring Boot - Spring Boot는 내장된 웹 서버(Tomcat 등)을 사용하여 백엔드 서버를 실행한다. - 애플리케이션을 실행하려면 Java 개발 환경을 설정하고, 해당 애플리케이션을 빌드하여 실행 insoobaik.tistory.com - 이전 Vue의 기본적인 설정들을 마치고, views 페이지들을 생성하고, 이전에 만들어둔 Spring 서버로 요청하고 응답을 받아 볼 것이다. path / /write /read/:postId /edit/:postId component HomeView WriteView ReadView EditView - ..

- 실행 구조 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의 ..

- 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:..

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..