React

리엑트에서 화면 스크롤 이동이 가능하다. 1. scroll to top 함수 만들기 스크롤을 화면 가장 상단으로 올리는 부분은 scrollTo 를 사용하여 위치를 가장 상단인 0으로 지정한 뒤 이동시킬 수 있다. const scrollToTop = () -> { window.scrollTo({ top:0, behavior: 'smooth' }) }; behavior 옵션은 auto 와 smooth 로 설정 가능하며 auto는 바로 이동, smooth는 말 그대로 부드럽게 이동시킨다. 2. useRef 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 훅이다. useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태 값을 저장한다. 또한, 객체 내부에 있는 'current'..

같은 네트워크에 프론트단과 백단 서버를 같이 운영 중이라면 한번쯤은 만날 CORS관련 오류를 해결하는 방법을 정리해 보고자 한다. (우선 개발 서버에서만 가능하고, 배포 후에는 다른 방법을 써야하는 경우도 있다.) 프록시 설정을 위해 미들웨어를 사용하기도 하는데 오늘은 간단한 방법으로 package.json 을 수정하여 처리하는 방법을 소개해 보고자 한다. 1. Axios 란? node.js와 브라우저를 위한 Promise 기반 HTTP클라이언트이다. 리엑트에서는 GET, POST, PUT, DELETE 등의 메소드를 지원하기 때문에 쉽게 사용이 가능하다. 주로 백엔드 서버 단으로 API를 호출할 경우에 사용하며 config를 미리 지정해 놓고 인스턴스를 생성해 재사용성을 높일 수 있다. 2. CORS ..

todolist 앱 개발 멘토링 중 백엔드와 연결을 하는 와중에 axios로 RESTAPI 호출을 하며 정말 다양한 오류들을 만나고 있다. 그 중 가장 먼저 해결 해야 했던 부분이, 정말 간단하게 axios를 사용해서 값을 useState로 넣어주려 했는데, 비동기 통신으로 데이터를 받아와 버리니 웹이 뜨자마자 오류가 폭발했다. 자바스크립트는 비동기통신을 하기 때문에 요청을 보내고 기다리지 않는다. 그렇기 때문에 이를 동기화 하여 통신하게끔 처리해 주어야 하는데 그때 async, await이 사용된다. 동기 통신(Synchronous)은 요청을 완료 하길 기다렸다 결과값을 받아와서 사용할 수 있기 때문에 순차적으로 진행이 필요할때 사용하게 된다. axios 하지만 axios는 promise 기반 비동기통..

리엑트에서 Select 문을 사용하는 방법을 알아보자. 선택지1 선택지2 빌트인 브라우저 컴포넌트를 이용할 수 있다. 선택리스트는 옵션으로 추가가 가능하다. export default function Picker() { return ( 휴대폰 기종을 선택하세요 iOS Android ); } value 값으로 선택된 값을 전달 가능하다. onChange 함수를 적용해서 선택한 값을 업데이트 가능하다. export default function FruitPicker() { const [selectedFruit, setSelectedFruit] = useState('orange'); // useState를 사용해서 기본 값을 지정가능하다. return ( Pick a fruit: setSelectedFruit..