안녕하세요! 오늘은 자바스크립트에서 사용이 가능한 시간과 관련된 유틸함수를 정리해보겠습니다! 1. Moment객체로 몇분전, 몇시간전, 몇일전 표현하기. moment 객체는 JavaScript에서 날짜와 시간을 다루기 위해 사용되는 외부 라이브러리입니다. moment를 사용하면 날짜와 시간을 문자열로 파싱하거나, 현재 날짜와 시간을 가져오는 것부터 특정 날짜와 시간 간의 차이를 계산하고, 날짜와 시간을 서식화하여 출력하는 등의 작업을 간편하게 수행할 수 있습니다. 아래 함수는 moment 를 이용하여 주어진 날짜 데이터와 현재 날짜와 시간 사이의 차이를 계산하여 반환합니다. export const getData = (data) => { // 입력된 데이터(data)가 비어있거나(null 또는 undefi..

리액트 개발자로서 때로는 기술구현에 급급한 나머지 세부적인 이론을 넘겨짚지 못하고 넘어가는 경우가 있었는데 기본 뼈대 질문을 정리하고 이를 Chat GPT에게 질문하며 작성해 보았다! 💁 👉 React.js가 무엇인가? - React.js는 사용자 인터페이스 및 웹 애플리케이션 구축에 사용되는 오픈 소스 JavaScript 라이브러리이다. - 재사용 가능한 UI 컴포넌트를 작성하고, 이러한 컴포넌트를 통해 대규모 애플리케이션의 복잡도를 줄일 수 있도록 지원한다. - 컴포넌트 기반의 아키텍처를 사용하여 데이터와 UI를 분리시켜 관리한다. 이를 통해 애플리케이션의 유지보수성이 높아지고, 코드의 재사용성도 높아진다. - Virtual DOM 기술을 사용하여 빠른 렌더링을 지원한다. 👉 React.js에서 JS..

사용자에게 api 호출 등 액션이 발생하면 데이터를 내려받고 있다는 것을 알려주기 위해 스피너를 사용하여 로딩 중인 것을 알려줄 수 있다. mui progress 로 해당 기능을 구현해 보았지만 한정적인 디자인이라서 새로운 스피너 ui가 필요했다. https://uiball.com/loaders https://www.npmjs.com/package/@uiball/loaders @uiball/loaders Tree-shakeable CSS and SVG loaders for React. Latest version: 1.2.6, last published: a year ago. Start using @uiball/loaders in your project by running `npm i @uiball/loa..

리덕스 예제를 보면 숫자 카운트 하는 거라던지 to do리스트뿐이었다.... 혹시나 Redux와 redux-persist, redux toolkit을 같이 사용하고 싶다거나 처음 도입하는 사람이 이 글을 본다면,, 도움이 됐으면 좋겠어서 글을 남겨본다!😁✌️ 👽 개요 프로젝트를 진행하면서 10여 개 이상의 페이지에 값을 전달해줘야 하는 로직이 필요했다. 기존에는 Navigate를 이용하여 값을 전달해 줬는데 많은 프로퍼티를 각 페이지별 값을 받아오는 코드가 불필요하게 중복적으로 구현되어 있었다. 값이 1개 2개 정도로 작은 경우에는 효율적이었겠지만,,,, 이렇게 많은 state와 많은 페이지로 이동을 시켜줘야 한다면 유지보수마저 끔찍했을 것이다. 위에 사진처럼 해당하는 코드가 각 페이지에 필요했던 구조였..

1. 옵티마이저 [1] 옵티마이저 - 사용자가 질의한 SQL문에 대해 최적의 실행 방법을 결정하는 역할 수행 [2] 규칙기반 옵티마이저 - 우선순위를 가지고 실행계획을 생성한다. - 우선순위가 높은 규칙이 적은 일량으로 해당 작업을 수행한다고 판단. - 인덱스 유무와 SQL문에서 참조하는 객체등을 참고한다. [3] 비용기반 옵티마이저 - 현재 대부분의 DB에서 사용한다. - SQL문을 처리하는데 필요한 비용이 가장 적은 실행계획을 선택하는 방식이다. - 비용이란 SQL문을 처리하기 위해 예상되는 소요시간 또는 자원 사용량을 의미한다. - 테이블, 인덱스, 칼럼 등 다양한 객체 통계정보와 시스템 통계정보 등을 이용한다. [4] 실행계획 - SQL에서 요구한 사항을 처리하기 위한 절차와 방법을 의미한다. -..

1. 표준 조인 [1] 일반 집합 연산자 1. UNION : 합집합(중복 행은 1개로 처리) 2. UNION ALL : 합집합(중복 행도 표시) 3. INTERSECT : 교집합(INTERSECTION) 4. MINUS/EXCEPT : 차집합(DIFFERENCE) 5. CROSS JOIN : 곱집합(PRODUCT) [2] 순수 관계 연산자 : 관계형 DB를 새롭게 구현 1. SELECT -> WHERE 2. PROJECT -> SELECT 3. NATRUAL JOIN -> 다양한 JOIN 4. DIVIDE -> 현재 사용 x {a, x}{a, y}{a, z} divdie {x, z} = {a} [3] FROM 절 JOIN 형태 1. INNER JOIN 2. NATURAL JOIN 3. USING 조건절 ..

1. 관계형 데이터베이스 개요 - SQL - 정규화 : 테이블을 분할하여 데이터의 정합성을 확보하고, 불필요한 중복을 줄이는 프로세스 - ERD : 구성요소-> 엔터티, 관계, 속성 2. DDL - 데이터 정의 언어 - 데이터베이스 구조를 정의하고 조작하는 데 사용되는 SQL 명령어들을 의미한다. [1] 데이터 유형 - CHARACTER : 고정 길이 문자열 (CHAR) - VARCHAR : 가변 길이 문자열 - NUMBRIC : 숫자 정보 (Oracle : NUMBER / SQL Server : 10가지 이상) - DATETIME : 날짜와 시각 정보 (Oracle : DATE, SQL Server : DATETIME) [2] CREATE TABLE - 테이블명, 칼럼명 : 문자로 시작, 길이의 한계 ..

1. 성능 데이터 모델링의 개요 [1] 성능 데이터 모델링의 정의 - 데이터 모델 구조에 의해 성능 저하 - 데이터가 대용량이 됨으로 인해 불가피하게 성능 저하 - 인덱스의 특성을 충분히 고려하지 않고 인덱스를 생성함으로 인해 성능 저하 [2] 성능 데이터 모델링 수행시점 - 사전에 할수록 비용이 들지 않는다. 분석, 설계 단계에서 실행되어야 한다. [3] 성능 데이터 모델링 고려사항 1) 정규화 수행 2) 데이터베이스 용량산정 수행 3) 데이터베이스에 발생되는 트랜잭션의 유형파악 4) 용량과 트랜잭션의 유형에 따라 반정규화 수행 5) 이력모델 조정, PK/FK 조정, 슈퍼타입/서브타입 조정 등을 수행 6) 성능관점에서 데이터 모델 검증 2. 정규화와 성능 [1] 정규화를 통한 성능 향상 전략 - 데이터..

1. 데이터 모델의 이해 [1] 데이터 모델링 정의 - 현실 세계의 데이터를 데이터 관점으로 업무 분석하는 기법. - 데이터베이스를 구축하기 위한 분석 및 설계의 과정. [2] 데이터 모델링 특징 1) 추상화 : 현실을 일정한 형식에 맞춰 간략하게 표현. 2) 단순화 : 누구나 이해하기 쉽게 표현. 3) 명확성 : 애매모호함을 배제하고 명확하게 한 가지 의미를 갖도록 표현. [3] 데이터 모델링 유의점 1) 중복 : 데이터베이스가 여러 장소에 같은 정보를 저장하지 않도록 한다. 2) 비유연성 : 데이터 정의를 프로세스와 분리해 데이터 혹은 프로세스의 변화가 DB에 큰 변화를 일으킬 가능성을 줄여야 한다. 3) 비일관성 : 데이터와 데이터 간 연관 관계에 대해 명확하게 정의해야 한다. [4] 데이터 모델링..