유정잉

1) start.spring.io로 SpringBoot Project 생성     -> Spring Boot Dev Tools, Spring Web, Lombok, MySQL Driver, Thymeleaf, Psring Data JAP 2) application.properties 파일에 DB 연결 설정 spring.datasource.url=jdbc:mysql://localhost:3306/yujungspring.datasource.username=rootspring.datasource.password=00000000spring.jpa.hibernate.ddl-auto=update 3) controller와 html 파일 생성 -> html에서 Thymeleaf를 통해 데이터 값 출력    -> Th..

HTTP 상태 500 – 내부 서버 오류 타입 예외 보고Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): bit.naver.mapper.StudyReferencesMapper.getAllStudyReferences 1) 인텔리제이 프로젝트 내에 경로 잘못 설정 돼서 나타난 오류  ⭐️ .xml 파일은 java 폴더가 아닌 resources 폴더 안에 mapper 폴더를 만들고 .xml 파일을 만들어야 함 ⭐️

1) 프로젝트 실행 시 package를 인식 못하는 오류 발생 -> java: package ~~ does not exist 1) File -> Invalidate Cashes ... 캐쉬 삭제   2) View -> Tool Windows -> Maven -> Lifecycle -> clean -> Run Maven Build   3) Settings -> Build -> Build Tools -> Maven -> Runner -> Delegate IDE build/run actions to Maven

전체적인 흐름사용자 요청 (Client Request)사용자가 웹 브라우저를 통해 특정 URL을 요청합니다.Controller요청이 들어오면 스프링 프레임워크는 적절한 컨트롤러로 요청을 전달합니다.컨트롤러는 URL 요청을 매핑하고 요청을 처리합니다. 예를 들어, 사용자가 /user/list URL을 요청하면 UserController가 이를 처리합니다.Service컨트롤러는 비즈니스 로직을 처리하기 위해 서비스 계층을 호출합니다. 서비스 계층은 비즈니스 로직을 담당합니다.예를 들어, UserController는 UserService를 호출하여 사용자 목록을 가져옵니다.Mapper (Interface 및 XML)서비스 계층은 데이터베이스와 상호 작용하기 위해 매퍼를 호출합니다. 매퍼는 MyBatis와 같은..

1) npm install2) npm run dev3) Control + C = 서버 중단4) npm run dev = 서버 다시 시작 첫 문자 대문자리액트는 모든 컴포넌트에서 나온 모든 JSX코드를 결합하여 전체적인 DOM을 형성 -> 화면에 보이는 요소  [ 동적 출력 ]페이지를 새로 고침할 때 마다 const reactDescriptions = ['Fundamental', 'Crucial', 'Core']; 값이 랜덤으로 출력 됨 상수에 저장해서 상수값을 중괄호에 넣어도 됨  [ 이미지 파일 로딩 ]import후 중괄호{}로 사용 가능 import reactImg from './assets/react-core-concepts.png'; img src={reactImg} alt="Stylized at..

AJAX란 무엇인가?AJAX는 "Asynchronous JavaScript and XML"의 약자입니다. AJAX는 웹 페이지를 다시 로드하지 않고 서버와 데이터를 주고받기 위해 사용하는 기술입니다. 즉, 페이지의 특정 부분만을 업데이트할 수 있게 해줍니다. 이를 통해 웹 애플리케이션은 더욱 빠르고 사용자 친화적으로 동작할 수 있습니다. AJAX의 주요 특징비동기 처리 (Asynchronous): 서버 요청을 비동기적으로 처리하여 웹 페이지의 다른 작업이 중단되지 않도록 합니다. 즉, 서버로부터 데이터를 받는 동안에도 사용자는 페이지와 상호작용할 수 있습니다.XMLHttpRequest 객체: AJAX의 핵심 도구로, 자바스크립트 코드에서 서버와 데이터를 주고받을 수 있게 해줍니다. XML뿐만 아니라 JS..

2024년 6월 10일   리액트 : 선언형 vs 자바스크립트 : 명령형  1) react.new 검색 -> 웹 기반 react 개발도구(npm istall과 npm run dev를 할 필요 없음)    Via 방식 : import하게 되면 웹페이지를 로드할때 해당 파일이 같이 로드 됨 ! defer : 나머지 HTML 문서을 읽어와 파싱한후 스크립트가 import되고 실행되도록 하는 속성             (순서가없는 ul li가은 HTML요소가 먼저 실행되기 하기 위해서 적용 시키는 것이 좋음              아니면 스크립트가 얘네보다 먼저 불러오게되면 얘네가 로딩이 안 될때도 있음)script src="assets/scripts/app.js" defer >script> type="modu..

[ state로 입력값 관리 - e.target.value ]1) Join2.jsximport { useState } from "react";const Join2 = () => { const [input, setInput] = useState({ name: "", email: "", language: "", memo: "", }); const onChangeName = (e) => { //함수 setInput({ ...input, //[e.target.name]:e.target.value, name: e.target.value, }); cons..

[ 배열구조분해할당과 객체구조분해할당 ]    배열은 [] 대괄호 , 객체는 {} 중괄호 사용 1) finder -> 문서 -> test04 파일 생성 -> index.html 파일 생성 -> script src="unit.js">script> 로 unit.js로 연결    -> unit.js 파일 생성 -> 1. 배열구조분해할당 2.객체구조분해할당 [ ...연산자(spread 연산자) ]    객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려줌   [ {중괄호}를 이용한 컴포넌트 if문 함수 사용법 ] 1) src/componentes/Main.jsx에서 리액트에서 if문 함수 작성     -> return 뒤에 태그가 등장하면 ? 컴포넌트 !     -> JSX 파일에서는 반드시 요소 여러 개를 하..

[ node.js 다운로드 & 경로설정 ] 1) node.js 다운로드 검색 (20대 버전 짝수 버전 다운로드) 2) 터미널 창에서 node.js 설치 잘 되었는지 확인 (node -v) 3) Document -> react -> test01 -> VSCode에서 파일 폴더열기 test01  4) 🩷 command + J = VSCode에서 터미널창 열기      -> npm init -> 패키지 이름 test01 -> 나머지 다 엔터 -> package.json 파일 생성 5) index.js 새로운 파일을 만들고 console.log로 메세지 입력후 터미널에서 node index.js 를 입력하면 터미널에 출력 됨 6) 만약에 index.js을 src라는 폴더 안에 생성하면 경로를 node src/..