본문 바로가기

분류 전체보기321

노마드코더 React Hooks - 2 useEffect 를 활용한 커스텀 훅들 useEffect 란? componentWillMount, componentDidMount, componentWillUpdate 의 클래스 컴포넌트의 생명주기 함수의 기능을 함수형 컴포넌트로 수행 useEffect(function, array); 첫번째 매개변수는 useEffect 이 실행될 때마다 실행될 콜백함수를 넣어준다. 두번째 매개변수는 의존성 배열 (deps) 로 해당 배열에 지정해준 그 값이 변경될 때마다 useEffect 를 실행시킬 수 있게 지정할 수 있다. 이미 알고 있는거지만 복습 겸 기초를 다진다 생각하고 다시 정리한다. useEffect(콜백함수, []); // Mount 됐을 때 1번 실행 useEffect(콜백함수); // Mount와 U.. 2023. 6. 13.
Three.js 라이브러리 배워보기 https://threejs.org/ Three.js 는 웹 페이지에 3D 객체를 쉽게 렌더링할 수 있도록 도와주는 자바스크립트 3D 라이브러리 WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D프로그래밍 기술을 간단하게 사용할 수 있도록 해준다. 설치하기 npm 을 통해 설치 (CDN도 있긴 하지만 권장은 npm) https://threejs.org/docs/index.html#manual/en/introduction/Installation npm install three npm install -D vite vite 는 실행도구이다. vite 빠르고 간결한 개발 경험에 초점을 맞춘 번들러 Webpack 과 동일한 기능을 하지만 공식문서에서 Vite 를 권장하길래 사용해보았다. 기본적으로 ES .. 2023. 6. 12.
노마드코더 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.

티스토리툴바