No image

Dev/Frontend

크롬브라우저 개발자도구에서 POST로 API 호출하는 방법

크롬브라우저 개발자도구에서 POST로 API 호출하는 방법// 전달할 데이터 포맷을 설정합니다 // 데이터 설정 예시const formData = new FormData();formData.append('id', 2); formData.append('mode', 'insert'); formData.append('page', 1); formData.append('etc', null);// POST로 API 호출fetch('{API URL 작성}', { method: 'POST', body: formData}) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error('E..

by DOMDOMI 2025. 2. 3.

No image

Dev/Frontend

[javascript Chart] 예쁜 자바스크립트 차트 (javascript chart) 사이트 amcharts!

최근에 자주쓰고있는 차트 사이트 amcharts 개인적으로 기능성, 응용성, 디자인 세 가지 모두 괜찮은 차트다.사용법도 너무 간단하고, 디자인도 예쁘고, 무엇보다 응용력이 쩌는 차트!한 차트를 가지고 기능을 추가하고 삭제하면서 무한히 새로운 차트를 만들 수가 있다. 무료버전은 차트의 왼쪽하단에 amcharts의 브랜드마크(?)가 있고, 유료버전은 마크 없이도 사용가능하다고 한다.   amcharts(www.amcharts.com/demos/)  사이트에 들어가면 데모를 볼 수 있는데, 원하는 차트를 클릭하면 코드 전체를 볼 수 있고, 사이트의 상단 메뉴바에 있는 Docs 를 들어가면 차트들을 어떻게 응용하여 사용할 수 있는 지 친절하게 알려준다.Chart Demos - amCharts www.amcha..

by DOMDOMI 2024. 6. 20.

No image

Dev/Frontend

[JQuery] Jquery link 제이쿼리 최신버전 링크 항상 사용!

맨날 구글링해서 찾기 불편해서 써두는 제이쿼리 최신버전 링크~   html 상단에다가 복붙하면 바로 사용가능하다

by DOMDOMI 2024. 6. 19.

No image

Dev/Frontend

[React] React.js 튜토리얼 8- 합성 (Composition)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 7.

No image

Dev/Frontend

[React] React.js 튜토리얼 7- State 끌어올리기

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 6.

No image

Dev/Frontend

[React] React.js 튜토리얼 6- 폼(Form)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 5.

No image

Dev/Frontend

[React] React.js 튜토리얼 5- list와 key

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 4.

No image

Dev/Frontend

[React] React.js 튜토리얼 4- 조건부 렌더링

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 3.

No image

Dev/Frontend

[React] React.js 튜토리얼 3- 이벤트 처리하기

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Nod domdom.tistory.com [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, ..

by DOMDOMI 2024. 1. 2.

No image

Dev/Frontend

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

이전 포스팅을 보려면 아래 링크를 눌러주세요. [React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기 간단한 React 예제 프로젝트를 만들어보기 앞서, 알아둬야하는 React의 개념과 특징들을 살펴봅시다. . React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리합니다. 엘리먼트를 렌더링하기 위해서는 ReactDOM.createRoot()에 엘리먼트를 전달한 다음, root.render()에 전달해야 합니다. 튜토리얼1에서 만들어보았던 프로젝트의 index.js를 열어보면 다음과 같이 작성되어 있습니다. root.render에 App.js에 만들어놓은 App 엘리먼트가 전달된 것을 알 수 있습니다. ..

by DOMDOMI 2023. 12. 9.

No image

Dev/Frontend

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다. nodejs 다운로드 링크입니다. 운영체제에 맞게 설치해주세요! https://nodejs.org/en/download/current Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 저는 윈도우라서 Windows Installer를 클릭하여 다운로드받아 설치했습니다. 설치가 완료되면 시작줄에서 Node라고 검색하여 Node.js command prompt 터미널 앱을 열어주세요. 터미널이 열리면 이제 react 프로젝트를 생성해봅니다. 프로젝트를 생성하는 ..

by DOMDOMI 2023. 12. 8.

No image

Dev/Frontend

[openlayers] polygon vector layer 클릭 시 나타나는 기본스타일 삭제하기

저의 경우 openlayers로 지도를 만들어서 그 위에 격자모양의 폴리곤을 추가했는데요. 이 격자모양을 클릭하고 나면 기본 클릭스타일(?)이 생기더라고요. 클릭을 해제했을 때 나타나는 스타일입니다. 오픈레이어스에서 자동으로 설정해놓은 기본클릭스타일...?인 것 같아요. 이 스타일은 레이어를 삭제(map.removeLayer)해도 지도 위에 남아있는 버그가 생기더라고요. 아래는 레이어를 삭제했을 때 남아있는 모습입니다. 지도 아무데나 클릭하면 사라지기는 하지만... 레이어를 삭제했을때 같이 삭제되도록 만들어보겠습니다. 레이어를 지도에 추가할 때, 레이어의 select interlection도 함께 추가해줍니다. // 레이어 추가 map.addLayer(vectorLayer); // select 인터렉션 ..

by DOMDOMI 2023. 11. 30.