[2022.08.25] 면접 과제 하며 배운것 정리

이번 면접 과제를 하면서 배운 게 많은 거 같아

정리를 해보려고 한다!

 

 

 

1. 반응형

면접 과제를 하면서 반응형을 처음 해봤고

Media Query를 사용하였다.

const CardBox = styled.div`
  width: 32rem;
  padding: 1rem 1.5rem;
  margin: 0 auto 1rem auto;
  border-radius: 10px;
  border: 1px solid #000000;
  // width가 360px이였을 때에 바뀌는 요소들을 적는 방식
  @media screen and (max-width: 360px) {
    width: 17rem;
  }
  @media screen and (max-width: 575px) {
    width: 76%;
  }
`;

 

2. SVG 이미지 사용 방식

항상 png를 사용해오다 이번에 SVG를 사용을 해봤다.

 

CRA(Create React App)방식을 사용한다면 

import { ReactComponent as Icon2 } from "../assets/Group 1516.svg";

방식으로 이미지를 컴포넌트화를 시켜

 <ImageBox>
     <User />
 </ImageBox>

형식으로 사용 할 수 있다. 그리고 width와 height를 바꿀 수도 있는데

SVG파일에 들어가 

<svg width="current" height="current" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_145)">
<path d="M59.6543 29.9997C59.6543 13.6223 46.3777 0.345703 30.0002 .... />

바꿀 요소를 current로 바꾼 다음에 

 <ImageBox>
     <User  width="60px" height="60px"/>
 </ImageBox>

형식으로 사용하면 width와 height가 바뀐다.

 

다른 방법으로는 background-image로 선언하는 방식이다.

 

과제에서 스크롤시 이미지가 움직이는 구현을 해야 했고 찾아보던 중

background-attachment를 사용하면 되겠다 싶었지만 SVG를  background-image로 선언해야 했다.

 

styled-components를 사용하여

background-image: url(${Ptn});

위 코드를 사용해 보았지만 적용이 되지 않았다.

 

구글링을 하여 찾아 보던 중 class로 사용한다면 된다는 글을 보았고

import styled from "styled-components";
import Ptn from "../assets/banner_pattern.svg";
import Char from "../assets/banner_char.svg";

const Header = () => {
  return (
    <>
      <ImageBox>
        <div className="patten">
          <div className="char" />
        </div>
      </ImageBox>
    </>
  );
};


.char {
    background-image: url(${Char});
    background-attachment: fixed;
    ...
   
  }

위 코드 형식으로 구현을 했다.

 

 

 

3. 트러블 슈팅

면접 과제 중 API통신을 하여 GET해온 데이터를 Card형식 UI에 뿌리는 것이 있었는데

통신하여 데이터를 console찍어봤더니 문자열로 들어온 것을 확인했다.

데이터를 map을 돌려야 하기 때문에 배열로 만들어야겠다 먼저 생각을 했고

문자열을 배열로 변환해주는 replace를 사용하기로 했다.

하지만 무엇을 자르고 해야할지 고민을 하였고 구글링 도중 정규식을 사용하는 방식을 봐서 시도해보기로 했고

정규식을 사용하여 앞에있는 { 와 value들과 쉼표를 뽑아 놓고

나머지 앞에 있는 { 도 자른 후 새로운 배열을 만들어 놓고
value들과 쉼표만 들어 있는 배열을 map을 돌려 첫 값은 빈 값이기에 return을 하고
나머지 쉼표를 잘라 index순서인 0, 1, 2를 각각 새로운 오브젝트 키값에 넣어 만들고
만들어 놓은 배열에 push를함으로 해결하였다.

---

 

이번 면접과제에서 배운 것들을 정리해봤다.

느낀 점은 확실히 CSS에 대한 지식이 약하다는 것을 느꼈고

앞으로는 CSS 공부를 더 찾아봐야겠다는 생각을 했다.