오늘은 회사에서 테스트 코드 작성 중 기존 테스트 코드를 살펴보다 어떤 곳은 @InjectMocks를 사용했고 어떤 곳은 @MockBean을 사용하고 있길래 어떤 차이가 있는지 궁금해서 알아봤다. 오늘 새로 배운 내용 @Mock, @InjectMocks, @MockBean의 관계 @Mock은 Mock(가짜) 객체를 생성하고, @InjectMocks는 클래스의 인스턴스를 생성한 후 @Mock 어노테이션으로 생성된 Mock 객체를 이 인스턴스에 주입한다. @MockBean은 스프링 컨텍스트에 Mock 객체를 등록해 @SpringBootTest와 함께 사용할 때 @Autowired가 붙은 필드에 자동으로 의존성을 주입한다. @Mock: @Mock 어노테이션은 Mock(가짜) 객체를 생성한다. Mock 객체는..
오늘 새로 배운 내용 foreach문을 이용해 반복해서 쿼리를 날릴 때, 전체적인 쿼리를 날리는 것보다 IN절 안에서 foreach문을 이용해 반복하는 게 효율이 더 좋다. 아래쿼리처럼 foreach문을 작성하면 전달받은 list의 크기만큼 전체 쿼리가 발생하기 때문에 비효율적이다. SELECT * FROM users WHERE user_id = #{userId} 예를 들어 userId가 들은 list의 사이즈가 10이면 "SELECT * FROM users WHERE user_id = #{userId}" 전체 쿼리가 10번이 날아간다. 하지만 전체 쿼리를 10번 반복할 필요 없이 IN절 안에 foreach문을 작성해 주면 전체쿼리 발생수가 한 번으로 줄어들어 쿼리 발생 비용을 줄일 수 있어 더 효율적이..
오늘 새로 배운 내용 flatMap 기존 Redis에서 가져온 데이터와 DB에서 가져온 데이터를 새로운 Response 객체를 만들어서 Service에서 조합해서 응답하는 방식으로 설계했었는데 응답값을 조합하는 방식이 복잡해져 Service가 배보다 배꼽이 커지는 상황이 발생했다. 그래서 Service에서 조합하는것이 아닌 새로운 Response 객체를 만들어서 그 객체안에서 조합해서 응답하는 방식으로 변경하는게 좋겠다는 리뷰를 받았다. 객체들을 조합할 때 처음으로 stream의 flatMap 메서드를 사용해봤는데 각 요소를 인자로 변환하는 map메서드와 다르게 flatMap은 각각의 요소를 다른 스트림으로 변환하는 기능이였다. flatMap 예시 List words = Arrays.asList("FLA..
KiCK OFF 프로젝트에서 축구 경기 일정을 조회하기 위해 무료(인줄 알았던..) api인 rapid api를 사용하고 있었다. 그런데 11월 말 코딩을 하던 중 핸드포네서 "띠링" 소리가 울렸다. 확인해보니 카드 결제소리 였다.. 자동이체 해놓은게 없는데 돈이 빠져나가 확인해보니 RAPIDAPI 에서 자동으로 6,770원을 뺏어(?)갔다.. 부리나케 rapid api 사이트에 가서 pricing 부분을 다시 확인해보니 하루에 100번 요청까지만 무료고 다음 요청부터는 0.005달러씩 추가 요금이 발생한다고 적혀있었다. 뭐 아무튼 6,770원만 빠져나간걸 감사하게 생각하고 급한대로 경기 요청 api는 우선 사용하지 못하도록 막아놨었다. 해당 api를 사용하는 부분은 모두 구현을 했기 때문에 배포 전까지..
오늘은 어드민 페이지 css 작업을 끝냈다. 그중 게시판을 관리하는 페이지의 css를 적용할 때 시간이 꽤나 걸렸었는데 그 이유가 메뉴를 클릭했을 때 클릭한 메뉴의 글씨 색이 변한 상태로 유지되도록 css를 적용하고 싶었기 때문이다. 메뉴를 클릭했을 때 글씨 색을 변하게 하는 속성 중 active 속성이 있었는데 active속성을 적용하면 메뉴를 클릭했을 때 그 순간에만 메뉴 색이 변경이 되어서 내가 구현하고 싶은 기능과는 달랐다. 위 css를 적용하기 위해 처음에 이용했던 방법은 useState를 이용해 isSelected를 만들어서 초기값은 false로 주고 메뉴를 클릭하면 onClick함수에 setIsSelected를 true로 바꿔 isSelected가 true이면 해당 태그의 색을 변경하는 식으..
오늘은 채팅창 css를 적용하다 수정해야 할 부분이 생겨서 다시 채팅창을 리팩터링 하는 작업을 했다. 문제 상황은 채팅 메시지가 채팅창의 세로 사이즈가 넘어갈 시 overflow-y: auto를 줘서 자동으로 세로 스크롤이 생기게 했다. 그런데 채팅을 새로 입력했을때 세로 스크롤만 생기지 스크롤이 자동으로 맨 밑으로 내려가는 게 아니라 사용자가 직접 스크롤을 내려서 최신 메시지를 확인해야 하는 문제가 발생했다. 그래서 채팅을 입력했을때 자동으로 스크롤이 맨 밑으로 내려가게 하는 방법을 찾아 해결했다. useRef useRef를 사용했는데 useRef를 간단히 말하면 React에서 특정 DOM요소에 접근할 때 사용하는 hook이다. 자바스크립트를 사용할 경우에는 getElementById나 querySel..