Soha

UMC: 마켓컬리 클론코딩, object-fit

마켓컬리 클론코딩

UMC 1주차 미션은 클론코딩이었다.
클론코딩은 유튜브 강의로 유튜브 클론코딩만 따라서 해본 적 밖에 없어서 어떻게 해야 할지 약간 막막했지만… 이틀동안 열심히 만들어봤다..!
react나 vue는 사용하지 않고 그냥 만드는 거라… 컴포넌트의 존재가 새삼 최고였다는 것을… 깨닫게 되었다…
한 파일에 만드니까 뭔가 헷갈린다고 해야 하나..? 정리가 안된 느낌..

그리고 css는… 차마 하나하나 따로 치기에는 너무 헷갈리고 힘든 미래가 보여서 scss를 사용했다. 간단히 scss 사용하는 방법은 다른 글에 작성하기로…

이틀동안 만드느라 시간이 부족해서 자바스크립트는 사용하지 않았다. 페이지 자동으로 변환되거나.. 시간 움직이기 등을 했어야 했는데.. 시간이 없는 관계로 선택과 집중을 했다.

그리고 버튼이나 링크 하나 하나 신경써서 하기에는 시간도 없고.. 복잡(?)하므로 쿨하게 패스하고 다 모양만 만들어줬다.

내가 만든 마켓컬리 클론코딩 페이지!

어려웠던 점
클론코딩을 하면서 어려운 점은.. 기존에 코드를 참고해서 하는데, 해당 코드를 바탕으로 새롭게 나만의 코드 만드는게 처음이라 애를 좀 먹었다. 어떻게 해야 할 지 감을 잡는데 조금 걸렸달까? 그래도 여러번 반복되니 이제 대략 코드들도 이해가 되고 버려도 되는 코드를 금방 파악할 수 있어서 후반부에 갈 수록 코드 작성하는 시간은 적게 걸렸다.

그런 점 말고는… 딱히…?
그저.. vue나 react를 사용하지 않으니까 정리가 안된 느낌이라 답답했다는 것?! 정도?
후반부에는 react를 사용하게 될 거니까 괜찮을 것이다.

종합 소감
클론코딩… 결코 만만하지 않은 것이었다..

TIL!!

• object-fit

  <img>나 <video> 요소의 크기를 어떤 방식에 맞출 것인지 지정한다.

  • contain

    대체 콘텐츠의 가로 세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다.

  • cover

    대체 콘텐츠의 가로 세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채운다. 가로 세러비가 일치하지 않으면 객체 일부가 잘려나간다.

  • fill

    콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절한다. 콘텐츠가 박스를 가득 채운다. 가로세로비가 일치하지 않으면 콘텐츠가 늘어난다.

  object-fit - CSS: Cascading Style Sheets : MDN

• z-index

  요소를 가장 앞에 배치하고 싶다면 큰 수를 작성한다.
  단! z-index를 작성할 때, 항상 position 값은 relative로 설정해줘야 z-index가 작동한다. static일 때는 적용되지 않는다.

  /* 최상위 요소 */
  .first {
  	position: relative;
  	z-index: 9999;
  }
  
  /* 밑에 깔리는 요소*/
  .second {
  	position: relative;
  	z-index: 10;
  }
  

  z-index - CSS: Cascading Style Sheets : MDN

• letter-spacing

  글자 사이의 간격을 조절한다.
  값이 커지면 간격이 커진다. 값에 음수를 넣을 수 있으나 글자가 겹칠 수 있다.
  추가로 단어 사이의 간격은 word-spacing이다.

  p {
  	letter-spacing: 10px;
  }
  

  letter-spacing - CSS: Cascading Style Sheets : MDN

HTML에 SCSS 적용하기

내용이 많아질 수록 css를 작성하기 복잡해진다. 이때, scss를 사용하면 조금 더 손쉽게 스타일을 적용할 수 있다.

파일 만들기

일단 간단하게 예시를 들기 위해서 총 3개의 파일을 만들어준다.

• index.html
• css 폴더
  • style.css
  • syle.scss

