프로젝트 구성
·
Web/인스타 클론 코딩
먼저 기존 모놀리식 구조에서 MSA 형태로 구조를 바꾸어 확장성과 유지보수성을 높여보고자 했습니다.  프로젝트는 총 5가지 서비스로 분리하였고, 각 서비스의 구성 내용 및 역할은 아래와 같습니다. 인증 처리 서버인증 처리 서버는, 서버의 회원가입, 로그인, 세션 등의 인증과 유저 정보 등의 처리를 담당하는 서버 입니다. MySQL을 활용하여 유저 정보를 저장하고, Redis를 사용하여 세션을 관리할 예정입니다. 포스팅 처리 서버게시글에 관련된 포스팅, 댓글, 좋아요 등의 기능을 처리하고 각 사용자에게 최적화된 뉴스피드를 제공하는 역할을 담당하는 서버입니다.MySQL을 활용하여 게시글에 대한 정보들을 저장하고, Redis를 활용하여 뉴스피드 내역을 캐싱하며 포스팅 API 서버는 포스팅 저장을 그리고 뉴스피..
프로젝트를 리팩토링 해보자!
·
Web/인스타 클론 코딩
현재까지 Outstagram의 개발은 주로 단순 기능 구현에 중점을 두어 진행되었습니다.초기 개발 단계에서 모놀리식 아키텍처를 선택했고,자바의 Stream 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..