디펜던시 버전업 및 lint 적용

Author: cprayer

.yarn/install-state.gz

@@ -53,4 +53,4 @@ HTTP 프로토콜로 필터를 걸고 와이어샤크로 확인했는데 재전
 
 ## 결론
 
-해당 문제를 해결하기까지 시간이 많이 걸렸던 것으로 기억하는데요. 아예 원인이 어디인지도 감을 못 잡았기에 이것저것 확인하고 시도하느라 오래 걸렸습니다. 단순히 동작하는 코드가 아니라 해당 코드가 어떻게 동작하는지, 어느 환경에서 돌아가고 있는지에 대해 좀 더 많은 고민을 해야겠다는 생각이 많이 들었습니다.
+해당 문제를 해결하기까지 시간이 많이 걸렸던 것으로 기억하는데요. 아예 원인이 어디인지도 감을 못 잡았기에 이것저것 확인하고 시도하느라 오래 걸렸습니다. 단순히 동작하는 코드가 아니라 해당 코드가 어떻게 동작하는지, 어느 환경에서 돌아가고 있는지에 대해 좀 더 많은 고민을 해야겠다는 생각이 많이 들었습니다.

data/posts/dns-resolving-timeout-issue/index.md

@@ -106,4 +106,4 @@ git rebase $base
 ## 참고
 
 - [https://stackoverflow.com/questions/2246208/change-first-commit-of-project-with-git](https://stackoverflow.com/questions/2246208/change-first-commit-of-project-with-git)
-- [https://raw.githubusercontent.com/git/git/master/Documentation/RelNotes/1.7.12.txt](https://raw.githubusercontent.com/git/git/master/Documentation/RelNotes/1.7.12.txt)
+- [https://raw.githubusercontent.com/git/git/master/Documentation/RelNotes/1.7.12.txt](https://raw.githubusercontent.com/git/git/master/Documentation/RelNotes/1.7.12.txt)

data/posts/how-to-edit-first-commit/index.md

@@ -10,56 +10,56 @@ draft: false
 
 ## 소개
 
-확률적 자료구조인 Bloom filter를 공부하다가, 다른 확률적 자료구조는 어떠한 것이 있는지 궁금했기에 검색을 해봤더니 위키피디아에서 'Probabilistic data structures' 카테고리 페이지를 찾을 수 있었습니다. [[링크]](https://en.wikipedia.org/wiki/Category:Probabilistic_data_structures)
+확률적 자료구조인 Bloom filter를 공부하다가, 다른 확률적 자료구조는 어떠한 것이 있는지 궁금했기에 검색을 해봤더니 위키피디아에서 'Probabilistic data structures' 카테고리 페이지를 찾을 수 있었습니다. [(링크)](https://en.wikipedia.org/wiki/Category:Probabilistic_data_structures)
 
 ## 확률적 자료구조 리스트
 
 그 중, 한글 자료가 있는 자료구조를 추려 리스트로 만들고 링크를 걸어보았습니다.
 
 ### Bloom filter
 
-* 확률적 자료구조를 이용한 추정 - 원소 포함 여부 판단(Membership Query)과 Bloom Filter, 송기선님의 포스트 [[링크]](https://d2.naver.com/helloworld/749531)
+* 확률적 자료구조를 이용한 추정 - 원소 포함 여부 판단(Membership Query)과 Bloom Filter, 송기선님의 포스트 [(링크)](https://d2.naver.com/helloworld/749531)
 
 ### Count-min sketch
 
-* 확률적 자료구조를 이용한 추정 - 빈도(Frequency) 추정을 위한 Count-Min Sketch, 송기선님의 포스트 [[링크]](https://d2.naver.com/helloworld/799782)
+* 확률적 자료구조를 이용한 추정 - 빈도(Frequency) 추정을 위한 Count-Min Sketch, 송기선님의 포스트 [(링크)](https://d2.naver.com/helloworld/799782)
 
 ### HyperLogLog
 
-* 확률적 자료구조를 이용한 추정 - 유일한 원소 개수(Cardinality) 추정과 HyperLogLog, 송기선님의 포스트 [[링크]](https://d2.naver.com/helloworld/711301)
+* 확률적 자료구조를 이용한 추정 - 유일한 원소 개수(Cardinality) 추정과 HyperLogLog, 송기선님의 포스트 [(링크)](https://d2.naver.com/helloworld/711301)
 
 ### Locality-sensitive hashing
 
-* Random Projection and Locality Sensitive Hashing - lovit님의 포스트 [[링크]](https://lovit.github.io/machine%20learning/vector%20indexing/2018/03/28/lsh/#locality-sensitve-hashing)
+* Random Projection and Locality Sensitive Hashing - lovit님의 포스트 [(링크)](https://lovit.github.io/machine%20learning/vector%20indexing/2018/03/28/lsh/#locality-sensitve-hashing)
 
 ### MinHash
 
-* MinHash란?, wan2land님의 포스트 [[링크]](http://wani.kr/posts/2016/11/25/minhash/)
+* MinHash란?, wan2land님의 포스트 [(링크)](http://wani.kr/posts/2016/11/25/minhash/)
 
 ### SimHash
 
-* Near Duplicate Documents Detection SimHash 계산 방법, aragorn님의 포스트 [[링크]](https://github.com/aragorn/home/wiki/Near-Duplicate-Documents-Detection#simhash-%EA%B3%84%EC%82%B0-%EB%B0%A9%EB%B2%95)
+* Near Duplicate Documents Detection SimHash 계산 방법, aragorn님의 포스트 [(링크)](https://github.com/aragorn/home/wiki/Near-Duplicate-Documents-Detection#simhash-%EA%B3%84%EC%82%B0-%EB%B0%A9%EB%B2%95)
 
 ### Skip List
 
-* Skip List, 김종욱님의 포스트 [[링크]](https://www.slideshare.net/jongwookkim/skip-list)
+* Skip List, 김종욱님의 포스트 [(링크)](https://www.slideshare.net/jongwookkim/skip-list)
 
 ### Treap
 
-* Treap, namnamseo님의 포스트 [[링크]](http://namnamseo.tistory.com/entry/Treap)
+* Treap, namnamseo님의 포스트 [(링크)](http://namnamseo.tistory.com/entry/Treap)
 
 ## 그 외 자료
 
 그 이외에도 이러한 자료들을 찾을 수 있었습니다.
 
-* 실시간 추천엔진 머신한대에 구겨넣기, 하용호님 포스트 [[링크]](https://www.slideshare.net/deview/261-52784785)
+* 실시간 추천엔진 머신한대에 구겨넣기, 하용호님 포스트 [(링크)](https://www.slideshare.net/deview/261-52784785)
 
-* 게임 서비스 플랫폼을 지탱하는 알고리즘, 전이삭님 포스트 [[링크]](https://www.slideshare.net/isaacjeon/ss-96910180)
+* 게임 서비스 플랫폼을 지탱하는 알고리즘, 전이삭님 포스트 [(링크)](https://www.slideshare.net/isaacjeon/ss-96910180)
 
-전이삭님의 유튜브 발표 영상도 있어 같이 링크합니다. [[링크]](https://www.youtube.com/watch?v=yoVmf-9fW1c)
+전이삭님의 유튜브 발표 영상도 있어 같이 링크합니다. [(링크)](https://www.youtube.com/watch?v=yoVmf-9fW1c)
 
 ## 정리
 
 1. 평균적인 성능(시간복잡도)을 보장할 때 쓰입니다.
 
-2. 정확한 값이 아닌 작은 오차를 가진 근사값이여도 상관이 없을 때 쓰입니다. 대신 저장 공간이나 속도 측면에서 많은 이득을 볼 수 있습니다.
+2. 정확한 값이 아닌 작은 오차를 가진 근사값이여도 상관이 없을 때 쓰입니다. 대신 저장 공간이나 속도 측면에서 많은 이득을 볼 수 있습니다.

data/posts/probabilistic-data-structures-link/index.md

@@ -17,8 +17,7 @@ draft: false
 
 레디스 센티널은 내부적으로 마스터가 odown으로 판단되었을 때, replicaof no one 명령어를 통해 페일오버를 수행하여 레플리카를 마스터로 승격시킨다 
 
-> For a failover to be considered successful, it requires that the Sentinel was able to send the REPLICAOF NO ONE command to the selected replica, and that the switch to master was later observed in the INFO output of the master.
-([관련 링크](https://redis.io/docs/manual/sentinel/#configuration-propagation))
+> For a failover to be considered successful, it requires that the Sentinel was able to send the REPLICAOF NO ONE command to the selected replica, and that the switch to master was later observed in the INFO output of the master. ([관련 링크](https://redis.io/docs/manual/sentinel/#configuration-propagation))
 
 하지만 모든 레플리카가 아래와 같은 이유로 마스터로 승격시키기에 적합하지 않은 경우가 발생할 수 있다
 > A replica that is found to be disconnected from the master for more than ten times the configured master timeout (down-after-milliseconds option), plus the time the master is also not available from the point of view of the Sentinel doing the failover, is considered to be not suitable for the failover and is skipped. ([관련 링크](https://redis.io/docs/manual/sentinel/#replica-selection-and-priority))

data/posts/redis-manually-force-a-failover/index.md

@@ -39,4 +39,4 @@ HTTP Keepalive를 설정하면 기존 TCP 커넥션을 재사용하게 됩니다
 ## 참고 자료
 
 * <http://tldp.org/HOWTO/TCP-Keepalive-HOWTO/usingkeepalive.html>
-* <https://en.wikipedia.org/wiki/HTTP_persistent_connection>
+* <https://en.wikipedia.org/wiki/HTTP_persistent_connection>

data/posts/tcp-keepalive-and-http-keepalive/index.md

@@ -25,12 +25,13 @@
   },
   "dependencies": {
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-    "@graphql-codegen/add": "^1.2.0",
-    "@graphql-codegen/cli": "^1.9.0",
-    "@graphql-codegen/typescript": "^1.2.0",
+    "@graphql-codegen/add": "^5.0.3",
+    "@graphql-codegen/cli": "^5.0.5",
+    "@graphql-codegen/typescript": "^4.1.6",
     "babel-eslint": "^10.1.0",
     "change-case": "^5.4.4",
     "codeclimate-test-reporter": "^0.5.1",
+    "eslint-config-xo-react": "^0.28.0",
     "gatsby": "^5.14.3",
     "gatsby-link": "^5.14.1",
     "gatsby-plugin-gtag": "^1.0.13",
@@ -53,60 +54,60 @@
     "react-helmet": "^6.1.0",
     "react-redux": "^8.0.0",
     "react-scripts": "^5.0.1",
-    "redux-devtools-extension": "^2.13.8",
+    "redux-devtools-extension": "^2.13.9",
     "semantic-ui-react": "^2.1.5",
     "slash": "5.1.0",
     "ts-loader": "^9.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/preset-typescript": "^7.27.0",
-    "@storybook/addon-actions": "^7.6.20",
-    "@storybook/addon-knobs": "^5.3.21",
-    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-links": "^8.6.12",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/addon-options": "^5.3.21",
-    "@storybook/react": "^7.0.0",
+    "@storybook/react": "^8.6.12",
     "@types/acorn": "^6.0.4",
     "@types/enzyme": "^3.10.18",
-    "@types/jest": "^24.9.1",
-    "@types/lodash-es": "^4",
-    "@types/node": "^12.20.55",
-    "@types/reach__router": "^1.2.4",
+    "@types/jest": "^29.5.14",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.14.1",
+    "@types/reach__router": "^1.3.15",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-helmet": "5.0.8",
     "@types/react-redux": "^7.0.9",
     "@types/react-test-renderer": "^16.8.1",
-    "@types/semantic-ui": "^2.2.7",
-    "@types/storybook-readme": "^5.0.4",
-    "@types/webpack-env": "^1.13.9",
+    "@types/semantic-ui": "^2.2.9",
+    "@types/storybook-readme": "^5.0.12",
+    "@types/webpack-env": "^1.18.8",
     "enzyme": "^3.11.0",
-    "eslint": "^9.25.0",
+    "eslint": "^9.25.1",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-config-xo-react": "0.19.0",
-    "eslint-plugin-flowtype": "^2.0.0",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-config-xo-space": "^0.35.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "flat": "^6.0.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
-    "lint-staged": "8.1.7",
+    "lint-staged": "15.5.1",
     "mkdirp": "^3.0.1",
     "plop": "^4.0.1",
     "raw-loader": "^4.0.2",
     "react-test-renderer": "^18.0.0",
-    "remark-cli": "^6.0.1",
+    "remark-cli": "^12.0.1",
     "remark-frontmatter": "^5.0.0",
-    "remark-preset-lint-recommended": "^3.0.2",
+    "remark-preset-lint-recommended": "^7.0.1",
     "storybook-readme": "^5.0.9",
-    "stylelint": "^10.0.1",
-    "stylelint-config-standard": "^18.3.0",
+    "stylelint": "^16.18.0",
+    "stylelint-config-standard": "^38.0.0",
     "ts-jest": "^29.3.2",
     "ts-lint": "4.5.1",
-    "typescript": "^5.8.3",
+    "typescript": "^4.9.5",
     "xo": "^0.60.0"
   },
   "resolutions": {
@@ -164,7 +165,7 @@
     ]
   },
   "xo": {
-    "extends": "xo-react/space",
+    "extends": "xo-space",
     "space": true,
     "rules": {
       "no-case-declarations": 0,

package.json

@@ -9,7 +9,7 @@
  */
 
 /* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (width <= 767px) {
   [class*="mobile hidden"],
   [class*="tablet only"]:not(.mobile),
   [class*="computer only"]:not(.mobile),
@@ -21,7 +21,7 @@
 }
 
 /* Tablet / iPad Portrait */
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+@media only screen and (width >= 768px) and (width <= 991px) {
   [class*="mobile only"]:not(.tablet),
   [class*="tablet hidden"],
   [class*="computer only"]:not(.tablet),
@@ -33,31 +33,31 @@
 }
 
 /* Computer / Desktop / iPad Landscape */
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (width >= 992px) and (width <= 1199px) {
   [class*="mobile only"]:not(.computer),
   [class*="tablet only"]:not(.computer),
   [class*="computer hidden"],
   [class*="large screen only"]:not(.computer),
   [class*="widescreen only"]:not(.computer),
-  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
+  [class*="or lower hidden"]:not(.tablet, .mobile) {
     display: none !important;
   }
 }
 
 /* Large Monitor */
-@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+@media only screen and (width >= 1200px) and (width <= 1919px) {
   [class*="mobile only"]:not([class*="large screen"]),
   [class*="tablet only"]:not([class*="large screen"]),
   [class*="computer only"]:not([class*="large screen"]),
   [class*="large screen hidden"],
   [class*="widescreen only"]:not([class*="large screen"]),
-  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
+  [class*="or lower hidden"]:not(.computer, .tablet, .mobile) {
     display: none !important;
   }
 }
 
 /* Widescreen Monitor */
-@media only screen and (min-width: 1920px) {
+@media only screen and (width >= 1920px) {
   [class*="mobile only"]:not([class*="widescreen"]),
   [class*="tablet only"]:not([class*="widescreen"]),
   [class*="computer only"]:not([class*="widescreen"]),

src/css/responsive.css

@@ -77,7 +77,7 @@
   display: none;
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (width <= 700px) {
   .masthead.segment {
     min-height: 350px;
   }