코딩 발걸음 - 한발두발개발

React의 특징 3가지 1.Component UI를 구성하는 개별적인 뷰 단위이다. 전체 앱은 Component들이 결합해서 만들어 지게 됨 무엇보다 Component는 다른 부분, 혹은 다른 앱에서도 쉽게 재활용이 가능함. 2.JSX 자바스크립트 확장 문법으로 보통 ES6를 이용하여 작성한다. 3.Virtual DOM 리액트의 가장 큰 특징. 뷰에 변화가 생길때 실제DOM에 적용되기전 가상의 DOM에 먼저 적용을 시킨뒤 최종적인 결과를 DOM으로 전달해줌 https://velopert.com/3236 2.기초 세팅 1. node 다운로드 2. vs code 다운로드 3. npx create-react-app [프로젝트 명] [추후 더 깊히 찾아볼 예정] *잠깐 npm과 npx의 간단한 차이를 보자면 ..

기본 스키마 정의 http Request 를 이용하여 mongoDB에 CRUD 테스트를 해보겠습니다. 1. CREATE = save (AutoIncrement 사용) var mongoose = require('mongoose'); //*mongoose autoincrement 모듈 사용 npm install mongoose-auto-increment var autoincrement = require('mongoose-auto-increment'); autoincrement.initialize(mongoose.connection); //mongoose 스키마 객체 정의 var userSchema = new mongoose.Schema( { //AutoIncrement를 이용하여 seq에 데이터를 넣을 예정..

안녕하세요 :D 오늘은 셀레니움으로 크롬 브라우저를 적용하는 옵션들에 대해서 알아보겠습니다. 풀 코드 및 간단한 설명 먼저 올리겠습니다. 바쁘신 여러분들은 풀 코드만 보시는 걸 좋아하니까요ㅎㅎ from selenium import webdriver from selenium.webdriver.chrome.options import Options options = Options() #지정한 user-agent로 설정합니다. user_agent = "Mozilla/5.0 (Linux; Android 9; SM-G975F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.83 Mobile Safari/537.36" options.add_argument('use..

이번 포스팅에서는 selenium에서 javascript를 사용하는 방법과 javascript로 자주 사용했던 명령어를 알아보겠습니다. 먼저 사용하는 방법입니다. 뭐 없습니다.. execute_script()만 붙여주시면 됩니다. driver.execute_script("alert('경고창입니다.')") 이렇게 말이죠.. 그럼 자주 사용했던 명령어와 쓰임새에 대해서 알아보겠습니다. 1. UserAgent 확인 - return navigator.userAgent selenium으로 프로젝트를 진행하다 보면 user-agent 값을 설정할 때가 있습니다. 설정 후 내 user-agent 값을 확인하기 위해서 사용하는 명령문입니다. print(driver.execute_script('return navigat..

HTML + CSS 첫 번째 포스팅입니다. 첫 번째 시간으로는 HTML과 간단한 CSS를 이용하여 카카오톡 실시간 상담 아이콘을 홈페이지에 띄워 보도록 하겠습니다. 1. 먼저 카카오톡 투명로고 파일을 준비해줍니다. 아래 이미지는 출처표기 없이 자유롭게 사용하셔도 됩니다. 2. html 파일을 작성하고 a태그 안에 img를 추가해줍니다. 위와 같은 코드를 작성하면 아래와 같은 화면을 확인할 수 있습니다. 3. 카카오톡 채널 관리자 센터 앱에서 채널 URL을 확인합니다. 4. 복사한 URL을 소스코드 a태그 안에 넣어줍니다. ( 바로 뒤에/chat을 넣어주세요. ) 5. css를 이용하여 이미지 위치를 지정해 줍니다. 저는 kakaoChat이라는 클래스를 따로 선언했습니다. CSS에 익숙하지 않으신 분들은 ..

replace() 문자열 바꾸기 testString = "abcd abcd htmla" testString.replace("ab","z") =>"ab"라는 문자열을 찾아 z로 바꿔라. 출력값 : 'zcd zcd htmla' split() 문자열 분리하기 testString = "abcd , abcd,htmla" testString.split(",") => testString을 ','을 기준으로 나눠서 리스트로 변환 출력값 : ['abcd ', ' abcd', 'htmla'] strip() 공백삭제하기 ( lstrip()은 왼쪽 , rstrip()은 오른쪽) testString = " abcd " testString.strip() => 양쪽공백을 삭제해라 출력값 : "abcd" stript() 문자열 끝의..

selenium을 사용하다 보면 스크롤을 내려야 하는 상황이 발생합니다. 오늘은 selenium에서 스크롤을 내리는 방법들에 대해 알아보겠습니다. 1. driver.execute_script("window.scrollTo(x, y)") 첫 번째는 javascript를 이용한 스크롤 내리기입니다. 브라우저를 열고 빌보드 200 차트로 들어가 보겠습니다. driver.get("https://www.billboard.com/charts/billboard-200") 화면 최상단으로부터 700픽셀을 내려보도록 하겠습니다. driver.execute_script("window.scrollTo(0, 700)") 스크롤이 내려온 것을 확인할 수 있습니다. 참고로 execute_script() 함수는 브라우저에서 jav..

package.json 이란 프로젝트 정보와 의존성(dependencies)을 관리하는 문서이다. 작성된 package.json문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해준다. JSON 포맷으로 작성해야 하며, 다음과 같은 옵션들이 추가될 수 있다. name URL이나 Command Line의 일부로 사용될 소문자로 표기된 214자 이내의 프로젝트(패키지) 이름으로,간결하고 직관적인 이름으로 설정하되 다른 모듈과 동일한 이름을 피해야한다. version SemVer(The semantic versioner for npm)로 분석 가능한 형태의 버전을 지정한다. description 프로젝트(패키지)의 설명을 지정한다. (npm search 사용 시 도움이 된다.) keywords 프로젝트..