Front-end 개발

파이썬 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..

# jdk설치 방법(AdoptOpenJDK) brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 위 방법으로 jdk 많이 설치 했을겁니다. 그치만 doptopenjdk 지원 종료로 temurin을 사용해야 합니다. 1. Homebrew 설치 맥에서 패키지를 관리하기 위한 Homebrew를 먼저 설치해야 합니다. 터미널을 실행하고 다음 명령어를 입력합니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. JDK 설치 2.1.cask 란? cask는 Homebrew에서 제공하는 패키지 관리 도구입니다. macOS 운영 체제..

1. Homebrew 홈페이지: https://brew.sh/ 홈페이지 접속하여 메인에 보이는 커맨드 복사하여 설치 합니다. 또는 아래 커맨드를 복사하여 설치 합니다. Homebrew The Missing Package Manager for macOS (or Linux). brew.sh /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 설치 했지만 아래처럼 오류 메시지가 나온다면 명령어를 입력 해줍니다. Warning: /opt/homebrew/bin is not in your PATH. Instructions on how to configure your shell for Hom..

- LinkedIn 개발자 토큰이란? LinkedIn API에 접근하는 데 사용됩니다. inkedIn API를 사용하여 프로필 정보, 게시물, 연결 정보 등을 가져올 수 있습니다. 1. 애플리케이션(APP) 생성하기(Menu → My apps → Create app) https://www.linkedin.com/developers/apps App Name: 애플리케이션 이름을 입력합니다. LinkedIn Page: 링크드인 페이지 (Company) 입력 합니다. (페이지는 만들때 1촌 1명이상 맺어져 있어야 생성가능합니다.) App Logo : 로고 이미지 업로드합니다. 2. 제품(권한)을 요청합니다. Products에서 추가 하고싶은(Added products) 제품 액세스 요청(Request acce..

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. 자동 완성: 기본 자동 완성: Ctrl + Space 스마트 자동 완성 (메소드 추론 등): Ctrl + Shift + Space 정적 메소드 및 상수 자동 완성: Ctrl + Space (두 번 누르기) 2. 코드 이동 및 편집: 메소드 또는 클래스로 이동: Ctrl + B 메소드 추출하기: Ctrl + Alt + M 변수 추출하기: Ctrl + Alt + V 파라미터 추출하기: Ctrl + Alt + P 인라인: Ctrl + Alt + N 코드 주석 토글: Ctrl + / 3. 코드 포맷팅: 전체 코드 포맷팅: Ctrl + Alt + L 선택한 코드..

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

@import 타입: (장점) 1. 스타일시트를 다른 스타일시트에 포함시키기 쉽습니다. 2. HTML 문서가 로드된 후에 실행되므로 일부 스타일을 지연하여 로드할 수 있습니다. (단점) 1. 순차적으로 로드되므로, 한 파일이 로딩되기 전까지 다음 파일의 로딩이 시작되지 않습니다. 이로 인해 페이지 로딩 시간이 더 걸릴 수 있습니다.(병렬 로딩 제한) 2. 브라우저가 캐싱하기 어렵습니다. 브라우저는 각각의 @import 문을 별개로 처리하기 때문에 전체 스타일시트를 캐시하기 어려울 수 있습니다. /* @import 사용법 */ @import url('reset.css'); @import url('layout.css'); @import url('typography.css'); /* 나머지 스타일 규칙들 */..

1. International Telephone Input 이란? International Telephone Input은 전화번호 입력 필드를 국제 전화번호 형식에 맞게 처리하는 JavaScript 플러그인입니다. 이를 사용하려면 몇 가지 단계를 따르면 됩니다. 2. 사용방법 1. International Telephone Input 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다. CDN을 사용하는 것이 편리하며, 다음과 같이 HTML 섹션에 추가할 수 있습니다. 2. 전화번호를 입력할 수 있는 HTML 입력 필드를 만듭니다. 3. 라이브러리를 초기화하고 입력 필드에 International Telephone Input을 적용하기 위해 JavaScript 코드를 작성합니다. 4. 필요에 따라 ..

1. 사용방 변수의 이름을 지정할 때에는 변수 맨앞에 -- 을 붙여주워야 합니다. --primary-color, --secondary-color, --font-size와 같은 CSS 변수를 정의하고, 해당 변수들을 사용하여 태그 요소에 스타일을 적용할수 있습니다. 2. 장점 변수를 사용하면 전역적으로 일관된 디자인을 유지하면서 유지보수가 용이해집니다. /*:root를 사용한 간단한 코드 예제 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; } body { font-size: var(--font-size); } h1 { color: var(--primary-color); } p { color: var(--..

1. try + except 오류의 종류에 상관없이 except을 실행합니다. try: #실행 코드 x = 0 y = 5 / x except: print('Error') #예외가 발생할때 실행 코드 #결과 Error 2. try + except + else 오류가 없다면 else 절의 코드가 작동합니다. try: #실행 코드 x = 1 y = 5 / x except: print('Error') #예외가 발생할때 실행 코드 else: print('정상 실행') #예외가 발생하지 않을때 실행 코드 print(y) #결과 정상 실행 5 3. try + except + finally 오류의 상관없이 finally 절의 코드가 작동합니다. try: #실행 코드 x = 1 y = 5 / x except: print..

1. f-string 이란? python version 3.6 부터 사용 할수 있습니다. 문자열 가장 앞에 f를 넣고, 중괄호 {} 안에 변수 또는 출력하고 싶은 것을 바로 넣습니다. 포맷 문자열 리터럴(간단히 f-문자열이라고도 합니다) 1. 기존에 사용하던 여러 방식 # 더하기(+) 방식 sport1 = '축구' sport2 = '농구' print(sport1+"와"+ sport2+"는 구기 종목이다.") # 퍼센트(%) 서식 방식 sport1 = '축구' sport2 = '농구' print("%s와 %s는 구기 종목이다."%(sport1, sport2)) # str.format 함수 방식 sport1 = '축구' sport2 = '농구' print("{}와 {}는 구기 종목이다.".format(spo..

1. if 문 python 에서는 구문을 지정할 때 들여쓰기 합니다 들여쓰기 하지 않으면 if문이 끝난걸로 간주합니다. 조건이 true(1)일때 실행합니다. color = red if color == red: #조건: print(f"컬러는{color}입니다.") #true 일때 #결과: 컬러는red입니다. 2. If else 문 true(1)와 false(0) 구분하고 싶을때 사용합니다. color = red if color == red: #조건: print(f"컬러는 {color} 입니다.") #true 일때 else: print(f"컬러가 {color}가 아닙니다.") #false 일때 #true 일때: 컬러는 red 입니다. #false 일때: 컬러가 red가 아닙니다. 3. If elif else..

Q. GPT로 CSS 선택자를 생성하려는 이유? 웹페이지는 제작시 작업자는 디자인 된 파일을 보면서 마크업 시작 합니다. 마크업이 끝나면 스타일을 주기 위해 CSS선택자 작업 해야 하는데 해당 작업은 손이 많이 가는 작업중에 하나 입니다. 그래서 작업시간을 단축 할수 있게 GPT를 통해 CSS를 생성(코딩)해 보기로 했습니다. 1. 우선 GPT 가입 합니다.(미가입자는 아래 링크 참고 하세요) https://ttowa.tistory.com/entry/JS-ChatGPT-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95 [GPT] ChatGPT 사용 방법 1. ChatGPT란? GPT 3.5를 기반으로 하는 OpenAI개발사에서 만든 대화형 인공지능 서비스이다. 사용자의 대화에서 질문에 ..