본문 바로가기

Web Study124

노마드코더 python 웹 스크래퍼 만들기 - 1 https://replit.com/ Replit: the collaborative browser based IDE Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com 위의 온라인 에디터에서 강의는 진행되지만 나는 역시 VSCode 가 편한 것 같다. Python, Python extended, Python Type Hint 확장 프로그램을 깔아주었다. 실행해줄 땐 파이썬 터미널로 실행을 해주었다. 앞 내용은 기본적인 내용이라.. 가볍게 지나갔다. 기본적으로 파이썬 확장자는 .py 이다. 한줄 주석은 # 으로 처.. 2023. 6. 14.
노마드코더 React Hooks - 2 useEffect 를 활용한 커스텀 훅들 useEffect 란? componentWillMount, componentDidMount, componentWillUpdate 의 클래스 컴포넌트의 생명주기 함수의 기능을 함수형 컴포넌트로 수행 useEffect(function, array); 첫번째 매개변수는 useEffect 이 실행될 때마다 실행될 콜백함수를 넣어준다. 두번째 매개변수는 의존성 배열 (deps) 로 해당 배열에 지정해준 그 값이 변경될 때마다 useEffect 를 실행시킬 수 있게 지정할 수 있다. 이미 알고 있는거지만 복습 겸 기초를 다진다 생각하고 다시 정리한다. useEffect(콜백함수, []); // Mount 됐을 때 1번 실행 useEffect(콜백함수); // Mount와 U.. 2023. 6. 13.
노마드코더 React Hooks - 1 강의를 들으며 만들게 될 Hooks Hooks Description useTitle 리액트 document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput input 역할 usePageLeave 유저가 페이지를 벗어나는 시점을 발견하고 함수를 실행시킬 수 있는 훅 useClick 요소를 클릭하는 시점을 감지 useFadeIn 어떤 요소든 애니메이션을 요소 안으로 서서히 사라지게 만들어줌 useFullScreen 요소를 풀스크린으로 만들거나 일반 화면으로 돌아가게 함 useHover 어떤 요소가 hover 될 때를 감지 useNetwork 온라인 또는 오프라인 상태인지 감지 useNotification notification API를 사용할 때 유저에게 알림을 보내줌 useScroll .. 2023. 6. 11.
노마드코더 JS로 그림 앱 만들기 - 마지막 Meme Maker 구현하기 파일을 선택하는 인풋은 type 을 file 로, 여기선 영상은 필요하지 않으므로 accept 속성에 image/* 를 설정하여 이미지 포맷만 가능하게 지정한다. // 파일 받기 function onFileChange(evt) { console.dir(evt.target); } fileInput.addEventListener('change', onFileChange); 파일을 선택하고 콘솔을 확인하면, target의 files 에 내가 넣어준 이미지가 존재함을 볼 수 있다. 이 파일은 이제 브라우저의 메모리에 존재하게 되고 브라우저의 url 을 받아오면 해당 이미지를 볼 수 있게 된다. // 파일 받기 function onFileChange(evt) { const file =.. 2023. 6. 10.

티스토리툴바