🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

Next.js의 Image src 에러

Image 컴포넌트의 src에 백엔드에서 받아온 이미지 url을 넣어주었는데, 아래와 같은 에러가 발생했다.

Error: Invalid src prop...

이는 Next.js 공식문서에서도 확인할 수 있는데, 외부 url을 통해 이미지를 가져올 때 악성 이미지를 가져오지 않기 위함이라고 한다. 해결법은 생각보다 너무 간단하다. next.config.js 파일을 생성하고 아래와 같이 작성해주면 된다.

module.exports = {
  images: {
    domains: ['images.unsplash.com'], // 외부 url을 통해 이미지를 가져올 때, 허용할 도메인을 적어준다.
  },
};

PWA가 가능하게 해주는 서비스워커?

서비스워커란 우리가 작성한 웹 앱을 브라우저가 백그라운드에서 실행할 수 있게 해주는 브라우저 기능이다. 기본적으로 서비스워커는 우리 서비스의 실행유무와 상관없이 백그라운드에서 실행되기 때문에 브라우저가 종료되어도 서비스워커는 계속 실행된다. 이를 이용해서 우리는 브라우저가 종료되어도 서비스워커가 실행되는 동안에는 푸시 알림을 보내거나, 오프라인에서도 웹 앱을 사용할 수 있는 것이다. 조금 단순하게 생각하면 브라우저와 네트워크 사이에서 프록시 서버의 역할처럼 동작한다고 보면된다. 예를 들면 오프라인 상태에서도 서비스워커는 브라우저와 네트워크 사이에서 요청을 받아서 캐싱된 데이터를 응답해준다. 또한 우리가 오프라인일 때 채팅을 보내거나 특정 유저의 알림을 받아야되는 상황에서 온라인이 되자마자 보냈던 채팅이 전송된다거나 알림이 뜨는 것도 서비스워커를 통해 가능하다.

마이그레이션, 포팅, 컨버팅

아주 사소한 차이지만(사실 거의 마이그레이션이라는 표현을 쓰지만), 이력서를 작성하다가 React에서 Next로 마이그레이션한다는 말이 맞는건가 싶어서 찾아보았다.

• 마이그레이션: 기존 시스템을 새로운 시스템으로 옮기는 것, 보통은 더 나은 운영 체제나 더 나은 하드웨어로 옮기는 것을 의미한다.
• 포팅: 컴퓨터 프로그램을 다른 컴퓨터 플랫폼으로 옮기는 것을 의미한다. 예를 들어 iOS 동작하는 어플리케이션을 안드로이드에서 동작하게 하는 것도 포팅이다.
• 컨버팅: 컴퓨터 프로그램을 다른 프로그래밍 언어로 옮기는 것을 의미한다. 예를 들어 C++로 작성된 프로그램을 Java로 옮기는 것도 컨버팅이다.

위의 정의들을 보니 보통 서비스 개발자들이 사용하는 마이그레이션은 컨버팅에 가까운 것 같다. 딱 잘라서 정해진 표현들은 아니니까 그냥 마이그레이션으로 써도 큰 문제는 없을 것 같다.

robots.txt와 sitemap.xml

SEO를 위해 robots.txt와 sitemap.xml를 추가해주었다.

• robots.txt: 검색엔진이 사이트를 크롤링할 때 어떤 페이지를 크롤링할지, 어떤 페이지를 크롤링하지 않을지를 정의해주는 파일이다.
• sitemap.xml: 검색엔진에게 사이트의 구조를 알려주는 파일이다.

보통은 이 둘을 추가해주면 검색엔진이 사이트를 크롤링할 때 더 효율적으로 크롤링을 할 수 있다고 한다. 또한 sitemap.xml을 추가해주면 검색엔진이 사이트를 크롤링할 때 더 빠르게 크롤링을 할 수 있다고 한다(페이지의 구조를 더 명확하게 알려주니까!).

Next에서는 위 두 파일을 app 최상위 루트에 추가하거나 간단한 js(혹은 ts) 코드로 생성할 수 있다. 나는 간단하게 ts로 작성해서 생성해주었다.

robots.ts

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://best-robbins-fe.vercel.app/sitemap.xml',
  };
}

sitemap.ts

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://best-robbins-fe.vercel.app/',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://best-robbins-fe.vercel.app/size',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.8,
    },
    {
      url: 'https://best-robbins-fe.vercel.app/ingredient',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.5,
    },
  ];
}

package.json의 틸드와 캐럿

package.json에서 버전을 명시할 때 ~와 ^를 사용하는데, 이 둘의 차이점을 몰랐다. 찾아보니 아래와 같은 차이가 있다고 한다.

기본적으로 js 라이브러리의 버전은 Semantic Versioning을 따르는데, 그 구조는 아래와 같다.

MAJOR.MINOR.PATCH

- MAJOR: 기존 버전과 호환되지 않는 새로운 버전(하위 호환되지 않음)
- MINOR: 기존 버전과 호환되는 새로운 기능이 추가된 버전(하위 호환됨)
- PATCH: 기존 버전과 호환되는 버그 수정 버전(하위 호환됨)

위의 내용을 기억하면 틸드와 캐럿은 구분하기 쉽다.

• 틸드(~): MAJOR.MINOR까지만 고정하고 PATCH는 최신 버전으로 업데이트한다. 예를 들어 ~1.2.3이라고 하면 1.2.3 버전을 사용하고, 1.2.4 버전이 나오면 1.2.4 버전으로 업데이트한다. 즉, 버그 수정 버전은 업데이트하지만 새로운 기능이 추가되는 버전은 업데이트하지 않는다.

• 캐럿(^): MAJOR까지만 고정하고 MINOR.PATCH는 최신 버전으로 업데이트한다. 예를 들어 ^1.2.3이라고 하면 1.2.3 버전을 사용하고, 1.3.0 버전이 나오면 1.3.0 버전으로 업데이트한다. 즉, 새로운 기능이 추가되는 버전은 업데이트하지만 하위 호환되지 않는 MAJOR 업데이트는 하지 않는다.

아무래도 하위호환이 보장되는 선에서 최신 버전으로 업데이트하는 게 편하기 때문에 보통 기본적으로 캐럿을 사용한다.

이 때, 특이사항으로 라이브러리의 버전이 1.0.0 이전인 경우는 pre-release라고 해서 MAJOR 업데이트가 아니라도 하위호환이 되지 않는 api 변경이 빈번하게 일어난다. 이런 경우에는 틸드와 캐럿 모두 틸드처럼 동작한다고 한다. 즉, 최대한 하위호환을 보장하면서 버그 수정 버전만 업데이트한다.

📝 회고

아직 완벽하진 않지만, 어느정도 기본 구현으로는 Next.js로 마이그레이션을 맞췄다! 리드미도 1차 정리가 끝이 났고..! 후… 이제 남은 페이지랑 더 구현하고 싶었던 기능들을 얼른 구현해야지!!!!!!

참고

• Next Image safely allow
• 서비스 워커란?
• 마이그레이션, 포팅, 컨버팅
• Next robots.txt
• Next sitemap.xml
• npm package.json에서 틸드(~) 대신 캐럿(^) 사용하기
• package.json의 틸드와 캐럿