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

推荐订阅源

T
Threatpost
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Engineering at Meta
Engineering at Meta
T
The Blog of Author Tim Ferriss
Recent Announcements
Recent Announcements
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
The Register - Security
The Register - Security
MongoDB | Blog
MongoDB | Blog
U
Unit 42
B
Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
L
LangChain Blog
Stack Overflow Blog
Stack Overflow Blog
P
Privacy International News Feed
L
LINUX DO - 最新话题
博客园_首页
博客园 - Franky
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Tor Project blog
V
Visual Studio Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
P
Privacy & Cybersecurity Law Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
K
Kaspersky official blog
C
Cisco Blogs
博客园 - 【当耐特】
阮一峰的网络日志
阮一峰的网络日志
I
Intezer
罗磊的独立博客
MyScale Blog
MyScale Blog
Last Week in AI
Last Week in AI
A
About on SuperTechFans
G
GRAHAM CLULEY
Y
Y Combinator Blog
Microsoft Security Blog
Microsoft Security Blog
GbyAI
GbyAI
T
Threat Research - Cisco Blogs
P
Proofpoint News Feed
D
DataBreaches.Net
The Hacker News
The Hacker News
Spread Privacy
Spread Privacy
AWS News Blog
AWS News Blog
I
InfoQ
T
The Exploit Database - CXSecurity.com
Simon Willison's Weblog
Simon Willison's Weblog
博客园 - 叶小钗
Project Zero
Project Zero

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 Codility Lesson 3 — FrogJump 알고리즘 연습을 다시 시작했다. Codility Lesson 2 — CyclicRotation Codility Lesson 2 — OddOccurrencesInArray Codility Lesson 1 — BinaryGap 아이패드 구매 하고 3주 써 본 기록 세미나 어떻게 준비해야 할까? HTML은 웹이다 접근성 향상을 위한 이름 짓기 접근성 교육에서 자주 나오는 상위 5가지 질문 접근 가능한 숨김 텍스트 깃북 파일 저장 시 오류 문제 해결 크로스 브라우징이란? 블로그 테마 만들기 시작 2018년 회고 학습에 대한 오해 모르는 사람에게 질문할거면 예의 좀 지켜라 파이썬으로 웹 크롤러 만들기 해쉬 링크 오프셋 조정하기
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('/');
    });
  },
},

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