치춘짱베리굿나이스

2차원 배열의 합 문제 2차원 배열이 주어졌을 때 (i, j) 위치부터 (x, y) 위치까지에 저장되어 있는 수들의 합을 구하는 프로그램을 작성하시오. 배열의 (i, j) 위치는 i행 j열을 나타낸다. 입력 첫째 줄에 배열의 크기 N, M(1 ≤ N, M ≤ 300)이 주어진다. 다음 N개의 줄에는 M개의 정수로 배열이 주어진다. 배열에 포함되어 있는 수는 절댓값이 10,000보다 작거나 같은 정수이다. 그 다음 줄에는 합을 구할 부분의 개수 K(1 ≤ K ≤ 10,000)가 주어진다. 다음 K개의 줄에는 네 개의 정수로 i, j, x, y가 주어진다(1 ≤ i ≤ x ≤ N, 1 ≤ j ≤ y ≤ M). 출력 K개의 줄에 순서대로 배열의 합을 출력한다. 배열의 합은 (2^31)-1보다 작거나 같다. 풀..

너의 평점은 문제 인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다. P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까? 입력 20줄에 걸쳐 치훈이가 수강한 전공과목의 과목명, 학점, 등급이 공백으로 구분되어 주어진다. 출력 치훈이의 전공평점을 출력한다. 정답과의 절대오차 또는 상대오차가 10^(..

색종이 문제 가로, 세로의 크기가 각각 100인 정사각형 모양의 흰색 도화지가 있다. 이 도화지 위에 가로, 세로의 크기가 각각 10인 정사각형 모양의 검은색 색종이를 색종이의 변과 도화지의 변이 평행하도록 붙인다. 이러한 방식으로 색종이를 한 장 또는 여러 장 붙인 후 색종이가 붙은 검은 영역의 넓이를 구하는 프로그램을 작성하시오. 예를 들어 흰색 도화지 위에 세 장의 검은색 색종이를 그림과 같은 모양으로 붙였다면 검은색 영역의 넓이는 260이 된다. 입력 첫째 줄에 색종이의 수가 주어진다. 이어 둘째 줄부터 한 줄에 하나씩 색종이를 붙인 위치가 주어진다. 색종이를 붙인 위치는 두 개의 자연수로 주어지는데 첫 번째 자연수는 색종이의 왼쪽 변과 도화지의 왼쪽 변 사이의 거리이고, 두 번째 자연수는 색종이..

내용이 굉장히 방대하고 어려워서 간략하게 메모 느낌으로만 적는 게시글… 나중에 책을 사서 읽던지 해야 할 것 같다 도메인 주도 개발 시작하기: DDD 핵심 개념 정리부터 구현까지 클린 아키텍처 도메인 주도 설계란 무엇인가? 쉽고 간략하게 이해하는 DDD 도메인 주도 설계 의미 도메인별로 나누어 설계하는, 도메인이 중심이 되는 설계 방식 도메인의 복잡한 문제를 모델링하고 구현할 수 있다 큰 도메인을 전략적 설계를 이용해서 작은 도메인과 컨텍스트 모델로 분류하고, 작은 모델들을 전술적 설계를 이용해서 실체화하는 일련의 과정을 도메인 주도 설계라고 부른다 도메인 그 자체와 도메인 로직에 초점을 맞춘다 데이터 중심의 접근법 탈피 유비쿼터스 언어를 사용한다 도메인 전문가와 소프트웨어 설계자, 개발자 간의 커뮤니케..

Form 다루기 처음엔 그냥 무식하게 (?) ref 로 관리했는데 ref 들이 너무 많아지니까 이게 맞나 싶어서 찾아봤기도 하고 동료분께 조언을 얻었따. 전부 ref로 관리하기 Submit 그냥 모든 값을 ref 로 관리하는 방법이다 구현이 쉽고 따로 형변환을 해줄 필요도 없이 모든 데이터가 잘 들어간다 단 폼이 길고 복잡해질 경우 모든 범주에 대해 ref를 추가해 주어야 한다는 사실이 매우 애매하다 FormData 활용하기 Submit JavaScript API인 FormData 를 사용해서 이벤트를 FormData 객체로 변환해주는 방법이다 reactive, ref 등을 전혀 사용하지 않기 때문에 코드가 매우 짧아진다는 장점이 있다 단 FormData 내부 값들을 getter 로 가져와야 하기 때문에..

Vue를 먹자 Vue는 공식 문서가 참 달다 … 굳이 다른 블로그 안 봐도 공식문서만으로 왠만한 게 다 해결되는듯 … 반응형 API 컴포지션 API https://ko.vuejs.org/guide/extras/composition-api-faq.html 뷰 공식문서를 보면 Options | Composition 으로 나누어져 있는 것을 볼 수 있다 Options 는 Vue 2에서 사용하던 기존 체계이고, Composition API는 Vue 3에서 공식적으로 지원하기 시작한 API이다 컴포지션 API 체계로 바뀌면서 로직의 재사용성이 높아졌고, 코드 구성을 조금 더 유연하게 할 수 있게 되었다 타입스크립트와도 잘 맞아서 타입 추론도 더 잘 된다고 한다 setup() https://ko.vuejs.org/..

Optimistic Update 이전 게시물에서 쿼리 키를 싹 정리하였다 좋아요 버튼을 눌렀을 때 쿼리를 refetch 하고 나서야 화면에 변화가 생기는데, 이건 사용자 입장에서 엄청나게 느린 동작이 아닐 수 없다 Optimistic Update 를 적용하여 반응을 빠르게 만들어보자 사전 지식 Optimistic Update? 낙관적 업데이트 라는 뜻 요청을 보내고 응답을 기다리는 동안, 응답이 올 때까지 화면 UI 업데이트를 중단하지 않고 미리 결과를 예측해서 화면 UI를 미리 업데이트하는 기법이다 서버 응답이 당연히 성공할 것이라고 가정하고 화면 업데이트를 진행하기 때문에 낙관적 업데이트라고 불리는 것 예를 들어, 좋아요 버튼을 눌렀을 때 좋아요 post 요청이 서버로 보내진다 클라이언트에서는 “어차..

매직 리터럴 이제 안녕 💩 리얼월드 in Vue (뷰얼월드…) 프로젝트를 수행하면서 Tanstack Query 를 도입했는데, 규모가 그다지 크지 않은 프로젝트를 수행했을 때의 습관이 남아서 (+ 데이터 캐싱 용도로만 TQ를 대충 사용했어서… 😕) 쿼리 키를 전부 제각각인 문자열로 다뤘더니 혼돈의 도가니탕이 되었다 쿼리 키를 전부 하드코딩한 탓에 어떤 상황에서 어떤 쿼리 키를 사용해야 하는지 혼란스러워진 것;;; 추후 좋아요 버튼에 Optimistic Update 를 적용하고 싶은데, 이를 위해서 사전 작업을 할 필요도 좀 느끼게 됐다 따라서 이번 시간에는 쿼리 키를 객체로 적절하게 다뤄보는 연습을 할 것이다… 기존 쿼리 키 관리 코드 export function useGetArticles(page: R..