여리 Repository 여리 Repository

분류 전체보기

• 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..

  Read More
• 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..

  Read More
• 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..

  Read More
• CSS / placeholder 색상바꾸기

  Web dev/HTML&CSS 2022. 3. 13. 17:45

  input,textarea 의 placeholder 는 ::placeholder 로 선택하여 커스텀 할 수 있다. input::placeholder{ color:#000; } textarea::placeholder { color:#000; }

  Read More
• 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; }

  Read More
• React / 1개의 className에 class 2개 적용하기

  Web dev/React 2022. 3. 8. 10:31

  리엑트에서 스타일링 할 땐 방법이 여러가지 있다. 나는 스타일라이브러리보다 css모듈로 관리하는게 더 편한것 같다. 스타일링중 common.module.css 랑 footer.module.css 를 나눴는데 한개의 className에 두 모듈의 클래스를 넣어야 했다. 이런식으로 배열에 두 클래스를 담고 join 매서드로 합쳐주면 된다.

  Read More
• React / react-router-dom v5 와 v6 라우팅 설정

  Web dev/React 2022. 3. 3. 20:19

  react-router-dom v6로 2021년 11월쯤 바뀐 것 같다. 버전 업데이트가 되면서 약간씩 변화가 생겼다. v6로 connetedrouter 를 사용했었는데 아직 호환이 안되는듯 싶어 v5로 다운그레이드하여 했다. v5 다운 그레이드 npm i react-router-dom@5.2.0 1. 라우팅 설정 switch 와 routes , component 와 element v5 방식 import { BrowserRouter, Route, Switch } from "react-router-dom"; import Home from "./pages/Home"; import Write from "./pages/Write"; function App() { return ( } /> } /> Page Not..

  Read More
• React / useRef로 checkbox trigger 하기

  Web dev/React 2022. 3. 2. 11:18

  포트폴리오 제작중이다. 디자인도 직접했다 .. 옷도 잘 못입는데 디자인은 더어렵다.. 지금은 로그인/로그아웃 기능을 만들고 있는데 망할 리덕스사가가 동작을 안한다 ㅠㅠ 빨리 취업하고싶다..ㅠㅠ 늦은 나이 무슨 부귀영화를 누리겠다고 직업을 바꾸려할까.. 무튼 aisde 의 gnb에서 메뉴를 누르면 해당 섹션으로 스크롤값이 변하며 이동하려 한다. useRef 훅 쓰는법도 간단했다. 하지만 나에게 온시련은 gnb메뉴를 클릭하여 해당 섹션으로 가고 aside도 잘 닫히는데 저 햄버거놈이 가만히 있는것이다.. 그래서 생각한게 저걸 트리거해보자! 트리거란 저 햄버거놈을 클릭하지 않았지만 클릭한 효과를 주는것이다. 사이드바가 움직이는 원리는 css클래스를 하나 만들어 줬다뺐다 하는것이다. 제이쿼리에서는 addClas..

  Read More