선호:하다

[BOJ] 1629 곱셈

https://www.acmicpc.net/problem/1629 이 문제는 얼핏 보면 단순해보이지만 각 수의 최댓값이 21억이라는 점 때문에 그냥 for문으로 풀게 되면 오버플로우가 발생한다.이는 모듈러 연산의 성질을 이용해야하는 대표적인 문제로 중간에 계속 나머지를 구하면서 계산해야한다.문제에 들어가기 전 모듈러 연산에 대해서 정리하고 가자.모듈러 연산이란?모듈러(Modulo) 연산은 나머지를 구하는 연산이다. 프로그래밍에서는 % 기호를 사용하며, A (mod N)은 A를 N으로 나눈 나머지를 의미한다.이는 숫자의 범위를 제한하거나, 매우 큰 수의 계산 결과를 특정 범위 내로 유지해야 할 때 주로 사용한다. 모듈러 연산의 성질1. 덧셈 성질(A + B) (mod N) = ((A mod N) + (B..

[BOJ] 1940 주몽

https://www.acmicpc.net/problem/1940 1. 카운팅 배열(나의 풀이)처음에는 N이 10만개 이하이므로 카운팅 배열이 떠올랐다. 어떠한 정수 X에 대해 M-X의 값이 존재하는 지 확인하면 O(N)의 시간복잡도로 문제를 풀 수 있다고 판단했다. 결론적으로는 꽤 효율적인 방법이지만 배열의 범위에 대해 엄격히 확인해야된다는 단점이 있는 코드인 것 같다.#include using namespace std;int n, m, result;int cnt[100004];int main() { ios::sync_with_stdio(false); cin.tie(nullptr); cin >> n; cin >> m; for (int i = 1; i > x; cn..

https://www.acmicpc.net/problem/2559 처음에는 시간 복잡도를 생각안하고 큐에 K개가 들어올 때마다 합을 구해 최댓값을 갱신한 후 pop_front()를 수행하는 로직을 작성했다. 하지만 N과 K의 범위가 10만이기 때문에 10만 x 10만 즉, 100억으로 시간 초과가 떴다. 누적합(Prefix Sum) 이용누적합은 앞에서부터 차례대로 더한 값을 미리 저장해둔 배열을 이용하는 알고리즘이다. 배열의 특정 구간의 합을 반복해서 구해야 할 때, 매번 더하지 않고 단 한 번의 연산으로 결과를 내기 위해 사용한다.// 기본 원리psum[i] = psum[i - 1] + a[i]// 인덱스 i ~ j까지의 합psum[j] - psum[i - 1] 데이터 갯수가 N, 구간합 계산을 M번..

https://www.acmicpc.net/problem/9996 패턴에서 *을 기준으로 문자열을 분리해서 str의 앞 부분, 뒷 부분과 각각 비교하면 되겠다는 생각은 쉽게 떠올릴 수 있다.문자열 분리는 find와 substr 메소드를 활용하여 구할 수 있다.auto end = pattern.find('*'); // 델리미터 인덱스 위치head = pattern.substr(0, end);tail = pattern.substr(end + 1); substr은 첫 번째 인자로 시작 인덱스를 받고 두 번째 인자로 문자열의 길이를 입력받는다. 즉, head는 처음부터 * 바로 전까지의 문자열이 된다. 또한 substr의 두 번째 인자를 생략하면 시작 인덱스부터 문자열 끝까지를 반환한다. 따라서 tail은 *..

https://www.acmicpc.net/problem/2309 문제를 처음 봤을 때는 조합으로 9C7의 경우의 수 중 합이 100이 되는 것을 출력하면 되겠다고 바로 떠올릴 수 있지만 조합을 구현하는 방법을 몰라 해맸다. 다만 이 문제의 경우 단순히 모든 순열의 경우의 수를 따지는 완전 탐색으로도 충분히 통과되는 문제였다. 1. 완전탐색먼저 시간복잡도를 대충 계산해보면 9P7 즉 9! / 2! = 약 18만의 경우의 수가 있어 시간 제한에 여유가 있는 것을 알 수 있다.따라서 next_permutation()을 이용해 모든 순열에 대해서 완전 탐색으로 구현할 수 있다./* 순열(완전탐색)을 이용한 방법 */#include using namespace std;vector v;int main() { ..

