[HTML] html canvas 사용하기
2023. 6. 20. 20:43
프로그래밍/HTML
canvas 사용하기 html 기본 element인 canvas를 사용하여 서명하고 api로 보내주는 코드를 작성해봄 html 코드 저장 지우기 닫기 javascript 코드 const signatureButton = document.getElementById('signatureButton'); const canvasModal = document.getElementById('canvasModal'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); let isDrawing = false; // Handle button click event function handleSignatureClick..
[React] react-to-print 사용 방법
2023. 6. 19. 19:14
프로그래밍/React
react-to-print 사용 방법 react-to-print 설치 npm install react-to-print # or yarn add react-to-print react-to-print 간단한 예제 components 인쇄 import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; import { ComponentToPrint } from './ComponentToPrint'; const Example = () => { const componentRef = useRef(); return ( Print this out!} content={() => componentRef.current} /> ); }; us..
[React] CSR(Client-side Rendering)과 SSR(Server-side Rendering)의 차이
2023. 6. 16. 20:25
프로그래밍/React
CSR(Client-side Rendering)과 SSR(Server-side Rendering)의 차이점 웹 애플리케이션의 렌더링 방식에 차이가 있음 클라이언트 사이드 렌더링 (CSR) 클라이언트에서 JavaScript를 사용하여 웹 애플리케이션의 UI를 렌더링 초기 요청에는 서버에서 정적 파일(HTML, CSS, JavaScript)을 제공하고, 이후에 클라이언트에서 API 요청을 통해 데이터를 가져와 동적으로 UI를 업데이트 서버는 단순히 정적 파일을 제공하므로, 서버 부하가 적고 클라이언트 측에서 더 많은 작업을 수행 초기 로딩 속도가 느릴 수 있으며, 검색 엔진 크롤러가 웹 페이지의 내용을 파악하기 어려울 수 있음 서버 사이드 렌더링 (SSR) 서버에서 JavaScript를 사용하여 웹 애플리케..
[React] 디바이스 구분하기
2023. 6. 15. 20:48
프로그래밍/React
리액트에서 디바이스 구분하기 export const isAndroid = () => { return /android/i.test(navigator.userAgent); } export const isiOS = () => { return /iphone|ipad/i.test(navigator.userAgent); } export const isiPhone = () => { return /iphone/i.test(navigator.userAgent); } export const isiPad = () => { return /ipad/i.test(navigator.userAgent); } export const isMobile = () => { return isAndroid() || isiOS(); } expor..
[React] 간단한 모달 띄우기
2023. 6. 14. 20:24
프로그래밍/React
리액트 모달 띄우기 react-modal 라이브러리를 활용한 간단한 모달 띄우기 react-modal 설치 npm install react-modal Modal 컴포넌트 설치 import React, { useState } from 'react'; import Modal from 'react-modal'; const ModalExample = () => { const [modalIsOpen, setModalIsOpen] = useState(false); const openModal = () => { setModalIsOpen(true); }; const closeModal = () => { setModalIsOpen(false); }; return ( 모달 열기 모달 제목 모달 내용 닫기 ); }; ex..
HTTP 상태 코드별 의미 정리
2023. 6. 12. 23:16
프로그래밍/관련 정보
HTTP 상태 코드 HTTP 상태 코드는 웹 서버와 클라이언트 간의 통신 과정에서 발생하는 상태를 나타냄 1xx (Informational - 정보성 응답) 100: Continue (요청의 일부를 받았으며, 계속해서 나머지를 요청할 수 있음) 101: Switching Protocols (서버가 요청에 대한 프로토콜을 변경함) 2xx (Successful - 성공적인 응답) 200: OK (요청이 성공적으로 처리됨) 201: Created (요청이 성공적으로 처리되어 새로운 리소스가 생성됨) 204: No Content (요청은 성공적으로 처리되었지만, 응답에 내용이 없음) 3xx (Redirection - 리다이렉션) 301: Moved Permanently (요청한 리소스가 새 URL로 영구적으로 ..
[MySQL] 문자열 합치기, 문자열 자르기, 문자열 바꾸기
2023. 6. 9. 20:29
프로그래밍/SQL
MySQL 문자열 합치기 - concat() concat(str1, str2, ...) 로 사용 -- 권정열(41) 로 조회 select concat(name, '(', age, ')') from member; MySQL 문자열 자르기 - substring() substring(str, pos, len) 로 사용. 여기서 len은 옵션으로 설정하지 않으면 끝까지 -- Java 출력 select substring('Javascript', 1, 4); -- Brand 출력 select substring('NoBrand', 3); MySQL 문자열 바꾸기 - replace() replace(str, from_str, to_str) -- 다음주는 쉬는날이 많기에, 다음주에 여행을 갈 계획이다. 출력 select..
[Java] JDK와 JRE의 차이점
2023. 6. 7. 20:22
프로그래밍/JAVA
JDK와 JRE JDK는 JRE를 포함하고 있으며, JRE는 JDK의 일부 따라서 개발자는 JDK를 다운받으면 됨 JDK(Java Development Kit) Java 개발 도구 모음으로, Java 개발에 필요한 모든 도구와 라이브러리를 포함함 JDK는 JRE를 포함 주요 구성 요소 컴파일러(Compiler): Java 소스 코드를 컴파일하여 기계어로 변환하는 도구. 컴파일된 코드는 JVM(Java Virtual Machine)에서 실행. 디버거(Debugger): 애플리케이션의 실행 중에 버그를 찾고 수정하는 도구 개발 도구(Development Tools): Java 개발에 도움이 되는 다양한 도구들이 포함. 예를 들어, 개발 환경을 설정하는 도구, 성능 분석 도구, 문서화 도구 등. 라이브러리(L..