惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
Engineering at Meta
Engineering at Meta
D
DataBreaches.Net
月光博客
月光博客
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
U
Unit 42
腾讯CDC
爱范儿
爱范儿
J
Java Code Geeks
有赞技术团队
有赞技术团队
Blog — PlanetScale
Blog — PlanetScale
N
Netflix TechBlog - Medium
B
Blog
Stack Overflow Blog
Stack Overflow Blog
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Y
Y Combinator Blog
大猫的无限游戏
大猫的无限游戏
Microsoft Azure Blog
Microsoft Azure Blog
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

The Tracks of mulder21c

Atomic Design + Storybook 적용 후기 json-server에 사용자 인증 구현하기 개발환경 WSL2 + zsh로 갈아타기 pass function as props in vue 2020년 회고 colum flexbox에서 padding bottom 문제 해결 Nuxt를 통해 보는 프론트엔드 개발자가 하는 일 JS to SCSS 변환 Nuxt + Storybook 통합 하기 2020 이직 이야기 2020 이직 이야기 2020 이직 이야기 2020 이직 이야기 Windows에서 PM2 실행 오류 해결 오픈톡 정지에 대한 카카오톡 고객센터 후기 배려에 대한 단상 학습이 잘 되지 않는 이유 웹팩 4 마이그레이션 삽질기 babel 7 업데이트 후 node_modules 패키지가 변환되지 않는다면? white space는 4px이다? 정말? 2020년 시간 관리를 위해서 도입 한 툴들 Codility Lesson 5 — PassingCars 2019년 회고 Codility Lesson 4 — MissingInteger Codility Lesson 4 — MaxCounters Codility Lesson 4 — FrogRiverOne Codility Lesson — PermCheck 착각은 자유가 아닌각 세미나 진행 후기 Codility Lesson 3 — tapeEquilibrium Codility Lesson 3 — PermMissingElm
Nuxt Router kebab-case 처리
멀더끙 · 2020-10-17 · via The Tracks of mulder21c

Nuxt를 사용할 때 page component 파일을 PascalCase 혹은 camelCase로 생성하게 되면 router name 역시 PascalCase, camelCase로 고스란히 생성된다.
물론 case-insensitive 처리해도 되지만, URL에 대소문자가 섞여 노출 되는게 썩 좋은 경험은 아니었어서 kebab-case로 노출되도록 변경이 필요했다.

단순하게 page component 파일을 생성할 때 파일명 자체를 kabab-case에 맞추어서 생성해도 충분히 되기는 한데, 다른 컴포넌트 파일들과의 일관성을 맞추기 위해서 page에만 적용할 별도의 규칙을 만드는 것도 썩 마음에 들지 않아, 차라리 Nuxt에서 router를 생성할 때 파일명으로부터 kebab-case 처리하도록 만들었다.

다행히(?) Nuxt에서는 라우터 확장을 위해 extendRoutes 옵션을 제공하고 있어 이를 활용하여 처리가 가능했다.

const convertKebabCase = require('lodash/kebabCase');
...
router: {
  extendRoutes(routes, resolve) {
    routes.forEach(route => {
      route.path =
        route.path
          .split('/')
          .map(path => convertKebabCase(path))
          .join('/');
    });
  },
},

단순히 path를 segmentation하여 각각을 kebab-case로 변경시키고 다시 합치는 방식으로...

이렇게 해서 잘 되는 줄 알았...는데... dynamic router에서 다시 문제가 발생했다.
lodash/convertKebabCase가 dynamic router path에 붙어있는 ":"를 제거해버렸... ㅋㅋㅋ

하여, path에 ":"의 존재 여부에 따라 변경 되도록 바꾸었고,

const convertKebabCase = require('lodash/kebabCase');
...
router: {
  extendRoutes(routes, resolve) {
    routes.forEach(route => {
      route.path =
        route.path
          .split('/')
          .map(path => {
              if (/^\:/.test(path)) return path;
              return convertKebabCase(path);
            })
          .join('/');
    });
  },
},

현재까지는 아직 아무런 문제를 일으키지 않고 잘 돌아가고 있다