joycie416 님의 블로그

초기에  페이지를 로딩할 때 성능을 최적화하기 위한 몇 가지 방법을 소개하려고 한다. 1. 함수 내부에서 import하기파일을 실행하면서 import를 하면 당장 쓰이지 않을 모듈도 모두 import된다. 이를 함수 내부에 적어주면 함수가 실행되면서 import되기 때문에 초기 실행 시간을 조금 더 단축할 수 있다.// import { getNewProducts } from "@/services/server-action";import Banner from "@/components/Banner";import NewProductList from "@/components/NewProductList";const HomePage = async () => { const { getNewProducts } = awa..

https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해완전 탐색하려면 너무 시간이 오래 걸려서 다른 방법을 사용해야할 것 같았다. 조금 더 패턴을 찾기 위해 예시를 들여다보니 앞 자리에서부터 크기 비교를 통해 큰 수를 만들 수 있었고, 원하는 만큼 숫자를 제거했을 때 종료하면 될 것 같았다.다음이 키 포인트이다.현 위치 숫자가 오른쪽 숫자보다 작으면 현 위치를 제거! 먼저 String의 `slice` 메소드를 사용하는 방법을 사용했지만 한 케이스..

Next.js와 TypeScript를 활용할 수 있도록 Riot에서 제공하는 API를 활용해서 챔피언, 아이템 정보를 제고하고 로테이션 정보를 제공하는 사이트를 만들었다. 사실 롤을 잘 몰라서 추가 기능을 많이 넣지는 못했지만 챔피언 스킨 이미지는 캐러셀로 모두 제공했다.  이전에 client component와 server component에 대해 이야기하면서 4가지 렌더링 방식에 대해 정리했다. 각 렌더링 방식을 활용하고 type을 다루어보려고 한다. 또한 api를 사용해 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 경험하고 라우트 핸들러를 사용해보았다. 1. 페이지 세팅하기Next.js의 App router를 사용하기로 했으므로 페이지를 폴더구조로 설정해주어야 한다.`/champions`,`/c..

제목에서 알 수 있듯이 이번 포스팅은 post id가 숫자로 이루어져야하는데 숫자 아닌 경우 post 목록으로 redirect하는 것처럼 특정 조건을 만족하는 path에서 redirect하는 방법에 대해 다룰 것이다. 미들웨어의 사용 목적은 쉽게 말하면 요청이 완료되기 전에 한 단계를 거쳐갈 수 있도록 하는 것이다. 요청에 따라 response를 rewrite, redirect, modify할 수 있다. 메들웨어를 사용하는 사용하는 경우공식 홈페이지에서 제시한 미들웨어를 사용하는 경우는 아래와 같다.인증, 인가 : user 정보와 세션 쿠키 등을 확인하고 특정 페이지 접근을 막을 수 있다.Server-Side Redirects : 서버 단계에서 특정 조건에서 redirect할 수 있다.Path rewri..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해이 문제는 주어진 숫자를 잘 조합해서 가장 큰 수를 만드는 문제이다. 그래서 기본적으로 내림차순 정렬을 해야하지만, 320과 32이 주어진 경우 32320이 32032보다 더 크다는 것에 유의해야 한다. 그래서 이 문제는 sorting을 조금 더 효율적으로 다룰 수 있는지 확인할 수 있는 문제인 것 같다. 먼저 내 첫 풀이는 맞는 풀이인 것 같지만 너무 시간이 오래 걸려서 시간 초과로 실패했다. 그래서 다른 사람 코드를 참고했다. 다른 분들 풀이를 보니 아이디어가 대단해보였다. ㅜ 방법 1이 방법은 위에 ..

우리는 외부에서 데이터를 가져와서 사용해야 하기 때문에 이를 위한 관리 도구가 필요하다. 이전에 다루었던 것처럼 이번에도 역시 TanStack Query(React Query)를 사용할 것이다. 참고로 Next.js에서는 `fetch`를 최적화해서 제공하기 때문에 `axios`를 사용하지 않고 `fetch`를 사용할 것이다. 세팅 : app route 사용, src 폴더 사용 1. `server-action.ts` 만들기먼저 server component를 만들었던 것처럼 파일 맨 상단에  `"use server"`를 추가하자. 그러면 해당 `server action` 파일에 비동기 함수를 모아 api처럼 활용할 수 있다. 이러한 `server-action.ts` 파일은 서버 측에서 비동기 함수를 실행할..

기본적으로 React와 react-router-dom으로만 구성된 경우, client component로만 구성된다는 것을 알고 시작하자. 먼저 `app/page.tsx' 내용을 모두 지우고 아래 내용을 넣어 `yarn dev`로 실행해보자.// src/app/page.tsxexport default function Home() { console.log("Hello Hello"); return ( Next.js를 시작해보자 );} 그러면 브라우저 콘솔창에는 콘솔이 나오지 않지만 터미널에서는 'Hello Hello'가 적혀있는 것을 확인할 수 있다. 즉 해당 페이지는 서버에서 렌더링된 페이지라는 것이다. 자세히 말하자면 브라우저가 아닌 서버를 돌리고 있는 `localhost:3..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해처음 문제를 보자마자 재귀함수를 써야겠다고 생각했다. 아니면 JS의 재귀함수 횟수를 고려해서 배열을 써야겠다고 생각했다. 그래서 DFS와 BFS를 각각 재귀함수와 배열로 구현했는데, 시간이 초과되어 검색해볼 수 밖에 없었고 DP를 써야한다는 것을 알게 되었다. 방법 1 - DFS먼저 가장 먼저 시도한 깊이 우선 탐색(DFS) 코드는 다음과 같다. 가장 값이 크게 변할 것 같은 연산부터 진행했다.function solution0(x, y, n) { let answer = null; const DFS = ..

지난번 팀 프로젝트에서 CORS 오류를 겪었는데, Next.js를 사용하면 해결할 수 있다고 한다.Next.js 프레임워크를 사용해보자! 1. Next.js 소개Next.js는 다음을 충족하는 고품질 웹사이트를 만들 수 있게 해준다. 1. 성능서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG) 기능을 제공해 초기 로드 시간을 단축함.코드 스플리팅 및 이미지 최적화와 같은 기능을 통해 런타임 성능을 향상시킴.2. SEO (Search Engine Optimization)서버 사이드 렌더링(SSR)을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링되므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있음.정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하..

오늘은 어제 예고한대로 Generic과 Utility type에 대해 정리해보려고 한다. 1. Generic 제네릭제네릭은 지난번 게시글에서 잠깐 보고 지나쳤다.let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];let oneToSeven: Array = [1, 2, 3, 4, 5, 6, 7];let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];let array: Array = ["Apple", 1, 2, "Banana", "Mango", 3]; 이처럼 ``내부에 작성하는 방법을 generic이라고 한다. 이렇게 작성하면 마치 클래스나 함수에 parameter를 입력하는 것처럼 타입을 사용할 수..