230925 - React 컴포넌트의 유연성과 최적화 ( 조건부 렌더링, 다이나믹 컴포넌트, 고차컴포넌트(HOC))

오늘 내가 배운 것 1. 조건부 렌더링 2. 다이나믹 컴포넌트 3. 고차 컴포넌트(HOC) React Component의 유연성과 최적화 React를 이용하면서 컴포넌트를 다룰 때, 렌더링 최적화하는 여러 방법이 있다. 여러 방법 중 3가지를 최근에 접하게 되었고, 이에 대해서 살펴보려고 한다. 각 방식의 렌더링 최적화 측면과 적용 상황을 정리하였다. 1. 조건부 렌더링 1-1. 렌더링 최적화 조건부 렌더링은 필요한 부분만 렌더링을 수행하기 때문에 렌더링 성능에 도움을 줄 수 있다. 불필요한 컴포넌트의 렌더링을 방지하기 때문에 페이지의 성능을 향상할 수 있다. 1-2. 적용 상황 간단한 조건에 따른 뷰 변경이 필요할 때 사용한다. 자주 변경되는 UI 부분에 유용하다. 주의 : 복잡한 조건이나 중첩된 조건..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 9. 25.
• textsms

230920 - Next param

오늘 내가 배운 것 1. URL의 param 얻기 URL의 param 얻기 CRUD를 할 때 특정 글을 보거나 수정하거나 삭제하기 위해서 동적 매개 변수인 url의 param를 이용해서 해당 글을 찾아서 그 내용을 보여주거나, 수정하고, 삭제할 수 있는 기능을 구현할 수 있다. 커뮤니티 게시글에 대한 url이 아래와 같을 때 https://a.com/user/:id 여기서 id값이 특정 게시물마다 바뀌며 이 id 값을 param이라고 한다. 1-1. Client Component 클라이언트 컴포넌트에서 params 얻기 위해서 useParams라는 client component hook을 이용해서 얻을 수 있다. const params = useParams() 이 hook은 클라이언트 컴포넌트에서만 사용..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 9. 21.
• textsms

230919 - Next Component, Cache

오늘 내가 배운 것 1. Component 2. 사용 예시 3. Cache 출처 : 생활코딩 Next 13 강의 1. Component Client Component react를 사용하면서 여태까지 구현해왔던 방식이다. 주로 브라우저에서 실행된다. useState, useEffect, onClick, onChange, useRouter, useParams... 과 같이 클라이언트 단에서 조작할 수 있는 것을 의미한다. 사용자와 상호 작용을 할 수 있는 컴포넌트이다. Server Component 서버단에서 조작을 위해서 사용하는 방식이다. secure data나 cookie, header에 접근할 수 있다. Server Component 에서는 Client Component를 이용하게 되면 에러를 발생할..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 9. 19.
• textsms

230918 - Next Routing (라우팅)

오늘 내가 배운 것 1. Routing 2. Dynamic routing 3. Next.js Routing 4. SPA 1. Routing https://example.com/dashboard/analytics example.com : Domain : example.com은 도메인이라고 부른다. dashboard/analytics : 도메인 뒤를 path라고 부른다. dashboard, analytics : path의 구성요소로 segment라고 부른다. 라우팅이라는 것은 경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가를 결정하는 것이라고 한다. 2. Dynamic routing 다이나믹 라우팅은 동적라우팅, 적응형 라우팅이라고도 한다. https://example.com/read/1 https..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 9. 18.
• textsms

230918 - NEXT.JS 사용하기

오늘 내가 배운 것 1. NextJS란? 2. Next의 특징 3. 설치하기 1. NextJS란? Next.js는 React를 기반으로 만들어진 웹 프레임워크이다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원한다. 2. Next의 특징 SSR과 SSG 지원 : 서버사이드 렌더링과 정적 사이트 생성을 쉽게 구현할 수 있어서 검색 엔진 최적화(SEO)에 유리하다. 빠른 성능 : 코드 스플리팅, 레이지 로딩, 프리페칭 등을 자동으로 지원하여 애플리케이션 성능을 최적화한다. API Routes : 'pages/api' 디렉토리를 이용하여 API 엔드포인트를 생성할 수 있다. (프론트 서버의 개념) 동적 라우팅 : 파일과 폴더 구조를 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 9. 18.
• textsms

230829 - Frequency Counter (빈도 카운터) 패턴

오늘 내가 배운 것 1. Frequency Counter 2. 두 가지 배열이 주어졌을 때 첫 번째 배열의 각 요소가 두 번째 배열에 있는지 확인하기 3. 시간 복잡도 VS 공간 복잡도 1. Frequency Counter 데이터의 빈도수를 계산하기 위한 알고리즘 패턴 배열이나 문자열 등의 자료구조에서 특정 요소가 몇 개 있는지 셀 때 주로 사용된다. // [1,2,1,3] { "1": 2, "2": 1, "3": 1 } 키는 배열의 요소, 값은 해당 요소의 빈도수이다. 주로 사용하는 상황 두 개의 배열이나 문자열이 같은 요소로 이루어져 있는지 확인하기 배열이나 문자열에서 특정 요소의 빈도수를 찾기 데이터의 분포를 빠르게 파악하기 등... 2. 두가지 배열이 주어졌을 때 첫 번째 배열의 각 요소가 두 번..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 8. 30.
• textsms