2차 프로젝트 회고록

ceres·2020년 3월 29일
0

프로젝트

목록 보기
1/3

(20/03/27)
2차 프로젝트가 끝난지 1주일이나 지났다. 이제는 정말 안쓰면 잊을 것 같아 회고록을 시작해본다.

1. 프로젝트소개

팀명: necktidal
내용: 타이달 사이트 클론
인원: 총 5명 (프런트3명, 백앤드2명)
기간: 2주 (2020/3/9-2020/3/20)
코드: https://github.com/wecode-bootcamp-korea/necktidal-frontend
영상: 현준님이 영상 찍으셨는데 언젠간 올려주시리라 믿는다.

2. 사용된 기술

  • Front-End : JavaScript, React, Hook, StyledComponent
  • Back-End :

3. 내가 맡은 역할/부분

  • homepage nav
  • homepage header
  • homepage content (api요청-get, map함수 사용)
  • play modal redux 연결

4. 정리

새로 배운 것

  • hook 사용 (자식에게 props전달, usestate, useeffect, usehistory 사용)
  • git rebase
  • styled component
  • config.js 사용. url 변수로 사용
  • redux..?

아쉬운 점

  • 자식에서 부모에게 props 전달하는 방법을 배우지 못했다.
  • redux를 사용하기는 했지만, 이해하지 못했다.
  • restructuring
  • 반응형 웹페이지 구현

잘한 점

  • 팀원끼리의 소통
    진짜 소통이 너무 잘됐다. 프런트, 백의 소통도 잘 되었고, 프런트 끼리의 소통도 잘 되었다. 너무 즐겁게 프로젝트를 해서 일을 하고 있다는 느낌도 들지 않았다. 진짜로 이런 팀을 만난건 행운이었다!!😍
  • 멘탈관리
    1차 프로젝트를 하면서 자신감이 붙었는지, 이번에는 멘탈관리가 그다지 힘들지 않았다. 단, 체력관리는.... 기업협업 때 체력을 길러보쟈.

5. 기록하고 싶은 코드

1) slide 구현

구성은 왼쪽, 오른쪽에 버튼이 있고, 버튼을 클릭하면 이미지를 담고 있는 FeaturedContainer 내부가 움직이는 형태이다.

const Featured = () => {
  //hook에서 setstate 하는 방법
  const [isClicked,setIsClicked] = useState(0);
  
 //오른쪽, 왼쪽 버튼을 클릭하면 실행되는 함수
 //state의 isClicked값이 바뀐다.
  const moveRight = () => {
    if(isClicked<=-3700) {
      return;
    } else {
      setIsClicked(isClicked - 300)
    }
  }

  const moveLeft = () => {
    if(isClicked===0) {
      return;
    } else {
    setIsClicked(isClicked + 300)
  }
}
//왼쪽, 오른쪽 버튼에 onClick함수를 걸어준다.
  return (
	 <LeftBtn>
     	<LeftSvg onClick={()=>moveLeft()}>
        </LeftSvg>
     </LeftBtn>
    <RightBtn>
        <RightSvg onClick={()=>moveRight()}>
        </RightSvg>
    </RightBtn>
//버튼을 눌렀은때 움직여야 하는 부분이 isClicked state값을 바라 볼 수 있도록 해준다.
    <FeaturedContainer >
          <DIV isMoved={isClicked}> 
           </DIV>
	</FeaturedContainer>     
  )
  
}

FeaturedContainer 가 움직일 수 있도록 css부분에서 props를 받아 state값에 따라 상태가 변화될 수 있도록 한다. (styledcomponent는 css도 컴포넌트화 하기 때문에, props를 받을 수 있다. )
이때 FeaturedContainer 자체가 움직이면 안되고, 이미지들을 감싸고 있는 div를 하나 더 만들어 주어, 그 div가 움직이게 해야한다.

const DIV = styled.div`
transform: translateX(${props=> props.isMoved}px);`;

2. api-get, map함수 (hook사용)

//먼저 usestate, useEffect 를 import 해와야한다.
import React, { useState, useEffect } from 'react'


const Featured = () => {
  //data가 들어올 곳을 먼저 setState로 지정해준다.
  const [data,setData] = useState([]);
  
  //useEffect는 componentDidMount, componentDidUpdate이다.
  //componentDidMount는 뒤에 []를 붙이면 되고, componentDidUpdate는 뒤에 업데이트 할 state 명을 써주면 된다. 아래는 componentDidMount로 뒤에 []를 붙여주었다. 
    useEffect(()=>{
    fetch(`${HURL}/music/album/top-rank?limit=16`,
    {method: "GET" 
})
    .then(res => res.json())
    .then(res => setData(res.featured_albums))
}, [])
  
  //map함수사용
 <DIV isMoved={isClicked}>
                {data.map(item => {
                      return ( 
                      <FeaturedBox 
                      id={item.id}
                      head={item.head}
                      img={item.thumbnail_url}
                      title={item.artist[0].name}
                      subtitle={item.name}
                      />   
                      )
                  })}
                  </DIV>  
  
} 

자식 컴포넌트에서 props로 받는 법

const FeaturedBox = (props) => {
  //prop를 받는다고 꼭 적어줘야한다.
    return (
        <>
        <Wrapper>
            <ImgWrapper>
                <BackgroundImg src={props.img} alt="" />
                    <IMGContainer src={props.img} alt="">
                    </IMGContainer>
            </ImgWrapper>
            <DetailWrapper>
                <DetailImg src={props.img} alt="" />
                <DetailText>
                    <Headers>{props.head}</Headers>
                    <Title>{props.title}</Title>
                    <Subtitle>{props.subtitle}</Subtitle>
                </DetailText>
            </DetailWrapper>
        </Wrapper>
        </>
    )
}

3. useHistory

//useHistory import 해주기
import {useHistory} from 'react-router-dom'

const NavMenu = () => {
    let history = useHistory();
  
  <HoverBox onClick={ () => history.push("/home")}>
}

4. config.js

//config.js 파일 만든 후 url 변수화 해주기
export const HURL = "http://10.58.3.53:8002";
export const YURL = "http://10.58.3.0:8000";
//사용방법
//import 해준 후 
import { HURL } from "config";

//`${URL변수화}앤드포인트`
useEffect(()=>{
        fetch(`${HURL}/music/playlist?limit=16`,
        {method: "GET"
    })

5. props 넘겨주기

header에 있는 title을 page 마다 다르게 쓰이도록 해야했다.

  • header 컴포넌트 title 부분을 아래와 같이 만들어 준다.

  • header 컴포넌트를 import 해서 사용할때 title={'넣고싶은 타이틀'} 을 적으면 된다.

6. redux

redux는 따로 정리했다. 클릭

0개의 댓글