본문 바로가기
[css] 텍스트 줄바꿈 해결 텍스트가 영역을 넘칠때 줄바꿈 처리하는 css 줄바꿈 처리 css 태그 안에 텍스트 입력을 하고 바로 출력시 줄바꿈이 적용안되었을 경우, 줄바꿈을 그대로 적용해주는 css white-space: pre-line; before after
[py] 크롤링 데이터 엑셀에 저장 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 구현 내용 openpyxl 라이브러리 사용 네이버 주식정보의 3가지 종목 현재가 크롤링 현재가만 비워진 엑셀파일 미리 저장 크롤링 데이터 엑셀에 저장 적용 코드 import requests from bs4 import BeautifulSoup import openpyxl fpath = r'C:\project\python\practice\data.xlsx' #현재가만 비워진 미리 저장된 엑셀시트 wb = openpyxl.load_workbook(fpath) #엑셀 불러오기 ws = wb.active #현재 활성화된 기본 시트 # 종목코드리스트 codes = ['005930','000660', '035720'] row = 2 #행값을 돌..
[react] throttle 적용하기 react에 throttle를 적용한 코드입니다. throttle 동일한 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수의 실행을 보장합니다. 즉 일정시간동안 1개의 콜백함수를 실행하게 하여 짧은시간 동안 불필요하게 동일한 함수 실행을 막습니다. 화면 구현 throttle 코드 제로초님의 블로그를 참조한 코드 rottle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 함수의 실행을 보장합니다. function throttle(fetchData, delay = 600) { //throttle 사용코드 let timer; return function () { i..
[py] request 이용하여 웹 크롤링 예제 request를 라이브러리를 이용해 네이버 크롤링 예제입니다. 크롤링 주제: 네이버에 코딩하는 갓디노를 검색하여 나오는 데이터 크롤링 코드 import requests from bs4 import BeautifulSoup #print(response.status_code) #통신 응답 결과 200: 정상 404: 페이지 찾을 수 없음 pageNum = 1 for i in range (1, int(4* 10), 15): #총 4개의 페이지가 있고, i값이 1, 16, 31 순으로 진행 print(f' {pageNum} 페이지 -----------------------------------') response = requests.get(f'https://search.naver.com/search.naver?..
[py] 메일 자동화 발송 (ft. 셀레니움) 파이썬, 셀레니움을 이용한 네이버 메일 자동화 보내기 입니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 네이버 메일 자동화 보내기 코드 본문인 body 부분이 iframe 태그에 쌓여있기 때문에 iframe 태그 내부에 들어가서 본문을 작성 후 다시 iframe 나가는 별도의 코드가 필요 #셀레니움 기본설정 from selenium import webdriver from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.options import Options from webdriver_manager.chrome import ChromeDriverManager #크롬 드라이버 자동 ..
티스토리 블로그 html 배너 출력 플러그인 사용법 티스토리의 플러그인을 사용하여 html 배너 생성하는 방법입니다. 사이드바에 배너 생성하기 티스토리 블로그 메인화면의 사이드바에 html 배너를 생성하겠습니다. html 배너 플러그인 설치 티스토리 관리 > 플러그인 화면에서 배너 출력을 설치합니다. 배너 파일 업로드 티스토리 관리 > 스킨편집 > html 편집 > 파일업로드로 가서 배너 이미지를 업로드 시킵니다. 업로드 이미지 오른쪽 마우스 클릭 > 링크 주소 복사를 해놓습니다. html 배너 코드 적용 html 배너 모듈을 설치하였으므로 티스토리 관리의 사이드바 선택시 사이드바3에 html 배너출력 플러그인이 나타납니다. 편집 선택 배너 이름과 html 소스를 적용합니다. 의 코드 입력 배너 위치한 사이드바에 옮기기 사이드 바 > 기본 모듈 > 편집한..
[py] 이미지 사이즈 줄이기 파이썬을 이용하여 이미지 사이즈를 일괄 수정하는 방법입니다. 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. 이미지 조정 라이브러리 pillow pip install pillow #이미지 처리 라이브러리 이미지 사이즈 조정 코드 이미지 열때, 저장할때 경로가 필요합니다. import os from PIL import Image # 정리할 확장자 리스트 extention_list = ['.jpg', '.png', '.gif'] #해당 이미지 폴더 target = 'C:/project/python/랜덤이미지' #만들 폴더 destination = os.path.join(target, 'small') #폴더가 없다면 폴더 생성 if not os.path.exists(destination..
[py] 파이썬 랜덤 이미지 생성 파이썬을 이용한 랜덤 이미지 100개를 자동 생성입니다. 구현 화면 랜덤이미지 만들기 라이브러리 numpy pip insall pandas #pandas 설치하면 numpy가 같이 설치 됨 pillow pip install pillow #이미지 처리 라이브러리 랜덤이미지 생성 코드 import numpy from PIL import Image import os #만들 폴더 경로 target = 'C:/project/python/랜덤이미지' #폴더 만들기 if not os.path.exists(target): os.mkdir(target) for i in range(0, 101): filename = f'img{i}.jpg' #3차원 rgb 랜덤 배열 생성 rgb_array = numpy.random.ra..
[react] react-infinite-scroll-component 사용법 (ft. 무한 스크롤) react-infinite-scroll-component 라이브러리 사용법입니다. 화면구현 react-infinite-scroll-component 기본 예제 import React from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; const Component = () => { const [items, setItems] = useState(Array.from({ length: 40 })) const fetchData = () => { setTimeout(() => { setItems(items.concat(Array.from({ length: 50 }))) }, 1500); }; return ( {items.map((i..
[py] 파일 및 폴더 정리하기 예제는 스타트 코딩, 파이썬 크롤링 강의를 들으면서 공부한 내용입니다. os 라이브러리 os라는 라이브러리를 사용하고, 내부 저장된 라이브러리로 별도 설치 필요 없습니다. import os 폴더 생성, 폴더 내 파일 출력, 파일 확장자 출력 import os # 폴더 만들기 - 상대 경로 이동 os.mkdir('test1') # 폴더 만들기 - 상대 경로2 이동 os.mkdir('폴더이름/test2') # 폴더 만들기 - 절대 경로 이동 os.mkdir('C:/project/python/test2') # 파일 오른쪽 마우스 속성 > 위치 복사 -> 붙여넣기 후 역슬래시 슬래시로 바꿔주기 os.mkdir('C:/Users/PC CAFE/Downloads/images') # 폴더가 없을때만 만들기 if no..
[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; //가로 너비를 적용
반응형

티스토리툴바