본문 바로가기
728x90
반응형

프로그래밍&IT

 (118)
Coding Apple, React 강좌 내용 정리.11 - 쇼핑몰 비슷하게 만들어 보기 4.Link, Switch, history , URL parameter 저번 내용들 기본 소스 내용 관련 import / export , 외부데이터 Router.1 Router : Link, Switch, history 상세페이지를 컴포넌트로 만들어보기 (Detail.js) import React, {useState} from "react" function Detail() { return ( 상품명 상품 설명 120000원 주문하기 ) } export default Detail; 이 부분을 다른 파일로 옮긴 후 import 해보기 컴포넌트 파일 만들 때는 import React 해야 한다. import Detail from './Detail'; ... 페이지 이동하는 버튼만들기 Navbar의 Home / Detail Link만들기 Home >> Home Detail >> D..
Coding Apple, React 강좌 내용 정리.10 - 쇼핑몰 비슷하게 만들어 보기.3 : router router (routing) : 페이지 나누기. 분기 (라우팅) 'react-router-dom' 라이브러리를 사용한다. 터미널에서 npm install react-router-dom 명령어를 넣어서 설치한다 router 설정 index.js 파일에서 import {BrowserRouter} from 'react-router-dom' --- ReactDOM.render( // App을 감싼다 , document.getElementById('root') ); [ HashRouter ] 를 쓴다면. 그러면 #/Routing으로 표시할 수도 있다. (BrowserRouter는 # 가 없다) 라우팅을 안전할수있게 도와줄 수 있다. Browser router : 라우팅을 리액트가 아니라 서버에게 요청할 수도 있..
Coding Apple, React 강좌 내용 정리.9 - 쇼핑몰 비슷하게 만들어 보기.2 - import / export import / export 전 강의 내용에 이어서 진행 (링크) 외부의 데이터 (data.js / export) -> import해서 사용하는 정보 데이터 만들기 - src 폴더에 파일 생성 (data.js) 후 export default 적는다 // data.js 내용 export default [ { id : 1, title : "White and Black", content : "Born in Newyork" , price : 120000 }, { id : 2, title : "Red Knit", content : "Born in Seoul" , price : 110000 }, { id : 3, title : "Back", content : "Born in Paris" , price : 10000..
Coding Apple, React 강좌 내용 정리.9 - 쇼핑몰 비슷하게 만들어 보기.1 쇼핑몰 (비슷하게 만들어보기) 먼저 프로젝트를 새로 만들어야할텐데, 그 내용은 저번 강좌내용에서 확인하자. React 강좌 내용 정리. 1 - 개발환경 구성, 설치 프로젝트 구성 Bootstrap 이용해보기 (React bootstrap - Getting Started) web 개발할 때 필요한 / 사용하는 여러 기능들 (Button, Dropdown 등 등) 을 만들어둔 라이브러리라 생각하면 될듯 일반 bootstrap도 있지만 react bootstrap을 이용해보기로 한다. 설치, 사용법은 React bootstrap 사이트에서 자세히 알아보자. 설치 터미널에 가서 npm으로 설치 (일단 강좌가 4 버전인것같아서, 나도 4버전으로 npm install react-bootstrap bootstrap@..
Coding Apple, React 강좌 내용 정리.8 - 리액트에서 사용자의 input 처리 저번내용 & 소스 React 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용) ; full source 포함 태그를 사용 사용자가 input에 입력한 값을 state로 저장해보기 1. 먼저 저장공간을 만들어두기 let [입력값, 입력값변경] = useState(''); // '' 값으로 초기화한 "입력값" 2. 뭔가 입력이 될 때 안의 함수가 실행된다 { console.log('Hello')} }> 사용자가 입력한 값? e.target.value {console.log(e.target.value)} }> 결과값 3. 확인을 했으니, state값 저장, 변경 { 입력값변경(e.target.value)} }> map반복문으로 돌린 html에는 key={}가 필요 // i : 반복문의 index 글..
Coding Apple, React 강좌 내용 정리.7 - UI 제작패턴 (props 등 이용) UI 만드는 법 UI와 관련된 중요 정보들을 state로 저장해놓고 state에 따라서 UI가 수정되게 만든다 저번 내용 참조 React 강좌 내용 정리.5 - Component 기초, 사용하기 (기본 소스 포함) React 강좌 내용 정리.6 - map, for / props 목표 * 각 list의 제목을 클릭하면, Modal의 타이틀 변경해서 보여주기 1. 기본적인 내용을 state로 선언 function App() { // 글제목 state let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); // 누른제목의 index 번호를 저장하는 state let [누른제목,누른제목변경] = useState(0) 2. 글목록 관련된 내용 { // i :..
Coding Apple, React 강좌 내용 정리.6 - map, for / props React 강좌 내용 정리. 5 반복 사용 관련해서 JSX 중괄호 내에 for 못 넣는다. -> { map() } 사용해서 html 코드를 반복시킨다. map() ? array내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 array.map(callbackFunction(currentValue, index, array), thisArg) ex) var arr = [1,2,3]; var newArray = arr.map( function(currentValue, index, array){ return currentValue * 2; } ); // newArray = [2,4,6] 결국 (유사) 반복문처럼 사용된다. 반복문 쓰는 법 { 반복할 데이터.map( ()=> { return } ) } { 글제목..
Coding Appl , React 강좌 내용 정리.5 - Component 기초, 사용하기 Component 기초 html을 줄여서 쓸 수 있는 방법? Component 문법 소스 관리가 쉬워진다. 페이지 구분은 라우터(?)를 써야 하는데, 그건 나중에... css 체크 .modal { padding: 20px; margin-top: 20px; background: #eee; } function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); let [좋아요, 좋아요변경] = useState(0); let posts = '강남 고기 맛집'; return ( 개발 blog {글제목[0]} {좋아요변경(좋아요+1) } }>👍{좋아요} 2월 17일 발생 {글제목[1]} 2월 17일 발생 {글제목[2]} 2월 17일 발생 /..
[파이썬] 웹 스크래핑.6 - Selenium 추가 내용 , 메서드, 속성 Selenium 추가 내용 & 활용 브라우저가 모두 로딩이 안 되어있다면 버튼 수행을 할 수가 없으므로, 일정 시간대 기후, 버튼 클릭을 하는 내용 ### 기본 내용 from selenium import webdriver browser = webdriver.Chrome() browser.maximize_window() # 브라우저 최대화 url = "[이동할 사이트 url]" browser.get(url) ### from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC ..
[파이썬] 웹 스크래핑.5 - Selenium 기본 Selenium ? 자동화된 웹 테스트를 수행할 수 있도록 해주는 프레임워크. 아파치 라이선스하에 오픈소스로 자유로이 이용이 가능. 기존 크롤러와는 달리, 로그인 수행이나 설문조사에 참여할 수 있게 하기 도하는 등 웹에서의 작업을 대신 맡길 수 있다. 1. 먼저 설치되어 있는 크롬에 맞는 Driver를 download해야한다. 1) 설치되어있는 크롬의 버전을 알기 위해서, 주소창에 " chrome://version "을 입력 2) 도움말 -> 크롬 정보 2. 크롬 드라이버 다운로드 ( 다운로드 사이트 이동) 다운로드 사이트에 이동한 후에, 설치된 크롬에 맞는 버전의 드라이버를 다운로드하고, python 프로젝트 파일에 위치시킨다. 3. 셀레니움 설치 터미널 창에서 "pip install Selenium"..
반응형

티스토리툴바