뚝딱뚝딱 코딩 기록_

input으로 첨부한 이미지 미리보기에 대해 알아보자 1. 파일 첨부 지난 포스팅에서 input 파일을 첨부하고 버튼 꾸미는 방법에 대해 소개했다. 궁금하다면 포스팅 참고하기 👉[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 2. 이미지 경로 추가할 state 생성 `````` import React, { useState } from 'react'; // 생략 `````` const [imgPath, setImgPath] = useState(); // 단일 이미지 const [imgPath, setImgPath] = useState([]); // 여러 이미지 💡 이미지를 여러장 보여줄 경우 배열로 state를 생성한다. 3. label 태그에 onChange 이벤트 추..

input 파일 첨부 폼 꾸미는 법에 대해 알아보자    파일을 첨부하고 싶은 경우에 input 태그에 있는 type='file'을 사용한다. 그러면 아래 사진처럼 기본 폼이 나타난다.하지만 이렇게 나타나는 것은 예쁘지 않으니 label을 사용하여 꾸며보자  1. label로 감싸고 htmlFor를 이용하여 input과 연결하기 업로드 // 버튼에 들어갈 원하는 글자     💡 input : 반드시 label 안에 들어갈 필요는 없음 - 원하는 위치에 놓으면 됨    ❗ 주의할 점 : label의 htmlFor과 input의 id를 동일하게 입력해야 함  2. CSS로 label을 버튼처럼 꾸미기    - 예시.inputFile { display: none;}.inputFileLabel { co..

[React_ useEffect 활용하기] useState 업데이트가 한 박자씩 느린 경우를 해결하는 방법을 알아보자 리액트 useState를 사용하여 state를 업데이트 하다보면 한 박자 씩 느리게 나오는 되는 경우가 있다. useEffect를 사용하면 된다고 해서 사용을 해 보았는데 똑같은 결과가 출력되었다. - App.jsx import React, { useState } from 'react'; imoprt DataPage from './dataPage'; export default function App () { const [data, setData] = useState( { name: null, age: null, job: null, } ); // state 업데이트 함수 const upda..

[React_header title] 웹 페이지의 header title을 바꾸는 방법에 대해 알아보자 사진과 같이 header에 있는 title을 페이지마다 다르게 하고 싶을 수 있다. 그런 경우는 간단하게 바꿀 수 있다. import React, { useEffect } from 'react'; `````` useEffect(() => { const titleElement = document.querySelector("title"); titleElement.innerHTML = `바꾸고 싶은 내용`; }, []); 💡 document.querySelector로 title을 가져온 후 innerHTML을 사용하여 내용을 바꿔준다 💡 페이지마다 useEffect 를 사용하여 페이지가 렌더링 되었을 때 바..

[React_useNavigate] 리액트에서 화면 이동 방법에 대해 알아보자 1. 리액트 라우터 설치 npm install react-router-dom or yarn add react-router-dom 2. 라이브러리 임포트 import { BrowserRouter, Route, Routes } from 'react-router-dom'; 3. App.jsx - BrowserRouter export default function App () => { return ( //컴포넌트 ) } 4. path 지정 - Routes, Route `````` import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Component1 from..

[React_ react-create-app] 👉React 공식문서 바로가기👈 React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org ❔ React - UI 구축을 위한 자바스크립트 라이브러리 - html과 자바스크립트 표현식을 동시에 사용 가능 - Virtual DOM (가상 돔)을 생성하고 이전 상태와 비교하여 변경된 부분만 업데이트 ❓ React 설치 1. node.js 설치 👉 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScr..

[Project_EKHANA Renewal] 🚍 프로젝트 소개 📄 목적 : EK하나관광 기존 홈페이지 리뉴얼 📄 내용 관광버스 견적을 요청하고 이를 처리할 수 있는 서버 재구축 불필요한 기존 기능들 (게시판, 공지사항 등)을 제외 기존 기능 보완/강화 (견적요청시 알람-이메일 기능) 홈페이지 UI 리뉴얼 📄 기능 견적 요청하기 견적 목록 확인하기 나의 견적 목록 확인하기 회사 정보 관리자 페이지에서 업데이트 / axios REST API 모바일 웹 화면 / react-device-detect 📄 개발 기간 : 약 4주 🚍 사용 기술 📄 front Library : React, Material-UI API : axios, useNavigate 📄 back Spring boot, Thymeleaf, Spri..