본문 바로가기
[py] 파이썬 마우스 조작, 키보드 조작 (ft. pyautogui) pyautogui 설치 파이썬 마우스 키보드 조작 라이브러리 pip install pyautogui # mac은 pip 대신 pip3 마우스 좌표 찾기 import pyautogui pyautogui.mouseInfo() # 좌표 찾은 후 F2 단축키로 복사 마우스 자동화 import pyautogui import time # 화면 크기 출력 print(pyautogui.size()) # 마우스 위치 출력 time.sleep(2) print(pyautogui.position()) # 마우스 위치 이동 # mac = 손 쉬운 사용 vscode 권한 설정 # 한번에 이동 pyautogui.moveTo(1900, 50) # a초 동안 이동 pyautogui.moveTo(388,19,2) # 마우스 클릭 pya..
[py] 파이썬 반복문 예제 (ft. for문, while문) 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. for문 list 예제 num_lists = [1,2,3,4] for i in num_lists: print(i*2) //2 //4 //6 //8 range 예제 gugudan = int(input('몇단을 출력할까요?? >>>')) for i in range(0, 10, 1): print(f'{gugudan}x{i}={gugudan*i}') 결과 while문 i = 1 //초기식 while i chosenNum: print('정답은 더 작습니다.') elif num < chosenNum: print('정답은 더 큽니다.') count +=1 결과
[py] 네이버 로그인 자동화 (ft. 셀레니움) 셀레니움을 이용한 네이버 로그인 자동화 구현 입니다. 예제는 스타트 코딩, 이것이 진짜 크롤링이다 기본편 강의를 들으면서 공부한 내용입니다. 구현 화면 자동입력 방지 문자 알림 해결 id.send_keys('네이버 아이디'), pw.send_keys('네이버 비밀번호') 코드 사용하면 너무 빨리 입력이 되면서 네이버에서 감지하여 아래와 같은 오류 알림 화면으로 이동됩니다. 이를 해결하기 위해, 사람이 직접 입력한 것과 같은 코드로 변경해줘야 합니다. pyperclip.copy('입력어') pyautogui.hotkey('ctrl', 'v') //입력어 붙여넣기로 #id.send_keys('입력어')와 같음 time.sleep(2) //2초 딜레이 네이버 로그인 자동화 #셀레니움 기본설정 from sele..
[py] 셀레니움 기본 설정 셀레니움 작업시 필요한 기본 설정 코드입니다. 셀레니움 설치된 버전 확인 pip list # 결과창에서 selenium 찾기 mac은 pip 대신 pip3 셀레니움 설치 pip install selenium #window pip3 install selenium #mac 셀레니움 4로 업데이트 #window pip install --upgrade pip pip install --upgrade selenium #mac pip3 install --upgrade pip pip3 install --upgrade selenium 크롬 드라이버 자동 업데이트 코드 pip install webdriver_manager #window pip3 install webdriver_manager #mac 브라우저 꺼짐 방지 코..
[py] 네이버 상품 목록 크롤링 해오기 (ft. 셀레니움, csv로 옮기기) 셀레니움을 이용한 동적사이트 데이터 csv로 가져오기 예제는 스타트 코딩, 이것이 진짜 크롤링이다 기본편 강의를 들으면서 공부한 내용입니다. 구현 화면 mac - 여러페이지 크롤링 mac- 단일 페이지 크롤링 window requests의 한계 로그인이 필요한 경우, 세션처리하는 것으로 크롤링이 어려움 동적으로 html을 만드는 경우 크롤링이 어려움 동적으로 html을 만드는 경우 v 스크롤 하거나 클릭하면 데이터가 생성됨 v url 주소가 그대로 인데 데이터가 변경되었을 경우임 v 표나 테이블 형태의 데이터 셀레니움 웹 어플리케이션 테스트를 위한 도구 브라우저를 실제로 띄워서 사람처럼 동작하도록 만들 수 있음 셀레니움 설치 크롬 드라이버 설치 셀레니움 설치 #window pip install selen..
[py] ModuleNotFoundError: No module named 'selenium' selenium 설치 후 에러 대응 No module named 'selenium' 오류 셀레니움 라이브러리를 사용하기 위해서 먼저 필요한 두가지 조건이 선행되어야 합니다. 구글 드라이버 설치 pip install selenium 명령어로 셀레니움 라이브러리 설치 위의 두가지를 실행하고도 selenium 모듈을 찾을 수 없다는 에러와 입력한 코드 from selenium import webdriver의 selenium과 webdriver에 노란색 물결 밑줄이 쳐져있었습니다. 해결방법 vs code 하단의 python 버전 부분을 선택하여, 버전을 변경해 주었습니다. 기존의 추천, Python 3.10.7 64-bit 버전에서 글로벌 Python 3.8.5 64-bit로 변경을 하였더니 에러가 사라지면서 ..
[react] 여러개 토글 버튼 구현 react에서 한 페이지 여러개의 토글 버튼 구현하기 입니다. 구현화면 구현 영상 부모요소 import React from 'react'; import ToggleBar from "../../components/myInfo/ToggleBar"; const Alarm = () => { const datas = [ { id: 1, title: '알림1', name: 'pushOnRecommendMeal' }, { id: 2, title: '알림2', name: 'pushOnEatRecord' }, { id: 3, title: '알림3', name: 'pushOnSymptomRecord' }, { id: 4, title: '알림4', name: 'pushOnWeeklyReport' }, ] return ( {..
[js] 자바스크립트 null 이지만 0은 아닐 때 자바스크립트에서 변수가 null 이지만 0은 아닐 때를 찾는 방법입니다. 자바스크립트 null 이지만 0은 아닐 때 null이지만 0을 걸러낼 경우 if (!foo && foo !== 0)
[react] resize 적용하는 법 react에서 자바스크립트의 이벤트를 이용해 미디어쿼리 적용하는 방법입니다. resize 적용 코드 const Container = () => { const [narrowWidth, setNarrowWidth] = useState(false) const widthControlFn = () => { let width = window.innerWidth if (width { // resize window.addEventListener("resize", widthControlFn) return () => window.removeEventList..
[react] 하위 컴포넌트별로 특정 요소 on/off 설정 하위 컴포넌트별로 버튼과 같은 특정 요소 on/off 설정입니다. 화면구현 구현내용 상위와 하위 컴포넌트(oneday card)로 구성된다. 더보기 아이콘 클릭시 해당 카드의 팝업 버튼이 오픈된다 토글 기능으로 한번 클릭시 버튼이 없어진다 클릭한 날짜의 버튼만 나오고, 다른 날짜의 버튼들은 사라진다. 자식 컴포넌트에서만 버튼 on/off 기능을 구현하였더니, 4번 기능이 작동하지 않았습니다. 결국 상위와의 코드 연결을 통해 4번을 구현하였습니다. 구현코드 부모요소 const [chosenDay, setChosenDay] = useState(null) //누른 카드의 날짜 const onMatchCardDay = (day) => setChosenDay(day) //하위에 전달할 함수 return ... {..
[react] background-image 에 data 넣기 인라인 방식으로 background-image 에 data 넣기 style={{ background: "url(" + `${url}` + ") no-repeat center" }} style={{ background: "url('url path..." + `${data...}` + ".svg') no-repeat center" }} // 'url ....svg'가 중요
[css] 넘치는 텍스트 줄바꿈 처리 css를 이용한 넘치는 텍스트 줄바꿈 처리입니다. 넘치는 텍스트 줄바꿈 처리 div {word-break:break-all;} before after
[py] 크롤링한 데이터 엑셀 저장, 수정 파이썬의 openpyxl 라이브러리를 이용하여 데이터를 엑셀에 저장/수정을 해보겠습니다. openpyxl 라이브러리 파이썬에서 엑셀을 다를 수 있게 도와주는 라이브러리 자세한 사용방법은 공식 문서 참조 openpyxl 설치 방법 pip install openpyxl 파이썬으로 데이터 엑셀 저장하기 import openpyxl # 엑셀만들기 wb = openpyxl.Workbook() #엑셀 워크시트 만들기 ws = wb.create_sheet('example') #데이터 추가하기 ws['A1'] = '번호' ws['B1'] = '이름' ws['A2'] = 1 #행열에 맞추어 대가로 안에 ws['B2'] = '까를로스' #엑셀파일 저장하기 #save(상대경로 또는 절대경로) #앞에 r을 붙여주어 백슬래시를..
[py] 네이버 뉴스 타이틀, url 크롤링 네이버 뉴스의 특정 검색어를 여러페이지에 걸쳐 제목과 링크를 크롤링합니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 인터넷 주소 형식 Protocol - Domain - Path - Parameter Protocol : 더블 슬래쉬 전, http 또는 https Doamin: 더블 슬래쉬와 다음 슬래쉬 사이 구간, ip주소에 이름을 준것 Path: 다음 슬래쉬와 물음표 사이 구간, 서버에서 해당 페이지의 경로 Parameter: 물음표 뒤 구간, 크롤링에서 가장 중요한 부분, key와 value로 구성, &로 구분 검색어를 입력 받은 뒤 query={입력어}를 변경해주면 됨 라이브러리 설치 확인 pip list beautifulsoup4 , requests 패키지 설치 Re..
[js] 서버 없이 form에서 데이터 전송 기능 구현 (ft. Google Apps Mail) 웹사이트에서 서버 없이 프론트에서 contact 기능을 구현 합니다. 웹사이트에서 본인의 이름, 연락처, 메일, 메시지를 보내는 컨택트 기능을 사용할 때, 보통 백엔드를 이용해 서버에 데이터를 저장합니다. 하지만 서버가 없는 간단한 랜딩페이지로 구성된 사이트의 경우. 서버 없이 프론트에서 바로 데이터를 전송하고, 저장하는 방법이 있습니다. 참고 사이트: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us..
[react] env 환경변수 세팅 (ft. process.env) react에서 env 변수 설정과 사용법 입니다. env 프로젝트 개발 시 API_KEY 또는 DB 정보, port url 등 git 오픈소스에 올리면 안되고, 개발자만 알아야 하는 고유의 값들이 있습니다. 이 값들 파일 외부에 저장시켜 불러와서 오픈 소스에 오픈되지 않고, 안전하게 사용할 수 있습니다. env 환경변수 세팅 env 파일은 프로젝트의 최상위 루트에 만듭니다. 변수명은 'REACT_APP_' 으로 시작되야 합니다. creat-react-app은 보안이 필요한 환경 변수의 유출을 막기 위해 reactapp으로 시작되는 변수는 무시합니다. .env 파일 설정 REACT_APP_KAKAO_KEY=xxx //REACT_APP_변수 이름 .env 변수 불러오기 process.env.REACT_APP..
[js] 배열과 배열의 비교 (compare arrays in javascript) 배열과 배열이 같은지 여부를 확인하는 방법입니다. 배열과 배열을 === 로 비교하였을 때 값은 false 입니다. let arr1 = [1,2,3]; let arr2 = [1,2,3]; console.log(arr1===arr2); //false 배열과 배열의 비교 두 배열의 길이가 같은지 비교 한 배열의 각 요소가 다른 비교 대상의 배열에도 존재하는지 여부 let arr1 = [1,2,3]; let arr2 = [1,3,2]; const result = arr1.length === arr2.length && arr1.every((value, idx) => value === arr2[idx]); console.log(result) //false
[css] 강제 가로 모드 세로화면에서 강제로 가로 모드로 적용하는 법입니다. 모바일 화면 웹을 만들 때, 텍스트가 꽉 찬 테이블(시간표, 식단표)를 만들때 세로 화면에서 강제로 가로모드의 화면을 만들때가 있습니다. 단순히 스타일에 transform: rotate(-90deg); 만 준다면 기존의 가로폭이 세로에 적용이 되어 여전히 좁은 폭의 막혀있습니다. 강제 가로모드 css transform: rotate(-90deg); transform-origin: top left; position: absolute; top: 100%; left: 0; width: 100vh; //세로 너비를 적용 height: 100vw; //가로 너비를 적용
[js] 디데이 카운더 기능 라이브러리 웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sky, and the June solstice marks the beginning of summer in the Northern Hemisphere. www.timeanddate.com 먼저 구글에서 time and dat를 검색하거나 위의 링크를 눌러 사이트로 이동하세요. 메인 화면에서 오른쪽 상단 메뉴에서 Free Fun > Free Countdown For Your Site 선택. 여기서 카운..
[js] 팝업창 오픈 후 배경 스크롤 방지 자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.style.overflow = 'hidden' body.style.width = '100%' } const onCloseGuide = () => { //팝업창 닫을때 body.style.removeProperty('overflow') body.style.removeProperty('width') }
[js] 천자리 콤마 적용 (천자리 점찍기) 자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다. toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈 값이면 사용자 로컬 환경의 locale을 default로 사용합니다. Number(no)?.toLocaleString('en') 정규식 사파리 환경 지원을 하지 않아 아이폰 개발을 원한다면 사용하면 안됩니다. num.toString().replace(/\B(?
[react] 카카오톡 공유하기 기능 구현 react에서 카카오톡 공유하기입니다. kakao development 앱 등록하여 자바스립트 키 복사 앱 등록 후 사이트 도메인 url 주소를 등록합니다. 자바스립트 키를 복사해 둡니다. 카카오톡 sdk 추가 useEffect(() => { // 카카오톡 sdk 추가 const script = document.createElement("script"); script.src = "https://developers.kakao.com/sdk/js/kakao.js"; script.async = true; document.body.appendChild(script); return () => document.body.removeChild(script); }, []); 클릭 이벤트 핸들러 버튼 onClick 이벤트..
[git] You have not concluded your merge (MERGE_HEAD exists) git pull 후 에러메시지 error: You have not concluded your merge (MERGE_HEAD exists). 해결방법 merge 취소 git merge --abort commit git status git commit -m "커밋 내용" git pull git pull origin master
[js] 페이지내 특정 위치로 스크롤 이동하기 제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 태그 내에 삽입합니다. easing 효과를 위해 jquery.easing 스크립트 파일을 태그 내에 삽입합니다. easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다. html 버튼 script //네이게이션 menu click시 easing기능으로 부드럽게 이동 $(".btn").click(function(event){ event.preventDefault(); //이전의 이벤트를 기본값 x = $(this).attr("href"); /..
[js] 문자열 특정 문자 추출하기 substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코드만 추출할 경우입니다. http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL... 애프터 코드: AgAFQlg5MTRIeXp/kL 문자열 특정 문자 추출하기 let url = http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL let data = url.substring(url.indexOf('=') + 1) // = 다음 문자열부터 끝까지 추출 console.log..
[js] 배열 map으로 object에 key 추가하기, value 추가 map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6: {day: '2022-05-16'} 가공 후 after 0: {day: '2022-05-10', data: ''} 1: {day: '2022-05-11', data: ''} 2: {day: '2022-05-12', data: ''} 3: {day: '2022-05-13', data: ''} 4: {day: '2022-05-14', data: ''} 5: {day: '2022-0..
[css] table border에 border-radius 적용하기 table border에 border-radius 적용하는 방법입니다. 스타일에서 border-radius와 border를 적용시 border가 rounded 처리가 안될 때가 있습니다 . 이럴때는 스타일에 추가적으로 border-collapse: seperate 을 추가하여 기본값이 collapse에서 seperate로 변경해줍니다.
[react] useState는 비동기? useState의 비동기적 동작에 대해 알아보았습니다. react로 프로젝트로 몇 개 진행하면서 자연스럽게 알게 되었지만 개념을 제대로 정리해 본 적이 없어 아주 중요한 react hooks useState는 동기인가 비동기인가에 대한 설명을 해보려고 합니다. useState는 비동기인가? useState는 비동기적으로 동작합니다. 하나의 이벤트 핸들러 함수 내에서 같은 setState가 호출된다면 마지막에 실행한 setState가 실행되어 렌더링 됩니다. useState는 비동기 예시 import React, { useState } from "react"; const Example = () => { const [count, setCount] = useState(0); const onClick = () ..
반응형

티스토리툴바