포트폴리오 작성을 위해 혼자서 풀스택으로 한번 개발해보았다. 책도 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(); } ..

검색 기능은 간단하다. querydsl의 contain기능을 사용하여 리스트를 뽑아낸다. 1. PostRepositorySupport 수정 public List getPosts(String query) { return queryFactory.selectFrom(post).where(post.content.contains(query)).orderBy(post.modifiedDate.desc()).fetch(); } - post 테이블에서 content 내용 중 query를 포함하는 게시글들의 목록을 반환한다. 2. PostService, Controller 수정 @GetMapping("/posts/search") public ResponseEntity getSearchPostList(@CurrentUser..

프론트는 갈수록 점점 개판이 되어간다. 프론트에서 stomp로 구독후 채팅내용을 수정하면 계속 서버로 info정보를 요청하던데 왜그런지 문제를 찾지 못해서 오래걸렸다. 1. ChatRoomList 작성 const ChatRoomList = () => { const [chatRoomList, setChatRoomList] = useState(); const [chatRoom, setChatRoom] = useState(); const [targetEmail, setTargetEmail] = useState(); const [clickState, setClickState] = useState(); const onChatRoom = (idx) => { setChatRoom(chatRoomList[idx].ch..

간단한 메신저를 구현해 보았다. 기존의 api는 http 요청을 보내면 서버는 그 요청에대한 답만 해주면 되지만, 메신저는 내가 다른사람에게 메신저를 보냇을 때 서버가 나에게만 응답을 보내는 것이 아닌, 내가 메신저 보낸 사람들에게 모두 응답을 보내주어야 한다. 기존의 http 프로토콜로는 이를 구현할 수 없기 때문에, 웹 소켓이라는 새로운 프로토콜을 적용하였다. 또한, 웹 소켓은 http처럼 정해진 데이터 양식이 없기 때문에, Stomp라는 프로토콜을 사용하여 데이터 양식을 정의하였다. 1. 관련 라이브러리 추가 //websocket implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.spr..

프로필 탭은 본인의 프로필 정보를 확인할 수 있는 부분과, 본인이 게시한 게시글들을 볼 수 있는 부분으로 나누었다. 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 ..