이번 방학부터 자바 Spring을 학습하면서 프로젝트에 내용을 하나씩 적용해보고 있는데, 이 과정에서 첫 번째로 마주친 문제는 N+1 문제이다. 이번 포스팅에서는 N+1 문제가 무엇이며 왜 발생하는지를 알아보고, 이를 해결하기 위한 방안들과 그 중에서 어느 해결법을 적용했는지 기록하고자 한다.  📋 문제 상황현재 프로젝트에서 Scrap 객체와 Dataset 객체는 아래와 같이 다대일 관계를 갖고 있다. // domain/Scrap.java@Entity@Getter@Builder@AllArgsConstructor@NoArgsConstructorpublic class Scrap { // ... @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(na..

프로젝트에서 로그인 기능을 구현하면서 막혔던 부분들과 해결 과정을 기록하기 위해 포스팅을 작성했다. 특히 프론트 배포 서버 도메인과 백엔드 배포 서버 도메인이 서로 달랐기 때문에 여러 문제점에 부딪혀볼 수 있었다. 🔐 Session vs JWT Session 처음에는 session id를 통해 로그인 기능을 구현하려 했다. 그 이유는 stateless한 HTTP 통신 특성상 클라이언트의 로그인 상태를 확인하기 위해서는 쿠키를 활용해야 하는데, session id 값에는 유저 정보가 담겨있지 않으므로 보안상 이점이 더 많다고 생각했기 때문이다. 하지만 토큰 값에 유저 정보를 담지 않는 대신, 서버측에서 각 브라우저의 세션 id 정보 및 클라이언트 정보를 직접 관리해야 하므로 서버 파트의 부담이 더 커질 수..

문제 링크 11000번: 강의실 배정 첫 번째 줄에 N이 주어진다. (1 ≤ N ≤ 200,000) 이후 N개의 줄에 Si, Ti가 주어진다. (0 ≤ Si < Ti ≤ 109) www.acmicpc.net 풀이 과정 먼저 시간복잡도를 확인해보았다. 시간 제한이 1초, N의 최댓값이 200,000 → N^2 = 40억 (대략 40초) 이기 때문에, 한 강의 시간을 살펴볼 때마다, 다른 강의 시간을 모두 탐색하는(브루트포스) 방법은 적절치 않을 것이라는 전제하에 코드를 작성하였다. 그리고 각 강의실에서 진행되는 모든 강의들 중, 가장 일찍 끝나는 시간을 알아내기 위해서 각 강의실에서 강의가 끝나는 시간의 정렬이 필요했다. 이 경우에는 시간이 새로 입력될 때마다 곧바로 정렬이 이뤄져야했기 때문에 최소 힙을 ..

깃헙 TIL 레파지토리에 올릴까 하다가 내용이 길어질 것 같아서 그냥 블로그에 올리기로 결심했다 . . . TIL을 마크다운 언어로 작성하다보니, 적은 내용이더라도 시간이 엄청 소요된다 ㅜㅜ 사실 블로그 포스팅도 좀 귀찮은데 그래도 안 쓰면 또 까먹을 것 같으니 포스팅해본다! 사실 그렇게 대단한 내용은 아니라서 블로그에 올릴 거리가 되나 싶긴 하지만 그래도 뭐든 과정에서 배운 점이 있다면 기록해둔다고 나쁠 것 없을 것 같다 우선 이번에 보여줄 코드는 Next 스터디(라고 하기에는 사실상 React 스터디)로 간단한 TODO 앱을 만들고 있는데, 이 과정에서 렌더링이 너무 무분별하게 발생하는게 꽤 거슬렸다. 따라서 기능을 더 추가하기 전에 React Hook을 사용하여 렌더링 횟수를 조금 줄여보았다. 우선..

짜짠! 이 블로그에 알고리즘 관련 포스팅은 한번도 안써봤는데 지금 새벽 3시가 넘었는데 잠도 안오고해서.. 심심해서 그냥 깃허브 개인 레파지토리에 해설 파일을 정리해서 올렸는데 블로그에도 올려두면 좋을 것 같아서 포스팅을 하게 되었다. 요즘 알고리즘 공부를 조금씩 해보고 있는데, 기초적인 자료구조 내용은 이제 거의 다 학습한 것 같다(아마두..) 이제 알고리즘 내용을 하나씩 뜯어보기에 앞서, 자료구조 관련 문제를 하나 풀고 넘어가기로 했다. 문제 - 백준 1665번 https://www.acmicpc.net/problem/1655 1655번: 가운데를 말해요 첫째 줄에는 백준이가 외치는 정수의 개수 N이 주어진다. N은 1보다 크거나 같고, 100,000보다 작거나 같은 자연수이다. 그 다음 N줄에 걸쳐..

정말 오랜만에 올리는 포스팅 . . . . 그간 이런저런 일들이 있었는데, 일단 멋사 활동을 계속 병행하다보니 노션에 너무 익숙해져서, 그동안 내 개인 노션에만 기록하고 블로그는 까맣게 잊어버렸던 것 같다🥹 앞으로 블로그 포스팅도 다시 신경써야지 .. 여름방학에 멋사 10기의 공식적인 활동이 마무리되고, 남은 기간동안 교내 프론트엔드 트랙 부원들과 Next.js 스터디를 진행하고 있다. 다음 포스팅에서 관련 글을 정리하겠지만, 일단 간단하게만 설명하자면 기존에 클라이언트 사이드 렌더링만 지원하던 React와 달리 Next.js는 클라이언트 사이드 렌더링, 서버 사이드 렌더링을 적절히 병행하여 사용할 수 있다. 이러한 Next.js를 잘 활용하기 위해서는 기본적으로 SSR과 CSR의 차이점을 잘 이해하고 ..

지난번 학교 수업에서 웹 서비스 개발 프로젝트를 진행했는데, 해당 프로젝트 과정에서 자바스크립트 파일 내에서 특정 엘리먼트에 이벤트 함수를 지정하는 코드를 작성했다. let new_input = document.createElement('input'); new_input.setAttribute("id", theater); new_input.setAttribute("type", 'radio'); new_input.setAttribute("value", theater); new_input.setAttribute("class", 'theater_city'); new_input.setAttribute("name", 'theater_city'); new_input.onclick = theaterCity_onCli..

벨로퍼트 리액트 튜토리얼 input 태그 부분(https://react.vlpt.us/basic/09-multiple-inputs.html)을 공부하는 중에 이해가 안 되는 부분이 있었다. 특히 const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, // 기존의 input 객체를 복사 [name]: value // name 키를 가진 값을 value로 설정 }); }; 이 부분을 이해하기가 어려웠다. ☝ 첫 번째로는 ...inputs ✌ 두 번째로는 [name]: value 부분이다. 강의 자료에 달린 사람들의 댓글과 구글링을 통해 내 나름대로 해당 내용들을 정리할 수 있었다. ☝ Spread(...) 연산자 우..