홈화면에는 유저들이 올린 게시글을 보여줄 예정이다. 또한 게시글에 대한 좋아요 기능과 댓글 기능까지 구현할 예정이다. 제일 먼저, 홈화면으로 들어왔을 때 보여줄 게시글 목록을 반환해주는 api를 제작한다. 1. DTO 작성 @Data public class PostDto { private Long postId; private UserDto user; private String content; private List postFileList; @Builder public PostDto(Long postId, UserDto user, String content, List postFileList) { this.postId = postId; this.user = user; this.content = content..

3가지 기능을 구현해준다. 1. 유저 목록을 알맞게 반환해주는 기능 2. 유저가 following한 정보를 저장해주는 기능 3. 유저가 following 했던 정보를 삭제해주는 기능 1. UserDto, UserListResponseDto 작성 @Data public class UserDto { private String email; private String nickname; private String profileUrl; private boolean isFollow; @Builder public UserDto(String email, String nickname, String profileUrl, boolean isFollow) { this.email = email; this.nickname = ni..

기존 인스타에서 팔로우 추천목록은 핸드폰번호나 다양한 정보들을 이용하여 띄워주는 것 같지만, 그렇게 깊게 구현할 수 없어 그냥 모든 유저목록에 대하여 팔로우 기능을 수행할 수 있도록 하였다. 팔로우 기능은 다음과 같다. 1. 본인을 제외한 모든 유저 목록 출력 2. 각 유저마다 팔로우/언팔로우 기능 구현 1. FollowContainer.js 작성 const FollowContainer = () => { const [userList, setUserList] = useState([]); const getUserList = () => { withJwtAxios.get('/user-list') .then((res) => { setUserList(res.data.userList); }) } const onCli..

프론트에서 MultiFile과 포스트 내용을 받아왔으니 백엔드에서 처리해주어야한다. 처리 로직은 다음과 같다. 1. 게시물을 저장할 Post 엔티티와 그 게시글의 파일들을 저장할 PostFile 엔티티생성 2. Jwt의 유저 내용과 전달받은 내용을 기반으로 Post 저장 3. 자바의 FileUpload 기능을 사용하여 로컬에 파일 저장 1. Post, PostFile Entity 생성 @Entity @Data @NoArgsConstructor public class Post { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "post_id") private Long id; @ManyToOne @JoinColumn(name =..

먼저 만들기 탭의 내용인 게시글 Posting을 구현한다. 로직은 다음과 같다. 1. 사진이나 동영상을 선택한다. 2. 글을 작성한다. 3. 공유하기 버튼을 통해 서버에 등록한다. 4. 홈탭으로 리다이렉팅한다. 포스트 화면의 구성은 다음과 같다. 1. 헤더 부분 : 제목과 공유하기 버튼으로 구성 2. 바디 부분 : 파일선택, 사용자 정보 및 게시글 작성 부분으로 구성 1. PostContainer.js 작성 - 포스팅 화면을 랜더링할 가장 큰 컴포넌트이다. import React, {useEffect, useState} from 'react'; import style from './Post.module.css'; import PostFile from "./PostFile"; import PostWrite..

프론트 UI 기본화면을 구성한다. 화면 구성은 왼쪽에 SideBar와 오른쪽에 컨텐츠를 나타내는 식으로 진행할 예정이다. - 왼쪽의 메뉴는 다음과 같이 구성하였다. 1. 홈 : 등록된 게시물을 보여줄 화면 2. 팔로우 : 팔로우/언팔로우 할 유저 목록들을 보여주는 화면 3. 탐색 : 게시물 중 특정 키워드를 검색할 수 있게하는 화면 4. 메세지 : 유저들과의 채팅을 할 수 있게하는 화면 5. 만들기 : 게시물을 포스팅하는 화면 6. 프로필 : 프로필을 수정하는 화면 1. Redux 설정 - React에서 스테이트는 해당 컴포넌트에서만 사용가능하나, props를 통해 넘겨줄 수 있다. 하지만 단위가 깊어질수록 props로 넘기는 것은 매우 귀찮기 때문에 redux라는 라이브러리를 사용할 예정이다. - 다른..