본문 바로가기

Project4

img Wish Korea 프로젝트 (Lush 클론 코딩) - 상세 페이지 https://github.com/wecode-bootcamp-korea/34-1st-Wish-Korea-frontend 위시 코리아 프로젝트는 러쉬 홈페이지를 React를 사용해서 클론 코딩했으며, 저는 상세 페이지를 맡아 구현했습니다. 상세 페이지는 백엔드에서 데이터를 받아옵니다. 리스트 페이지에서 path parameter로 주소가 넘어오면 useParams를 사용하여 상품 id를 받아오고 그 id로 데이터(상품)를 객체 형식으로 받아옵니다 객체에는 {상품 id, 상품명, 상품이미지, 옵션[ {옵션아이디, 상품크기, 상품가격, 재고, 옵션이미지} ] } 이런 형식으로 들어옵니다. 옵션이 한 개일 때와 여러 개일 때를 구분하여, 한 개일땐 바로 수량 칸을 나타냈고, 받는 데이터에서 바로 옵션에 수량 .. 2022. 7. 3.
img westagram project(인스타그램 클론 코딩) - 메인 화면 (2) 메인 컴포넌트 구성 이번에는 Feed.js 와 그 하위 컴포넌트인 Comment.js, CommentHeart.js, InputCommentLine.js 를 보겠습니다 ~! Feed.js import React from 'react'; import Comment from './Comment'; import Member from './Member'; import InputCommentLine from './InputCommentLine'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHeart, faComment, faPaperPlane, faBookmark, } from '@fortawesome/free-regu.. 2022. 7. 3.
img westagram project(인스타그램 클론 코딩) - 메인 화면 (1) Main.js 컴포넌트 구성 메인 화면 구성을 위해서 컴포넌트를 나눠보았습니다. 처음으로 컴포넌트를 여러 개를 사용했고, 시작 단계에서 제대로 나누지 않고 들어가서 컴포넌트를 나누는데에 어려움이 있었습니다. 어쨌든 결과적으로 나온 컴포넌트는 이렇습니다. Main.js import { React, useState, useEffect } from 'react'; import './Main.scss'; import Navbar from '../components/Navbar'; import Feed from '../components/Feed'; import Rightbar from '../components/Rightbar'; export default function Main() { const [comme.. 2022. 7. 3.
img westagram project(인스타그램 클론 코딩) - 로그인 안녕하세요. wecode 기간 중 개인 프로젝트로 인스타그램 클론 코딩을 하게 되었습니다 ~! 오늘은 로그인 부분을 보겠어요 import { React, useState } from 'react'; import './Login.scss'; import { useNavigate } from 'react-router-dom'; export default function Login() { const navigate = useNavigate(); const [inputId, setInputId] = useState(''); const [inputPw, setInputPw] = useState(''); const [btnState, setBtnState] = useState(true); const goToMain.. 2022. 6. 26.
반응형

티스토리툴바