들어가며
오늘은 꽤 멋진 extendsion에 대한 소개글을 가져왔습니다.
바로 Wappalyzer 입니다.
이름만 들어서는 알 수 없는 이 친구는 바로 사이트의 기술 스택을 분석해주는 도구입니다.
저는 사이드프로젝트를 할때 다른 기술스택을 써보려고 합니다.
매번 어떤걸 쓰면 좋을지 몰라 다른 회사의 기술스택으로 해보려고 하는데요.
그럴때 도움을 주는 Wappalyzer에 대해 간단히 살펴보고 이 도구가 어떤 이점을 주는지 확인해보겠습니다.
Wappalyzer
Wappalyzer의 대문 페이지를 가져온 것입니다. 설명에 쓰인 대로 "웹사이트의 기술을 식별해준다" 라네요.
사용하는 방법은 아주 간단합니다.
설치방법
그냥 크롬의 익스텐션으로 설치하면 끝입니다.
설치 링크는 여기입니다.
Wappalyzer - Technology profiler
Identify web technologies
chrome.google.com
사이트 식별
설치를 한 다음에 이전에 제가 만들었던 골프 플랫폼에 대한 분석을 진행해보겠습니다.
음.. 놀랍도록 제대로 식별해줍니다.
해당 프로젝트의 package.json를 확인해보면 아래와 같습니다.
사이트 프로젝트이다 보니 사용해보고 싶은 기술을 하나둘씩 붙여서 난장판이 되었지만
// package.json
"dependencies": {
"@emailjs/browser": "^3.6.2",
"@emotion/cache": "latest",
"@emotion/react": "latest",
"@emotion/server": "latest",
"@emotion/styled": "latest",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^5.0.0-beta.1",
"@mui/icons-material": "^5.0.4",
"@mui/material": "^5.0.0",
"@sentry/react": "^6.14.3",
"@sentry/tracing": "^6.14.3",
"@tosspayments/payment-sdk": "^1.0.2",
"@tosspayments/sdk": "^1.2.0",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"axios": "^0.23.0",
"clsx": "^1.1.1",
"framer-motion": "^6.2.8",
"immer": "^9.0.12",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"next": "^12.0.1",
"next-seo": "^4.28.1",
"node-sass": "^6.0.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-facebook-pixel": "^1.0.4",
"react-hook-form": "^7.17.4",
"react-lottie": "^1.2.3",
"react-player": "^2.9.0",
"react-query": "^3.34.20",
"react-swipeable-views": "^0.14.0",
"react-transition-group": "^4.4.2",
"recoil": "^0.4.1",
"sass": "^1.43.2",
"swiper": "^7.0.8",
"uuidv4": "^6.2.12",
"yarn": "^1.22.17"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-typescript": "^7.16.7",
"@storybook/addon-actions": "^6.5.0-alpha.9",
"@storybook/addon-essentials": "^6.5.0-alpha.9",
"@storybook/addon-links": "^6.5.0-alpha.9",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.0-alpha.9",
"@storybook/manager-webpack5": "^6.5.0-alpha.9",
"@storybook/react": "^6.5.0-alpha.9",
"@tailwindcss/line-clamp": "^0.3.0",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/jest": "^27.4.0",
"@types/lodash": "^4.14.176",
"@types/node": "^12.12.21",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"autoprefixer": "^10.4.1",
"babel-jest": "^27.4.6",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^1.13.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "latest",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "latest",
"jest": "^27.4.7",
"postcss": "^8.4.5",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.2.0",
"prettier": "2.6.2",
"react-docgen-typescript-loader": "^3.7.2",
"storybook-mobile": "^1.0.0",
"tailwindcss": "^3.0.11",
"ts-jest": "^27.1.2",
"typescript": "^4.4.4",
"webpack": "^5.58.2"
}
비교해보면 웬만한 정보는 나온다고 봐도 무방합니다.
가장 핵심은 React, Next과 Styled-component, Emotion, Tailwind부터 UI라이브러리인 MUI까지 찾아주는 모습을 학 인할 수 있습니다.
그밖에 이슈 트래커인 Sentry, 로그인을 위해 활용한 Kakao sdk를 추적해줬고 CDN, 분석 탭에서 어떤 툴을 썼는지도 나옵니다.
그리고 배포를 AWS의 Amplify로 했는데 이 부분도 PaaS로 잡아줬네요.
다만 상태 관리 도구를 Recoil를 사용했는데 이 부분은 나오지 않았습니다.
사이트 식별 #2 토스
토스의 사이트를 식별해보겠습니다. 이전에 한번 블로그를 통해 설명해드린 Hotjar가 눈에 띄네요.
[UX/UI] 유저 행동 데이터를 티끌모아태산으로 (hotjar, google analytics)
들어가며 바야흐로 빅데이터의 시대에 살고 있는 우리들은 유저님들의 행동 하나하나에 의미를 담아 판단하고 또 개발해야합니다. 그런데 쉬우면서도 어려운 것이 바로 리뷰를 받는 것입니다.
all-dev-kang.tistory.com
그밖에 MVVM 패턴을 위한 JS 라이브러리 knockoutjs도 보이고요. 토스의 깔끔한 UI를 위한 LottieFiles로 보입니다.
사이트 식별 #3 카카오 엔터프라이즈
다음으론 카카오 엔터프라이즈의 사이트를 봐볼까요?
슬라이더를 위한 Swiper slider, clipboard.js 등이 보입니다.
마치며
아주 간단한 사용법과 토스와 카카오엔터프라이즈의 기술 스택에 대해 살펴보았습니다.
이러한 사이트 외에도 해당 기술 스택을 미리 조사해서 제공하는 사이트들도 있습니다. (https://www.codenary.co.kr/)
하지만 세부적은 툴까진 안 나오고 큰 틀에서의 기술 스택이 나옵니다.
그러니 Wappalyzer가 때론 더 깊은 정보를 줄 수 있습니다.
누군가는 다른 회사의 스택을 봐서 뭐하냐? 그게 중요하냐?라고 생각합니다.
본인만의 기준과 근거를 가지고 스택을 선택해서 적용하면 된다도 정답이긴 합니다만,
제가 생각한 답은 다른 회사의 스택도 너무너무 너무 중요하다입니다.
저런 회사에서 사용하고 있는 라이브러리나 도구들은 래퍼런스가 될 수밖에 없습니다.
수많은 개발자 형누님들이 치열하게 고민하고 논의해서 선택된 결과물이니 말입니다.
또한 이직 때나 프로젝트에 도입할 때 이러한 정보는 크나큰 힘이 됩니다.
그러니 여러분 사이트 프로젝트를 하실 때 매번 익숙한 스택보다는 다른 회사가 사용하는 혹은 처음 보는 스택으로 해보시는 건 어떨까요?
끝.
'개발 > 개발지식' 카테고리의 다른 글
| [포트폴리오] AI로 만드는 연차별 포트폴리오 (ChatGPT) (1) | 2023.01.27 |
|---|---|
| [리액트] 글로벌한 웹을 향하여 #2(google sheets, 자동화) (3) | 2022.10.07 |
| [클린코드] 카멜, 파스칼은 가라. 세종대왕 표기법이 온다 (네이밍 컨벤션) (1) | 2022.07.25 |
| [이직] 4년차 프론트엔드 개발자의 이직 후기 (8) | 2022.06.12 |
| [개발환경] package.json 다이어트 여정기 (depcheck, npm-check) (0) | 2022.05.19 |
댓글