4/14 TIL 포트폴리오 3일차

정민세·2023년 4월 14일

오늘은 헤더를 가장한 네비게이션 바와 인트로 부분을 개발했다. Next.js 설치부터 SCSS 설정, 디렉토리를 정해놓지 않고 하다보니 번복하게 됐다. 정답이 정해져 있지 않다보니 수정을 하다가도 이렇게 해도 되는건가 싶다..

💩 Next.js

npx create-next-app@latest --experimental-app

프레임워크 설치 명령어이다. 처음엔 Next.js 공식문서에 있는 명령어로 설치를 했다가 이전 버전의 Next.js가 설치되어 당황했다. 이번에 새로나온 13 베타버전을 적용하기 위하여 공식 깃허브에서 찾아냈다. 이번 처음 Next.js를 쓰긴 하지만 이전 버전과 정적 라우터 방식이 달라 헷갈리는게 있었다.

├── /src
├── /app
├── /page
└── page.js
├── /write
└── page.js

폴더명이 Route가 되는 구조인데 파일명이 무조건 page.js여야 XML이 출력된다는 것이다...
파일안 Element명은 상관이 없지만 파일명을 무조건 page.js로 설정해줘야한다는 것이다.
개인적으로 VSC로 코딩할 때 파일명을 보면서 각 파일이 어떤 역할을 하는지 보는 스타일인데 좀 불편했다..
게시판에 물어보니 다른 사람도 느꼈는지 이전 버전 스타일로 돌려놓으라고 카더라

참고로 이전 버전 스타일은

├── /src
├── /pages
└── page.js
└── write.js

/pages 폴더명에 파일을 생성하면 자동으로 파일명에 따라 Route가 설정된다.

💄 Scss...

처음에 레포지토리에 올릴 파일들을 gitignore에 작성할 때 scss와 컴파일된 module.css, module.css.map 들이 다같이 올라갈 필요성을 느끼지 않아 컴파일된 CSS파일만 올라가게 설정했다. 하지만 생각해보니 나중에 새로 클론을 할 일이 생겼을 때 scss 안에 있는 mixin이나 변수들이 클론되지 않게 되면 새로 설정 해야 된다는걸 깨닫고 황급히 반대로 scss만 올라가도록 설정했다.. ~~어차피 컴파일 해주는 확장프로그램 쓰면 알아서 생성되니깐 ~~~

💄 Scss @use...

오늘 하루는 개발보다 구글링하는 시간이 더 많았던 것 같다.. 학습과 동시에 프로젝트에 녹이려다보니 너무 미숙해서 미칠 지경이였다. 우선 처음엔 globals.scss에 reset.css로 초기설정을 하고 globals.scss에 공통으로 쓸 mixin과 변수들을 넣고 따로 뽑아 쓸 수 있을 줄 알았는데 모두가 @import와 같은 역할을 하는 @use를 사용하고 객체 뽑아쓰듯이 쓰라는데 그렇게 되면 import 된 scss 파일 안에 있는 모든 속성들이 가져와지는 것이다.. 결국엔 공통으로 쓸 mixin.scss 파일을 따로 만들었다. chatGPT에게도 물어봤는데 chatGPT가 알려준 방법은 아예 통하지가 않았다.. ~~문제는 아마도 내 역량이 젤 크겠지 ㅎㅎ..~~

Typing animation

이번에 첫번째로 쓸 애니메이션 효과는 타자치는 효과였다.

.typingText {
  width: 40.5ch;
  border-right: 0.05em solid black;
  border-right: 2px solid;
  animation: typing 2s steps(30), blink 1s infinite;
  white-space: nowrap;
  overflow: hidden;
  font-size: 2em;
  position: absolute;
  color: white;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

글자 길이만큼 ch라는 단위로 조정해주었고, border-right로 마우스 커서 효과를 주었다.
@keyframes 사용하여 시작하는 범위와 커서 깜빡임의 자연스러움을 위해 border-color를 주었다.
이 애니메이션이 글자가 숨어져있다가 깜빡이면서 나타나는 원리라 overflow: hidden을 줌으로써 타자효과가 발생한다.

🌠 Image

import React from "react";
import Image from "next/image";
import intro from "./Intro.module.css";

export default function Intro() {
  return (
    <div className={intro.wrapper}>
      <Image
        src={"/semin.png"}
        alt="개발자"
        width="10000"
        height="10000"
        className={intro.image}
      />
      <span className={intro.typingText}>
        안녕하세요 배울 때 늘 흥분하는 프론트엔드 개발자 정세민입니다.
      </span>
    </div>
  );
}

Next.js 자체에서 Image라는 시멘틱 태그를 제공한다. 자체적으로 lazy Loading, 이미지 사이즈 최적화, placeholder를 제공한다.

lazy loading

lazy loading에 대해서 간단히 설명을 하자면, 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다.

Next/Image를 사용하게 되면 자동으로 lazy loading이 적용이 된다. 물론 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다. Image 컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 “eager” 값을 설정하면 된다. priorty 값을 설정하는 것이 더 권장되는 방식이다.

이미지 사이즈 최적화

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원한다.

Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공한다.

placeholder 제공

어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 것을 CLS(Cumulative Layout Shift)라고 부른다.

Next/Image는 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공한다. 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 한다.

placeholder는 빈 영역 또는 blur 이미지(로컬 이미지의 경우 build 타임에 생성, 리모트 이미지의 경우에는 base64로 인코딩된 data url 을 지정해 줘야 함)로 적용할 수도 있고, 커스텀 하게 설정할 수도 있다.

출처 https://fe-developers.kakaoent.com/2022/220714-next-image/