Front-end 개발

1. 리액트 서스펜스란?리액트 서스펜스는 컴포넌트가 렌더링되기 전에 필요한 데이터나 리소스가 준비될 때까지 로딩 상태를 선언적으로 관리할 수 있게 해주는 기능입니다.2. 서스펜스를 사용하는 이유비동기 작업의 로딩 상태를 더 우아하게 처리할 수 있습니다.코드 스플리팅과 데이터 페칭을 더 간단하게 구현할 수 있습니다.사용자 경험을 향상시킬 수 있는 로딩 UI를 쉽게 구현할 수 있습니다.3. 서스펜스 사용법기본적인 사용 예시:import { Suspense } from 'react';function App() { return ( Loading...}> );}4. 주요 사용 사례데이터 페칭function ProfilePage() { return ( }> );..

파이썬 win10toast 라이브러리를 사용하면 간단하게 윈도우 알림을 만들 수 있습니다. 1. 설치 pip install win10toast 2. 기본 사용법 from win10toast import ToastNotifier toaster = ToastNotifier() toaster.show_toast("제목", "내용") 3. 사용 가능한 옵션 icon: 알림 아이콘 경로 (ICO 파일) duration: 알림 지속 시간 (초) threaded: 알림 백그라운드 표시 여부 callback: 알림 클릭 시 실행할 함수 toaster.show_toast( "제목", "내용", icon_path="C:\\path\\to\\icon.ico", duration=5, threaded=True, callback..

1. swiper 사용 시 필요한 파일 import 2. swpier tag 삽입하기 3. CSS 삽입 아래 코드를 꼭 넣어야 합니다. 그래야 작동중 끊김 현상 (슬라이드가 끊다고 다시 시작할때) 을 방지 할수 있습니다. .swiper-wrapper{-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; } 4. swpier 컨트롤 하기 $(function(){ var swiper = new Swiper('.swiper-container', { spaceBetween: 0, freeMode: false, enteredSlides: true, speed: 5000, autoplay: { ..

[^0-9]/g : 숫자가 아닌 모든 문자를 나타내는 정규 표현식입니다. ^ : 문자열의 시작을 의미합니다. [^0-9] : 0에서 9 사이의 숫자가 아닌 모든 문자를 의미합니다. / : 정규 표현식의 끝을 의미합니다. g : 모든 일치 항목을 바꾸는 것을 의미합니다 /* 처음 ex 010 */ /* 중간 ex 1234 */ /* 마지막 ex 5678 */ var replacePN = /[^0-9]/g; $(".inputPN").on("focusout", function() { let i = $(this).val(); if (i.length > 0) { if (i.match(replacePN)) { i = x.replace(replacePN, ""); } $(this).val(i); } }).on("ke..

1. Selenium 설치 Selenium을 설치하기 전에 Python과 pip가 설치되어 있는지 확인해야 합니다. Python 설치: https://www.python.org/downloads/ pip 설치: https://pip.pypa.io/en/stable/installation/ Selenium 설치: pip install selenium 2. WebDriver 설치 Selenium은 웹 브라우저를 제어하기 위해 WebDriver를 사용합니다. 사용하려는 브라우저에 맞는 WebDriver를 설치해야 합니다. 크롬: https://chromedriver.chromium.org/downloads 파이어폭스: https://github.com/mozilla/geckodriver/releases Web..

파이썬은 프로그래밍 언어 중 가장 인기 있는 언어 중 하나이며, 맥북에서도 쉽게 설치할 수 있습니다. 맥북에 파이썬을 설치하는 두 가지 방법을 알려드겠습니다. 1. 공식 웹사이트에서 설치 1.1 다운로드 Download Python 3.x.x 버튼을 클릭하여 맥북에 맞는 파이썬 설치 파일을 다운로드합니다. 1.2 설치 다운로드한 설치 파일을 실행합니다. 설치 마법사의 지시에 따라 설치를 진행합니다. 설치 과정에서 사용자 경로를 설정할 수 있습니다. 기본적으로 /usr/local/bin에 설치되지만, 원하는 경로로 변경할 수 있습니다. 설치가 완료되면 터미널을 실행하고 python3 --version 명령어를 입력하여 버전 정보를 확인합니다. 1.3 가상 환경 설정 (선택 사항) 여러 프로젝트에서 서로 다..

1. NVM(Node Version Manager) 이란? 각 상황에 맞게 node버전 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 2. 사용방법 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant ba..

"a" 태그는 하이퍼링크를 생성하는 데 사용되며 여러 속성을 포함할 수 있습니다. 1. href: 링크의 대상 URL을 지정합니다. 이 속성은 필수입니다. (＊href 옵션) Visit Example.com 2. target: 링크를 어떻게 열지를 지정합니다. 주로 사용되는 값은 "_blank"로, 새 창이나 탭에서 링크를 엽니다. Visit Example.com 3. title: 링크에 대한 추가 정보를 제공합니다. 이 정보는 사용자가 마우스를 링크 위에 올릴 때 툴팁으로 표시됩니다. Visit Example.com 4. download: 링크를 클릭했을 때 리소스를 다운로드하도록 지정합니다. 이 속성은 태그가 다운로드 링크로 사용될 때 유용합니다. Download PDF 5. rel: 링크의 관계를 ..

1. Lottie란? 웹 및 모바일 애플리케이션에서 벡터 애니메이션을 쉽게 사용할 수 있게 해주는 라이브러리입니다. Lottie는 Adobe After Effects에서 만든 JSON 파일을 로드하여 애니메이션을 렌더링합니다. 2. lottie 사용방법? -라이브러리 설치 Vue 3 + Typescript Support npm install lottie-web-vue OR yarn add lottie-web-vue Vue 2 (v2 사용시 1.2.1로 설치하세요.) npm install lottie-web-vue@1.2.1 - Vue 2.x import Vue from 'vue' import LottieAnimation from 'lottie-web-vue' Vue.use(LottieAnimation);..

1. 뷰포트(viewport) 란? 사용자가 웹 페이지를 볼 때 화면에 표시되는 영역을 의미합니다. 모바일 기기에서는 특히 중요하며, 반응형 디자인 및 모바일 친화적인 경험을 구현하는 데 사용됩니다. 위의 코드는 반응형 페이지 제작시 설정하는 예제입니다. width=device-width : 이 설정은 기기의 화면 너비를 웹 페이지의 너비로 사용하도록 지정합니다. initial-scale=1.0 : 이 설정은 페이지가 처음 로드될 때 초기 배율을 1.0으로 설정합니다. 이는 사용자가 페이지를 처음 열었을 때 기본 배율로 표시되도록 합니다. maximum-scale : 사용자가 확대할 수 있는 최대 배율을 제어합니다. minimum-scale : 사용자가 축소할 수 있는 최소 배율을 제어합니다. user-..