포트폴리오 작성을 위해 혼자서 풀스택으로 한번 개발해보았다. 책도 10권정도 사서 공부하고 강의도 보고 블로그도 보면서 따라한다고 실제로 마무리하기까지는 한 2달정도 걸린것같다. 백엔드 직렬로 지원할 예정이다보니 백엔드 쪽 공부를 많이 했는데 실제로 코딩할때 쓴 시간은 프론트 디자인할 때 더많이 쓴것 같다. 프론트 개발자님들 존경합니다.... 하면서 제일 뼈저리게 후회했던 점은 학부 때 공부안한것... 일단 자바 코딩이 부족하니 코드가 깔끔하게 나오지를 않는다. 깃허브에 올린 코드를 보면 흠 답이없는 것 같다. 그래도 이건 공부하면서 차츰 나아지고 있으니 다행이긴 한데 REST 설계하면서 필요한 URI나 변수, 요청/응답 데이터 양식을 정하는게 경험이 없다보니 중구난방이다. 빨리 취업해서 배울 수 잇었으..

홈 컨테이너의 컴포넌트를 재활용 하였다. const Search = () => { const [input, setInput] = useState(""); const [postList, setPostList] = useState(); const [postIndex, setPostIndex] = useState([]); // 게시글의 파일 순서에 대한 처리를 위한 배열 const [chatIsOpen, setChatIsOpen] = useState([]); // 게시글 댓글 모달 창 처리를 위한 배열 const onChange = (e) => { setInput(e.target.value); } const onKeyPress = (e) => { if(e.key == 'Enter') { submit(); } ..

프로필 탭은 본인의 프로필 정보를 확인할 수 있는 부분과, 본인이 게시한 게시글들을 볼 수 있는 부분으로 나누었다. 1. ProfileContainer 작성 const ProfileContainer = () => { const userDetail = useSelector(state => state.userDetail); const navigate = useNavigate(); const [profileCount, setProfileCount] = useState( {board: 0, follower: 0, follow: 0} ); const [postList, setPostList] = useState(); const [postIsOpen, setPostIsOpen] = useState(); const ..

프로필 관련 내용은 기존에 만들어진 Entity를 활용하는 것이므로 따로 만들 Entity는 없다. 먼저 사용할 Dto부터 생성한다. 1. Profile 관련 Dto 생성 @Data public class ProfileCountResponseDto { private Long board; private Long follower; private Long follow; @Builder public ProfileCountResponseDto(Long board, Long follower, Long follow) { this.board = board; this.follower = follower; this.follow = follow; } } @Data public class ProfileUpdateRequest..

1. PostRender에서 채팅 아이콘 눌렀을 때, 모달창이 뜨도록 구현 {/* 게시글의 좋아요, 댓글들을 보여주는 부분 */} { !post.like ? setLike(post.postId)}/>: deleteLike(post.postId)} style={{color: 'red'}}/> } onClickChat(idx)}/> 좋아요 갯수 , 댓글 갯수 2. PostChat.js 작성 const PostChat = (props) => { const ChatModalStyle = { overlay: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "rgba(255, 255, 255, 0.45)", zIndex: ..

기존 HomeContainer 작성 부분의 좋아요 버튼 구현 부분을 상세화한다. 1. HomeContainer 수정 const setLike = (postId) => { withJwtAxios.get("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } const deleteLike = (postId) => { withJwtAxios.delete("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } return ( ... { !post.like ? setLike(post.postId)}..