본문 바로가기

전체 글229

nodejs 없이 react 문법 연습하기 react로 뭔가 만들어보려면 초기 세팅하는 것들이 많은데요 문법만 기초부터 연습해보려면 nodejs 설치 없이도 할 수 있어요 Visual Studio Code 만 설치되어 있으면 할 수 있습니다 기본 html 에서 react 스크립트를 불러와보세요 공식 문서에서 확인 해 볼 수 있어요 reactjs.org/docs/cdn-links.html 이렇게 2개 라인을 head 태그에 붙여 넣어서 기본 틀을 만들어요 이제 script 태그 안에 React 문법을 사용할 수 있어요 리액트로 만든 컴포넌트가 보여지는 위치입니다 React.createElement 이용하여 태그를 만들고 render를 이용하여 표시합니다 2020. 11. 6.
Visual Studio Code 자체 웹서버 html 코드 테스트 html 페이지 만으로 테스트하고 싶은 경우가 있어요 nodejs나 python flask를 이용해서 서버를 만들어서 할 수도 있지만 화면만 담당하는 사람에게는 필요 없는 경우도 있어요 또는 아주 간단한 페이지를 만들어서 테스트하려는 경우에도 유용하게 쓸 수 있습니다 사실 파일을 그냥 크롬에서 열어도 되는 경우가 많은데요 가끔 웹서버 환경에서 동작해야 잘 작동하는 경우도 있어서 한 번만 이렇게 설치해두면 좋아요 Visual Studio Code 에서 확장 프로그램 설치 화면으로 오세요 왼쪽에서 확장프로그램 아이콘이 있어요 live server 라고 검색해서 설치하세요 웹서버에서 보고 싶은 파일을 오른 클릭해보세요 그럼 Open with Live Server 메뉴를 누르면 웹서버가 실행됩니다 하단에 포트 .. 2020. 11. 5.
Visual Studio Code 에서 React 개발환경에 필요한 확장 프로그램 Visual Studio Code 를 이용하여 React 개발하면서 필요한 확장 프로그램 메모합니다 왼쪽 아이콘 중에서 Extensions 라는 아이콘을 눌러서 확장 프로그램 설치 화면으로 이동하세요 검색 창에서 eslint 를 검색해서 install 버튼을 눌러서 설치하세요 path 라고 검색해서 Path Intellisense 설치하세요 reactjs code 를 검색해서 Reactjs code snippets 을 설치하세요 prettier 을 검색해서 Prettier - Code formatter 을 설치하세요 prettier 은 설정을 해야 합니다 설치하고 나서 설정으로 이동하세요 eslint 에서 오류 나지 않도록 Single Quote 체크해주세요 원하는 분은 tab width 수정하세요 검색.. 2020. 11. 4.
Python 크롤링 스샷 스크린샷 캡쳐 selenium 이 필요합니다 pip install selenium 노션 캡쳐를 예쁘게 하고 싶어서 이렇게 시작했어요~ from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.common.exceptions import TimeoutException from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By DRIVER = './chromedriver'.. 2020. 10. 24.
Python Selenium 창 사이즈 설정하기 크롤링 하면서 창 사이즈를 조절해야 하는 경우가 있어요 headless를 설정해서 화면이 보이지 않도록 할 수 있는데요 headless 옵션으로 모니터 화면보다 셀레니움에서 크게 화면을 설정해볼 수 있어요 from selenium import webdriver chrome_options = Options() chrome_options.binary_location = os.environ.get("GOOGLE_CHROME_BIN") chrome_options.add_argument("--headless") driver = webdriver.Chrome(executable_path=os.environ.get("CHROMEDRIVER_PATH"),options=chrome_options) driver.set_w.. 2020. 10. 23.
Python 크롤링 selenium 자바스크립트 결과 값 받기 자바스크리트를 실행하고 결과를 Python으로 가져와서 활용하는 방법입니다 >>> from selenium import webdriver >>> driver = webdriver.Chrome(executable_path=os.environ.get("CHROMEDRIVER_PATH")) >>> driver.get("http://접속주소") >>> driver.execute_script("return 5") 5 >>> driver.execute_script("return true") True >>> driver.execute_script("return {j: '값'}") {u'foo': u'bar'} >>> driver.execute_script("return func()") u'func 함수 실행 결과' .. 2020. 10. 22.
자바스크립트 Javascript 스크롤바 제거하기 스크롤바가 예쁘지 않아서 잠시 제거하고 싶을 때 사용할 수 있어요 물론 css 파일을 이용하는 것도 좋습니다 // 전체 document.body.style.overflow = "hidden"; // 특정 영역 document.getElementsByClassName("검색")[i].style.overflow = "hidden"; 2020. 10. 21.
자바스크립트 Javascript 에서 ajax fetch 로 파일 다운로드 받기 웹 화면에서 자바스크립트 기반으로 파일을 다운로드하기 구현을 위해서 유용한 스크립트가 있어요 파일을 url 에 접속해서 다운로드하게 하려고 할 때 좋은데요 danml.com/download.html#Download 접속해보시면 참고 할 수 있어요 다운로드한 소스를 download.js 파일 이름으로 저장해서 사용했어요 download 함수를 사용 할 수 있어요 샘플 코드 입니다 function downloadFile(url) { if (!url) { alert("No Notion Page"); return false; } else { return fetch(url, { method: 'GET' }).then(function(resp) { if (!resp|| !resp.ok) { alert("Error".. 2020. 10. 20.
반응형

티스토리툴바