분류 전체보기 (122) 썸네일형 리스트형 [JAVA] 공공데이터 오픈 API 사용하기 공공데이터포털은 정부에서 운영하는 오픈 API 서비스로 정부의 공공기관에서 수집된 다양한 종류의 데이터들을 일반 기업들 및 국민 모두가 무료로 자유롭게 사용할 수 있도록 제공하는 서비스이다. 실제로 개발 학원에서도 공공데이터 포털의 데이터를 활용한 프로젝트도 진행하고 공모전 같은 곳에서도 많이 사용하는 사이트이다. 나 역시 공공데이터 포털에 있는 데이터를 하나 활용하여 월마다 데이터를 갱신하는 방식을 통해 간단한 서비스를 제공하는 프로젝트를 구현하려고 한다. 1. 공공데이터 API 신청우선 공공데이터포털로 가서 회원가입 및 로그인을 해주자https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에.. [React] 웹 에디터 React-Quill 사용하기 (2) 관련 포스팅 2024.06.16 - [React] - [React] 웹 에디터 React-Quill 사용하기 (1) [React] 웹 에디터 React-Quill 사용하기 (1)게시글 작성 기능을 구현할 때 그냥 글 작성 기능만 만들면 무언가 심심해 보인다. 폰트 색 변경, 크기 조정, 이미지 추가 등의 기능을 사용할 수 있는 웹 에디터 기능이 있다면 글 작성 페이지의rlawo32.tistory.com 이전 글에서 React-Quill에 대한 전반적인 사용법을 알아보고 구현해 보았다. 이번엔 이미지 적용에 대해 상세하게 구현해보고자 한다.글을 작성할 때 이미지를 함께 사용하면 html 태그로 생성이 되고 저장이 될 것이다. 그러나 이렇게 작성한 글을 DB에 저장하고 불러오면 이미지는 보이지 않을 것이.. [React] 웹 에디터 React-Quill 사용하기 (1) 게시글 작성 기능을 구현할 때 그냥 글 작성 기능만 만들면 무언가 심심해 보인다. 폰트 색 변경, 크기 조정, 이미지 추가 등의 기능을 사용할 수 있는 웹 에디터 기능이 있다면 글 작성 페이지의 퀄리티를 높일 수 있을 것이다. 여러 무료 웹 에디터 라이브러리 중 React-Quill을 사용하여 웹 에디터 기능을 구현해 보자 1. React-Quill 적용npm install react-quill // reactEditor.tsx'use client';import ReactQuill from "react-quill";import 'react-quill/dist/quill.snow.css';const ReactEditor = () => { return ( .. [React] CORS 오류 해결하기 React를 접하면 흔히 나오는 장면인 CORS 오류.. 누구나 보게 되는 장면이라 생각된다. 클라이언트인 React는 기본적으로 locathost:3000이고 보통 서버단은 localhost:8080으로 사용하게 될 것이다.이렇게 Origin이 다르다 보니 해당 오류가 발생하는 것이다. 해당 문제에 대해 좀 더 알아보자. 1. SOP 란?우선 CORS를 알기전 SOP 개념에 대해 알아야 한다.SOP(Same Origin Policy) 이란 '동일 출처 정책' 이라고 하며, 다른 Origin에서 리소스를 가지고 오거나 보내는 등 상호작용 하는 것을 제한하는 보안 방식이다. 즉, 웹 브라우저에서 보안을 강화하기 위해 동일한 Origin에서만 리소스를 주고받도록 하는 정책이다. 여기서 Origin(출.. [오류해결] TypeError: Cannot read properties of null (reading 'addEventListener') 테스트를 위한 간단한 스크립트 코드를 작성하던 중 해당 에러가 발생하였다. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 1. 오류 발생 원인원인을 알아본 결과 아래 body의 HTML이 모두 로드가 되기 전에 스크립트 영역에서 HTML을 참조하기 때문에 해당 현상이 발생한 것이며, 이로 인해 addEventListener에서 HTML을 참조할 수 없었기 때문에 null을 참조한 것이다 2. 오류 해결해결 방안으로 2가지가 있다.첫번째는 그냥 script 영역을 body 아래로 내리면 간단하게 해결이 될 것이다. // 위쪽에 위치하던 script 영역을 아래쪽으로 이동시켰다. 두.. [JavaScript] 키보드 이벤트 키보드 이벤트는 3가지로 keyup, keydown, keypress가 있다. 여기서 keypress는 keydown과 유사하게 동작하며, 현재는 deprecated되어 사용을 권장하지 않기에 keypress는 keydown으로 대체하여 사용하면된다. 1. 동작 방식- keyup키보드를 누르고 땠을 때 실행, 키보드를 계속 꾹 누르면 실행되지 않음 - keydown키보드를 눌렀을 때 바로 실행, 키보드를 계속 꾹 누르면 계속 실행됨 - keypresskeydown과 동작방식이 유사하나 Ctrl, Alt, Tab, Shift, Caps Lock 키들은 인식 못함 2. 구현 방법JS에선 input에 넣어서 사용하기 보단 addEventListener를 사용하는걸 추천한다.// JavaScri.. [React] Swiper 사용하기 한 화면에 여러 정보를 보여주고 동적이고 질 좋은 페이지를 만들고자 할 때 캐러셀, 슬라이드 쇼는 개인적인 생각으로 빠질 수가 없다 생각한다. 당장 네이버 홈페이지만 가봐도 여러 개의 캐러셀을 통해 한 화면에서 많은 정보를 보여주고 다양한 컨텐츠를 담아내기에 프로젝트를 만들 때 사용하면 정말 좋은 요소이다. CSS와 JS를 응용해서 만들어 낼 수도 있지만 난이도가 꽤 높고 번거롭다. 보다 쉽게 슬라이드 쇼, 캐러셀을 만들어내기 위해서 Swiper라는 라이브러리를 통해 원하는 대로 Custom 하여 사용해 보자 1. Swiper 란?모바일 및 PC에서 구현하기 쉽고 사용하기 적합한 라이브러리이다.간단한 HTML, CSS, JS 코드를 통해 반응형 슬라이더, 캐러셀 등을 만들어낼 수 있으며, 기본 디자인에.. [AWS] AWS 해킹 당한 후기 (200만원 과금) 평화로운 주말 오후. 오랜만에 늦잠을 자고 일어난 뒤 휴대폰 알림을 하나씩 확인하던 중 한 알림이 눈에 들어왔다. 네이버 메일로 온 AWS 관련 내용... 그 내용은 비몽사몽 하던 나의 정신을 확 깨워줬다. 1. 사건 발생 예? 85% 초과?부랴부랴 AWS 웹 페이지로 가서 청구서를 확인해 보았다. ...? 정말 내 눈을 의심했었다. 1500달러.. 즉 200만 원 정도가 청구되어 있었다.혼미한 정신을 붙잡고 CloudTrail과 상세 청구서를 통해 어디서 무슨 서비스로 인해 이런 일이 일어났는지 확인해 보니 어떤 및힌놈이 내 계정으로 이상한 짓을 벌이고 있었다.내가 사용 안 하는 리전 4~5군데에서 서비스와 리소스를 만들고 마음껏 사용하고 있던 것이다.분명 비밀번호도 주기적으로 변경했고 MFA도 적.. 이전 1 2 3 4 5 6 ··· 16 다음
