Web dev
-
React / useState 로 count 만들기Web dev/React 2022. 3. 20. 13:31
상품상세 페이지 만드는 도중 수량체크하는걸 만들어보았다. useState 사용예제로 흔한 카운트버튼을 만들어 보았다. 이제 장바구니 찜하기 구매하기까지 공부해 봐야겠다. 수량체크여서 0이 되지 않게끔 조건을 걸어주었다. import React, { useState } from 'react'; import detail from '../assets/css/sub/product.module.css'; export default function ItemDetailPage() { const [number, setNumber] = useState(1); const increase = () => { setNumber(number + 1); } const decrease = () => { if(number > 1 ){..
-
React / useParams Hook으로 파라미터 받아 데이터 뿌려주기Web dev/React 2022. 3. 18. 21:52
상품리스트 페이지를 구현하려고 한다. 카테고리별로 뿌려주는 데이터가 다르기 때문에 URL의 파라미터를 받아 뿌려줘야 했다. 자바스크립트 경우 location.search 로 url값을 받아와 정규표현식으로 다듬어 사용해야해서 코드가 길어지고 정규표현식때문에 어려웠당. 하지만 React는 react-router-dom의 useParams Hook으로 간편하게 값을 받아올 수 있었다. 1. 라우터 설정해주기 // app.js 2. 링크에 파라미터 전달해주기 나는 헤더에서 제품을 누르면 인덱스로 전체보기를 하려고 all이라고 붙혀주었다. //HeaderTop.jsx 제품 3.useParams로 값 받아오기 //SubItemList.jsx // 라우트설정에 :category로 해줬으니 변수명도 같은걸로 설정해줘..
-
React 아이템리스트 카테고리 분류하기 map() filter()Web dev/React 2022. 3. 17. 22:53
이전에 aixos 로 데이터를 받아와 아이템리스트를 만드는데 성공했다. 아이템을 클릭하면 파라미터를 받아 상세페이지로 이동하거나 카테고리별로 아이템리스트를 필터하려고 한다. 필터함수로 카테고리를 분류해보았다. category 를 0,1,2 이런식으로 분류하려다 그냥 스트링으로 해보았다. 카테고리가 베스트인 아이템만 골라 뿌려줬다. import React, { useEffect, useState } from 'react' import { Swiper, SwiperSlide } from "swiper/react"; import axios from "axios"; import { Pagination } from "swiper"; import css from '../../assets/css/main/mainsl..
-
React axios swiper 데이터뿌리기Web dev/React 2022. 3. 16. 12:21
앞서 React 와 express 를 연결시킨 뒤 axios로 api 데이터를 받아와 콘솔로 찍어보았다. 그리고 받아온 데이터를 swiper 로 렌더링 시켜보았다. 1. useEffect 로 로드되었을때 데이터를 받아와 useState 값에 넣어준다. const [item, setItem] = useState([]); useEffect(() => { const callApi = async () => { await axios.get("/api") .then((res) => { setItem(res.data.product) }); }; callApi(); }, []); setItem 에 데이터를 넣어준뒤 item에 데이터가 잘들어갔나 콘솔을 찍었는데 자꾸 안들어 가서 한참 버벅였다.. 콘솔도 찍어보고 ret..
-
React / react , express 연결하기Web dev/React 2022. 3. 15. 11:09
아직 프론트엔드에 익숙하지 않다.. React , express 를 둘다 실행하고 데이터를 불러오는 것을 공부해봤다. 1. 작업할 디렉토리를 생성하고 프론트에서 쓸 리엑트를 생성해준다. $ mkdir my-app $ cd my-app $ npx create-react-app client client 에서 리엑트 실행해서 잘켜지나 확인 $ cd client $ npm run start 2 다시 루트로 와서 express를 설치해준다. Express > node.js 프레임워크 nodemon > 코드 수정시 서버를 껐다켰다 안해도 되는 모듈 cocurrently > 리엑트, 익스프레스 스타트 명령어를 동시에 시켜줄 모듈 npm install express nodemon concurrently 3. clien..
-
CSS / 텍스트 줄임 ...처리Web dev/HTML&CSS 2022. 3. 13. 17:27
퍼블을 하다보면 자주 쓰게 되는 ...처리 ...처리는 한줄..과 여러줄..하는법이 약간 다르다. /*한줄 자르기*/ .text{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ..표시는 블럭속성이여야 한다 */ /*여러줄 자르기*/ .text{ white-space: normal; line-height: 1.2; height: 3.6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }