[React] 이미지 캐루셀 구현하기(react-slick), 글로벌 스타일과 컴포넌트 폴더 구조, 게시글 해시태그 링크로 만들기

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

이미지 캐루셀 구현하기(react-slick)

imagesZoom이라는 폴더를 만들고 그 안에 index.js 파일을 추가한다.

왜일까?

react-slick 설치하기

npm i react-slick

react-slick 은 slider 로 많이 활용하는 라이브러리 중 하나이다.

설치 중 에러 발생

Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher.

After updating your NodeJS and NPM Version run this command in CLI

npm set registry=https://registry.npmjs.org/

구글링 결과 다음의 명령어 실행 후, react-slick 이 잘 설치되었음 :)

구현

<div>
  <Slick
    initialSlide={0}
    afterChange={(slide) => setCurrentSlide(slide)}
    infinite
    arrows={false}
    slidesToScroll={1}
    />
</div>

• afterChange
• infinite : 슬라이더쇼 반복
• arrows : 화살표 표시 유무
• slidesToScroll : 슬라이드 스크롤 시 1개씩 넘어가도록 함.

• 대게 값을 넘겨줄 때 오타가 있었다. image -> images 로 수정하기.

styled-components

• 함수를 호출할 때 func`` 와 같이 호출할 수도 있음.
• agged template literal (template literal = 백틱) : 태그로 구성되어 있다고 하여 다음과 같이 불린다. 함수를 호출하는 2번째 방법이다.

글로벌 스타일과 컴포넌트 폴더 구조

createGlobalStyle

import styled, { createGlobalStyle } from 'styled-components';

export const Global = createGlobalStyle`
  .slick-slide {
    display: inline-block;
  }
`

전역적으로 동작할 수 있다.

transform & fixed

브라우저의 유명한 버그 중 하나이다. transform css 안에다가 fixed 를 넣을 경우 잡지 못하는 유명한 브라우저의 버그가 있다. 그래서 transform 을 해제해줘야 한다.

scroll bar created due to gutter

AppLayout에서 gutter 설정한 부분으로 인해 margin-left, margin-right가 생겼다.

다음과 같이 아래에 스크롤이 생긴 것을 확인할 수 있다.

margin-left, margin-right 를 없애기 위해 다음과 같이 글로벌 스타일을 설정해준다.

export const Global = createGlobalStyle`
  .ant-row{
      margin-right: 0!important;
      margin-left: 0!important;
  }
  .ant-col:first-child {
      padding-left: 0 !important;
  }
  .ant-col:last-child {
      padding-right: 0 !important;
  }

글로벌 스타일을 활용해서 antd가 가지고 있는 고유의 스타일, 버그들을 변경할 수 있다.

Why?

• 앞서 imagesZoom이라는 폴더를 만들고 그 안에 index.js 파일을 추가하였는데, 그 이유가 무엇일까?
  스타일드 컴포넌트가 너무 지저분한 것이 많다. index.js에서 스타일드 선언된 부분을 따로 빼서 style.js 파일을 만들고, export를 한다. export된 style을 index.js에서 활용할 수 있도록 한다.

Tip

• 보통 컴포넌트는 100줄 내외로 구성하는 게 좋다. 덜 중요한 파일들을 쪼개서 재구성 하는 것을 추천한다.

• 더미 데이터 구조를 잘 잡아놔야 한다. 처음부터 백엔드 개발자와 데이터 구조를 협의하고, 문서화를 해놓는 게 중요하다. 어느정도 바뀔 것은 감수해야 하지만, 최대한 더미 데이터를 처음부터 잘 잡아놓는 게 중요하다.

• 컴포넌트는 큰 단위로 먼저 쪼개는 편이다.

• 코드는 깃허브에 올려서 보관하기! 개발자의 자산 중 하나가 작업했던 코드라고 한다. 언젠간 재활용 할 일들이 분명히 있다.

게시글 해시태그 링크로 만들기

해시태그 부분을 링크로 만들어보자. 정규 표현식을 활용하여 해시태그 부분을 찾아낼 수 있다.

정규 표현식 사용 테스트 사이트 (https://regexr.com/)

  {postData.split(/#[^\s#]+/g)}

  {postData.split(/#[^\s#]+/g)}

 {postData.split(/(#[^\s#]+)/g)}

괄호를 넣어야 정상 작동한다.

{postData.split(/(#[^\s#]+)/g).map((v) => {
	if (v.match(/(#[^\s#]+)/g)) {
	return <Link href={`/hashtag/${v.slice(1)}`}><a>{v}</a></Link>
	}
})}

slice(1)을 한 이유는 앞의 #을 제거하기 위해서이다.

key error

사용자의 수정 의도가 있지 않는 이상 포스트 내용은 바뀌지 않는다.