서버 액션서버 액션이란 브라우저에서 호출할 수 있는 서버측에서 실행되는 비동기 함수를 말한다.기존 Next.js의 api route 기능을 일부 대체한다고 볼 수 있는데, 보통 form에서 제출을 처리하는 용도로 사용된다. "use server";해당 함수가 서버에서만 실행되는 서버 액션이 됨컴포넌트 안의 함수가 아니라 아예 따로 함수 파일을 만들 경우, 파일의 최상단에 정의 form의 action으로 해당 서버액션 함수를 전달하면 form이 submit될 때 자동으로 서버에서 해당 함수를 실행한다. 서버 액션의 장점코드가 간결해짐api 연결과정 없이 바로 db 로직 작성 가능서버측에서만 실행되므로 보안성 좋음 재검증 Next.js에서는 서버 액션이나 서버측 로직 실행 후 변경된 데이터를 즉시 반영하기 ..

스트리밍일반적으로 사용되는 스트리밍은 잘게 쪼게진 작은 용량의 데이터를 클라이언트로 연속적으로 전송하는 기술을 의미한다.Next.js에서의 스트리밍은 이와 비슷하게 하나의 페이지를 잘게 쪼게어 빠르게 보여줄 수 있는 컴포넌트들 먼저 보여주고, 로딩이 오래 걸리는 컴포넌트들은 그 후에 렌더링될 수 있도록 하는 기술이다. 주로 동적 페이지의 사용자 경험을 개선하기 위해 사용된다. 페이지 스트리밍 적용const Loading = () => { return ( Loading... )}export default Loading;동적 페이지가 있는 경로에 loading.tsx 파일을 추가해주면 해당 동적 페이지가 로딩중일때 자동으로 loading 페이지가 스트리밍된다. ※ loading.tsx 주의점load..

Next의 페이지 캐싱에 대해 들어가기 전에 페이지 별 사전 렌더링 방식에 대해 다시 한 번 알아보자프로젝트를 빌드하면 페이지 별 사전 렌더링 방식을 알 수 있는데 앱 라우터에서는 정적 페이지와 동적 페이지로 나뉜다. 정적 페이지 (static page)정적 페이지는 빌드 타임에 HTML이 미리 생성되어, 서버 요청 시 별도의 연산 없이 해당 HTML을 그대로 반환하는 페이지이다.동적 페이지가 아닌 모든 페이지는 정적 페이지fetch()에 cache: "force-cache" 또는 revalidate 값이 설정되어 데이터 캐싱이 이루어지는 페이지동적 함수(쿠키, 헤더, 쿼리스트링) 등을 사용하지 않는 페이지동적 페이지 (dynamic page)동적 페이지는 매 요청 시 서버에서 렌더링이 수행되며, 사용자..

저번 포스팅까지 Page Router를 기반으로한 Next.js에 대해서 학습하였다.그렇다면 Page Router의 장단점을 정리해보고 최신 라우팅 방식인 App Router가 나오게된 배경을 살펴보자. Page Router의 장점파일 시스템 기반의 간편한 라우팅 방식pages 디렉토리 안에 파일을 생성하는 것만으로 자동으로 라우팅 설정/pages/about.tsx -> /about다양한 사전 렌더링 방식 제공 (SSR, SSG, ISR)[Next.js] 사전 렌더링과 데이터 패칭 (Page Router) Page Router의 단점페이지별 레이아웃 설정이 번거로움페이지마다 레이아웃을 중복 구현하게 되는 문제 발생데이터 패칭이 페이지 컴포넌트에 집중됨서버 측 데이터 패칭을 getServerSideProp..

기존 리액트에서의 데이터 패칭리액트의 csr 방식은 원래도 초기 렌더링 속도가 느리다는 단점이 있었다.그런데 데이터 패칭은 useEffect 안에서 컴포넌트가 모두 렌더링된 이후에나 요청이 시작되기 때문에 이는 더욱 느릴 수 밖에 없다.이 때문에 사용자는 컨텐츠가 초기 렌더링되는 시간 + 데이터를 요청하고 로딩하는 시간을 기다리게 된다.export default function Page() { // 1. 데이터를 보관할 state 생성 const [state, setState] = useState(); // 2. 데이터 패칭 함수 생성 const fetchData = async () => { const response = await fetch("..."); const data = a..