rexondex's blog

표준프레임워크 포털 eGovFrame본문 내용 바로가기 대메뉴 바로가기 소개 구성 구성상세 버전별 구성 오픈소스 SW 현황 아키텍쳐 라이선스 적용사례 추진성과 기술지원내역 컨트리뷰션 센터소개 지원서비스 적용지원 서비스www.egovframe.go.kr표준프레임워크 포털 eGovFrame자바 스프링에 대한 학습이 스스로 더 필요하다고 생각되어, 전자정부 표준프레임워크를 통해 풀스택 개발환경에 익숙해지고 싶었습니다. 자바 스프링부트, 그리고 풀스택적인 역량을 늘리기 위해 백엔드뿐만 아니라 프론트엔드도 같이 실행하여 동작 방법을 확인하고 컴포넌트 구현 예제나 디자인패턴 등을 익히기 위해 전자정부프레임워크를 로컬에 복제하여 실행하고 결과를 확인해보기로 했습니다. 먼저 표준프레임워크 깃허브로 접속해 원본 저장소를..

Next.js: 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크정의Next.js는 사용자 경험(User Experience)과 개발자 경험(Developer Experience)을 극대화하기 위해 설계된 React 기반의 풀스택 웹 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 간편한 라우팅, API 엔드포인트 생성, 최적화된 빌드 및 배포 기능을 제공하여 현대적인 웹 애플리케이션 개발을 효율적으로 만들어줍니다.핵심 개념파일 시스템 기반 라우팅 (File-system Routing):pages 디렉터리 내의 파일 구조를 기반으로 자동으로 라우트가 생성됩니다.예시: pages/about.js는 /..

리액트 컴포넌트의 이해: 함수형 vs 클래스형리액트에서 컴포넌트는 UI를 구축하는 핵심적인 building block이며, 독립적이고 재사용 가능한 코드 단위입니다. 컴포넌트를 통해 복잡한 사용자 인터페이스를 작고 관리하기 쉬운 조각으로 분할하여 개발 효율성과 유지보수성을 크게 향상시킬 수 있습니다.리액트 컴포넌트는 탄생 초기부터 존재했던 클래스 컴포넌트와 이후 등장하여 주류가 된 함수형 컴포넌트 두 가지 주요 유형으로 나뉩니다.함수형 컴포넌트 (Functional Components)정의:함수형 컴포넌트는 JavaScript의 일반적인 함수로 작성됩니다. 이 함수는 props (properties) 라는 입력 객체를 인자로 받아, 리액트 엘리먼트를 기술하는 JSX (JavaScript XML) 를 반환..

React에서 배열을 렌더링할 때 Key를 설정해야 하는 이유리액트에서 배열을 렌더링할 때 key prop을 설정하는 것은 매우 중요합니다. 이는 리액트가 어떤 항목이 변경, 추가 또는 삭제되었는지 식별하고 가상 DOM을 효율적으로 업데이트하기 위한 핵심적인 메커니즘이기 때문입니다.key prop은 리액트가 배열 내의 각 엘리먼트에 대한 고유한 식별자를 알 수 있도록 해줍니다. 이 고유한 식별자를 통해 리액트는 다음과 같은 작업을 최적화하여 애플리케이션의 성능과 안정성을 향상시킵니다.■ Key 설정의 필요성 (Why Keys are Necessary)효율적인 업데이트 (Efficient Updates):key가 없다면 리액트는 배열의 변경 사항을 감지하기 위해 각 요소를 이전 렌더링 결과와 순서대로 비교..

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

리액트의 가상 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. 개발 ..

리액트 렌더링 순서에 따라 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()라는 함수를 호출하는 형태로 ..