본문 바로가기
[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 = () ..
[react] react-datepicker를 커스텀 (ft. 여러개 날짜 표시) react-datepicker로 여러개의 날짜를 표시하는 커스텀입니다. 보통의 데이트 피커는 달력을 오픈하여 원하는 날짜를 지정하는 방식의 구현을 하는데 이번에는 달력에서 여러개의 날짜를 한번에 보여주는 디자인으로 커스텀 하였습니다. react date-picker 라이브러리에서 제공하는 highlight dates 기능을 이용 highlightDates 속성 사용하여 하이라이트 할 여러개의 날짜를 배열로 넣어줌 구현 화면 구현 영상 구현 코드 애니메이션 효과를 위해 framer motion 라이브러리 사용 dayjs 라이브러리 사용하여 달력 header 영역 날짜 표시 부모에서 chosenDates 에 하이라이트할 날짜를 배열로 보내주어 구현 import React from "react"; import..
[js] 자바스크립트 debugger 활용 자바스크립트에서 디버깅시 debugger 기능을 활용할 수 있습니다. debugger debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음 Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있음 실행 흐름을 따라가면서 코드를 체크하여 검증할 수 있음 debugger 코드 사용 debugger; 라고 코드 중간에 삽입하여 사용하면 debugger 실행 시점일때 개발자 도구가 source로 바뀌면서 화면이 멈춥니다. debugger; 사용 화면 디버깅 버튼을 누르며 한줄씩 코드를 실행드가 실행해보면 각 변수에 할당되는 값이 우측에 표시되기 때문에 디버깅을 위해 console이나 alert로 값을 일일이 찍어서 확인할 필요가 없습니다. 오른쪽에 도돌이표처럼 생긴 버튼..
[js] 자바스크립트 함수 선언과 함수 호출 자바스크립트 함수와 함수 호출에 관한 설명입니다. 함수 선언 코드 형식1 es6 함수 문법: 화살표 함수 아래 함수에서 { } 는 객체가 아니라 블럭 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = () => ({ ... }) const add = () => a+b; //함수 선언 //const add = () => {return a+b} 위의 함수와 같음 //const add = () => ({a+b}) 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 코드 형식2 매개변수를 넣어 다양한 함수 활용 가능 function cal(func,a,b) { //함수 선언 return func(a,b) //명령 } //conts cal = (func,a,b) => func(a,b) 와 위..
[react] react 차트 라이브러리 추천 react 차트 라이브러리 괜찮은 것을 소개합니다. 1. nivo 커스텀 기능이 정말 잘 되어 있음 다양한 차트 종류 사이트 상에서 커스텀 적용하여 미리보기 가능 결과 코드를 바로 복사하여 사용 https://nivo.rocks/components/ Components | nivo nivo.rocks nivo 차트 사용 예제 2. Recharts 간단한 차트를 사용할 때 적당함 적당한 커스텀 기본 디자인과 속도가 좋고 코드 적용이 정말 쉬움 https://recharts.org/en-US rechart 차트 사용 예제 3. apexchart 커스텀 기능이 매우 잘 되있음 nivo에서 불가능한 커스텀 가능함 documents가 매우 잘 되있음 다양한 차트 종류 https://apexcharts.com/
반응형

티스토리툴바