티스토리

예지력업

검색하기

블로그 홈

예지력업

yeji-power.tistory.com/m

개발자 풀스택과정 공부중

구독자: 1

방명록 방문하기

주요 글 목록

[JS] ChartJS - Scatter chart point hover event 아래와 같이 하이차트의 경우엔 마우스 호버 시 같은 데이터끼리 포커싱 처리됨 chartjs에서도 해당 기능을 구현하고 싶어 커스텀함 (데이터 구조에서 같은 인터페이스 ID를 가진 포인트끼리 포커싱 처리)➡️ 포커싱되면 포인트가 아래와 같은 느낌으로 보이도록 스타일적용함// ScatterChart.js// chartjs 옵션// 투명도 함수const addOpacity = (color, opacity) => { if (color.startsWith('rgb')) { return color.replace('rgb', 'rgba').replace(')', `,${opacity})`); } if (color.startsWith('#')) { const r = parseInt(color.slice.. 공감수 0 댓글수 0 2025. 4. 11.
[JS] ChartJS Drag plugin 구현 chartjs - scatter chart에 drag 기능을 넣어 영역 안에 있는 포인트에 대한 정보를 모달창으로 띄우려고 함 1. 차트 컴포넌트에 넣을 플러그인 코드 생성// ChartDragPlugin.js// Store chart dataconst states = new WeakMap();const getState = (chart) => { const state = states.get(chart); return state || null;};const setState = (chart, updatedState) => { const originalState = getState(chart); // states.set(chart, Object.assign({}, originalState, update.. 공감수 0 댓글수 0 2025. 4. 11.
[JS] ChartJS 실시간 업데이트 차트 만들기 📈 - 라인차트 ver. ‼️ 초반에는 실시간 차트를 apexchart로 진행 했는데 속도 이슈로 chartjs로 변경➡️ 데이터 구조const tpsData = [ { label:'bank', borderColor: '#008FFB', data: [ {x: 1742789790000, y: 1}, {x: 1742789800000, y: 2}, {x: 1742789810000, y: 2}, {x: 1742789820000, y: 1}, {x: 1742789830000, y: 1} ] }, { label:'digital', borderColor: '#00E396', data: [ {x: 1742789790000, y: 1}, {.. 공감수 0 댓글수 0 2025. 4. 1.
[JS] Array Method - Map(), Reduce(), forEach(), Filter() 한번에 정리! Map()새로운 결과 반환 - 그에 따른 memory 공간 차지array 안의 요소를 하나씩 꺼내 변환해서 새로운 값으로 반환하고 싶을 때 사용특히, 모든 요소를 변환하고 싶을 때Reduce()배열 축소 원리배열 각 요소에 대해 주어진 reduce 함수 실행 후 하나의 결과값 반환여러 개의 값이 담긴 배열을 줄여서 하나의 값으로 생성여러 배열을 하나로 합치거나, 축적(누적)도니 값을 반환할 때 사용forEach()주어진 함수를 한번씩 실행 (for loop 느낌)for 문과의 차이- for 문 : break, continue 사용 가능, return 값 반환, 중간에 반복문 중단 가능(break)- forEach문 : break, continue 사용 불가능, return은 현재 반복만 종료시키고 항상 .. 공감수 0 댓글수 0 2024. 11. 7.
[React] 리액트에서 .env 환경변수 사용하기 env 사용하는 이유개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있는데이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 .env.env 파일은 항상 프로젝트 최상위 루트에 만들어야함 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시키도록 함 CRA에서 .env 사용하기1. 환경변수 작성create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_을 앞에 작성 후 변수이름을 만들어주어야 합니다."" 사용하지 않도록 주의하.. 공감수 0 댓글수 0 2024. 6. 4.
[React] 코드 분할 Code Splitting (lazy, suspense) 애플리케이션의 초기 로드 시간을 줄이고, 성능 향상을 위해 사용사용자 입장에서 더 나은 UI를 제공받을 수 있음 lazy컴포넌트를 동적으로 import하여 필요할 때 로드할 수 있도록 도와주는 함수애플리케이션의 초기 로드시간을 줄이고, 사용자가 특정 경로로 이동할 때만 해당 경로의 컴포넌트를 로드할 수 있음const SomeComponent = React.lazy(() => import('./SomeComponent')); Suspense동적으로 로드되는 컴포넌트를 감싸는 컴포넌트해당 컴포넌트가 로드될 때까지 로딩 스피너같은 대체 UI를 보여줌이를 통해 사용자에게 더 나은 경험을 제공할 수 있음"fallback" 속성을 통해 로딩 중에 표시할 UI를 정의할 수 있음Loading...}> loadabl.. 공감수 0 댓글수 0 2024. 5. 28.
[React] webpack & babel 이 뭔가? webpack 여러 assets(img, HTML, CSS 등)을 하나의 번들로 묶어주는 도구하나로 묶어 더 작은 파일로 배포하면 네트워크 요청 수가 줄기 때문에 성능면에서 좋아짐 babel ES6+ 문법(백틱 사용하는 템플릿리터럴, 화살표 함수 등)을 안전하게 사용 가능하게 함구형 브라우저에서도 호환되도록 변환 ✚ @babel/preset-react - JSX 및 리액트 관련 문법을 변환해주는 프리셋 - 리액트 사용 시 필요한 babel 플러그인을 모아놓은 것 react-app-rewired 사용하면 CRA의 기본설정(babel 플러그인, webpack 설정)을 수정할 수 있음 공감수 0 댓글수 0 2024. 5. 28.
[ApexCharts.js] react에서 차트 활용하는 방법 // 설치방법yarn add react-apexcharts apexcharts// react에서 임포트해주기import ReactApexChart from "react-apexcharts"; ApexCharts 코드 들여다보기 ✅ series : 데이터의 집합으로, 단일 또는 다중 데이터 시리즈가 있음단일 값(Single Values) : 여기서 데이터 배열의 모든 값은 y축 값을 나타냄데이터 범주 간의 비교를 표시해야하는 세로 막대형 차트, 막대형 차트와 같은 경우에는 '단일값' 형식이 더 쉬움series: [{ data: [23, 34, 12, 54, 32, ... , 43]}] 쌍을 이룬 값 (Paired Values) // 2차원 배열series: [{ data: [[1, 34], [3.. 공감수 0 댓글수 0 2024. 4. 25.
[ReactFlow] 코드 정리 및 해석 import React, { useState, useCallback } from "react";import ReactFlow, { Controls, applyNodeChanges, applyEdgeChanges, Background,} from "reactflow";import "reactflow/dist/style.css";const initialNodes = [ { id: "1", type: "input", data: { label: "Input Node" }, position: { x: 250, y: 25 }, }, { id: "2", data: { label: Default Node }, position: { x: 100, y: 125 }, },.. 공감수 0 댓글수 0 2024. 3. 18.
[ReactFlow] 에러 해결 방법 [React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#004 이와 같은 에러가 계속 발생 1. width 값 설정 import { useState, useCallback } from "react"; import ReactFlow, { Controls, Background, applyNodeChanges, applyEdgeChanges, } from "reactflow"; import "reactflow/dist/style.css"; const initialNodes = [ { id: "1", data: { label.. 공감수 0 댓글수 0 2024. 3. 18.
[React] React hook의 useCallback 이란? useCallback메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구 💡 메모이제이션 이란?이전에 계산한 값을 메모리에 저장해두고, 동일하게 다시 사용할 수 있는 곳에서 재사용하여 반복적으로 발생하는 계산의 리소스를 줄이는 기법useMemo() : 자주 쓰이는 값을 메모이제이션 즉 캐싱해주는 것, 그리고 그 값이 필요할 때 다시 계산하는 것이 아닌 useMemo를 통해 캐싱을 한 값을 메모리에서 꺼내와서 재사용하고 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 메모이제이션 하는 것useCallback() : 인자로 전달한 콜백 함수 그 자체를 메모이제이션하는 것, 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 정장해놓고 재사용할 수 있게 함 📝 useCal.. 공감수 0 댓글수 0 2024. 3. 18.
[React 공식문서 이해하기] Managing State Choosing the State Structure ✅ Avoid deeply nested state 깊게 중첩된 state는 피하기 handleComplete 함수 해석 - 완료버튼을 클릭할 때 발생되는 함수로 nextParent에 클릭한 childId가 제외된 childIds가 새로 들어감 - 새로 만들어진 배열이 setPlan에 들어가 화면에 보여지게 됨 - .filter(id => id!==childId) : id들이 childId와 같지 않은 것만 childIds에 넣어주도록 함 --> 클릭한 childId가 2일 경우 [1,2,3,4,5] 가 있다면 filter 비교하여 [1,3,4,5]만 childIds에 들어가게 됨 Sharing State Between Components ✅ Liftin.. 공감수 0 댓글수 1 2024. 2. 13.
[React] CRA (Create React App) 기초 정리 Create React App 란? - 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(개발환경을 쉽게 구축해줌) 꼭 필요한가? - React(JS 라이브러리) 는 UI 기능만 제공하므로 개발자가 직접 구축 해야하는게 많다는 단점이 있음 - But, CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능하므로 개발자 입장에서 편리함 CRA 설치 - React npx create-react-app 폴더이름 - React + Typescript npx create-react-app 폴더이름 --template typescript - React + Next.js + Typescript npx create-next-app@latest --typescript CRA 설치 후 초기 파일 ① n.. 공감수 1 댓글수 0 2023. 3. 23.
[JS] 비동기 처리란?( +Promise, async&await ) 비동기 특정 코드의 연산이 끝날 때까지 코드의 실행이 멈추지 않고, 다음 코드를 먼저 실행하는 JS의 특성 Q. 비동기 객체를 사용하는 이유는? A. 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 답을 줄지 모르는데 계속 기다릴 수는 없음! 예를 들어 50개의 요청을 보내는 경우 동기 처리를 하게되면 코드를 "실행하고 기다리고" 과정이 반복되어 웹 애플리케이션 실행에 수십분이 걸리게 됨 Q. 동기와 비동기 특징은? A. 동기 는 동시에 여러 작업을 수행할 수 없음! 그러나 흐름을 예측하기 쉽고, 먼저 수행되고 나중에 수행되는 것들이 명확함 비동기 는 동시에 여러 작업을 수행할 수 있음! 그러나 흐름을 예측하기 어려움, 즉 무엇이 먼저 완료될 지 보장할 수 없음 흔한 비동기 사례 1. 제이쿼.. 공감수 0 댓글수 0 2023. 3. 22.
[React] 타입스크립트 오류 해결 💍Type 'string' is not assignable to type 'MouseEventHandler'. 오류해결 이벤트 핸들러란? 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 onClick 마우스 클릭 시 ondbClick 마우스 더블클릭 시 onmousedown 마우스 버튼 누를 시 onmouseup 마우스 버튼에서 손 뗄 시 onmouseout 마우스 포인터가 요소를 벗어날 시 onmousemove 마우스 포인터가 요소 위에서 움직일 시 onmouseover 마우스 포인터가 요소 위에 올라왔을 시 onkeydown 키보드 누를 시 onkeypress 키보드를 누르고.. 공감수 0 댓글수 0 2023. 3. 9.
[TypeScript] "as HTMLElement" 오류 해결 아래와 같은 오류가 타입스크립트를 쓰다보면 종종 발생한다. 오류의 해결방법은 간단하다. getElementsById 혹은 getElementsByClassName 을 통해 받아오는 객체의 type을 지정해주면 된다! Property 'style' does not exist on type 'Element'. Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'. 수정된 코드는 아래와 같다! 핵심은 "as HTMLElement" 공감수 0 댓글수 0 2023. 2. 24.
[React] useNavigate()와 useLocation()으로 데이터 주고받기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 2. 15.
[React] 이벤트에서 함수 호출 화살표함수 사용하여 호출- 클릭 시 실행(onClick), 변화 있을 때 실행(onChange) - 값을 넘겨야할 경우(=값이 있는 경우) - 렌더링 시 실행 X - () 안에 파라메타가 필요한 경우 넣어줘도 되고 없다면 안넣어줘도 됨 - 위 사진처럼 고정된 값을 넣어 불러올 수도 있음 - 함수에 파라메타 적용(고정값) 그냥 사용- 렌더링 시 실행X, 필요 시 호출 ( ) 사용 - 바로 호출시킬 때 - 함수 안의 속성값을 가져올 때 ( ex)getCurrentSelectedAttrValues의 attValue값을 가져오는 경우 ) - 렌더링 될 때마다 실행 공감수 0 댓글수 0 2023. 1. 18.
[React] react life cycle (리액트 생명주기) 순서, 역할 생명주기 순서 1. 생명주기의 1단계 - 생성(Mounting) 컴포넌트의 state가 constructor에 의해 초기화되고, rendering과정을 거쳐 DOM에 최초로 그려지는 단계 ▶생성단계의 흐름 1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다. 2. 초기화가 완료되면 render() 메소드가 실행된다. render()는 JSX로 작성된 코드를 자바스크립트가 이해할 수 있도록 변환한 후 HTML 형태로 DOM에 그려질 수 있도록 돕는 역할을 한다. (위 두개의 단계가 끝나면 리액트는 화면에 표시해야 하는 컴포넌트가 어떻게 생겼는지, 어떠한 데이터를 가지고 있는지 알게 된다.) 3. 이제 실제로 DOM에 컴포넌트를 최초로 표시한다.(mounting) 4. m.. 공감수 0 댓글수 0 2022. 12. 1.
[React] sideEffect/useEffect/cleanupEffect 1. sideEffect (=부작용, 부수효과) - 함수가 어떤 동작을 할 때 input-output이 외에 다른 값을 조작하는 것 - 렌더링이 아니고 외부세계에 영향을 주는 어떠한 행위 렌더링 : state,props 기반으로 UI요소를 그려내는 행위 : 여기서 UI요소란 화면에 JSX문법으로 무엇이 나타날지 적어둔 컴포넌트들 2. useEffect - sideEffect를 렌더링 이후에 발생시킴 - useEffect가 수행되는 시점에 이미 DOM이 업데이트 되었음을 보장한다는 뜻 ☞ sideEffect가 렌더링에 영향을 주지않도록 설계 - sideEffect 이후 업데이트된 정보가 있자면 새롭게 렌더링 Effect타이밍 ☞ useEffect의 Dependency Array에 변화가 있는 경우 3. c.. 공감수 0 댓글수 0 2022. 11. 23.
[React] 화살표 함수 화살표 함수(arrow function)는 ES6에 추가된 표현식을 사용하는 함수로 화살표 => 사용 ◆ 기존함수 표현법 ◆ 화살표 함수 표현법 : return 없이도 함수 실행을 종료시키고 값을 반환 { return } = 처리하는 것에 따라 결과가 계속 나오는 경우 {}와 return 사용 return X = ( )안에 있는 것을 한번에 return 하는 경우 return 사용X 공감수 0 댓글수 0 2022. 11. 17.
[Ajax] ajax란? / response 응답데이터 Ajax 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발기법(비동기방식) 전체를 다시 로딩하지 않고, 웹페이지의 일부분만 갱신할 수 있음 동기방식 : 요청한 작업에 대해 관심을 가지고 기다리는 방식, 요청을 했을 때 시간이 많이 걸려도 결과를 기다림 비동기방식 : 요청한 작업에 대해 관심을 버리고 기다리지 않는 방식, 요청을 하고 다른일을 처리 Ajax의 장점 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있음 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음 백그라운드 영역에서 서버로 데이터를 보낼 수 있음 서버와 다양한 형태의 데이터를 주고받음 (JSON, XML, HTML, TEXT파일 등) Aja.. 공감수 0 댓글수 0 2022. 9. 7.
[JS] DOM 요소 (getElementById,getElementByName,getElementsByTagName,getElementsByClassName) DOM 요소의 선택 - HTML요소를 다루기 위해서는 우선 해당요소를 선택해야만 함 - 자바스크립트에서 특정 HTML 요소를 선택하는 방법 HTML 태그이름(tag name)을 이용 → getElementsByTagName() id 이용 → getElementById() class 이용 → getElementsByClassName() name 속성(attribute) 이용 → getElementByName() getElementsByTagName() 메소드 - tag name을 이용하여 HTML 요소를 선택 getElementById() 메소드 - 아이디를 이용하여 HTML요소를 선택 - 해당아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만 을 선택 getElementsByClassName() .. 공감수 0 댓글수 0 2022. 9. 6.
[JS] 자바스크립트(JavaScript) 란? 자바스크립트란? - 자바스크립트는 객체(object) 기반의 스크립트 언어 - 객체지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음 HTML : 웹의 내용 작성 CSS : 웹 디자인 JS : 웹의 동작 구현 자바스크립트 문법 - 식별자 작성 방식 : 관행적으로 CamelCase방식을 많이 사용 자바스크립트 출력 - 대부분 에 function을 쓰고 에서 출력! - 여러 방법을 통해 결과물을 HTML페이지에 출력할 수 있음 window.alert()메소드 HTML DOM요소를 이용한 innerHTML 프로퍼티 document.write()메소드 console.log()메소드 window.alert( ) 메소드 : 별도의 대화상자를 띄워 사용자에게 데이터전달 innerHTML 프로퍼티 : 가장 많.. 공감수 0 댓글수 0 2022. 9. 6.
[JS] BOM 과 DOM의 차이 BOM(Browser Object Model) 자바스크립트가 브라우저와 소통하기 위해 만들어진 모델 window 최상위객체, 각 프레임 별로 하나씩 존재 navigator 브라우저명, 버전 정보를 속성으로 가짐 document 현재 문서에 대한 정보 location 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL history 현재의 브라우저가 접근했던 URL history screen 브라우저의 외부환경에 대한 정보 제공 DOM(Document Object Model) 브라우저가 웹문서를 이해할 수 있도록 구성된 것 HTML 이나 XML 등의 문서를 객체로 표현할 때 사용되는 API 문서노드(Document Node) 트리 최상위에 존재 각각의 하위요소들에 접근하려면 문서노드를 통해야함.. 공감수 0 댓글수 0 2022. 9. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.