Frontend 7

[jQuery] 선택자, 형식 및 메서드 정리

참고로 css 태그가 jquery lib 가져오는 ​ .off(): 이벤트 핸들러를 제거합니다. Click me ​ .ajax(): AJAX 요청을 보냅니다. $.ajax({ url: "example.php", method: "POST", data: { name: "John", location: "Boston" } }) .done(function(response) { console.log("Data received:", response); }) .fail(function(xhr, status, error) { console.error("AJAX request failed:", error); }); .each(): 선택한 요소 집합에 대해 반복 작업을 수행합니다. $("ul li").each(functio..

Frontend 2024.03.06

[Echart] 공식 문서 읽기 (2)

setOption option: 구성 항목 및 데이터 notMerge: 선택사항, 이전 옵션과 병합할건지 여부, false 또는 미지정 시 기본적으로 병합됨 lazyUpdate: 선택사항, 차트 즉시 업데이트 여부 echartsInstance.setOption(option, notMerge, lazyUpdate); 또는 echartsInstance.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ... }); 또는 echartsInstance.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] }); Normal Merge (일반 병합) 특정 컴포넌트 유형 (예: xAxis, serie..

Frontend 2024.03.05

[Echart] 공식 문서 읽기 (1)

init echarts.init(dom, theme, opts); Echarts 인스턴스 생성 및 함수 정의 dom: 렌더링할 DOM 요소 theme: 차트 스타일 적용 opts: 차트 옵션 지정 connect 그룹화하여 그룹에 속한 차트에 동일한 이벤트 처리 적용 가능 또한 사용자가 여러 차트를 동시 비교 가능 // 각 인스턴스의 그룹 ID를 설정합니다. chart1.group = 'group1'; chart2.group = 'group1'; // 그룹을 연결합니다. echarts.connect('group1'); // 또는 연결할 인스턴스 배열을 직접 전달할 수 있습니다. echarts.connect([chart1, chart2]); disconnect // group1 그룹의 차트 인스턴스 연결 해..

Frontend 2024.03.05

[Echart] 주요 옵션 및 기능 목록

https://echarts.apache.org/en/api.html#echarts Documentation - Apache ECharts echarts.apache.org 기본 차트 유형 선 그래프 막대 그래프 원 그래프 히스토그램 산점도 트리맵 게이지 주요 옵션 title: 차트 제목 설정 tooltip: 마우스 오버 시 정보 툴팁 설정 legend: 범례(legend) 설정 xAxis, yAxis: X 및 Y 축 설정 series: 시리즈 데이터 설정 (각 시리즈는 차트 하나를 의미) grid: 차트의 그리드 설정 toolbox: 도구 상자 설정 (저장, 확대/축소, 다시로드 등) color: 차트의 색상 설정 backgroundColor: 차트 배경색 설정 toolbox: 차트에 추가할 도구상자 ..

Frontend 2024.03.04

[Javascript] 완전 기초 문법

변수 할당 let, var, const let 은 변경가능한 변수 지정 const 는 변경 불가한 상수 지정 var는 과거에 사용하는 방식이어서 추천하지 않음 연산자 ! : NOT && : AND || : OR (NOT → AND → OR 순서대로 연산함) === : 값, 타입 일치하면 True == : 값 같고 타입 달라도 True Ex) 0 == False → True Null == undefined → True 함수는 function 으로 만들어주자 그리고 return 지정해주면 값 반환됨 Javscript 버전 ES6 부터는 console.log 를 아래와 같이 사용할 수 있음 function hello(name) { console.log('Hello, ' + name + '!'); } hello..

Frontend 2024.02.27

[Javascript] Fetch 사용법, 백엔드 → 프론트 데이터 통신 과정

- Fetch 사용법 데이터가 여기에 나타납니다. - Spring Boot 엔드포인트에서 JSON 값을 프론트엔드로 전달할 때, 일반적인 동작 서버에서 JSON 데이터 전송: Spring Boot 서버에서 클라이언트로 요청에 대한 응답으로 JSON 데이터를 전송합니다. 서버에서 데이터가 생성되거나 조회되어 클라이언트에 전달되는 시점에서 JSON 데이터가 생성되고, HTTP 응답의 본문(body)에 포함됩니다. 클라이언트에서 응답 받기: 브라우저에서는 해당 JSON 데이터를 받아옵니다. 이 과정은 브라우저의 XMLHttpRequest, Fetch API, 또는 다른 HTTP 요청 라이브러리를 사용하여 수행됩니다. JavaScript에서 데이터 처리: 클라이언트(브라우저)에서는 받아온 JSON 데이터를 Ja..

Frontend 2024.01.12

[Javascript] live server 확장 / console 화면에 출력하기 / defer, async 차이점

현재 나는 개인 프로젝트로 쇼핑몰을 만들고 있고 백엔드 개발자 취업 준비를 하고 있지만, 포트폴리오에 담을 프론트 단이 없어서 내 친구 gpt와 함께 프론트를 간단하게나마 구현하고 있다..(험난하다) 이왕 시간내고 공부하는 거니깐 내 입맛대로 내 눈에 보기 쉽게 기록하려고 한다.. 아자아자 홧팅이닷! >-< (햇쭈언니 따라하기) 현재 나는 윈도우를 사용하고 있고 Javascript 에 live server 를 확장한 상태이다. live server 를 확장하면 html 파일을 웹 페이지에서 열람하고 수정하였을 때 새로고침(F5)만 누르면 수정한 내용이 웹 페이지에 바로바로 반영된다✨ 그리고 chrome 에서 F12 키를 누르거나 ctrl + shift + i 키를 누르면 개발자도구가 뜨는데, javasc..

Frontend 2024.01.04