코딩일지

nivo

https://nivo.rocks

nivo는 그래프를 그려주는 정말 간단하게 그릴수있게하는 라이브러리다 진짜 간단한데 나는 열심히 헤맸던...

우선 사이트에 들어가서 원하는 그래프를 선택하고 base에서 수정한다.

다 수정하면 옆에 code를 복사해서 붙여넣으면 된다.

이렇게

데이터는 여기서 제공하는 데이터 그대로를 사용해야한다. num이 써있어도될거같은데 하는 자리에 string이 써있으면 string을 넣어주는게 좋다.

2차 프로젝트 기간 : 10월 31일 ~ 11월 11일

클론코딩 사이트 : 크림

팀명 : KRWEAM

개발인원 : 프론트엔드 3명 (김민경 박성수 윤수), 백엔드 2명 (김택수 이찬우) 

맡은 부분 : 상세페이지 nav footer 레이아웃

구현 한 것 : 모달창, nivo를 사용한 그래프

깃허브주소

시연연상

후기

나에겐 이번 프로젝트도 배울게 많았었다. 첫번째로 좀더 적극적이였으면 좋았을것같았다. 너무 다른사람한테 민폐끼지지 말자라는 생각이 박혀서 내 스케쥴을 생각하지 않고 다른거 구현하느라고 데이터를 주고받는것을 미뤘던거 같았다. 그게 제일 오래걸렸는데... 두번째는 소통으로 정리해서 요건만 딱딱 말했으면 다른사람들이 거기에대해 답답하게 느끼지 않았을 것이였는데 그걸 잘못 했던게 아쉬웠다. 다들 원활하게 데이터도 쉐어하고 소통도 잘하는데 나만 잘 못해서 그게 좀 아쉬웠다. 여기까지는 내가 팀원들과 관계에 대해 아쉬웠던 점이고 코딩하면서 아쉬웠던 점은 데이터를 주고받는 부분과 진도에 맞추느라 구멍이난 기본이였다. 질문을 하러 가서 다시생각해보면 다 위코드에서 배우는 기본이 구멍이 나서 못하는 것이 태반이였던걸 느꼈다.

이러나 저러나 그래도 많이 늘었던 거같아서 좋았다. 결국에 내가 담당했던 것들중에 한가지를 팀원의 손을 빌려야했지만 열심히라는 것이 없었던 내 인생에서 손에 꼽힐정도로 열심히했던 순간이였다. 다른사람과 비교하면서 좀더 열심히했어야했나 라는 생각이 들기도 했지만 만약에 내 페이스를 챙기지 않고 다른사람들처럼했으면 이정도도 안나왔을거같았다. 요 두달동안 눈에 보일정도로 성장한 느낌이라 뿌듯한느낌도 들면서 아쉬웠다 

1. 한계점 감지하기

함수

const AboutProduct = () => {
   const trigger = useRef(false);
   const [openContent, setOpenContent] = useState(false);
   useEffect(() => {});

   useEffect(() => {
     const observer = new IntersectionObserver(obsHandler, { threshold: 0.5 });
     if (trigger.current) observer.observe(trigger.current);
     return () => {
       observer.disconnect();
     };
   }, []);
   useEffect(() => {
     window.onbeforeunload = function pushRefresh() {
       window.scrollTo(0, 0);
     };
   }, []);
   const obsHandler = () => {
     setOpenContent(prev => !prev);
   };

감지

<S.DetailTopContainer ref={trigger}>

오픈될 창

<S.MiniContainer index={openContent}>

이것의 단점은 새로고침이 되어야지 내가 원하는 곳에 붙게 되는거라 아쉬웠다. 다른 곳으로 갈때마다 굳이 새로고침을 설정하지 않아도 새로고침이 되어 페이지를 이동하면 처음부터 보게하게 하는법을 알아봐야겠다.

1. 내가 다르게 넣으려는 곳에 index(사실 아무렇게나 넣어도 된다. 나는 재사용때문에 index, num을 같이 사용했다.) 넣기

{NavCategory.map(data => (
                <S.NavCategoryMap key={data.id}>
                  <Link to={data.url}>
                    <S.NavCategoryimg src={data.img} index={data.id} />
                  </Link>
                  <S.NavCategoryName to={data.url}>
                    {data.text}
                  </S.NavCategoryName>
                </S.NavCategoryMap>
              ))}

2. styled 컴포넌트에 props를 따와서 삼항연산자 넣기

export const NavCategoryimg = styled.img`
width: 150px;
height: 104px;
margin: 0 ${props => (props.index === "1" ? 0 : "5px")};
border: 1px solid ${({ theme }) => theme.style.warmGrey_2};
border-radius: 8px;
`;

이 방법은 참고로 자신의 태그가 link일때만 해당이며 link태그안에 있는 div 태그면 안먹는다.

1. import { Link } from "react-router-dom"

2. export const 이름 = styled(Link)`  

  text-decoration: none; 

`; 

하면된다. 여기에서도 link할때는 .link가 아니라 (Link)여야지 먹는다.

styeld component 라이브러리는 유용한듯 하면서도 유용하지 않는듯한 기분이 든다.. 처음이라서 그런가...

기본문법

import styled from "styled-components";


const Wrapper = styled.div
`display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15vh;
`;

const App = () => {
return (
<wrapper />
);
};

중복 코드

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box bgColor={"#574b90"} />
    </Wrapper>
  );
};

