나의 개발일지

라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다. 컴포넌트는 생성(mounting) ➡️ 업데이트(updating) ➡️ 제거(unmounting)의 생명주기를 갖는다. 리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 1. class component 생명주기 마운트(mount) 컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 한다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다. constructor constructor(props) { super(props); this.state = { counter: 0 }; // this.setState() 호출은 X } 컴포넌트 ..

레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술이다. 레이지 로딩을 적용하게 되면 최초 페이지 로딩 시간을 개선하고 최초 데이터 전달 양을 감소시키는 것이다 웹페이지를 로딩하는 기존 방식은 리소스들을 한 번에 받는 것인데 로딩 시간이 더욱 길어지고 사용자 경험을 하향시키는 것이다. 레이지 로딩은 주로 이미지와 영상들에 적용이 되고, 유저가 스크롤을 내려서 해당 이미지가 뷰포트에 들어오게 될 경우, 자비스크립트가 그 플레이스 홀더를 대체하면서 제대로된 사이즈의 이미지를 로딩하게 되는 것이다. 우선 lazy Loading을 사용하기 위해 라이브러리를 설치한다. https://www.npmjs.com/packag..

✔️ 문제 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

✔️ 문제 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. ✔️ 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크..

✔️ 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. ✔️ 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. ✔️ 입출력 예 participant completion return ["leo"..

Link 태그는 클라이언트 사이드 네비게이션을 제공해준다. import Link from "next/link"; export default function Navigation() { return ( Home About Us ); } import Navigation from "../components/navigation"; export default function Page() { return ( Hello! ); } usePathname을 통해 현재 path에 해당하는 페이지 표시를 해줄 것이다 import { usePathname } from "next/navigation"; export default function Navigation() { const path = usePathname(); cons..

✔️ 문제 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 1. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 2. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 3. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. ✔️ 제한사항 array의 길이는 1 이상 ..

Not-Found Next.js는 기본적으로 페이지가 존재하지 않을 경우, 404 페이지가 출력된다. 하지만 에러페이지를 custom할 수 있다. Next.js에서 명시한 규칙의 파일명 not-found.tsx 파일을 만들어 사용하면 된다. 아무 주소를 입력했을 때 내가 설정한 문구가 뜬다. Global not-found와 Local not-found Global not-found : 말그대로 전체적인 범위에 대해 적용되는 404페이지이다. 'app/not-found.tsx'로 위에서 만든 것이 Global not-found이다. Local not-found : 특정 라우트 내에서만 적용되는 404페이지이다 앱 전체 범위 뿐만 아니라 '/pages/posts/[id].tsx'와 같은 동적 라우트에서 해당..

✔️ 문제 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

Page Router와 다른 점 가장 큰 변화는 페이지 라우팅 방식이다. Page Router는 Next.js의 기본 라우터로서, 각자의 파일이 'pages' 디렉토리 내에 위치하는 경우 자동으로 라우트가 생성된다. 예를 들어, 'pages/about.js' 파일이 있다면, 이는 '/about' URL로 접근할 수 있게 된다. ( 정적인 페이지 구조 ) App Router는 Next.js의 동적 라우팅 시스템으로서, 런타임에 URL 경로를 결정할 수 있다. '[param].js'와 같은 파일 형식으로 파일을 생성하면, 'param' 부분은 URL의 일부로 대체될 수 있다. 'pages.posts/[id].js' 파일이 있다면 '/posts/1' , '/posts/abc'와 같은 다양한 URL로 접근이 가..