전체 글

1. Node.jsNode.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경이다.이는 서버 사이드에서 JavaScript를 실행할 수 있게 해주는 플랫폼으로, 웹 서버 생성, 파일 시스템 작업, 데이터베이스 조작 등 다양한 서버 사이드 작업을 수행할 수 있다. Node.js의 비동기 이벤트 기반 아키텍처는 높은 동시성을제공하며, 이는 실시간 애플리케이션 개발에 특히 유용하다. 💡 주요 특징비동기 I/O이벤트 기반 프로그래밍단일 스레드 모델NPM(Node Package Manager)을 통한 풍부한 생태계개념설명이벤트 루프비동기 작업을 관리하는 핵심 메커니즘모듈 시스템CommonJS와 ES Modules 지원버퍼바이너리 데이터 처리를 위한 클래스스트림데이터를 청..

1. Google Chart 만들어보기Google Chart CND 끌어와서 차트 만들어보기. 💻 코드 Google Chart(원 그래프) 그리기 메뉴 선택 {{value[0]}} : {{value[1]}}   1 증가 1 감소  🌊 코드의 흐름HTML 구조를 정의하고 필요한 스크립트(Vue.js, Google Charts)를 로드한다.Google Charts를 초기화하고 drawFunc()을 콜백으로 설정한다.drawFunc()에서 차트 데이터를 설정하고 차트를 그린다.Vue 앱을 생성하고 초기 데이터와 메서드를 정의한다.사용자 ..

1. Vue-PropsVue-Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.이를 통해 컴포넌트 간의 단방향 데이터 흐름을 구현할 수 있다.Props는 컴포넌트의 재사용성을 높이고 컴포넌트 간의 결합도를 낮추는 데 도움이 된다. 메소드/명령어설명props:['propName']기본적인 prop 선언 방식props:{ propName: Type }타입을 지정한 prop 선언 props: { propName: { type: Type, required: true } } 필수 prop 선언 props: { propName: { type: Type, default: value } } 기본값을 가진 prop 선언 💻 예시 코드 {{ message }} [vue.js] Props로 데..

1. Vue.jsVue.js는 사용자 인터페이스를 구축하기 위한 프로그래시브 JavaScript 프레임워크이다.React나 Angular와 비교되며, 학습 곡선이 낮고 유연한 것이 특징이다. 💡 주요 특징반응적 데이터 바인딩컴포넌트 기반 아키텍처가상 DOM 사용디렉티브를 통한 DOM 조작 📌 Vue.js 개념개념설명컴포넌트재사용 가능한 Vue 인스턴스템플릿HTML 기반의 마크업 구문반응성데이터 변경 시 자동 UI 업데이트 💻 예시 코드 {{ message }} Reverse Message  Vue- React에 비해 가볍고 빠르게 개발이 필요한 경우 선호- 최신 릴리즈로 시작한 프레임워크(2014년)- Virtual Dom 활용으로 양방향 바인딩 처리 등 가능 Single File ..

1. ReduxRedux란 JavaScript 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. 💡 주요 개념ProviderconnectuseSelectoruseDispatch 📌 주요 특징특징설명중앙 집중식 상태 관리애플리케이션의 전역 상태를 하나의 스토어에서 관리 예측 가능한 상태 변화 순수 함수인 리듀서를 통해 상태 변경 성능 최적화 불필요한 리렌더링 방지 미들웨어 지원 비동기 작업 등을 위한 미들웨어 사용 가능 🚀 주요 API 및 사용법 1️⃣ Provider Redux스토어를 React 애플리케이션에 제공한다.import { Provider } from 'react-redux';import store from './store';function App() { retu..

1. React-bootstrapReact-bootstrap은 React 컴포넌트로 재구현된 Bootstrap 라이브러리이다.이를 통해 React 애플리케이션에서 Bootstrap의 UI 요소를 쉽게 사용할 수 있다. 💡 주요 특징React 컴포넌트 기반Bootstrap 스타일링 지원반응형 디자인접근성 고려 📌 주요 컴포넌트컴포넌트설명 Container 레이아웃 컨테이너Row, Col그리드 시스템Button버튼 컴포넌트Form폼 관련 컴포넌트Modal모달 다이얼로그 💻 사용 예시 코드import React from 'react';import { Container, Row, Col, Button } from 'react-bootstrap';function App() { return ( ..

1. React.memoReact.memo는 함수형 컴포넌트의 성능을 최적화하기 위한 고차컴포넌트(HOC)이다.컴포넌트의 props가 변경되지 않았을 때 리렌더링을 방지한다. 💡 주요 특징얕은 비교를 통한 최적화함수형 컴포넌트에만 사용 가능커스텀 비교 함수 지원사용 case설명자주 리렌더링되는 컴포넌트불필요한 리렌더링 방지무거운 연산을 수행하는 컴포넌트성능 향상 💻 예시 코드import React from 'react';const MyComponent = React.memo(function MyComponent(props) { /* 렌더링 로직 */});// 커스텀 비교 함수 사용function areEqual(prevProps, nextProps) { /* return true if passi..

1. JavaScript Spread OperatorSpread Operator(...)는 ES6에서 도입된 문법으로, 배열이나 객체의 요소를 개별적으로 확장하는 데 사용된다.React에서 이 연산자는 props 전달, 상태 업데이트, 배열 조작 등에 자주 사용된다. 💡 주요 용도배열 요소 확장객체 속성 복사함수 인자 전달사용 케이스설명배열 복사새 배열 생성 시 기존 배열 요소 포함객체 병합여러 객체의 속성을 하나로 결합props 전달컴포넌트에 여러 props를 간편하게 전달 💻 예시 코드// 배열 사용 예const numbers = [1, 2, 3];const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]// 객체 사용 예const person = { ..

1. React.jsReact.js는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 도구이다. 주로 싱글 페이지 애플리케이션(SPA)을 만드는 데 사용되며, 컴포넌트 기반 아키텍처를 통해 재사용 가능하고 유지보수가 쉬운 UI를 만들 수 있다. 💡 React의 주요 특징컴포넌트 기반 구조가상 DOM (Virtual DOM)단방향 데이터 흐름JSX 지원선언적 UI 📌 주요 React 개념 및 API개념/API설명 useState 함수형 컴포넌트에서 상태 관리 useEffect 부수 효과 처리 useContext 컨텍스트 API 사용 useRef DOM 요소 참조 및 값 보존 useMemo 계산 결과 메모이제이션 useCallba..

1. 1차 캐시로 인한 동일 객체 인스턴스 반환 확인이 코드의 목적은 동일한 트랜잭션 내에서 같은 엔티티를 조회할 때 JPA가 제공하는 1차 캐시 (Entity Manager Context)로 인해 동일한 객체 인스턴스를 반환하는지 확인하는 방법이다.Member m1 = repo.findById(dto.getNum()).get(); Member m2 = repo.findById(dto.getNum()).get(); boolean isEqual = m1 == m2; System.out.println("m1과 m2가 같냐?" + isEqual); 📌 JPA의 1차 캐시 1️⃣ 1차 캐시JPA Entity Manager는 1차 캐시를 사용하여 동일한 트랙잭션 내에서 동일한 객체 인스턴스를 반환한다.같은 엔티..