728x90 > 포트폴리오/nff20 [CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (8) 참고할 글[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 (tistory.com) [리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용다른 js 파일에 있는 html을state에 보관해 놓고 html에 데이터 바인딩하기- export / importdata.js 에 있는 html 이 담긴 변수 data 를 App.js 로 옮기기export default 변수명; - 변수 1개 할 경우,export {변수1, 변jamongsoda.tistory.com해야할 것사진 9개 만들기. map 함수 쓰기1번째 방법) 미리 9개의 데이터를 정의 다른 js 파일에 있는 html을state에 보관해 놓고 html에 데이터 바인딩 하는 방법= 상단의 참고 .. 2024. 9. 16. [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. 이전 1 2 3 다음 728x90
