전체 글

현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있으며 내부 상태를 가질 수 있어 데이터 변경에 따른 렌더링을 감지 및 관리할 수 있다 클래스형 컴포넌트의 구조 1. 클래스를 선언하고 만들고 싶은 컴포넌트를 extends한다.(React.Component 또는 React.PureComponenet)import React from 'react'class Samplecomponent extends React.Component { render() { return Sample Component }} 2. p..

디자인 패턴 디자인 패턴은 기본적으로 소프트웨어를 개발하는 과정에서 문제를 해결하기 위한 일반적인 접근 방식이나 코드 설계의 규칙을 의미한다이러한 패턴을 통해 코드의 재사용성을 높이고, 효율적으로 문제를 해결하는데에 활용된다 이러한 디자인 패턴에는 목적에 맞게 다양한 패턴들이 존재하며 패턴의 개념에 기반해 현대의 웹 개발에서도 다양한 패턴으로 발전하고 있다 예를들어, React의 어플리케이션에서 중요한 역할을 하는 Hooks의 경우 Reducer패턴을 활용해  복잡한 상태변화를 단일 액션으로 처리하는 패턴으로도 볼 수 있다 useEffect의 경우 컴포넌트가 렌더링될 때 특정 작업을 실행하게 해주는 옵저버 패턴에 해당한다 모듈 패턴 모듈 패턴은 캡슐화와 네임스페이스를 제공해 코드의 구조화, 유지보수 충돌..

불변객체 : 생성 후에 그 상태를 변경할 수 없는 객체 불변객체는 다음과 같은 특징을 가진다. 1. 상태 변경 불가 : 한 번 생성된 후엔 내부 상태가 변경되지 않음 2. 수정 시 새 객체 생성 : 데이터 변경이 필요한 경우, 기존 객체를 수정하는 대신 변경된 값을 가진 새로운 객체를 생성함 3. 원존 보존 : 원본 데이터는 항상 그대로 유지// 일반 객체(가변 객체)const user = { name: "민수" };user.name = "수민"; // 원본 객체가 변경됨// 불변 객체 방식const user = { name: "민수" };const newUser = { ...user, name: "수민" }; // 새 객체 생성, 원본은 유지  이러한 불변 객체, 객체의 불변성은 함수형 프로그래밍의 핵..

Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다 크게 데이터 바인딩과 디렉티브가 존재한다 데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다 { title } // React{{ title }} // Vue.js  디렉티브 :  화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음  Hello Vue.js 추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다

개요캐싱 2025.01.05 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ] 이전 글에서 Next의 캐싱 중 Request Memoization, DataCache에 대하여 다루어 보았다 Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은 다른 목적, 시기, 실행 위치가 다르다. Next.js에서는 성능 향상과 비용 절감을 목적으로 선택 해제하지 않는 이상 가능한 많이 캐싱한다. 아래 사진은 빌드 시 그리고, 정적 경로가 처음 방문될 때의 동작을 보여준다. 캐싱 동작은 경로가 (정적,동적) 렌더링 방식과 데이터의 캐싱 여부와 초기 방문 혹은 후속 네비게이션에 따른 요청인지에..

Infinite Scroll 무한스크롤화면을 아래로 스크롤 할 때 콘텐츠가 지속적으로 로드되어야 하는경우 페이지네이션 대신 무한스크롤이 사용된다 장단점으로는 다음과 같다 장점1. 새로운 콘텐츠 조회의 편리함 : 다음, 더 보기와 같은 상호작용 없이 바로바로 로드가 가능 2. 모바일 기기에 적합 : PC에서도 마찬가지로 작은 뷰 구성엔 적합한 경우가 빈번 단점1. 특정 콘텐츠 조회의 어려움 : 특정 위치의 콘텐츠를 조회 및 기억하기가 어려움 2. 페이지 속도의 감소 : 콘텐츠가 방대할 수록 로드하는데에 더 많은 시간이 소요됨 3. 푸터가 fixed가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한..