Small Grey Outline Pointer soyoung-
본문 바로가기
React :: shopping site 만들기 04 상세 페이지 만들기 import React, {useEffect} from 'react' const ProductDetail = () => { const getProductDetail = () => { } useEffect(()=>{ getProductDetail() },[]) return ( ) } export default ProductDetail 디테일 페이지 url 끝에 오는 id 값을 추출하기 위해 usePrams 를 사용한다 let url = (`http://localhost:5000/products/${id}`) ProductDetail.js import React, {useEffect} from 'react' import { useParams } from 'react-router-dom' .. 2022. 9. 19.
React :: shopping site 만들기 03 로그인 창 만들기 Navbar.js import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faUser } from '@fortawesome/free-regular-svg-icons'; import {faSearch} from '@fortawesome/free-solid-svg-icons'; import { useNavigate } from 'react-router-dom'; const Navbar = () => { /* 코드의 재생산, 유지보수를 위해 메뉴의 배열을 만들어준다 */ const menuList = ['여성','Divided','남성','신생아/유아','아동','H&.. 2022. 9. 16.
React :: shopping site 만들기 02 https://nnuoyos.tistory.com/292 React :: shopping site 만들기 01 /폰트어썸 리액트 https://fontawesome.com/v5/docs/web/use-with/react React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 폰트어썸 리액트 용 App.js.. nnuoyos.tistory.com 지난 포스팅에 이어서 계속!😊 쇼핑몰 api 를 직접 만들어 본다 클라이언트와 서버 통신 하기 json server npm 사용하기 npm install -g json-server 명령어 json-server.. 2022. 9. 15.
React :: shopping site 만들기 01 /폰트어썸 리액트 https://fontawesome.com/v5/docs/web/use-with/react React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 폰트어썸 리액트 용 App.js import './App.css'; import { Routes, Route } from "react-router-dom"; import ProductAll from './page/ProductAll'; import Login from './page/Login'; import ProductDetail from './page/ProductDetail'; import Navba.. 2022. 9. 15.
React :: Router / Restful Route 페이지를 여러개 만들어주기 App.js import './App.css'; import Aboutpage from './page/Aboutpage'; import Homepage from './page/Homepage'; function App() { return ( ); } export default App; https://reactrouter.com/en/main/getting-started/installation Installation Installation This document describes the most common ways people use React Router with various tools in the React Ecosystem. Basic Installation Most .. 2022. 9. 5.
React :: 날씨 앱 만들기 https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 날씨 api 가져오기 회원 가입 후 사용한다 로직 //1. 앱이 실행 되자 마자 현재 위치 기반의 날씨가 보인다 //2. 지금 현재 도시와 온.. 2022. 8. 29.
카카오맵 api 사용하기 https://apis.map.kakao.com/web/guide/ 카카오맵 사이트에 들어가서 가이드 보면서 따라한다 넷리파이에 배포한 도메인과 뭐가 될 지 몰라서 로컬도메인 전부 다 등록했다 지도 영역 html에 추가 자바스크립트 api 지도 띄우는 코드 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options).. 2022. 8. 27.
React :: 라이프 사이클 class 컴포넌트의 라이프 스타일 constructor(생성자) 제일 먼저 실행되는 함수 getDerivedStateFromProps state 와 props를 동기화 시켜주는 함수 render UI를 그려주는 함수 componentDidMount 마지막으로 호출 되는 함수, UI 셋팅이 끝나면 알려준다 mounting import React, { Component } from 'react'; import BoxClass from './component/BoxClass'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counte.. 2022. 8. 24.
React :: 클래스 컴포넌트 클래스 컴포넌트 단축키 rcc AppClass.js import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } App.js import React, { Component } from 'react'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counter2: 0, num: 1, value: 0, }; } increase = () => { //전달할 객체 안에 thi.. 2022. 8. 22.
React :: 가위바위보 게임 만들기 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 4번의 결과를 가지고 승패를 따진다 6. 5번의 결과에 따라 박스 테두리 컬러가 바뀐다 (이기면 그린, 지면 레드, 비기면 블랙) App.js import './App.css'; import Box from './component/Box'; /* 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 .. 2022. 8. 17.

티스토리툴바