NextJS 기본세팅
NextJS 2021. 8. 25. 23:46

사이드 프로젝트를 위한 프레임워크 및 필요 라이브러리 설치 과정입니다. 기존에는 react/ts + redux saga + node.js를 사용하여 작업을 했지만 사이드 프로젝트에서 새로운것들을 공부해보기 위해 해보지 않았던 프레임워크와 라이브러리를 이용해보기로 했습니다. 1. Nextjs 2. Recoil 3. TypeScript 4. styled component 5. antd 6. jest 7. firebase 처음 사용해보는것들은 nextjs, recoil, jest, firebase입니다. 전부다 사용해볼수 있을지 둑은둑은....... next js는 서버사이드 렌더링이.... 어쩌고는 여기저기 많으니 해당 프레임워크,라이브러리 세팅 과정만 정리합니다. 1. npx create-next-app ..

useRef , input 컨트롤, 커서 위치 이동 with antd
ReactJS 2021. 8. 10. 21:08

React에서는 useRef를 이용해 특정 DOM을 선택할 수 있습니다. useRef에 대해서는.... 검색하면 많은 자료가 나오니 패스합니다. input에 기본 값을 주고 포커스 되었을 때 커서를 가장 뒤로 보내주기 위해 useRef를 사용하였고, 그 과정을 소개하고자 합니다. 먼저 antd의 input 태그를 사용하였으며, focus 안에 있는 cursor 객체는 antd에서만 되는듯 했다. 일반 input태그에서는 확인해보지 못했습니다.. 만약 일반 input에서 저게 안된다면 useRef.current로 console.log 찍어 보시면 해당 input의 value를 받아 올 수 있습니 다. 그 value의 length값을 가지고 useRef.current 안에 있는 selectionStart ,..