오늘은 채팅창 css를 적용하다 수정해야 할 부분이 생겨서 다시 채팅창을 리팩터링 하는 작업을 했다. 문제 상황은 채팅 메시지가 채팅창의 세로 사이즈가 넘어갈 시 overflow-y: auto를 줘서 자동으로 세로 스크롤이 생기게 했다. 그런데 채팅을 새로 입력했을때 세로 스크롤만 생기지 스크롤이 자동으로 맨 밑으로 내려가는 게 아니라 사용자가 직접 스크롤을 내려서 최신 메시지를 확인해야 하는 문제가 발생했다. 그래서 채팅을 입력했을때 자동으로 스크롤이 맨 밑으로 내려가게 하는 방법을 찾아 해결했다. useRef useRef를 사용했는데 useRef를 간단히 말하면 React에서 특정 DOM요소에 접근할 때 사용하는 hook이다. 자바스크립트를 사용할 경우에는 getElementById나 querySel..

오늘은 오전, 오후에는 css작업을 어느 정도 하고 저녁에는 어드민 로그인을 구현했다. 어드민에는 회원가입도 필요 없고 로그인도 기존에 사용자단에서 로그인 시 필요한 인터셉터와 jwt가 이미 만들어져 있었기 때문에 금방 만들 수 있을 거라고 생각했다. 일단 어드민 계정 생성을 위해 엔티티를 만들어 주고 어드민 계정은 db에 직접 하나 넣어줬다. 이후 로그인 시 프론트에서 입력받은 계정이 어드민 계정인지 아닌지 검증하기 위한 로직을 작성해주고 로그인이 성공하면 입력받은 아이디를 jwt를 이용해 토큰으로 만들어서 해당 토큰을 프론트로 전달했다. db에 넣어준 어드민 계정으로 로그인 성공 시 토큰이 잘 전달되는지 로그인을 해봤는데 정상적으로 accessToken을 받은 것까지 확인할 수 있었다. 이제 어드민 ..

오늘은 최상위 게시판(EPL, LaLiga, SerieA, Bundesliga) 4개 중 어떤 게시판의 비중이 가장 큰지 알기 위해 4대 리그 게시판별 게시글을 종합하는 작업을 했다. 예를 들어 EPL 게시판을 부모로 갖고 있는 하위 게시판에 있는 게시글을 모두 종합하는 작업이다. 그런데 리그 게시판이 하위 게시판들의의 게시글을 갖고 있지 않아 findAll 같이 간단하게 구할 수 있는 문제가 아니였기 때문에 어떻게 모든 게시판의 게시글을 찾을지 고민을 했다. 우선 게시판의 구조가 총 3 depth(리그 게시판 -> 팀 게시판 -> 선수 게시판)로 구성된 게시판이기 때문에 리그 게시판을 부모로 갖고 있는 모든 팀 게시판을 리스트로 담아 팀 게시판 하나하나당 게시글의 개수를 더한 다음 또 팀 게시판 하나하..

오늘은 어드민 기능 중 인기 게시글을 파악하기 위한 통계 관련 기능을 구현하는 것을 목표로 했다. 조회수가 가장 높은 게시글 순위, 댓글이 가장 많이 달린 게시글 순위, 좋아요를 가장 많이 받은 게시글 순위 이렇게 세 가지 순위를 통계자료로 보여주기로 기획했었다. 조회수가 가장 높은순으로 게시글 3개를 어떻게 가져올까 생각하다 이전에 동료 한분이 평점순으로 장소를 가져오려고 했던 게 생각이 났다. 조회수 순으로 가져오는거랑 평점순으로 가져오라 방법은 똑같을 거라고 생각을 해 아샬 님이 평점순으로 장소를 가져오는 방법에 대해 답변을 주신 메가 오버플로우를 찾아봤는데 findTop3 OrderBy~~ 이런 형태로 가져올 수 있다는것을 알게 되었다. 바로 아래와 같이 코드를 작성했다. Hit(조회수)를 기준으..

23주 차 회고 (프로젝트 7주 차 회고) 메가 테라 23주 차를 진행하면서 있었던 일을 종합해서 회고하였습니다. 7주 차 작업 목표 7주 차의 가장 큰 목표는 어드민 기능을 핵심적인 것부터 최대한 많이 구현하는 것이었다. 그래서 기존에 계획했던 게시판의 어드민 기능 중 가장 핵심적이고, 없으면 안 되는 기능 3가지를 뽑아 무조건 구현하도록 최우선 순위로 선정했다. 핵심적인 3가지 기능은 아래와 같다. 1. 전체 멤버 관리 전체 멤버 수를 확인할 수 있다. 멤버의 등급을 변경할 수 있다. 멤버를 강제 탈퇴시킬 수 있다. 회원 정보(아이디, 닉네임, 등급, 게시글 작성 수, 댓글 작성 수)를 확인할 수 있다. 2. 게시판 관리 하위 게시판 생성 (3 depth) 게시판 삭제 3. 등업 신청 관리 등업 신청..

오늘은 기존에 구현했던 채팅 기능을 더 보완하는 작업을 했다. 작업 목표는 카카오톡처럼 자신이 쓴 채팅과 상대방이 쓴 채팅의 말풍선 색이 다르게 보이도록 하고, 상대방의 채팅 말풍선에 상대방의 닉네임을 노출시키도록 하는 것이었다. 기존에는 누가 채팅을 치든 구분이 안되어서 익명 채팅방 같은 느낌이었는데 말풍선과 닉네임을 노출시켜 구분이 가도록 하는 것이었다. 우선 위와 같은 기능을 구현하기 위해 고민했던 건 자신이 쓴 채팅과 다른 사용자가 쓴 채팅을 어떻게 구별할지였다. 우선 두 가지 방법을 떠올렸는데 아래와 같다. 1. 채팅을 보낼 때 아래와 같이 자신의 닉네임(writer)을 같이 보내게 했기 때문에 메시지를 받는 사용자도 writer가 누구인지 알 수 있어 메시지를 받을 때 writer와 현재 로그..