# board

jwkwon0817

JPA에서는 쿼리 메서드라는 기능을 제공하기 때문에 따로 인터페이스 메서드를 구현하지 않아도 자동으로 메서드 이름으로 구현이 완료됩니다. findAllByOrderByIdDesc는 다음과 같은 의미입니다. JpaRepository를 상속받고 있는데 T는 JPA Entity, V는 JPA ENtity에서 Primary Key의 타입을 적어주면 됩니다.

hyeonjoonpark

회원가입 화면 구현 다음과 같이 폴더구조를 세팅한다 Authentication/index.tsx App.tsx 이 부분 리팩토링 할 것이다 이제 원래 더미데이터를 적어서 요청 보내는 것을 Input창으로 직접 적어서 보내도록 퍼블리싱을 해보자 강의에서는 metarial-ui 라이브러리를 사용했지만 나는 styled-components를 이용해서 직접 퍼블리싱을 해보도록 하겠다. > 다음편에서 계속

hyeonjoonpark

코드를 더 나은 구조로 리팩토링 해보자 SignupResponseDto 삭제 및 리팩토링 SignupResponseDto를 쓰지 않고 다른 방법으로 구현을 해보자 AuthController에서 SignupResponseDto를 지우고 Generic 타입을 ? 로 바꿔주자 또한 클래스 이름을 SigninResponseDto로 변경해주자 CORS 리팩토링 을 삭제해주자. Main에 있는 또한 마찬가지이다. > 우리는 이제 Main에서 CORS를 지정해줄 것이다 이렇게 작성해줘도 ![](https://velog.velcdn.com/images/hyeonjoonpark/post/d1ecd000-0cbf-42fe-9f13-530372763e71/image

hyeonjoonpark

React에서 Spring Boot로 Request를 보내보자 axios를 이용하여 localhost:4000에 요청을 성공하면 state에 저장을 하여 버튼을 눌렀을 시 상태를 화면에 출력해주는 코드이다 실행을 시켜보면 이렇게 Fail 이 뜨는 것을 볼 수 있다 여기서도 CORS 정책 에러가 뜬다 CORS를 Controller에서 설정해주자 을 추가해주자 ![](https://velog.velcdn.com/images/hyeonjoonpark/post/2c41082d-a520-4fa8-a56b

hyeonjoonpark

HTTP 프로토콜을 이용하여 회원가입 API를 구축해보자 회원가입 API Method : POST Request URL : /api/auth/signup body : userEmail userPassword userPasswordCheck userNickname userPhoneNumber userAddress userAddressDetail View 레이어와 Controller 레이어 사이에 데이터를 전송할 때는 DTO(Data Transfer Object)를 이용하여 데이터를 보내줄 것이다 Dto 라는 이름의 패키지 하나 만들고 Sign

hyeonjoonpark

이전 블로그 에서는 React 프로젝트 폴더 구조를 세팅하였다 서론 Spring Boot Controller를 작성해보자 Controller 프론트엔드와 백엔드가 통신을 하여 어떤 주소로 요청을 할 때 요청이 들어올 수 있는 입구 역할을 한다 다음과 같이 Controller 패키지를 하나 만들고 MainController 클래스를 만들자 우리는 Restful하게 작성하기 위해서 어노테이션으로 지정을 해주자 관련 어노테이션 : 해당 클래스를 Controller 레이어로 인식하도록 함 어노테이션은 + 두 어노테이션이 합쳐져 있다

hyeonjoonpark

React 폴더구조 다음과 같이 프로젝트 폴더구조를 세팅한다 apis 디렉토리 Backend와 연결할 Axios 함수들 저장하는 디렉토리 assets 디렉토리 이미지, 비디오, 폰트를 저장하는 디렉토리 constants 디렉토리 상수를 저장하는 디렉토리 interfaces 디렉토리 Type으로 사용할 인스턴스를 저장하는 디렉토리 stores 디렉토리 스토어 함수 저장하는 디렉토리 utils 디렉토리 각종 메서드 저장하는 디렉토리 views 디렉토리 큰 페이지 혹은 레이아웃 단위의 컴포넌트 저장하는 디렉토리 components 디렉토리 최소단위 컴포넌트 저장하는 디렉토리 ex)

hyeonjoonpark

Spring Boot 프로그램에서 Repository와 Entity를 작성해보자 Spring Boot 프로젝트 폴더 밑에 라는 패키지를 만든다 테이블이 5개이므로 5개의 Entity를 만들어보겠습니다 Entity 패키지 안에 다음과 같은 java class 파일을 만든다 UserEntity BoardEntity PopularSearchEntity LikeEntity CommentEntity 우리가 Spring Boot 프로젝트에 Lombok을 받아왔기 때문에 Entity에 어노테이션을 삽입해준다 삽입이 안될 것이다 어노테이션을 같이 삽입하자 = 해당 클래스를 Entity 클래스로 사용하겠다고 선언하는 어노테이션 = 테이블을 매핑하기 위한 어노테이션 = 데이터베이스에 있는 해당하는 테이블과 현재 클래스를 매핑 시킴 총 6개의 어노테이션을 작성한다 과 같이 name을 지정한다 클래스의 name은 M

hyeonjoonpark

데이터베이스 설계

hyeonjoonpark

출처 : 유튜브 Jiraynor Programming > #### React와 Spring Boot를 사용하여 블로그를 만들어보자 해야 할 것 회원가입 로그인 프로필 수정 게시물 작성 게시물 리스트 보기 게시물 상세보기 게시물 수정 게시물 삭제 댓글 작성 좋아요 요구사항 정리 사용자는 회원가입을 진행한다 이메일 주소 비밀번호 비밀번호 확인 닉네임 핸드폰 번호 상세주소 회원가입이 성공적으로 이루어지면 로그인을 진행한다 이메일 비밀번호 로그인을 성공하면 메인화면으로 이동한다 메인화면 구성 주간 Top3 게시물 한 페이지에 5개씩 페이징 처리 상단 네비

bon0057

스프링 데이터 JPA를 사용하면 간단한 CRUD 기능을 매우 간단하게 구현할 수 있지만 아직 미숙하기에 우선 JPA로 전부 구현을 한 뒤에 스프링 데이터 JPA, Querydsl 등으로 리팩터링을 해나가야겠다. Repository UserRepository save : User Table에 저장 findById : User Table에서 ID로 User 조회 findByName : User Table에서 이름으로 User 조회 findAll : User Table에서 모든 User 조회 deleteById : User Table에서 User 삭제 PostRepository User Repository와 동일 ReplyRepository UserRepository와 동일 CommentRepository Comment(댓글)에는 댓글이름이 존재하지 않아 댓글이름으로 조회 기능 제외 Service

bon0057

ERD 설계 V1 AQueryTool 이라는 무료 ERD 설계 지원하는 웹사이트를 알게 되어 해당 사이트를 통해 ERD를 설계했다. ERD-V1 1:N, N:N 등 표현은 없는 것 같아서 아쉬우나 매우 간단하고 쉽게 ERD를 설계할 수 있어서 만족스럽다. 게시판의 최소 기능인 사용자, 게시글, 답글, 댓글만을 고려한 ERD이다. 유저는 N개의 게시글을 작성할 수 있고 게시글에는 N개의 답글이 달릴 수 있으며 각 게시글, 답글에 N개의 댓글이 달릴 수 있다. 수정 필요 사항 작성하면서 생각하니 설계 당시에 보이지 않았던 것들이 보인다. 블로깅을 해야 하는 이유다. 댓글, 답글 테이블도 사용자가 작성하고 게시글 작성자와 다른 사용자가 작성할 수 있으

bon0057

프로젝트 시작 이유 막연하게 웹 백엔드 개발자를 꿈꾸며 학교 전공 과목들을 수강하고 웹 전반과 스프링, JPA 등 기술들에 대해서 공부해 나가고 있지만 4학년이 되었음에도 막상 포트폴리오에 내가 무엇을 공부했고 할 줄 아는지 작성할 만한 것이 없었다. 학교 공부만 열심히 했을 뿐 상세 직무에 대해 늦게 생각해본 만큼 아쉬운 점이 많다. 김영한 님의 스프링 강의도 완강을 향해 가고 있고 열심히 들어 개념들에 대해선 많이 숙지했지만 이것들을 실무에서 적용할 수 있을 지는 내가 더 공부하기 나름일 것 같다. 그래서 공부를 위해 간단한 토이 프로젝트들을 하며 복습과 한단계 더 발전을 위해 게시판 프로젝트부터 시작하려고 한다! Spring boot 기반 이제는 많이 익숙해진 Spring boot를 통해 프로젝트를 시작해본다. ![](https://velog.velcdn.com/images/bon0057/post/fc4d6e03-90e3-4bc0-945c-fae9668c6b

danbee_ii

Querydsl을 이용한 동적 쿼리 처리 기존의 Repository와 Querydsl 연동 ! repository패키지 내에 search 하위 패키지 추가 BoardSearch 클래스 BoardSearchImpl 클래스 BoardRepository에 BoardSearch 인터페이스 추가! Querydsl로 검색 조건과 목록 처리 BoardSearch 클래스에 searchAll메소드 추가 BoardSearchImpl 클래스에 search메소드 작성 서비스 계층 & DTO 구현 ModelMapper 설정 ! config 패키지 생성 CURD 작업 처리 ! dto 패키지 내에 BoardDTO 클래스 DTO : 계층 간 데이터 교환을 하기 위해 사용하는 객체, getter, setter 만 가짐 등록 작업 BoardService class BoardServiceImpl class 구현

danbee_ii

게시판을 만들며 배우는 개념은 따로 spring 공부 게시글에 작성했다!😲👾 테스트 코드를 통해서 CURD/페이징 처리 확인! - insert 기능 - selelct 기능 - update 기능 - delete 기능 페이징 처리 테스트

danbee_ii

📌개발 환경 📋목표 기능 게시물 등록 / 수정 / 삭제 / 조회 게시물 페이징 처리 / 게시물 검색 프로젝트 생성 application.properties 파일 -> 데이터베이스 설정 대부분의 스프링을 지원하는 개발 도구(IDE)는 application.properties파일에 들어있음! build.gradle 파일 -> dependencies설정 application.properties 파일 -> 로그 레벨 설정 application.properties 파일 -> Spring Data JPA를 위한 설정 spring.jpa.hibernate.ddl-auto : 프로그램 실행시 DDL문을 처리할 것인지 명시 | 속성 값 | 의미 | |:----------|:----------| |none|DDL을 하지 않음 |create-drop|실행할 때 DDL을 실행하고, 종료시에 만들어진 테이블 모두

llvovll89

오늘은 React로 게시판을 만들어 보고자 dummy json 파일을 만들어 Json-server에 연결하여 만들어 보았다. 기본적인 폴더 구조는 src 폴더 안에 components 에 모든 section을 폴더화 하여 넣고 assets 폴더에 dummy-data.json 을 만들어 api를 관리 하는 식으로 하였다. json server 는 port 3001 / react 는 3000 으로 통신하고 react-router-dom 을 설치하여 spa 로 만들었고, 아래 route path를 통해 링크를 관리했다. `` 섹션 부분을 제작 중이어서 첫화면을 띄우면 빈화면이 나온다. ` 섹션을 이용해 목록 창을 4가지로 구성하였고 , 각 리스트 마다 Link to="?"` 태그를 걸어 한 페이지에서 이동하게 만들었다. 모든 섹션마다 axios 통신을 위해 axios를 설치하고 / useAxios 라는

coastby

DB 설계 구현 화면 ![](https://velog.velcdn.com/images/coastby/post/a300ae1b-37f4-4cd5-82e7-fed3c2c68f19/im

um9623

dto/BoardList.java 파일 만들기 이는 controller랑 view 간에 전송하기위해 만들어짐 entity아님! > Controller/BoardController.java 에 코드 추가 그리고 html로 출력 하는지 확인 해봄. > templates/board_insertbatch.html > templates/board_select.html에 추가할 코드들. > templates/board_updatebatch.html에 추가할 코드들. 출력 확인.

um9623

entity/Board.java > controller/BoardController.java > repository/Repository.java > templates/board_select.html 로 확인 script로 삭제하기 이유는 form을 쓰면 form안에 form이 적용이 안됌. > templates/board_insert.html 로 확인