코딩일지

nivo

https://nivo.rocks

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

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

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

이렇게

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

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. 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에 따라 내가 원하는 값을 출력할수있게된다.

포커스 관련요소

a, button, details, input, select, textarea

제외한 곳에서 사용x <div tabindex='1'>A</div> 이런식으로 사용

cf) 강제사용시 

1. onFocus는 포커스할때

2.onBlur는 포커스 안할때 사용했다.

예시코드

포커스시

블러시

출처

https://kwangsunny.tistory.com/35

우선 전체 코드

  const [reply, setReply] = useState('');
  const [replyArray, setReplyArray] = useState([]);
  const replyreplace = reply.replace(/ /g, '');
  const isreplyempty = replyreplace <= 0 ? true : false;
  const resultColor = isreplyempty ? '#9C9C9C' : 'blue';
  const saveReply = e => {
    setReply(e.target.value);
  };

  const replySet = event => {
    event.preventDefault();
    if (reply === '') {
      return;
    } else {
      setReplyArray(replyList => [...replyList, reply]);
      setReply('');
    }
  };

  return (
    <div className="extra">
      <div className="likes">aineworld님 외 10명이 좋아합니다</div>

      <div className="text">
        <div className="mid">
          <div className="mid_1"> wecode&nbsp;</div>{' '}
          <div className="mid_2"> dream room</div>
          <div className="mlikes" />
        </div>
        <div className="w_reply">
          {replyArray.map(sth => (
            <form onSubmit={replySet} key={sth}>
              <div className="w_replyArray">
                <div className="w_reply_id"> ys_dd002 </div>
                <div className="w_reply_txt">{sth} </div>
                <div className="w_icon">
                  {' '}
                  <i className="fa-regular fa-heart" />
                  &nbsp;{' '}
                </div>
                <div className="w_delete"> &nbsp;삭제&nbsp; </div>
              </div>
            </form>
          ))}
        </div>
      </div>
      <form className="reply">
        <input
          id="reply"
          type="text"
          placeholder="댓글달기.."
          onChange={saveReply}
          value={reply}
        />
        <button
          className="replybutton"
          style={{ color: resultColor }}
          onClick={replySet}
        >
          게시
        </button>
      </form>
    </div>
  );
}

export default Reply;

내려오면 

  const [reply, setReply] = useState('');
  const [replyArray, setReplyArray] = useState([]);

앞부분이 변수고 뒷부분이 함수이다. useState를 통해서 변수가 함수를 통해 값이 바뀐다.

  const saveReply = e => {
    setReply(e.target.value);
  };

이건 input에 넣어진 값을 가져오는 함수이다.

  const replySet = event => {
    event.preventDefault();
    if (reply === '') {
      return;
    } else {
      setReplyArray(replyList => [...replyList, reply]);
      setReply('');
    }
  };

이건 댓글을 쌓아올리는 함수이다.

  <div className="w_reply">
          {replyArray.map(sth => (
            <form onSubmit={replySet} key={sth}>
              <div className="w_replyArray">
                <div className="w_reply_id"> ys_dd002 </div>
                <div className="w_reply_txt">{sth} </div>
                <div className="w_icon">
                  {' '}
                  <i className="fa-regular fa-heart" />
                  &nbsp;{' '}
                </div>
                <div className="w_delete"> &nbsp;삭제&nbsp; </div>
              </div>
            </form>
          ))}
</div>

이건 map으로 input값이 들어와 버튼이 눌리면 input값을 넣어 댓글을 생성해낸다

 <form className="reply">
        <input
          id="reply"
          type="text"
          placeholder="댓글달기.."
          onChange={saveReply}
          value={reply}
        />
        <button
          className="replybutton"
          style={{ color: resultColor }}
          onClick={replySet}
        >
          게시
        </button>
</form>

이건 input창과 버튼을 나타내는 함수다