파일들을 생성했다면 index.html 파일에 css를 연결해준다.
scss 파일이 아닌 css 파일이여야 한다! html은 scss 파일을 읽지 못한다.

scss를 css로 변환하기

우리는 scss 파일에 스타일을 작성해준다. 하지만 그냥 작성하고 저장하면 css 파일은 백지이다. 즉, 가만히 그냥 두면 변환은 일어나지 않는다.

우리는 scss 파일을 css 파일로 변환을 해줘야 한다. cmd창에 다음과 같은 명령어를 작성한다.

npx sass --watch 폴더명/scss파일명 폴더명/css파일명
npx sass --watch css/style.scss css/style.css

여기서 --watch는 우리가 scss파일에 작성한 코드를 저장하면 자동으로 css 파일로 변환해줘~ 라는 명령어다.
해당 명령어를 작성하지 않으면 scss 파일을 저장하고, cmd 창에서 수동으로 변환 명령어를 계속 입력해야 한다. 매번 그러기에는 귀찮으니 다음 명령어를 꼭 같이 넣어도록 하자.

참고로 더이상 변환을 시키고 싶지 않다면, cmd 창에서 control+C를 통해 프로세스를 종료시키도록 하자.

React: HOC (Higher Order Component)

HOC (Higher Order Component)

고차 컴포넌트 – React

HOC = function(컴포넌트) { return 새로운 컴포넌트; }

HOC는 컴포넌트 로직을 재사용하기 위한 React의 기술이다. 컴포넌트를 가져와서 개로운 컴포넌트로 반환하는 함수이다.
HOC는 입력된 컴포넌트를 수정하지 않으며 상속을 사용하여 복사하지도 않는다. 원본 컴포넌트를 컨테이너 컴포넌트로 포장하여 조합한다. 즉, 사이드 이펙트가 없는 순수 함수이다!
훅(hook)으로 인해 hoc의 사용량이 줄어들어 중요도가 다소 낮아졌다.

주의사항

• render 메소드 안에서는 HOC를 사용하면 안된다.
• 정적 메소드는 따로 복사해야 한다.
• ref는 전달되지 않는다.

React: React Router

React 라우팅

React Router: Home v6.9.0

SPA 라우팅 과정

• 브라우저에서 최초에 ‘/’ 경로로 요청
• React Web App을 내려줌
• 내려받은 React App에서 ‘/’경로에 맞는 컴포넌트를 보여줌
• React App에서 다른 페이지로 이동하는 동작 수행
• 새로운 경로에 맞는 컴포넌트를 보여줌

React Router 설치

npm i react-router-dom

• CRA에 긱본 내장된 패키지가 아니다.
• react-router-dom은 페이스북 공식 패키지가 아니지만 가장 대표적인 라우팅 패키지이다.

Router Component

• <BrowserRouter>

  브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
  웹에 HTML5 History API를 사용하여 페이지를 새로고침 하지 않아도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 한다.

  와 컴포넌트가 함께 유기적으로 동작할 수 있도록 묶어주는데 사용한다.

• <Route>

  컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 한다.

  path를 통해 URL을 분기시킨다. 중첩이 가능하다.
  exact는 path 속성에 넣은 경로값이 정확히 일치해야 랜더링되도록 한다. exact를 사용하지 않으면 “/profile”경로가 “/”경로에도 반응하게 된다.

• <Link>

  HTML의 <a>태그와 유사한 기능을 한다.
  to 속성에 설정된 링크로 이동한다.

  react router에서는 <a>태그를 사용할 수 없기에 해당 컴포넌트를 사용한다. <a>태그는 모두 새로 가져오기 때문에 해당 태그는 사용할 수가 없다.

  Link를 통해 페이지를 전환하면 새로운 페이지를 부르지 않아도 애플리케이션은 그대로 유지한 채, HTML5 History API를 사용하여 페이지의 주소만 변경한다.

• <NavLink> activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정이 가능하다.
  Route의 path처럼 동작하기 때문에 exact가 있다.

