개발 일기

intellij에서 gradle을 통해 바로 서버를 실행할 수도 있지만 명령 프롬프트를 이용하여 빌드 후 실행하는 방법도 있다. 일단 돌리고 있는 서버가 있으면 localhost:8080을 중복해서 사용할 수 없으므로 종료 후 실행해야 한다. 1. 빌드하기 1-1) 실행하고자 하는 폴더 경로로 이동(cd ~) 1-2) graldew 1-3) gradlew build build가 되고 나면 실행하고자 하는 폴더 아래 build > libs에 두가지 jar 파일이 생성됨 2. 실행하기 해당 폴더 > build > libs로 이동하여 jar 파일 실행 java -jar hello-spring-0.0.1-SNAPSHOT.jar 입력 후 제일 아래 Started가 보인다면 실행 완료! localhost:8080으..

spring boot에서는 welcome page라는 기능을 제공한다. 서버를 돌리고 localhost:8080으로 접속했을때 보이는 기본 페이지를 말하는 것이다. welcome page는 프로젝트의 src > main > resources > static 경로 내에 index.html로 작성하면 된다. 이렇게 index.html에 기본 화면을 html 파일로 작성하고 나서 서버 실행을 하면 localhost:8080으로 접속했을 때 기본 화면으로 설정한 index.html을 볼 수 있다! spring boot에서 기본적으로 제공하는 기본 내용들은 사이트에서 다 확인이 가능한데 https://spring.io/ 로 접속하여 projects > springboot로 이동하면 현재 사용하는 버전의 Refer..

1. 설치 - npm install react-bootstrap bootstrap - package.json에 추가 2. import https://react-bootstrap.netlify.app/docs/getting-started/introduction css부분 사용하고 싶은 component 파일에 import 하 import 'bootstrap/dist/css/bootstrap.min.css'; 3. 경로 추가(router.js) - 부트스트랩 쓰고자 하는 파일은 Create.js - Home의 하위 경로가 아닌 별도 파일로 빼서 Video 등록 폼을 만들 예정 4. component 작업 https://react-bootstrap.netlify.app/docs/getting-started/i..

기본화면에서 음료 목록(home) 출력 후 추가버튼 누를 시 음료명과 설명 추가할 수 있는 폼 추가하기 필요한 기능 크게 구분해보자면 1. 목록 보기 / 목록 화면에서 삭제 버튼 누르면 삭제되는 기능 (Home) 2. 추가 버튼 눌렀을 때 음료명과 설명 input 폼으로 이동하기 (Create) 3. 링크 이동을 위한 BrowserRouter, Routes, Route, Link (App) import 관련 import { BrowserRouter, Routes, Route, Link, useNavigate, } from "react-router-dom"; // NavLink는 Link랑 다르게 active 활성화 됨 import { useState } from "react"; import "./App...

1. axios(서비스 기반 비동기 처리) 설치 - Terminal 에서 npm i axios 설치 2. 연결 경로 지정 - src > api > video.js (api 관리하는 파일 별도로 생성하여 지정) - 위에서 basURL로 지정한 경로는 카테고리 목록 select로 가지고오는 경로임 - 경로 관리하는 파일을 따로 만들어 export 했기 때문에 전역에서 사용 가능 - 카테고리 목록 받아올 component에서 import 후 사용하면 됨 3. Controller에서 CrossOrigin 추가 4. Home.js 에서 목록와서 보여주기 const [categories, setCategories] = useState([]); const categoryAPI = async () => { const ..

App.js import { useState } from "react"; const App = () => { const [counter, setCounter] = useState(0); const setCount = () => { setCounter(counter + 1); }; return ( Total clicks : {counter} Click! ); }; export default App; * point 1. jsx 문법 - document.querySelector().innerHTML 대신 {counter} 2. useState import {useState} from 'react'; const [counter, setCounter] = useState(0); - counter : state에 ..

https://nodejs.org/ko * LTS 버전 다운로드 * https://ko.legacy.reactjs.org/ 리액트 공식문서(한글) CDN 링크 : 리액트 - 자바스크립트 라이브러리라서 * https://create-react-app.dev/ cmd 실행 후 C:\Users\user1>node -v v18.17.1 C:\Users\user1>npm -v 9.6.7 C:\Users\user1>npm install npx -g 경로수정 및 프로젝트 생성 C:\Users\user1>cd D:\front-end-workspace C:\Users\user1>D: D:\front-end-workspace>npx create-react-app 7_jsx 실행 D:\front-end-workspace>c..

spring에서 db 연결 설정을 해보자 ​ db 연결이 안 되면 데이터 주고받기가 안되는데 코드를 열심히 잘 짜도 그게 무슨 소용이야 실컷 로직 다 짜놓고 여기서 설정 한두 가지 놓쳤다가 오류 어디서 나는지 못 찾아서 한 시간을 날린 적이 있다는...(왈칵) 뭐든지 세팅은 꼼꼼하게 잘 해놓고 넘어가자^^; spring에서 db 연결을 하려면 아래 세 가지 파일을 채워야 한다 mybatis.xml / mapper.xml / root-context.xml 세 파일에 들어가는 내용을 정리해보자면 대략적으로 이렇다 mybatis mapper root-context - jdbc Null 처리 - vo 클래스에 대한 별칭 지정 - mapper 연결 - 데이터를 처리하기 위한 쿼리문 - bean 등 mybatis와..

spring 설치 후 완전 완전 기본 세팅인 것만! (db 연결 관련은 다음 글에 따로 정리) Build Path / pom.xml / web.xml 세팅 Build Path 설정 1. JRE System Library 버전 수정(자바 버전과 일치하게) 처음에 들어가면 기존 JRE System Library 버전이 jdk-11로 되어있지 않음. Remove 후 Add Library > jdk11로 변경 2. 사용할 Libraries 추가 Add External JARS > ojdbc8.jar / jstl.jar / standard.jar 직접 추가 3. Deployment Assembly add > Java Build Path Entries > ojdbc, jstl, standard 모두 추가 pom.x..