본문으로 건너뛰기

TIL : 23-06-24

오늘 한 일​

  • 테오 스프린트

테오의 스프린트​

기술 스택 선정 이유​

테오의 스프린트 개발이 시작되었는데

  • Next, TypeScript을 사용하게 됨
  • (왜 Next를 사용하게 된 지 설명해주셨으나, 제대로 이해를 못 함. 따라서 추후에 업로드 예정.)

개발 과정에서 마주한 이슈들​

Swiper​

Swiper > pagination 색상 변경​

imageimage
  • 디자인을 보면 #939393 와 #D9D9D9 로 되었는데
    • 현재 파란색으로 pagination 색상이 설정되어 있음.

시도1
el: '.swiper-pagination', 코드를 넣은 후, css에서 style을 바꾸고자 하였으나

위 코드를 넣으면 pagination이 사라지는 문제가 발생함

참고자료 : https://velog.io/@yejine2/TIL-10-swiper-pagination-bullet-커스텀

시도2

image

위 자료를 확인하고 이미지 소스를 사용해야 하나 하였으나,

image

개발자 도구를 통해 확인해보니 swiper-pagination-bullet이었고 이를 css에서 색상을 지정해주면 되는 거 였음.

.swiper-pagination-bullet {
  background: red !important;
}
.swiper-pagination-bullet-active {
  background: yellow !important;
}

참고자료 : https://enfanthoon.tistory.com/166

수직 배치​

imageimage

이미지와 텍스트가 수직(column)으로 배치가 되어야 하나

  • row로 배치되어 있음을 확인할 수 있음.

시도1
flex-direction: column을 사용하고자 하였음.

const slideStyles = {
    width: "100%",
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    **flexDirection: "column",**
  };

위처럼 flexDirection: "column", 을 추가하면

image

여기서 아래와 같은 에러가 발생함. '{ backgroundColor: string | undefined; width: string; height: string; display: string; justifyContent: string; alignItems: string; flexDirection: string; }' 형식은 'Properties<string | number, string & {}>' 형식에 할당할 수 없습니다. 'flexDirection' 속성의 형식이 호환되지 않습니다. 'string' 형식은 'FlexDirection | undefined' 형식에 할당할 수 없습니다.

chatGPT에 따르면…

flexDirection: "row", // 수정: flexDirection 속성 추가

slideStyles에 flexDirection 속성을 추가하라고 하였으나,

이미 추가 되어있기 때문에 다시 물어보니

interface SlideStyles {
  backgroundColor?: string;
  width: string;
  height: string;
  display: string;
  justifyContent: string;
  alignItems: string;
  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
}

const slideStyles: SlideStyles = {
  width: '100%',
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  flexDirection: 'column',
};

타입 호환성 관련 문제로 인식하였고, 현재 코드에서 slideStyles 변수의 타입이 맞지 않는 것으로 판단하였다.

따라서 SlideStyles 인터페이스를 정의하여 slideStyles 변수의 타입을 명시적으로 지정하고 SlideStyles 인터페이스에는 flexDirection 속성의 유효한 값들을 지정했습니다. 이렇게 하면 타입 호환성 문제가 해결되고 오류가 발생하지 않을 것입니다.

줄바꿈​

imageimage

줄바꿈이 있어야 하는데, 현재 없음.

시도1 : \n

React에서는 개행 문자가 인식이 안 된다고 함.

따라서 CSS 에 white-space: pre-wrap; 를 넣어주면 해결이 된다고 하였으나 안 됨.

참고자료 : https://fopman.tistory.com/34

시도2 : Template literals

성공

.swiper {
  width: 100%;
  height: 100%;
  **white-space: pre-wrap;**
}

위 코드를 .swiper에 넣어주고 template literals를 하니 줄바꿈이 됨.

INTRO/2​

image
{
  slides.map((slide, index) => (
    <SwiperSlide key={index}>
      <div style={{ ...slideStyles, backgroundColor: slide.backgroundColor }}>
        <img src={slide.img} />
        {slide.text === '시작하기' ? (
          <button onClick={handleStart}>{slide.text}</button>
        ) : (
          slide.text
        )} <br />
        <br />
        {slide.comment}
      </div>
    </SwiperSlide>
  ));
}
image

무식하게 <br/> 두 번 써서 넣었다. 문제는 slide.comment의 경우 font-size가 20px라는 것이다.

이미지​

image
import Image from 'next/image';
import Intro1 from 'public/landing/intro1.svg';

...

<Image src={Intro1} alt="intro1"/>

이미지 넣는 것은 성공함.
참고자료 : https://codingapple.com/unit/nextjs-image/

시도1

  • 상대 경로
{
      img: 'public/landing/intro1.svg',
      text: `친구가 생일인데 색다르게
축하해주고 싶지 않나요?`
    },

시도2

  • import 해서 넣기
import Image from 'next/image';
import Intro1 from 'public/landing/intro1.svg';

...

{
      img: Intro1,
      text: `친구가 생일인데 색다르게
축하해주고 싶지 않나요?`
    },
image
{
      img: IntroImg,
      text: `친구가 생일인데 색다르게
축하해주고 싶지 않나요?`
    },
image
{
      Image: IntroImg,
      text: `친구가 생일인데 색다르게
축하해주고 싶지 않나요?`
    },

시도3

const slides = [
  {
    img: <Image src={Intro1} alt='intro1' />,
    text: `친구가 생일인데 색다르게 
축하해주고 싶지 않나요?`,
  },
  {
    img: 'https://cdn.inflearn.com/public/main_sliders/c6f7e091-8994-47fa-a4ae-9172de858f98/328616-eng.png',
    text: `나만의 케이크를 제작하여
친구를 감동시켜주세요!`,
    comment: '그럼 시작해볼까요?',
  },
  {
    img: 'https://cdn.inflearn.com/public/main_sliders/81f40f1c-dc9c-4570-893d-91f67cd34d6b/329351-eng.png',
    backgroundColor: 'white',
    text: '시작하기',
  },
];
image

문제는 slide.img를 <img> 태그의 src 속성에 직접 할당하려고 시도한 부분입니다. <img> 태그의 src 속성은 문자열 형식을 요구하는데, slide.img가 JSX 요소인 <Image> 컴포넌트를 포함하고 있어서 발생하는 오류입니다.

문자열 형식이어서…

‘img : …’ 뒤에

태그 넣지 않고

img: 'public/landing/intro1.svg', 을 넣었더니

(사실 이전에도 시도한 방법) 역시 안 나옴.

이때 public을 지웠더니 해결이 되었다.

(’저렇게 하면 public 폴더 찾아가서’ 이 이유이지 않을까 싶다.)

image