중복 추가

const Circle = styled(Box)`
  border-radius: 50%;
`

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box bgColor={"#574b90"} />
      <Circle bgColor={"black"} />
    </Wrapper>
  );
};

공통스타일

import React from 'react'
import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
  }
`

export default GlobalStyle;

as 속성. box를 button처럼 만들기

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box as="button" bgColor={"#574b90"} />
      <Circle bgColor={"black"} />
    </Wrapper>
  );
};

hover

// 1번 방법
const Box = styled.div`

생략...

span {
  background-color: black;
}
span:hover {
  background-color: white;
}
`;

// 2번 방법
const Box = styled.div`
span {
  background-color: black;
  
  &:hover {
    background-color: white;
  }
}
`;

++) 이걸할때 import 된다고 한번에 밀어넣는 것은 비추천한다. 꼭! js-scss처럼 같이 만들어서 사용하는 것을 권한다.

출처 :https://velog.io/@sorious77/React-Styled-Components-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95-e9o4rnfq

1. 프로젝트 소개

10월 17일 부터 10월 28일까지 약 2주간의 짧은 프로젝트를 하게 되었다.

개발인원은 프론트엔드 개발자 4명 백엔드 개발자 3명으로 총 7명이 함께 했던 프로젝트였다.

나이키 클론코딩 주소

나이키 클론코딩으로 내가 맡은 건 로그인 회원가입페이지였다.

2. 개발시 사용했던 도구

주로 slack을 이용해 통신을 했다.

아침마다 회의를 했는데, 이때는 trello를 이용해 진도와 상황을 보면서 오늘의 자신의 진도를 점검하고 다른 분들이랑 맞춰가며 스케쥴을 조절했다. 

prettier를 사용해서 진짜 나이키 사이트와 비교하며 클론한 사이트를 점검했다.

그 외에 git github javascript react sass reactRouter createReactApp를 사용해 개발을 했다.

전부 처음 써보는 거라 처음에는 코드치느라, 중간에는 여기에 쏟을 관심이 없어서 잘 안쓰다가 마지막에서나 제대로 썼다...

3. 작업 결과

메인부분 carousel nav footer을 제외하고 내가 한것을 가져왔다.

. 내가 한 부분

나는 로그인/회원가입을 담당했다.

가장 긴 시간을 들인 부분은 컴포넌트화인데 내가 컴포넌트화 하는 것을 잘못 이해해서 리빌딩을 했어야했기 때문이다.

그리고 가장 어려웠던 부분은 내 블로그에 썼던 부분인데 여기에 링크를 걸어둔다. 이게 시간을 잡아먹다못해 멘토님께서 아예 수식을 적어주셨다. 어려워서 코드카타를 공부해야겠다고 생각했다.

. 후기

내가 부족한걸 많이 알게 되었다.

git pull과 merge를 잘 안해서 한번 제대로 꼬여서 파일 전부 날려먹을 뻔한적도 있고 잘못해서 날려먹은 적도있곻ㅎㅎㅎㅎㅎ

거기에 이해가 잘 안돼서 이틀이면 끝날껄 일주일을 끌어버려서 팀원들께 너무 미안했다. 거의 다했는데 완전 갈아엎어서...

하지만 그만큼 배운것도 많았다. 지금 이 배우는 단계에서 한번 꼬여보고 날려먹어도 보는게 낫지 어휴 현업에 들어갈 때 일주일동안 짜놓은 코드가 pull push merge 등을 제대로 안해서 날려먹는다고 생각하면 벌써 머리 아프다.

2차 프로젝트를 할때는 티켓을 잘게 쪼개서 각각의 작용하기 위한 함수들을 컴포넌트화를 해 넣는 것이 나을거 같다.

크게 크게 짜다보니 역할분담이 크게 짜여져 시간의 손실이 생겨버리니까 아까웠다. 

그래서 진짜 중요한건 소통과 다른 사람들이 한번에 이해할수있는 코드라는 걸 상기하게되었다.

역할 분담을 컴포넌트화 해서 짜게되면 어쨌든 그 코드를 다른사람이 보고 이용을 하게 될텐데 그때 다른사람이 가독성이 좋아야 내가 오류를 찾을때도 훨씬 쉽다는 걸 알게되었다.

1. component의 component로 input.name.value를 사용할 수없는 상태.

2.onFocus onblur로 안됨

3. onchange 사용중

const RULES = {
  email: value => value.length > 0,
  password: value => value.length > 0,
  userName: value => value.length > 0,
};

export default RULES;

이렇게 해서

const test = Object.entries(RULES)
    .filter(([key, value]) => key === name)
    .every(([key, validator]) => {
      return validator(inputSet[name]);
    });

이런식으로 넣으면 true/false로 반환되어 원하는 곳에 넣어줄수 있었다.

이 식을 뜯어보면,

Object.entries는 객체인 RULES를 key와 value의 배열로 만드는 식이다.

이 배열로 만든 것을 filter함수로 돌리면 각 input값에 맞게 key와 value를 넣어준다.

every로 값에 따라 출력값을 true/false로 바꿔주게되면 RULES에 따라 내가 원하는 값을 출력할수있게된다.