무야홍 ~

폰트 적용 아래 링크에서 원하는 폰트를 찾아 우측 태그를 찾아 index.html 의 head 영역 내부에 넣어준다. https://fonts.google.com/specimen/Do+Hyeon?subset=korean&noto.script=Kore 해당 코드를 폰트가 적용되었으면 하는 부분에 넣어준다. 부트스트랩으로 가져온 버튼의 폰트 변경 폰트를 다운로드해서 적용하는 경우, 버튼에 인라인 형태로 적어주면 된다. (카멜 케이스) <Button style=>테스트 시작하기</Button>

지역별 현재 날씨 정보를 불러오는 과정에서 사용하는 효과이다. 데이터를 불러오는 과정에서 API 가 호출되는 사이에 약간의 딜레이가 존재한다. 이 UI 적인 부분을 Loading-Spinner 를 추가하여 사용자에게 약간의 인내하는 시간을 기대할 수 있을것 같다. Reference https://www.npmjs.com/package/react-spinners npm install --save react-spinners 설치가 완료 되면, 아래 Usage - Example 부분을 참고하여 내 코드에 넣어주면 된다. import ClipLoader from "react-spinners/ClipLoa...

로직 다음과 같이 버튼 WeatherButton 을 클릭하게 되면, 해당 지역에 따른 날씨 정보가 WeatherBox 에 출력되는 로직을 구현하려 한다. 먼저 버튼에 onClick 이벤트를 부여하여 함수 내부에 이벤트를 정의해주었고, 변화하는 값을 제어하기 위해 useState Hooks 를 생성해주었다. 문제 발생 문제는 url 을 통해 받은 데이터를 WeatherBox 에 전달해 주어야 하는데, 리액트는 단방향 통신이기때문에 데이터를 부모 컴포넌트인 WeatherBox 에 보내줄 수가 없었다. 리액트는 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달 할 수 있다. 이를 통해 데이터 흐름...