728x90 > 포트폴리오/nff19 [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (7) 참고할 글 [리액트] 암기할 것 = state / props / 컴포넌트 / UI (tistory.com) [리액트] 암기할 것 = state / props / 컴포넌트 / UIState 만드는 방법 useState('보관할 자료') State 만드는 방법 예시)let [a,b] = useState('남자 코트 추천');a = state 에 보관했던 자료, 변수처럼 사용. {a}b = state 변경 함수. - 함수기 때문에 소괄호랑 같이jamongsoda.tistory.com[리액트] 페이지 함수 - 매개변수와 인수, Array.from() (tistory.com) [리액트] 페이지 함수 - 매개변수와 인수, Array.from()해당 내용: Array.from()참고할 글[리액트] 페이지 함수 만들.. 2024. 9. 14. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (6) FingerPage.js 수정하기- 안에 콘텐트 내용 오른쪽 사진과 같이 수정해야 한다.1) 안에 콘텐트 내용들을 컴포넌트로 빼기.2) FingerPage.js 에 끼워넣기3) 페이지 함수 만들기 ( 화살표 누르면 앞으로 가기 뒤로 가기 ) - 나중으로 미룸js 파일에서 만들었던 html 코드를 리액트로 옮겨주기js 파일에서 만든 코드 제목 가격 제목 .. 2024. 9. 11. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (5) 계획:1. ShopPage.js 를 만들어서 모든 상품이 보이게 하기2. 각각의 카테고리별 서브페이지 컴포넌트 만들어서각 페이지 누를 때마다 그에 맞는 상품이 보이게 하기+ 추가한 계획:useParams 사용하기상품데이터들 안엔 id : 0 과 같은 영구번호 추가해줘서/:id 자리에 입력한 값과 영구번호가 같은 상품을 찾게끔 하기. 계획을 추가한 이유: 자료의 순서가 변경되면 상세페이지도 고장나는 문제가 생기기 때문.참고한 글리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 (tistory.com) 리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 jamongsoda.tistory.comApp.js 에 라우팅 해준 것import { useState } from "react.. 2024. 9. 7. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (4) 참고한 글 리액트 라우터 2 : navigate, nested routes, outlet (tistory.com) 리액트 라우터 2 : navigate, nested routes, outlet jamongsoda.tistory.com서브페이지 만들기1) 컴포넌트 모음 폴더 뿐만 아니라서브 페이지 모음 폴더 생성해주기src/│├── components/│ ├── Header.js│ ├── SearchOverlay.js│ ├── MainContent.js│ ├── Footer.js│ ├── LeftSidebar.js│ └── RightSidebar.js│├── App.js└── index.js이미 부위별로 컴포넌트를 작성함.src/├── components/│ ├── Header.j.. 2024. 9. 4. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (3) 전에 쓴 글과 연결[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (2) (tistory.com) [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (2)전에 쓴 글 과 연결[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1) (tistory.com) [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1)전에 쓴 글과 연결 [CSS] 리액트 적용 전 서브 페이지jamongsoda.tistory.com컴포넌트 구조화 수정src/│├── components/│ ├── Header.js│ ├── SearchOverlay.js│ ├── MainContent.js│ ├── Footer.js│ ├── LeftSidebar.js│ └── RightSid.. 2024. 9. 3. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (2) 전에 쓴 글 과 연결[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1) (tistory.com) [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1)전에 쓴 글과 연결 [CSS] 리액트 적용 전 서브 페이지 만들기 (1) (tistory.com) [CSS] 리액트 적용 전 서브 페이지 만들기 (1)메인 중앙 container 만 수정해줘서안에 아이템들을 채워줄 예정.- grid 사용해jamongsoda.tistory.com내가 참고한 글 리액트 라우터 2 : navigate, nested routes, outlet (tistory.com) 리액트 라우터 2 : navigate, nested routes, outlet jamongsoda.tistory.com 컴포넌트 구조화 하기.. 2024. 9. 3. [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1) 전에 쓴 글과 연결 [CSS] 리액트 적용 전 서브 페이지 만들기 (1) (tistory.com) [CSS] 리액트 적용 전 서브 페이지 만들기 (1)메인 중앙 container 만 수정해줘서안에 아이템들을 채워줄 예정.- grid 사용해주기- hover 시 효과1차 HTML 만들어주기HTML 우선 이렇게 html 을 짜줬다. 3개씩 3줄을 만들어줄 예정이므로flex 보다는 gridjamongsoda.tistory.com리액트 SCSS@use "reset";@font-face { font-family: "Pretendard-Regular"; src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regu.. 2024. 8. 31. [SCSS/JS] nff 코드 완성 2024. 8. 31. [CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) 참고[Ajax] 맥도날드에다가 데이터 넣기 (tistory.com) [Ajax] 맥도날드에다가 데이터 넣기여기 칸칸이에 사진 띄울 예정.우선 html 최하단에 script 태그를 열어서console 창에 잘 실행되는 지 강의들었던 예시 갖고와서 확인.콘솔창에 잘 갖고와지는 거 확인되면 내 데이터 갖고올 준비하jamongsoda.tistory.com[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) (tistory.com) [CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover)hover 사용해서 마우스를 이미지에 올렸을 때가격하고 제목 띄우도록 만들기./* 정사각형 */.square-flex { display: flex; justify-content: center; al.. 2024. 8. 31. 이전 1 2 3 다음 728x90
