개요 Tailwind를 새로운 프로젝트에서 사용 중 tailwind.config.js가 작동하지 않는 문제를 겪었다. Next.js를 15버전을 사용하며 바뀐게 있나 확인하며 여러 시도를 했으나 버그는 고쳐지지 않고 오히려 이외의 라이브러리 버전 및 postcss.config, global.css등 어디까지 내가 바꾼거였는지 헷갈렸다. Tailwind 버전을 보니 낯선 4로 시작하는 버전이었다(4.13). 설마 4버전에서 config 파일관련 변경사항이 있었나 했는데 맞았다... Tailwind V4.~ config 파일 적용 가장 큰 변화 중에 하나로 v4 부터는 Content-Aware Engine이 도입되어 설정없이 사용이 가능하다고 한다. 따라서 기존에 tailwind.config.js에 작성..
렌더링 이전에 브라우저 렌더링 과정에 대해서 배운적이 있는데 리액트에서도 이와 유사하게 렌더링이 이루어지곤 한다. 리액트에서 렌더링(Rendering)은 컴포넌트가 state와 props의 값을 기반으로 UI를 생성하고 DOM에 결과를 업데이트하는 과정이다. 리액트에선 크게 3가지 방법으로 렌더링이 발생하곤 한다.1. 초기 렌더링 : 컴포넌트가 처음 화면에 나타날 때 발생 2. 업데이트 렌더링 : 상태(state)나 속성(props)가 변경될 때 발생- setState가 실행되는 경우- useState의 setter가 실행되는 경우- useReducer의 dispatch가 실행되는 경우- 컴포넌트의 keyprops가 변경되는 경우 따라서 key를 임시의 index로 지정하면 안되는경우가 이 경우에 해당된..
함수형 컴포넌트이전 시간에 배운 클래스형 컴포넌트와 달리 함수 형태로 정의되며, 더 간결하고 직관적인 방식으로 UI를 표현이 가능함 특징생명주기 메서드의 부재 : props를 받아 단순히 리액트 요소만 반환하는 함수임함수형 컴포넌트와 렌더링된 값 : 클래스형 컴포넌트의 props는 this로부터 가져오고 this가 가리키는 객체의 경우 변경이 가능하기에 변경된 값을 읽어 render을 비롯한 다른 메서드가 실행된다. 반면 함수형 컴포넌트의 경우 this에 바인딩된 props가 아닌 props자체를 받기에 값이 변경 불가하고, 해당 값을 그대로 사용하게 된다.함수 형태로 정의 :함수형 컴포넌트는 단순한 JavaScript 함수로 정의됩니다. JSX를 반환하며, 반드시 return 문 안에 UI 요소를 포함..
현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다 클래스형 컴포넌트는 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가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한..
