사이먼's 코딩노트

[음악 커뮤니티 사이트 제작]앞서 페이지별 기능 설명을 마치고 아래는 완성된 기능을 모두 담은 시연 영상입니다.구현된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다.첫 팀 프로젝트를 진행하면서 협업에 대해서 배운 점도 많고, 제 실력으로 웹 자체를 구현할 수 있을 지에 대한 의구심이 들었었는데, 열심히 고민해보고 노력해서 이런 멋진 결과를 만들어내서 너무 만족한 한 달이였습니다.웃음이 나오는 재밌는 영상은 아니지만, 첫 작업인 만큼 귀엽게 봐주세요~~깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account ..

[음악 커뮤니티 사이트 제작]지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [커뮤니티]사이트 상단 헤더 메뉴의 커뮤니티를 통해 모든 회원이 작성한 게시물을 열람할 수 있습니다.커뮤니티는 총 3가지 타입으로 공지, 자유, 친목 게시판으로 구분되어 있습니다.로..

[음악 커뮤니티 사이트 제작]지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [차트 목록]사이트 상단 헤더 메뉴의 차트 목록을 통해 TOP100과 장르별 차트를 열람할 수 있습니다.TOP100은 음악의 좋아요(추천) 수가 많은 순서대로 나열되며, 만일 해당 ..

[음악 커뮤니티 사이트 제작]지난번 E-R 다이어그램을 통해 데이터베이스를 소개한 데에 이어 이번에는 모든 기능이 구현된 각 페이지를 소개해드릴 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [메인페이지]메인페이지는 서비스 접속 초기화면으로 화면 페이지의 기본 구조는 상단 메뉴를 나타내는 헤더, 중간 본문,..

[음악 커뮤니티 사이트 제작]지난번 포스팅에 이어 이번에는 E-R 다이어그램을 통해 데이터베이스 설계에 대해서 설명드릴 예정입니다.데이터베이스 설계 후 프로젝트에 작성된 엔티티 코드는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [ERD 소개 및 설명]아래 사진은 실제 DB 설계와 함께 작성된 ERD(Entity Relationship Diagram)이다.테이블은 총 ..

[음악 커뮤니티 사이트 제작]음악 커뮤니티 사이트라는 주제 4인 1조의 팀 프로젝트를 진행하였습니다.'음악 커뮤니티 사이트 제작' 카테고리에서는 팀 프로젝트를 진행하면서 구현 및 설계된 데이터베이스와 각 화면 페이지에 대한 설명을 작성하고자 합니다.각 페이지의 대한 코드 구현은 따로 포스팅되지 않을 예정이니 코드를 참고하고 싶으시다면 아래 깃허브 리포지터리를 방문해 주시길 바랍니다. 깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [프로젝트 개요]다음은 음악 커뮤니티 사이트(..

[Ajax, Stomp 기반 멀티 채팅방 구현]저번 '멀티 채팅방 (2)' 포스팅에서 Ajax 기반의 멀티 채팅방을 구현하였다.하지만, Ajax를 적용했을 때 불필요한 데이터 전달때문에 서버 부하가 생길 수도 있다는 단점이 있다.해당 부분을 해결하기 위해서 웹 소켓을 사용해 볼 예정입니다.웹 소켓을 사용하면 브라우저와 서버간에 서로 데이터 전달을 하지 않고, 브라우저는 서버에게만 전달, 서버는 브라우저에게만 전달하는 형식이기 때문에 부하가 생기는 단점을 막을 수 있다.Stomp가 바로 그 웹 소켓 방식 중 하나라고 생각하면 좋다. [Stomp란?]Simple/Stream Text Oriented Message Protocol의 약어로 웹 소켓 위에서 동작하는 문자 기반 메세징 프로토콜로써 클라이언트와 서..

[Ajax, Stomp 기반 멀티 채팅방 구현]저번 '멀티 채팅방 (1)' 포스팅에 이어 ChatRoom과 ChatMessage 관련 MVC를 모든 구현하였다면 이제 템플릿을 통해 화면을 구현하고 실제로 JavaScript에 Ajax를 적용하여 실시간으로 채팅이 되는 것을 확인해봅시다.전체 코드와 패키지 구조는 깃허브 리포지터리 주소를 통해 참고 부탁드립니다.리포지터리 주소 : https://github.com/psm817/chat_review GitHub - psm817/chat_reviewContribute to psm817/chat_review development by creating an account on GitHub.github.com [list.html 생성]먼저 전체 채팅방 리스트를 보여..

[Ajax, Stomp 기반 멀티 채팅방 구현]이번 포스팅에서는 Ajax, Stomp 기반의 멀티 채팅방을 구현해 볼 예정입니다.전체 코드를 포스팅할 순 없기 때문에 전체 구조와 코드를 확인하시려면 리포지터리 주소를 참고 부탁드립니다.해당 프로젝트는 SpringBoot v_3.3.0, Java 21 기반으로 세팅되어 있습니다.리포지터리 URL 주소 : https://github.com/psm817/chat_review GitHub - psm817/chat_reviewContribute to psm817/chat_review development by creating an account on GitHub.github.com [Ajax란?]Ajax는 Asynchronous JavaScript and XML의..

[REST API 적용]저번 'REST API (3)' 포스팅에 이어서 REST API를 적용하기 위한 코드를 작성해봅시다.게시물 등록을 위한 Article MVC를 설계한 다음, 이제 실제로 게시물 CRUD를 REST API로 적용해봅시다.전체 코드와 패키지 구조는 깃허브 리포지터리 주소를 통해 참고 부탁드립니다.리포지터리 URL 주소 : https://github.com/psm817/jwt_review GitHub - psm817/jwt_reviewContribute to psm817/jwt_review development by creating an account on GitHub.github.com [ArticleController 생성]게시물 등록, 조회, 수정, 삭제를 위해서 ArticleCo..