rexondex's blog

Next.js란 무엇인가요? Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현합니다. 후드 아래에서 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 들이는 대신 애플리케이션 빌드에 집중할 수 있습니다. 개인 개발자이든 대규모 팀에 속한 사람이든 Next.js는 대화형, 동적인, 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다. https://nextjs.org/docs Introduction | Next.jsWelcome to the Next.js Docum..

데이터베이스 정규화는 관계형 데이터베이스의 설계 과정에서 데이터의 중복을 최소화하고데이터의 무결성을 보장하기 위해 데이터를 체계적으로 구조화하는 과정입니다. 정규화의 목표는 데이터의 중복을 제거하여 데이터베이스의 저장 공간을 효율적으로 사용하고,데이터의 삽입, 삭제, 수정 시 발생할 수 있는 이상 현상을 방지하는 것입니다. ■ 정규화의 단계 정규화는 여러 단계로 나뉘며, 각 단계는 특정 규칙을 만족해야 합니다. 일반적인 정규화 단계는 다음과 같습니다.- 제1정규형 (1NF) : 모든 속성(열)이 원자값을 가져야 합니다. 즉, 하나의 속성에 여러 개의 값을 저장할 수 없습니다.- 제2정규형 (2NF) : 제1정규형을 만족하고, 기본 키가 아닌 모든 속성이 기본 키에 완전 함수 종속되어야 합니다. 즉, 기본..

리액트에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다.컴포넌트를 사용하면 복잡한 UI를 작은 조각으로 나누어 관리하고 재사용할 수 있습니다. 리액트 컴포넌트는 크게 함수형 컴포넌트와 클래스 컴포넌트 두 가지 유형으로 나뉩니다.함수형 컴포넌트 (Functional Components) 정의 :JavaScript 함수로 작성되며, props를 입력받아 JSX를 반환합니다. ES6 화살표 함수를 사용하여 간결하게 작성할 수 있습니다.특징 :상태(state)와 생명주기 메서드를 직접 사용할 수 없었지만, React Hooks의 등장으로 이러한 제약이 사라졌습니다. 클래스 컴포넌트보다 코드가 간결하고 가독성이 좋습니다. 성능 면에서 클래스 컴포넌트보다 약간 우수합니다.function We..

리액트에서 배열을 렌더링할 때 key를 설정해야 하는 이유 ? 리액트가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별하고 가상 DOM을 효율적으로 업데이트하기 위해서입니다. key를 사용하면 리액트는 각 항목의 고유한 식별자를 알 수 있으므로 변경된 부분만 업데이트하고 나머지는 그대로 유지할 수 있습니다. ■ key 설정의 필요성- 효율적인 업데이트 : key가 없으면 리액트는 배열의 순서에 의존하여 모든 요소를 업데이트해야 합니다. key를 사용하면 변경된 요소만 업데이트하여 성능을 향상시킬 수 있습니다.- 예측 가능한 동작 : key가 없으면 배열의 요소가 변경될 때 예측할 수 없는 방식으로 컴포넌트가 업데이트될 수 있습니다. key를 사용하면 리액트가 올바른 항목을 식별하고 정확하게 업데이트할 수..

리액트 컴포넌트 생명주기는 컴포넌트가 생성되고 화면에 렌더링되어 업데이트되고 제거될 때까지의 일련의 과정을 의미합니다. 리액트 컴포넌트는 다음과 같은 세 가지 주요 생명주기 단계를 거칩니다. 1. 마운팅(Mounting): 컴포넌트 생성 및 렌더링constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 state 설정 및 메서드 바인딩에 사용됩니다.static getDerivedStateFromProps(): props에 따라 state를 업데이트할 때 사용됩니다.render(): 컴포넌트를 렌더링하는 메서드입니다. JSX를 반환합니다.componentDidMount(): 컴포넌트가 DOM에 삽입된 후 호출됩니다. 외부 API 호출, 이벤트 리스너 설정 등에 사용됩니다.2. 업데이트(Updati..

useCallback에 대해 스스로 내용을 정리해 보았습니다.useCallback ? useCallback의 간단한 정의는`리렌더링 간에 함수 정의를 캐싱해 주는 React Hook` 입니다.const cachedFn = useCallback(fn, dependencies)[ 레퍼런스 ] 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출합니다import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + pro..

useMemo에 대해 스스로 내용을 정리해 보았습니다.useMemo ? useMemo의 가장 간단한 정의는`재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 Reack Hook` 입니다.const cachedValue = useMemo(calculateValue, dependencies)[ 레퍼런스 ] 컴포넌트의 최상위 레벨에 있는 `useMemo`를 호출하여 재렌더링 사이의 계산을 캐싱합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} - 매개변수calcula..

리액트의 가상 DOM(Virtual DOM)에 대한 핵심 개념을 3가지로 정리해보았습니다.1.성능 향상요소 비교하기 (Reconciliation) :리액트의 "조정(reconciliation)" 과정은 가상 DOM의 변경 사항을 비교하는 Diffing 알고리즘을 사용하여 실제 DOM에 최소한의 변경 사항만 적용하는 핵심 과정입니다.이 과정에서 리액트는 변경된 부분만 효율적으로 업데이트하여 성능을 향상시킵니다.- https://ko.legacy.reactjs.org/docs/reconciliation.html또한, 리액트 18 이후 동시성 렌더링 도입으로 인해서 렌더링의 과정이 많이 변경되었으므로 참고할 수 있습니다.- https://react.dev/blog/2022/03/29/react-v182. 개발..

리액트 렌더링 순서에 따라 8단계로 정리하였습니다. 1. 컴포넌트와 JSX컴포넌트 : 레고 블록처럼 UI를 구성하는 작은 단위입니다. 재사용 가능한 코드로, 웹 페이지의 특정 부분을 담당합니다. (예: 버튼, 입력창, 메뉴 등)- https://react.dev/reference/react/Component JSX : HTML처럼 생긴 문법으로, JavaScript 코드 안에서 UI를 쉽게 작성할 수 있게 도와줍니다. 브라우저는 JSX를 이해하지 못하므로, JavaScript 코드로 변환해야 합니다.- https://react.dev/learn/writing-markup-with-jsx React.createElement() : JSX는 React.createElement()라는 함수를 호출하는 형태로 ..

스코프 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN 스코프 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN스코프는 컨텍스트는 값과 "표현식"이 "표현"되거나 참조 될 수 있는 현재 실행되는 컨텍스트를 의미합니다. 만약 변수 또는 표현식이 "해당 스코프"내에 있지 않다면, 사용할 수 없습니다. 스코developer.mozilla.org  스코프 ? 값과 표현식이 "표현"되거나 참조 될 수 있는, 현재 실행되는 컨텍스트를 의미합니다. 만약, 변수 또는 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에,하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가능합니다. 그리고 함수는 자바스크립트에서 클로저 역할을 하기..