Small Grey Outline Pointer 'TIL' 태그의 글 목록 (9 Page)
본문 바로가기

TIL196

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.
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.
python :: 얕은 복사(shallow copy) v1 = 'abc' v2 = 'abc' v1 == v2 #변수 v1과 v2가 참조하는 객체의 내용이 같은가? True v1 is v2 #변수 v1과 v2가 참조하는 객체는 동일한 객체인가? True True True v1=[1,2,3] v2=[3,2,1] print(v1 == v2) #리스트는 순서가 중요하다 따라서 false False r1=[1,2,3] r2=[1, 2, 3] print(r1 == r2) #True print(r1 is r2) #False True False 리스트나 딕셔너리처럼 값이 바뀔 수 있는 것들, mutable 객체는 동일한 내용의 객체를 갖고 있더라도 따로 객체를 만들어주게끔 되어있다 # %% r1 = ["enwoo",('man','KR'),[180,20]] r2 = lis.. 2022. 8. 2.
mySQL https://www.yalco.kr/lectures/sql/ MySQL 어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요! www.yalco.kr 원하는 조건의 row(행)만 걸러서 보기 WHERE 구문 뒤에 조건을 붙여 원하는 데이터만 가져올 수 있습니다. SELECT * FROM Orders WHERE EmployeeID = 3; 4. 원하는 순서로 데이터 가져오기 ORDER BY 구문을 사용해서 특정 컬럼을 기준으로 데이터를 정렬할 수 있습니다. ASC 오름차순 디폴트 DESC 내림차순 SELECT * FROM Customers ORDER BY ContactName; 5... 2022. 7. 27.

티스토리툴바