잇!(IT) 블로그

- AXIOS는 Javascript 및 Node.js 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리이다. - Axios를 사용하면 웹 애플리케이션에서 HTTP 요청을 보내고 받는 작업을 간단하게 처리할 수 있다. - 이 라이브러리는 Promise 기반의 API를 제공하여 비동기적으로 HTTP 요청을 수행할 수 있으므로 서버와의 통신이나 API 요청을 쉽게 처리할 수 있다. 1. 간편한 HTTP 요청 : Axios를 사용하면 GET, POST, PUT, DELETE 등의 HTTP 요청을 쉽게 생성하고 보낼 수 있다. 2. Promise 기반 : Axios의 HTTP 요청은 Promise를 반환하므로 비동기적인 코드를 작성할 수 있다. 3. 요청 및 응답 인터셉터 : Axios는 요청을 보내기 전과..

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

- 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 "..." -> 해당 브랜치로 이동 - 위와 같이 새로운 브랜치를 생성하여 해당 브랜치로 이동하게 되면 새로운 흐름이 생성..