선호:하다

[BOJ] 2559 수열

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번..

[BOJ] 9996 한국이 그리울 땐 서버에 접속하지

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은 *..

[BOJ] 2309 일곱 난쟁이

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..

Next.js로 프로젝트를 진행하다보면 페이지마다 다른 레이아웃을 적용하고 싶은 상황이 생긴다.이럴 때 흔히 사용할 수 있는 방법 중 하나가 바로 getLayout 패턴이다. getLayout 패턴이란?getLayout 패턴은 Next.js의 Page Router 환경에서 각 페이지마다 다른 레이아웃을 정의할 수 있게 해주는 방법이다.예를 들어, 검색창이 들어간 페이지에만 SearchableLayout을 적용하고 싶다면 다음과 같이 코드를 작성한다.// pages/search.tsximport SearchableLayout from '../components/SearchableLayout';export default function SearchPage() { // 내용}SearchPage.getLayo..

이전 포스팅인 [Next.js] Next.js의 사전 렌더링과 연결되는 글입니다. 프리패칭(pre-fetching)next.js는 빠른 hydration을 위해 빌드타임에 페이지 별로 js번들을 생성하고 최초 접속시에 현재 페이지의 js번들만 다운받는 것을 이전 학습을 통해 알게되었다. 그렇다면 최초 접속 이후에 이동할 페이지에 대해서는 해당 페이지의 js번들을 새로 받아와야하는데 이때 사용되는 기술이 프리패칭이다. 프리패칭은 현재 페이지에서 이동할 가능성이 있는 페이지들의 js번들을 페이지 요청이 있기 전에 백그라운드에서 미리 다운로드받아 더 빠른 페이지 이동이 가능하도록 해준다. 프리패칭 실습프리패칭은 개발모드에서는 동작하지 않으므로 빌드 후 npm run start을 통해 프로덕션 모드로 실행해주어..