코맹이의 개발일지

프로젝트 실행하기 위해 Spring Boot 웹서버, React 프론트 웹 서버도 함께 실행시킨다.  1. 리액트 프로젝트 생성- /spring03/frontboard 폴더 생성cd spring03npx create-react-app frontboard  2. 리액트 라이브러리 설치, npmReact용 Bootstrap 설치npm install react-bootstrap bootstrap npm install axios -> REST API 통신 라이브러리npm install react-router-dom -> 리액트 화면 네비게이션npm install react-js-pagination -> 리액트 페이징 처리  3. frontBoard 개발 시작App.jsimport './App.css';impor..

리액트 기초공부1. html의 태그처럼 개발자가 새로운 요소(객체)를 생성할 수 있음function CustomButton() { // CustomButton 객체 생성 return ( MyButton )}CustomButton 객체 생성function App() { return ( Hello, React.js! );}객체 생성 후 App의 header안에 추가 2. /component/CustomButton.js 생성, 위 소스를 옮김component 폴더 생성 > CustomButton.js 생성CustomButton.js 코드function CustomButton() { // CustomButton 객체 생성 ..

🔽리액트 개요더보기- 서버사이드 -> 백엔드 - 클라이언트사이드 -> 프론트 엔드 - 프론트엔드 : html + css + js(html, jsp, aspx, php, ...) - js만 가지고 프론트엔드를 만들어보자 -> 리액트 - css는 있어야 하는 구나 - 페이스북이 자기 웹페이지에 프론트를 좀 더 개선해보고자 개발 시작 - 리액트는 기본적으로 SPA(Single Page Application)을 목적으로 - node.js 서버사이드 js를 사용해서 서버를 동작 - 패키지 매니저 종류: npm, chocolatey, yarn, ... 리액트 개발환경1. node.js 설치- https://nodejs.org/en, Download Node.js(LTS) 클릭 설치 후 콘솔에서 node --ver..

[Spring Boot] JPA 프로젝트 - 비밀번호 찾기 및 변경 기능 구현(1)비밀번호 찾기 및 변경 기능을 하기 전 메일 전송 테스트를 해볼려고 한다! build.gradle 메일을 보내기 위한 디펜던시 추가// 메일전송 디펜던시implementation 'org.springframework.boot:spring-boot-starter-mail' iieunji023.tistory.com 비밀번호 기능 구현 전 메일 테스트까지 완료했다  /templates/member/login.html 비밀번호 초기화 버튼비밀번호 초기화 태그를 통해 비밀번호 초기화시 이동될 url 연결 /controller/MemberController.java reset() 메서드 추가 @GetMapping("/reset") ..

비밀번호 찾기 및 변경 기능을 하기 전 메일 전송 테스트를 해볼려고 한다! build.gradle 메일을 보내기 위한 디펜던시 추가// 메일전송 디펜던시implementation 'org.springframework.boot:spring-boot-starter-mail'  application.properties 메일 설정 입력## 메일설정spring.mail.host=smtp.naver.comspring.mail.port=465spring.mail.username=이메일(수신자)spring.mail.password=비밀번호spring.mail.properties.mail.smtp.starttls.enable=truespring.mail.properties.mail.smtp.auth=truespring...

위와 같이 웹사이트를 사용할 때 404, 500 등 에러페이지가 발생할 때, 그대로 띄우면 사용자 측면에서 좋지 않다.그렇기에 오늘은 에러페이지 예외처리를 해볼 예정이다.  application.properties 에러페이지 관련 설정 추가## Whitelabel Error Page 제거, 커스텀화server.error.whitelabel.enabled=falseserver.error.path=/errorspring.autoconfigure.exclude=org.springframework.boot.autoconfigure.web.ErrorMvcAutoConfiguration기본이 true인 것을 false로 바꿔줌 resource/static/custom.css@import url('https://fo..

🔽전체 요약더보기(설정) AWS 사용 - https://aws.amazon.com/ko/💡 (프리티어) 회원가입 및 로그인 - 매뉴얼 참조(최근 내용으로 참조) - https://blogworks.co.kr/aws-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EB%A9%94%EB%89%B4%EC%96%BC/💡 (라이트세일) https://lightsail.aws.amazon.com/- 인스턴스 클릭 > 인스턴스 생성 버튼 클릭 - 리전 서울 - 인스턴스 이미지 > Linux/Unix - 블루프린트 > 운영 체제(OS) 전용 클릭 > Ubuntu 22.04 LTS - 인스턴스 플랜 > 듀얼 스택 - 크기 선택 > 월별 $12 선택(무료 중 가장 스펙이 좋음) - 인스턴스 확인 ..

list() GET 메서드 주석 처리// @GetMapping("/list") public String list(Model model, @RequestParam(value="page", defaultValue = "0") int page, @RequestParam(value = "kw", defaultValue = "") String keyword) { Page paging = this.boardService.getList(page, keyword); // 검색 추가 model.addAttribute("paging", paging); model.addAttribute("kw", keyword); return "board/list"; }  ..

아래 순서대로 카테고리 추가해볼 예정이다카테고리 추가 - /entity/Category.java 클래스 추가 - /repository/CategoryRepository.java 인터페이스 추가 - /service/CategoryService.java 추가- /entity/Board.java category 속성 추가- /service/BoardService.java 조회 조건에 카테고리 추가 수정 - 카테고리를 자유게시판, 질문응답게시판 분리 - /templates/layout.html. 사이드바 태그 추가 기입- /controller/BoardController.java GetMapping 메서드에 카테고리를 추가 /entity/Category.java 클래스 추가package com.eunji.bac..

simplemde(https://simplemde.com/) 사이트 접속 View on GitHub 클릭깃헙에서 CDN 링크 복사layout.html에 복사한 링크 넣기/template/layout.html   /templates/board/create.html에 textarea id=content를 simplemde로 변환하는 js 추가 적용이 잘된 것을 확인할 수 있음 detail.html textarea content simplemde js 추가// 마크다운 에디터 추가var simpleMDE = new SimpleMDE({element: document.getElementById("content")});댓글에도 마크다운 적용된 것을 확인할 수 있음 (설정) build.gradle 마크..