프로젝트 구성
·
Web/인스타 클론 코딩
먼저 기존 모놀리식 구조에서 MSA 형태로 구조를 바꾸어 확장성과 유지보수성을 높여보고자 했습니다.  프로젝트는 총 5가지 서비스로 분리하였고, 각 서비스의 구성 내용 및 역할은 아래와 같습니다. 인증 처리 서버인증 처리 서버는, 서버의 회원가입, 로그인, 세션 등의 인증과 유저 정보 등의 처리를 담당하는 서버 입니다. MySQL을 활용하여 유저 정보를 저장하고, Redis를 사용하여 세션을 관리할 예정입니다. 포스팅 처리 서버게시글에 관련된 포스팅, 댓글, 좋아요 등의 기능을 처리하고 각 사용자에게 최적화된 뉴스피드를 제공하는 역할을 담당하는 서버입니다.MySQL을 활용하여 게시글에 대한 정보들을 저장하고, Redis를 활용하여 뉴스피드 내역을 캐싱하며 포스팅 API 서버는 포스팅 저장을 그리고 뉴스피..
[인스타그램 클론코딩] 14. 마무리하며...
·
Web/인스타 클론 코딩
포트폴리오 작성을 위해 혼자서 풀스택으로 한번 개발해보았다. 책도 10권정도 사서 공부하고 강의도 보고 블로그도 보면서 따라한다고 실제로 마무리하기까지는 한 2달정도 걸린것같다. 백엔드 직렬로 지원할 예정이다보니 백엔드 쪽 공부를 많이 했는데 실제로 코딩할때 쓴 시간은 프론트 디자인할 때 더많이 쓴것 같다. 프론트 개발자님들 존경합니다.... 하면서 제일 뼈저리게 후회했던 점은 학부 때 공부안한것... 일단 자바 코딩이 부족하니 코드가 깔끔하게 나오지를 않는다. 깃허브에 올린 코드를 보면 흠 답이없는 것 같다. 그래도 이건 공부하면서 차츰 나아지고 있으니 다행이긴 한데 REST 설계하면서 필요한 URI나 변수, 요청/응답 데이터 양식을 정하는게 경험이 없다보니 중구난방이다. 빨리 취업해서 배울 수 잇었으..
[인스타그램 클론코딩] 13. 게시글 검색 기능 구현(Front-End)
·
Web/인스타 클론 코딩
홈 컨테이너의 컴포넌트를 재활용 하였다. 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(); } ..
[인스타그램 클론코딩] 13. 게시글 검색 기능 구현(Back-End)
·
Web/인스타 클론 코딩
검색 기능은 간단하다. 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..
[인스타그램 클론코딩] 12. 메신저 기능 구현(Front-End)
·
Web/인스타 클론 코딩
프론트는 갈수록 점점 개판이 되어간다. 프론트에서 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..
[인스타그램 클론코딩] 12. 메신저 기능 구현(Back-End)
·
Web/인스타 클론 코딩
간단한 메신저를 구현해 보았다. 기존의 api는 http 요청을 보내면 서버는 그 요청에대한 답만 해주면 되지만, 메신저는 내가 다른사람에게 메신저를 보냇을 때 서버가 나에게만 응답을 보내는 것이 아닌, 내가 메신저 보낸 사람들에게 모두 응답을 보내주어야 한다. 기존의 http 프로토콜로는 이를 구현할 수 없기 때문에, 웹 소켓이라는 새로운 프로토콜을 적용하였다. 또한, 웹 소켓은 http처럼 정해진 데이터 양식이 없기 때문에, Stomp라는 프로토콜을 사용하여 데이터 양식을 정의하였다. 1. 관련 라이브러리 추가 //websocket implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.spr..