프로젝트를 리팩토링 해보자!
·
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..
[인스타그램 클론코딩] 12. 메신저 기능 구현(Back-End)
·
Web/인스타 클론 코딩
간단한 메신저를 구현해 보았다. 기존의 api는 http 요청을 보내면 서버는 그 요청에대한 답만 해주면 되지만, 메신저는 내가 다른사람에게 메신저를 보냇을 때 서버가 나에게만 응답을 보내는 것이 아닌, 내가 메신저 보낸 사람들에게 모두 응답을 보내주어야 한다. 기존의 http 프로토콜로는 이를 구현할 수 없기 때문에, 웹 소켓이라는 새로운 프로토콜을 적용하였다. 또한, 웹 소켓은 http처럼 정해진 데이터 양식이 없기 때문에, Stomp라는 프로토콜을 사용하여 데이터 양식을 정의하였다. 1. 관련 라이브러리 추가 //websocket implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.spr..