Small Grey Outline Pointer 'Dev.' 카테고리의 글 목록 (5 Page)
본문 바로가기

Dev.218

Mac 에서 git 설치하기 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh homebrew 에 들어가서 해당 명령어를 복사 한다 command + 스페이스바 => 터미널 검색 터미널창에서 아까 복사해 놓은 명령어를 붙여넣기 하여 홈브류 설치를 시작 한다 중간에 패스워드 입력하라고 나오는데 맥북 로그인 시 사용하는 패스워드 입력하고 엔터 누르면 된다 계속 기다리다가 설치가 완료 되면 이런 화면이 뜬다 설치한 homebrew 의 버전이 궁금하다면 명령어로 버전 확인이 가능하다 brew --version git 설치하기 brew install git git config --global user.name "깃허브 유저네임" git con.. 2022. 11. 4.
Redux :: useDispatch / useSelector https://nnuoyos.tistory.com/302 저번 포스팅에 이어서 react redux 공식 문서에 나와있는 대로 사용해준다 dispatch 함수의 액션은 객체 형태로 되어 있다 dispatch({type: , payload: }) 반드시 타입이라는 key가 있어야 하고 액션 안에는 payload 가 있는데 이건 옵션처럼 사용할 수 있다 useDispatch를 통해 액션을 던져준 것이다 App.js import { useState } from 'react'; import './App.css'; import { useDispatch } from 'react-redux'; function App() { const [counter, setCounter] = useState(0); const dis.. 2022. 10. 5.
Redux 지난번에 제작하고 있던 쇼핑몰 페이지를 예를 들어 app.js 에서 props로 authenticate를 계속 사용해왔다 자식 컴포넌트끼리의 props가 오고가지 않기 때문에 장바구니 컴포넌트를 만든다고 하면, 자식 컴포넌트끼리 공유가 안되기 때문에 App.js 에 카트라는 스테이트를 생성해놓고 각각의 컴포넌트에 props로 던져주는 형식이 되어야 한다 리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로 state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다 리덕스는 일종의 저장소 라고 생각하면 된다 store라는 저장고를 만들어서 state를 저장해놓고 각각의 컴포넌트들이 필요에 의해 요청할 때 마다 컴포넌트가 부모이나 자식이나 상관없이 값을 store에서 가져올 수 있.. 2022. 9. 30.
React :: 배포하기 https://my-json-server.typicode.com/ My JSON Server - Fake online REST server for teams my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" } my-json-server.typicode.com url 값을 수정해준다 나머지 컴포넌트에도 url 을 바꿔준다 괄호는 지워줌! 깃에 푸시 한 후 넷리파이에서 깃허브 연결 후 배포한다 빌드 할 때 앞에 CI=false 를 붙여준다 넷리파이 배포 오류 해결 하기 중간에 꼬여서 배포했던 사이트 삭제하고 새로 업로드 했는데 계속 꼬이는 중 사이트 배포는 됐는데, db.json에 담아놓은 이미지들이 보이지 않고 있다 2022. 9. 20.
React :: shopping site 만들기 05 검색 기능 만들기 const search = () => { console.log("on key press 확인",search) } 글자를 입력할 때 마다 계속 온키프레스가 실행 된다 하지만 엔터를 눌렀을 때만 작동하도록 수정하고 싶다 const search = (event) => { if (event.key === "Enter"){ console.log("on key press 확인",search) } } 이제 엔터가 눌러졌을 때만 실행이 된다 input 안의 검색어 내용을 불러오고 싶을 때는 event.target.value 을 사용한다 (이벤트 안에 값이 있기 때문에) const search = (event) => { if (event.key === "Enter"){ let keyword = even.. 2022. 9. 20.
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.