✨ 느낀 점 👍 알게 된 점 window.confirm코드를 이용해 웹페이지 확인창 띄우기 위의 코드는 다른 곳에 함수를 작성하고 함수를 호출하는 형식으로 작성했는데, 바로 함수를 작성해도 상관없다. 바로 함수를 작성하는 방법은 아래와 같다. const Fn = () => { if(window.confirm('메시지')) { () => {...}// 확인을 누를경우 실행할 함수 } else{ () => {...}// 취소를 누를경우 실행할 함수 }} 탭 닫기 전 확인창 띄우기 protect버튼에는 onClick으로 enablePrevent함수를 호출하도록 한다. enablePrevent함수는 이벤트 함수로 탭을 닫기 전(beforeunload)에 listener함수를 실행한다. listener함수는 ev..

✨ 느낀 점 👍 알게 된 점 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..

✨ 느낀 점 👍 알게 된 점 버튼을 클릭하면 내용이 바뀐다. 버튼을 클릭하면 changeItem함수가 실행된다. 나는 changeItem을 setCurrentIndex함수로 정의했으므로 content.map함수로 인해 생성된 index값을 currentIndex에 넣는다. useState함수가 실행됨으로써 리 렌더링이 진행되어, return 해주는 currentItem의 값이 변경된다. allTabs [0] -> allTabs [1]으로 바뀐다. 그래서 태그에 currentItem의 content이 바뀌게 됨으로써, 결과적으로 화면에 내용이 바뀌게 나타난다. 배열 안에 객체로 데이터 받기 이용할 데이터는 다음과 같이 정의해 사용한다. const data = [{id:1, content:'i am supe..

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값을 넘겨주지 않게된다. 결과적으..

✨ 느낀 점 👍 알게 된 점 영화API 크롤링하기 const getMovies = async() => { const json = await ( await fetch( `url주소` ) ).json(); } 위의 코드로 url주소에 있는 데이터를 json이라는 변수에 넣었다. json을 콘솔창에 띄우면 data안에 내가 찾고자 하는 movies 가 있다. 찾는 방법은 다음과 같다. const [movies, setMovies] = useState([]); . . . . setMovies(json.data.movies); json에서 data키값안에 movies키값을 전부 movies에 넣게 되었다. map함수로 빼낸 데이터 중, 값이 있는것만 선별하기 내가 찾는 genres의 데이터가 없으면 에러가 뜨는 ..