리액트13 [React] API로 날씨 앱 만들기 1(OpenWeather API 사용) 오늘은 API를 사용하여 날씨 앱을 만들어 보자. 최종 결과물은 아래와 비슷한 구성이 될 것이다. https://velog.io/@gyultang/React%EB%A1%9C-%EB%82%A0%EC%94%A8%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0OpenWeather-API React로 날씨앱 만들기(OpenWeather API) 앱이 실행되자마자 유저는 현재 위치의 날씨를 볼 수 있다. (지역, 온도, 날씨 상태)유저는 다른 도시의 버튼을 볼 수 있다. (현재 도시, 4개 도시)유저는 다른 도시 버튼을 클릭하면 해당 도시의 velog.io (내가 만들고 싶은 날씨 앱과 가장 유사해 보여서 참고하게 되었다.) 날씨 앱의 특징 앱이 실행되면 유저 현재 위치의 날씨가 보인다. 날씨 .. 2023. 2. 13. [React] React로 가위 바위 보 게임 만들기 3 https://conquer-it.tistory.com/192 [React] React로 가위 바위 보 게임 만들기 2 https://conquer-it.tistory.com/191 React로 가위 바위 보 게임 만들기 1 우선, 버튼을 클릭했을 때 유저 박스의 사진이 바뀌는 것까지는 구현이 되었다. 다음 할 일은 컴퓨터 박스를 구현 하는 것이다. 3. 컴 conquer-it.tistory.com React로 가위 바위 보 게임 만들기 2 현재 미완성된 기능은 아래와 같다. 게임 결과를 통해 누가 이겼는지 승패를 결정한다. 승패 결과에 따라 박스 테두리의 색이 바뀐다.(ex. 승: 초록, 패: 빨강, 무: 검정) 이긴 횟수, 비긴 횟수, 진 횟수를 UI에 보여준다. 리셋 버튼을 누르면 UI에 보여줬던 .. 2023. 2. 10. [React] React로 가위 바위 보 게임 만들기 2 https://conquer-it.tistory.com/191 React로 가위 바위 보 게임 만들기 1 우선, 버튼을 클릭했을 때 유저 박스의 사진이 바뀌는 것까지는 구현이 되었다. 다음 할 일은 컴퓨터 박스를 구현 하는 것이다. 3. 컴퓨터가 랜덤한 아이템 선택하기 우선 1판할때마다 UI가 바껴야하기 때문에 state를 사용해야 한다. 또한 유저가 랜덤한 버튼을 클릭할 때 컴퓨터가 랜덤한 아이템을 출력시켜야 하기때문에 play함수 안에서 실행시켜야 한다. 우선 완성된 코드부터 살펴보자. App.js import { useState } from "react"; import "./App.css"; import Box from "./component/Box"; const choice={ rock:{ nam.. 2023. 2. 8. [React] React로 가위 바위 보 게임 만들기 1 React로 가위바위보 게임을 만들어 보자 게임 규칙 아래 가위 바위 보 버튼을 클릭하여 랜덤한 값을 내는 컴퓨터를 이기면 되는 것이다. 이 게임을 만들기 전 어떤 내용이 들어가야 하는지 알아보자. 박스 2개가 있어야 하며 그 안에는 컴퓨터와 유저를 구분해주는 텍스트와 사진, 결과가 있다. 그 아래에는 가위 바위 보 버튼이 위치한다. 버튼을 클릭하면 클릭한 값이 유저 박스에 보여진다. 컴퓨터는 랜덤하게 아이템 선택이 된다. 3번, 4번의 결과를 통해 누가 이겼는지 승패를 결정한다. 승패 결과에 따라 박스 테두리의 색이 바뀐다.(ex. 승: 초록, 패: 빨강, 무: 검정) 이긴 횟수, 비긴 횟수, 진 횟수를 UI에 보여준다. 리셋 버튼을 누르면 UI에 보여줬던 횟수가 0으로 초기화 된다. 1. 박스 2개와.. 2023. 2. 6. 이전 1 2 3 4 다음
