잇!(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의 ..

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

* 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. - 위와 같이 Event를 통해 부모 컴포넌트에서 자식 컴포너트로부터 데이터를 전달받고, 자식 컴포넌트로 데이터를 전달하는 것을 확인 할 수 있다. - 사용자 입력, 입력 화면 - App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import Lifecycle from "./Life..

- Javascript 코드 function changePhone1(){ const phone1 = document.getElementById("phone1").value if(phone1.length === 3) { document.getElementById("phone2").focus() } } function changePhone2(){ const phone2 = document.getElementById("phone2").value if(phone2.length === 4) { document.getElementById("phone3").focus() } } function changePhone3(){ const phone1 = document.getElementById("phone1").valu..

- html 코드 회원가입 - - 000000 인증번호 전송 3:00 인증 완료 지역을 선택하세요. 서울 경기 인천 여성 남성 가입하기 - - onchange는 사용자가 입력 필드나 선택 옵션 등의 값을 변경하고 포커스를 다른 요소로 옮겼을 때 발생한다. - onkeyup은 사용자가 키보드의 키를 누르다가 뗄 때 발생한다. 인증번호 전송 - button 속성에 disabled 코드를 추가하면, 버튼이 비활성화 된다. - select 태그를 사용하면 위와같은 선택지를 만들 수 있다. 지역을 선택하세요. - select 태그의 하위 옵션인 option에서 disabled를 입력하게 되면 선택할 수 없는 상태로 변하고, selected가 되면 최초에 해당 option이 선택된다. - css 코드 * { box..