[공부] 노마드 코더 파이썬 웹 스크래핑 2회차
2022. 2. 16. 00:32
공부/프론트엔드
✨ 느낀점 👍 알게 된 점 BeautifulSoup의 .string은 해당 태그의 문자를 추출한다. def extract_indeed_pages(): result = requests.get(URL) soup = BeautifulSoup(result.text, "html.parser") pagination = soup.find("ul", {"class": "pagination-list"}) links = pagination("a") pages = [] for link in links[:-1]: pages.append(int(link.find("span").string)) max_page = pages[-1] return max_page 즉, 숫자 1,2,3,4,5를 pages의 배열의 원소로 추가한다. 각..
[1人 프로젝트] 트위터 클론코딩 2회차
2022. 1. 20. 23:53
프로 젝트/트위터
🎉 성과 완성한 부분 소셜 로그인 기능 구현 완료 google, github, 회원가입 등 3가지 방법으로 로그인 구현 완료 useNavigate()를 활용하여 로그아웃 시 Home페이지로 리다이렉트 firebase 8 버전 이하는 Redirect를 사용했지만, 9 버전부터는 useNavigate()를 이용한다. ✨ 느낀 점 👍 알게 된 점 로그인 상태 유지하기 로그인을 하면 Home페이지로 가게 코드를 구현했는데 정상 작동하지 않았다. 그 이유는 firebase가 로딩되기 전에 코드가 실행되어서 이다. 따라서 firebase가 전부 로딩된 다음에 코드를 실행시켜주는 코드를 작성해야 한다. firebase에서 지원하는 onAuthStateChaged() 코드를 사용하면 된다. import {onAuthS..
[공부] 노마드 코더 React hooks 3회차(useTitle, useClick)
2022. 1. 19. 23:27
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 querySelector를 사용해 html의 title을 가져와 title을 5초 후에 바뀌게 만들었다. const htmlTitle = document.querySelector("title"); 가져온 title을 htmlTitle이라는 변수에 넣고, 변수에 setTimeout을 활용해 내가 원하는 글자를 입력하면 제목을 바꿀 수 있다. useRef()를 활용해 클릭 이벤트 넣기 const element = useRef(); useRef()의 값을 받은 element는 바닐라JS에서 사용되는 querySelector나 getElementById 처럼 활용할 수있다. 활용하는 방법은 element.current로 쓰면 된다. element.current.addEventList..
[공부] 노마드 코더 React hooks 2회차(useTab)
2022. 1. 18. 23:13
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 버튼을 클릭하면 내용이 바뀐다. 버튼을 클릭하면 changeItem함수가 실행된다. 나는 changeItem을 setCurrentIndex함수로 정의했으므로 content.map함수로 인해 생성된 index값을 currentIndex에 넣는다. useState함수가 실행됨으로써 리 렌더링이 진행되어, return 해주는 currentItem의 값이 변경된다. allTabs [0] -> allTabs [1]으로 바뀐다. 그래서 태그에 currentItem의 content이 바뀌게 됨으로써, 결과적으로 화면에 내용이 바뀌게 나타난다. 배열 안에 객체로 데이터 받기 이용할 데이터는 다음과 같이 정의해 사용한다. const data = [{id:1, content:'i am supe..
[공부] 노마드 코더 React hooks 1회차(useInput)
2022. 1. 17. 22:48
공부/프론트엔드
Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 이용해 트위터를 클론코딩하기 전에 hooks에 대해 사전학습이 필요하다는 얘기로 hooks를 공부하기 시작했다. ✨ 느낀점 👍 알게 된 점 특정 조건이 걸린 useInput만들기 const {value} = event.target;은 onChange될때 해당 이벤트가 발생한 태그의 value값을 받는겠다는 의미이다. 유효성 검사 함수를 통해 willUpdate의 값이 true냐 false로 바뀐다. willUpdate가 true일때는 setValue함수로 value값을 넘겨주어 input값이 입력이 되지만, willUpdate가 false가 되면 input에 value값을 넘겨주지 않게된다. 결과적으..