방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 리엑트4 TemplateInputException An error happened during template parsing(타임리프 오류) 개발도구로 잘 돌아가던 프로젝트가 빌드한 이후에 아래와 같은 오류가 발생하였습니다. 해당 이유로는 타임리프(thymeleaf)가 스프링 부트 내부에서 어디로 갈지 길을 못찾는(?) 원인에서 발생한 문제 입니다. 이를 해결하기 위해서 2가지를 확인해야 합니다. 1. application.properties 프로퍼티에서 prefix 값으로 타임리프에게 바라볼 경로를 지정 해 주었는지 확인합니다. spring.thymeleaf.prefix=classpath:templates/ ### 2022. 7. 22. 리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) 리엑트(React)와 Node.js의 익스프레스(Express)를 활용하여 만든 프로젝트 입니다. 전반적인 기능은 아래와 같습니다. 1. 파일 드래그앤 드롭 2. 리엑트 hook-form을 활용한 데이터 바인딩 3. 데이터 등록은 FormData를 활용한 axios 라이브러리 사용 4. 리엑트 레덕스(redux)를 활용하여 상태 관리 5. 익스프레스 라이브러리를 활용한 서버 구성 6. multer를 활용한 파일 업로드 기능 구현 7. sqlite를 활용한 데이터베이스 구성 게시판(Notice Board) 작업을 한번 하고 나면 라이브러리, 프레임워크에 대한 기능이 좀 더 눈에 잘 들어옵니다. 게시판이라 불리는 기능에는 등록(Create), 읽기(Read), 수정(Update), 삭제(Delete) 의 기.. 2022. 6. 18. React Drag and Drop 기능구현 시 주의 할 점(드래그 앤 드롭) 리엑트에서 파일 드래그 앤 드롭 기능을 구현하기 위해서 아래 속성을 부여하여 보았습니다. * onDrop : 대상이 드랍되면 이벤트가 발생 합니다. * onDragEnter : 드래그한 대상이 드랍영역에 다다르면 이벤트가 발생 합니다. * onDragLeave : 드래그한 대상이 드랍하지 않고 떠나는 경우 이벤트가 발생 합니다. import Reactfrom 'react' import '../App.css'; function DragAndDrop() { const dragFunction = (event, type) => { event.preventDefault(); event.stopPropagation(); console.log(type) } return dragFunction(event, 'drop'.. 2022. 6. 14. 리액트 익스프레스 웹소켓 (React, Express typescript, websocket) 리액트와 Node.js의 익스프레스 프레임워크를 활용하여 만들어본 채팅 프로그램 입니다(with 웹소켓) 리액트는 버전 18로 구성되어 있으며 함수형으로 되어 있습니다. 익스프레스 서버는 4.18버전이며 타입스크립트(Typescript) 환경으로 구성 하였습니다. #1. 익스프레스 서버(Express server) 익스프레스 서버에서는 아래 3가지 역할을 하도록 되어 있습니다. 0) 회원 가입 및 로그인 응답 1) 채팅방 만들기 2) 채팅방 전달하기 타입스크립트를 활용하면 데이터 형식(type)을 지정 할 수 있습니다. 이런 훌륭한 기능을 사용하기 위해 채팅방과 관련된 타입을 먼저 정의하여 보았습니다. //소캣 객체 타입 입니다. type soketT = { ws: WebSocket; //웹소캣 객체 입.. 2022. 5. 27. 이전 1 다음
