이번에도 한코딩님의 유튜브 강의를 들으며 도움받았습니다! 스프링부트와 리액트를 같이 공부하고 싶었는데 좋은 강의 감사합니다,,,🥰 ✅React.js 란? 자바스크립트 라이브러리 SPA(Single Page Application) 한 페이지에서 모든 요소를 불러와서 동작->페이지 이동X 🤍인텔리제이(IntelliJ) 스프링부트 환경에서 리액트 설치하기 1. 프로젝트 생성 2. 의존성은 일단 Spring Web, Lombok, MySQL Driver 3가지만 추가해 준다. 3. 프로젝트 생성 후 ExamApplication을 실행하면 당연히 만들어놓은 페이지가 없기 때문에 아래와 같은 페이지가 뜸. 4. 이제 리액트를 설치해 준다. cd src/main//main 디렉토리로 이동 npx create-reac..
스프링 레거시 프로젝트로 검색 기능을 구현할 때에는 hidden 태그로 검색어를 감싸고... 쿼리문에 조건문도 넣고 다소 복잡하게 만들었었는데 스프링부트에서는 검색 기능 역시 JPA 기능을 통해 간단하게 구현할 수 있다. 💡JPA Repository findBy(컬럼 이름) : 컬럼에서 키워드를 넣어서 찾겠다. findBy(컬럼 이름)Containing : 컬럼에서 키워드가 포함된 것을 찾겠다. 🤍검색 기능 구현하기 BoardRepository 수정 findByTitleContaining : title 컬럼을 기준으로 해당 키워드가 포함된 것을 찾겠다. findBy 사용 시에는 완전한 제목을 입력해야 하지만 findBy컬럼Containing 을 사용함으로써 해당 키워드가 포함된 글을 검색할 수 있다. @..
스프링 레거시 프로젝트를 할 땐 페이징 관련 vo를 따로 만들고 다소 복잡한 방식으로 페이징 처리를 했었는데 스프링부트에서는 JPA의 Pageable 인터페이스를 사용해서 훨씬 간단한 페이징 처리 구현이 가능하다. 🤍간단한 페이징 처리 구현하기 1. 컨트롤러 API에서 Pageable 인터페이스 타입으로 파라미터를 받는다. 인터페이스는 getPageNumber(), getPageSize() 등등 페이징 구현 시 필요한 값을 편하게 구할 수 있는 메소드를 갖고 있다. 위 코드를 설명하면 page : default 페이지 size : 한 페이지 게시글 수 sort : 정렬 기준 컬럼(여기에서는 글 번호 id) direction : 정렬 순서 (보통 게시판은 최근 글이 위로 올라와 있기 때문에 역순으로 설정함..
맨 처음으로 DB 테이블에 업로드된 파일 이미지, 파일 경로를 저장할 수 있도록 컬럼을 추가해 준다. 테이블이 수정되었으므로 당연히 엔티티도 수정해 준다. 이제 다시 코드로 돌아와서!! 파일 업로드를 구현하기 위해서는 form 태그에 아래 코드를 꼭 추가해주어야 한다! enctype="multipart/form-data" 글 작성 시 파일 업로드가 가능하도록 boardwrite.html 수정 업로드된 이미지를 확인할 수 있도록 boardview.html 수정 컨트롤러 코드 수정(매개변수에 MultipartFile 추가) 글 작성 + 파일 업로드 서비스단 코드 수정 //글 작성 처리 public void write(Bootboard bootboard, MultipartFile file) throws Exc..
🤍게시판 글 상세 조회 구현 글 조회 컨트롤러 코드 작성 @GetMapping("/board/view") //localhost:8080/board/view?id=1 public String boardView(Model model, Integer id){ model.addAttribute("bootboard",boardService.boardView(id)); return "boardview"; } 글 조회 화면 boardview.html 작성 제목입니다. 내용입니다. 글 조회 서비스 코드 작성 //특정 게시글 불러오기 public Bootboard boardView(Integer id){ return boardRepository.findById(id).get(); } 글 목록에서 제목을 클릭했을 때 상세..
프로젝트 구조는 아래와 같이 만들었다. 이번에는 게시글 폼(boardwrite.html), 게시글 목록(boardList.html)까지 만들고 컨트롤러, 서비스, repository를 연결해서 게시글을 작성해서 디비에 넣고 글 목록까지 출력하는 것을 구현할 것이다. 🤍게시판 글 작성 구현 먼저 컨트롤러를 작성해 주고 엔티티 작성 Entity(엔티티) : 데이터베이스에 쓰일 필드와 여러 엔티티간 연관 관계를 정의함. Repository 작성 Entity에 의해 생성된 DB에 접근하는 메서드 (EX. findAll()...)들을 사용하기 위한 인터페이스, 위에서 엔티티를 선언함으로써 데이터베이스 구조를 만들었다면 여기에 어떤 값을 넣거나 넣어진 값을 조회하는 등의 CRUD를 해야 쓸모가 있는데 이것을 어떻게..
학원 수료 후 취업 전까지 스프링부트 미니 프로젝트를 하나 더 해보기로 했다. 프로젝트 시작에 앞서 스프링부트와 좀 더 친해지기 위해(??) 유튜브 스프링부트 무작정 따라하기 영상을 보고 게시판을 만들어보려고 한다. 역시 모든 웹 개발의 기초는,,,게시판이지,,😎 🤍인텔리제이 프로젝트 생성 1. Gradle 프로젝트 생성 2. ArtifactId는 board로 지어준다. 3. 의존성 추가 -- 이번에는 타임리프, MySQL을 사용할 거라서 아래와 같이 추가해 주었다. dependencies { implementation('org.springframework.boot:spring-boot-starter-web') implementation('org.springframework.boot:spring-boot..
💡프로젝트 소개 온라인 쇼핑몰 + 레시피 커뮤니티 웹 애플리케이션 구축을 목표로 한 RecipeToYou 프로젝트 기획 마켓컬리 클론코딩 (+레시피 커뮤니티) 기존 마켓컬리에 사용자들이 쇼핑몰에서 구매한 식재료를 활용하여 레시피를 올리는 레시피 커뮤니티를 추가했다. 기획 의도 : 코로나 장기화로 인해 온라인 시장 규모가 확대 / 건강한 가정식에 대한 관심도 증가 / 정보통신기술의 발달로 다양한 온라인 커뮤니티 활성화 🔨기술 스택 ⌛️작업 기간 ⭐️2021. 12. 20 ~ 2022. 03. 10 💡작업 목표물 메인(사용자) 페이지 로그인, 회원가입 상품 목록 출력, 마이페이지, 상품 상세 페이지 레시피 커뮤니티 관리자 페이지 회원 관리, 탈퇴 회원 관리 주문, 결제 관리 상품 CRUD 기능 💻Front-..