Ann's log

React Hooks에 대해 공부하면서 간단히 정리해 봄. 공식 문서를 참고하였다. https://ko.reactjs.org/docs/hooks-reference.html Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 기본 Hooks useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환 → 컴포넌트의 state(상태)를 동적으로 관리 setState함수는 state를 갱신할 때 사용함 useEffect useEffect(function, deps); useEffect에 전달된 함수는 화면에..

최근에 npm-check-updates를 사용하면서 이전에 만들어 둔 프로젝트의 React 버전을 업데이트 하였다. 그런데 프로젝트를 수정하기 위해 실행시켜 보면 콘솔창에 다음과 같은 경고가 나타났다. 경고의 내용은 ReactDOM.render는 React 18에서 더이상 지원되지 않기 때문에 createRoot을 대신 사용하라는 것이었다. 그리고 변경하기 전까지는 계속 React 17 환경에서 프로젝트가 실행된다고 한다. 해결 방법은 공식 문서에서 볼 수 있었다! https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html How to Upgrade to React 18 – React Blog As we shared in the release pos..

이전에 만든 리액트 프로젝트의 모바일 화면을 수정하기 위해 touch 이벤트를 다루는 방법을 찾아 보게 되었다. 명칭이 touch carousel이 맞는지는 정확히 모르겠지만,,😅 내가 만들고자 한 화면은 넷플릭스 모바일 앱 화면과 비슷하다. 화면 터치가 되고 있는 슬라이드만 움직이고, 슬라이드의 양 끝에 도달하면 더이상 슬라이드 되지 않는다. touch 이벤트 사용하기 // 모바일 화면일때 touchX 값 관리 const [ touchX, setTouchX ] = useState(0); // 화면 터치가 시작되면 X값을 설정함 function onTouchStart(e) { setTouchX(e.changedTouches[0].pageX); } // 화면 터치가 완료되면 해당 ul의 left값만 변경..

React 프로젝트의 검색 기능에 보완 해야할 부분이 있다는 것을 알게 되었다. 검색 후 페이지 새로고침을 하거나, 검색 결과 상세 페이지 이동 후 다시 검색 페이지로 돌아오면 검색 결과가 사라져 있다.. 그렇게 큰 문제는 아니지만, 한번 인식하니까 계속 신경이 쓰여서 이 부분에 대해 공부도 할겸 해결 방법을 찾아 보게 되었다. 방법을 찾던 중에 sessionStorage에 대해 알게 되었고 문제를 해결할 수 있었다! 🥳🥳 이 글에서 정리하는 내용: 1. web storage object? 2. sessionStorage와 localStorage의 차이점 3. React에서 sessionStorage 사용하기 web storage object? Web storage, sometimes known as D..

이 글에서 정리하는 내용: 1. npm-check-updates의 역할 2. 설치 방법 3. 사용 방법 npm-check-updates의 역할 npm-check-updates 패키지는 내 프로젝트의 package.json dependencies를 최신 버전으로 업그레이드 해준다. 내가 일일이 확인할 필요 없이 한꺼번에 업데이트를 도와주니까 편리한 것 같다. https://github.com/raineorshine/npm-check-updates GitHub - raineorshine/npm-check-updates: Find newer versions of package dependencies than what your package.json allows Find newer versions of pack..

😱 문제 GitHub Pages로 배포한 React 페이지에서 새로고침을 하면 404 에러가 뜬다는 것을 발견했다. Homepage에서는 새로고침해도 아무런 문제가 없는데, 서브 디렉토리로 이동하고 새로고침을 하면 문제가 발생한다.. 이유를 찾아보니 깃허브 페이지는 SPA(Single Page Applications)를 인식하지 못하는 문제가 있다고 한다! SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 index.html 파일만 사용하기 때문에, Github Pages로 배포를 하게 되면 homepage url 하나만 인식하게 된다. 그래서 hompage url 뒤에 경로가 더 붙으면 그 경로에서 해당 페이지의 파일을 찾으려 하기 때문에 에러가 발생하게 된다. 😄 해결 방법 구글에 검색해..

다양한 API를 활용하는 프로젝트를 만들기 전에 먼저 Naver API를 사용 방법을 연습해 보려고 한다. 검색한 지역의 맛집 리스트를 보여주는 기능을 만들어 보기 위해 Naver 검색 API를 활용하였다. 이 글에서 정리하는 내용: Naver API 사용 신청하기 React 프로젝트에서 Naver API 사용하기 Naver API 사용 신청하기 1. Naver Developers 홈페이지로 들어간다. https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 deve..

React 프로젝트는 Github Pages로 배포할 때 추가적으로 해줘야 하는 것들이 있어서 그 과정을 기록해 두려고 한다. (내가 만든 React 프로젝트는 Create React App과 React Router를 사용하였다.) 이 글에서 정리하는 내용: 1. React 프로젝트 배포하기 전에 해야할 것 2. React 프로젝트 build 하고 배포하기 2-1) gh-pages 패키지를 사용하지 않는 방법 2-2) gh-pages 패키지를 사용하는 방법 3. 배포 확인하기 1. React 프로젝트 배포하기 전에 해야할 것 ① 배포하고자 하는 프로젝트 repository가 public으로 되어 있는지 확인 한다. ② 리액트 프로젝트 폴더 안의 package.json 파일에 다음을 추가 해줘야 한다. "..