JiYoung Dev 🖥

React에서 카카오지도 API 사용하기 🎈 OPEN API 사용하는 방법 🎈 key 발급받기 1. 로그인 후 애플리케이션 추가 React는 JavaScript 기반이므로 JavaScript 코드 사용할 예정 2. web 플랫폼 등록하기 만약 jsp/servlet에서도 사용할거라면 해당 주소도 추가(ex. 8080)해야 사용할 수 있다! 3. react-kako-maps-sdk 로 리액트에서 kakao map 사용하기 typeScript 자료형 지정해주는 script >> 최근 뜨는 중 3.1. index.html head태그에 api 입력 3.2. react-kakao-maps-sdk 설치 3.3. App.js 작성 MapMarker, Map > import 해줘야 함! import "./App.css..

Session/Local Storage에 데이터 저장하기 /** * Local Storage vs Session Storage * - 주의사항! 둘 다 브라우저에 저장을 하는 데이터 * - local Storage : 동일한 PC + 동일한 브라우저일 경우, 저장된 데이터를 불러 올 수 있음 * ex. 자동 로그인, 장바구니, ... * => 브라우저를 닫더라도 데이터가 계속해서 저장되어있다. * - session Storage : 브라우저 창이 종료되면 세션도 함께 종료되면서 데이터 소멸됨 * ex. 로그인 기록 */ 백엔드, 프론트 어디서 관리할 것인지는 자유 순서의 차이일뿐! 1. Local Storage 자동 로그인, 장바구니와 같이 보안이 딱히 필요하지 않을 때 사용 1.1. 저장하기 local..

🎈 AJAX (Asynchronous JavaScript and XML) 클라이언트와 서버간 비동기적 정보 교환이 가능한 통신 기능 ** 화면 전환 없이 자바스크립트의 라이브러리 중 하나 데이터를 이동하고 화면을 구성하는데 있어서 웹 화면을 갱신하지 않고 필요한 데이터를 서버로 보내고 가져오는 방법 화면 갱신이 없어서 사용자 입장에서 매우 편리하고 빠르게 작업을 처리하는 것처럼 느껴지게 함 하지만, 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해짐 📖 Ajax 장점 페이지의 갱신 없이 서버와 비동기 통신을 가능하게 해줌 화면이 새로 로딩되는 것이 아니므로 속도면에서 성능 개선 (웹페이지 속도 향상) 별도의 플러그인이 필요하지 않음 Http 전송 중에도 클라이언트가 웹 어플리케이션과 상호작용 할 수 ..

🎈 HTML 태그 속성 id, name 차이 📖 id 속성 고유한 식별을 목적으로 하는 경우 사용 id 속성은 page 안에서 중복으로 사용할 수 없으며, 주로 javascript에서 다루기 위해 지정 (document.getElementById("") ⚙ 애플리케이션의 고유 영역 식별자 프론트엔드 개발 뉴스 ... 프론트엔드 개발 히어로즈 ... 뉴스 영역과 히어로즈 영역을 구분 짓는 고유한 이름 ⚙ 레이블과 인풋 컨트롤을 연결하기 위한 식별자 이메일 email label 텍스트와 연결된 email input 컨트롤 ⚙ 표와 표 설명을 연결하기 위한 식별자 표 설명(요약) 표 제목 ... 표 요소의 aria-decribedby 속성과 연결된 표 설명 📖 name 속성 form 컨트롤 요소의 값(valu..

🎈 영화 API 불러오기 - fetch, Axios 사용 import React, { useEffect, useState } from "react"; import axios from "axios"; import "./App.css"; const Ex04 = () => { let movieUrl = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230501"; /** * 화면에 영화 랭킹을 띄어주자! * * jQuery + Ajax >>>>> 논외! (사용추천X 속도 느림) * Fecth API (New!) *..