• <Switch>

  자식 컴포넌트 또는 중 매치되는 첫번째 요소를 렌더링한다. 작성할때 순서는 좁은 범위 ~ 넓은 범위로 작성한다. (순서가 중요하니 유의하도록 하자) Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 **하나**의 매칭되는 요소만 렌더링한다. Switch로 감싸고 있기 때문에 Route가 중복되는 것이 있으면 첫번째 요소만 렌더링한다. 가장 마지막에 어느 path에도 맞지 않으면 보여지는 컴포넌트를 설정해서 “Not Found” 페이지를 만들 수 있다.

• <Redirect>

  <Redirect>가 렌더링되면 to가 가리키는 링크로 바로 연결된다.

Router 적용 순서

BrowserRouter 연결 → 페이지 컴포넌트 만들기 → Route path 연결 → Link 컴포넌트 연결

참고 자료 링크
react-router-dom 설치, 라우팅하기
리액트 라우터 기본 사용방법
react-router-dom 시작하기

React: classNames, styled-component, react-shadow, ant-design

classNames

복잡하게 작성해야 했던 것을 해당 라이브러리 설치만으로 간단하게 만들 수 있다.

npm i classnames

참고 자료
React - classnames
리액트에서 조건부 스타일을 줄때 classNames 라이브러리를 활용해보자!

• css-module bind

  classnames/bind 함수와 classnames 함수의 차이

Styled Components

동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다.
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어준다는 장점이 있다.

• styled component 설치

  npm i styled-components
  

• 사용하기

  const 컴포넌트명 = styled.태그명스타일``

  만들고자하는 컴포넌트의 render 함수 밖에서 만든다.

  import styled from "styled-components";
  
  const StyledButton = styled.button`
    // 여기에 원하는 css 작성
  `;
  
  export default StyledButton;
  

  스타일 컴포넌트가 자동으로 class를 만들어준다.

  단점으로는 css 문법 에러가 발생했을 때, 틀렸다는 것을 알려주지 않는다. 문자열이기 때문이다..! 그렇기에 추가적인 플러그인을 설치해야 한다.

styled-components 개념 및 예시, react, redux

React Shadow

HTML에서 shadow DOM을 이용하여 오염될 수 없도록 만들어준다.
HTML안에 본래의 HTML과 영향을 주지 않는 별도의 HTML 덩어리를 의미한다. 리액트에서 컴포넌트를 사용할 때, 컴포넌트가 스타일이 오염되는 문제가 있다. 이런 문제를 해결하고자 css 모듈, 스타일 컴포넌트가 나왔다.
shadow DOM은 HTML에서 shadow DOM을 이용하여 오염될 수 없도록 만들어준다.

• 설치

  react-shadow 라이브러리 설치

  npm i react-shadow
  

• <root.div> 안의 태그들만 별도의 스타일 속성을 지정한다.

• 단점

  공통적인 스타일인 경우에도 반복적으로 추가해야 하는 번거로움이 있다.

  외부와 내부가 차단되어 있어 document에 지정되어 있는 값을 상대적으로 표현할 때 제약이 발생한다.

React : react-shadow 사용법 , style 독립적으로 넣고 싶을때, App.js 와 index.css 스타일 분리

Ant Design

ant design은 하나의 컴포넌트 모음이며, 이미 디자인된 라이브러리이다.

Ant Design

• 설치

  npm i antd
  

• 사용방법

  사용하고자 하는 컴포넌트를 Ant Design 페이지에서 찾아, 컴포넌트를 사용한다.

  import { Calendar } from "antd";
  
  function App() {
    return <Calendar />;
  }
  

• Ant Design Icon 사용하기

  • 설치

    npm i --save @ant-design/icons
    

  • 사용

    홈페이지에서 사용하고자 하는 아이콘을 클릭하면 컴포넌트가 복사된다. 해당 컴포넌트를 사용하고 싶은 곳에 넣어주면 끝

    import { GithubOutlined } from "@ant-design/icons";
    
    function App() {
      return <GithubOutlined />;
    }