rexondex's blog

관계형 데이터베이스 설계를 위한 데이터베이스 정규화

관계형 데이터베이스 설계를 위한 핵심: 데이터베이스 정규화데이터베이스 정규화는 관계형 데이터베이스를 설계하는 데 있어 데이터 중복을 최소화하고 데이터 무결성을 확보하기 위한 필수적인 과정입니다. 이 체계적인 구조화 과정을 통해 데이터베이스는 더욱 효율적이고 안정적으로 운영될 수 있습니다.왜 데이터베이스 정규화가 중요할까요?정규화의 궁극적인 목표는 다음과 같습니다.데이터 중복 제거: 불필요한 데이터 중복을 줄여 데이터베이스의 저장 공간 활용도를 높입니다.데이터 무결성 유지: 데이터의 일관성과 정확성을 확보하여 데이터에 대한 신뢰도를 향상시킵니다.이상 현상 방지: 데이터의 삽입, 삭제, 수정 시 발생할 수 있는 예기치 않은 문제점들을 예방합니다.정규화의 단계별 이해정규화는 여러 단계를 거치며, 각 단계마다 ..

Next.js 환경 변수 보안 가이드 (NEXT_PUBLIC_)

Next.js 환경 변수 보안 가이드Next.js 애플리케이션에서 환경 변수를 안전하게 관리하는 것은 매우 중요합니다. 특히 클라이언트 측 코드에 노출되어서는 안 되는 민감한 정보의 경우, 주의 깊은 처리가 필요합니다. Next.js 공식 문서를 기반으로 환경 변수 사용과 보안에 대한 지침을 정리했습니다.1. 환경 변수 로드 방식Next.js는 .env, .env.local, .env.[environment], .env.[environment].local 등의 파일을 통해 환경 변수를 로드합니다. 로드된 환경 변수는 process.env 객체를 통해 접근할 수 있습니다.2. NEXT_PUBLIC_ 프리픽스의 중요성Next.js에서 환경 변수명 앞에 NEXT_PUBLIC_ 프리픽스를 붙이는 것은 해당 변수..

웹팩(Webpack) 모듈 번들러와 Vite의 핵심 개념 및 특징

웹팩(Webpack) 모듈 번들러웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩은 애플리케이션을 구성하는 JavaScript, CSS, 이미지, 폰트 등 다양한 자원들을 모듈로 취급하고, 이 모듈들 간의 의존성 관계를 분석하여 브라우저에서 효율적으로 로딩할 수 있는 하나 또는 여러 개의 번들(묶음)로 만들어줍니다.핵심 개념:엔트리(Entry): 웹팩이 번들링을 시작하는 지점입니다. 보통 애플리케이션의 메인 JavaScript 파일이 됩니다.아웃풋(Output): 웹팩이 생성한 번들된 파일들의 출력 경로와 이름을 설정합니다.로더(Loader): JavaScript 파일이 아닌 다른 타입의 파일(CSS, 이미지, 폰트 등)을 웹팩이 이해하고 처리할 수 있도록 변환하는 도구입니다. 예를 ..

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..

리액트에서 컴포넌트는 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(VirtualDOM)에 대한 핵심 개념을 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. 개발 ..