🔍HTTP 요청 방식 HTTP 통신 : 약속 통신 방법 4가지 : GET, POST, PUT, DELETE (이외에도 더 많지만 이 4가지만 기억하면 된다고 하셨다.) GET : 데이터를 줘! -Select POST : 데이터를 추가해줘! -Insert PUT : 데이터를 수정해줘! -Update DELETE : 데이터를 삭제해줘! -Delete 🔍MIME (Multipurpose Internet Mail Extensions) 이란? 다목적 인터넷 메일 확장이란 뜻으로 전자우편의 데이터 형식을 정의한 표준 포맷 기존 전자우편은 문자 데이터 이외의 바이너리 데이터(이미지, 동영상, MS 워드 등)를 전송할 수 없었다. 그리하여 여러 멀티미디어 데이터들의 바이너리 데이터를 ASCII 코드로 변환하는 방법(인..

오늘부터 일주일 안으로 메타코딩 님의 스프링부트 블로그 만들기 총 75강을...끝내기로 했다 도저언! 1강부터 9강까지는 자바 환경변수 설정, MySQL 설치, STS 설치, Git 연동 등 기본적인 세팅에 관한 내용인데 이미 내 노트북에 이런 기본 설정은 되어 있어서 슉슉 넘어갈 수 있었다. 🤍STS4 설치 이 강의에서는 인텔리제이 대신 STS4 툴을 사용한다. 내 컴퓨터에는 3버전이 깔려 있어서 STS4를 새로 설치해주었다. https://spring.io/tools Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support fo..

🤍React.js 구조 build : 빌드 시 생성되는 디렉토리 node_modules : 리액트 실행에 필요한 모듈 디렉토리 public : 정적 파일 디렉토리 src : 프로젝트 source 디렉토리 🤍React.js 변수 적용 기존 자바스크립트에서 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다. 하지만 리액트에서 변수를 적용할 때에는 이렇게 {변수명} 간단한 방법으로 변수를 적용할 수 있다. let name = 'hancoding'; {name} 실제 크롬에서 확인해 봐도 태그 안에 hancoding이 들어간 것을 확인할 수 있다.

이번에도 한코딩님의 유튜브 강의를 들으며 도움받았습니다! 스프링부트와 리액트를 같이 공부하고 싶었는데 좋은 강의 감사합니다,,,🥰 ✅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(); } 글 목록에서 제목을 클릭했을 때 상세..