전체 글
-
NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기Tip 2022. 11. 12. 18:11
npm update 명령어로도 package.json의 dependencies을 업데이트할 수 있습니다. 하지만 npm-check-updates를 사용하면 peer dependencies를 제외하고 의존성을 훼손하지 않는 한도 내에서 최신 버전으로 업데이트를 진행할 수 있습니다. 그림 이제 간단한 사용법을 알아보겠습니다. 1. 설치 npm install -g npm-check-updates 2. 확인 $ ncu Checking package.json [====================] 5/5 100% eslint 7.32.0 → 8.0.0 prettier ^2.7.1 → ^3.0.0 svelte ^3.48.0 → ^3.51.0 typescript >3.0.0 → >4.0.0 untildify
-
Expo SDK 47 정리Expo 2022. 11. 10. 15:40
React 생태계는 확실히 업데이트가 무척 빠른 것 같습니다. Next.js가 13 버전이 나온 것처럼 Expo 역시 47 버전의 Beta가 나온 지 얼마 안 되어 47 버전이 정식 출시되었습니다. React Native CLI를 대체하기 위해 많은 고민과 노력을 하고 있다는 것이 보이는 업데이트였습니다. 아래의 4가지 항목 이외에도 지원하는 React, React Native버전이나 iOS의 최소 지원 버전과 같은 내용들도 있지만 이번 정리는 제가 업데이트를 봤을 때 가장 흥미로웠던 부분들 위주로 정리해 봤습니다. 1. Expo modules 정식 출시 Alpha단계였던 Expo modules가 SDK 46 > SDK 47인 한 번의 업데이트 만에 1.0으로 정식 출시를 했습니다. 개인적으로 무척 기대..
-
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable. 해결하기Git 2022. 10. 29. 18:15
2021.11.10 - [Git] - husky + lint-staged를 활용하여 git hook걸기 husky + lint-staged를 활용하여 git hook걸기 이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // pack kir93.tistory.com 이전 글을 통해 husky를 설정해 사용하던 중 새로운 pc를 사용할 때 husky가 동작하지 않는 문제가 발생했다. 그리고 아래와 같은 hint가 제공되었다. hint: The '.husky/pre-commit' hook was ignored because it's not set ..
-
Next.js Conf에서 발표된 Next.js 13버전 정리Next.js 2022. 10. 29. 17:53
1. 새로운 File System Router인 app Directory(beta) 추가 pages 폴더를 이용해 간단하게 router page를 생성할 수 있다는 것은 Next의 가장 큰 킬링 포인트 중 하나였습니다. 이번 13 버전에서는 이런 Next의 장점과 React@18에서 출시한 Server Component를 효과적으로 사용할 수 있게 해 줄 app 폴더가 추가되었으며, beta상태인 지금과 달리 점점 pages 폴더를 대체해 나가거나 app은 server components용, pages는 client components용으로 적용될 것이라고 예상됩니다. app폴더는 기존 pages폴더에 많은 사람들이 만들었던 components 폴더를 합쳐둔 것 같은 폴더로 공통 layout, head,..
-
메타 태그 중복 생성 방지하기Tip 2022. 10. 27. 16:10
웹 사이트를 제작할 때 기본적으로 전체 웹 페이지에 적용되는 메타 태그를 동적인 주소와 같은 페이지에 접속했을 때만 변경해야 되는 상황이 있습니다. Next.js의 경우 Head태그를 이용해 간단히 변경하고자 하는 페이지에서 다른 메타 태그를 추가해 줄 수 있지만, 이렇게 될 경우 메타 태그가 중복하여 들어가는 문제가 발생합니다. 이를 해결하는 방법은 무척 간단합니다. 바로 변경이 일어날 수 있는 메타 태그에 key 값을 추가해 주는 것으로 간단하게 해결할 수 있습니다. // app.tsx // posts/[id].tsx 이렇게 설정하면 아래와 같이 간단하게 변경할 수 있다.
-
버튼의 크기는 고정한 채 선택 영역만 늘리기CSS 2022. 10. 26. 17:00
프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다. 특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다. 왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다. 물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다. const Button = styled.button` position: relative; width: 20px; height: 20px; border-radius: 10px; background: tomato; &::after { content: ""; ..
-
당신은 사업가입니까 창업 전 스스로에게 물어야 할 질문들 - 캐럴 로스서평 2022. 10. 25. 18:00
이 책은 한 문장으로 요약하자면 이렇게 요약할 수 있다. 사업하지 마세요. 이 책은 처음부터 끝까지 사업을 하지 말아야 될 이유에 대해 현실적이면서도 자세하게 서술하고 있다. 요즘 많은 사람들이 사업에 대해 생각하고 결국 사업가가 되어야 한다고 말하거나 심할 경우 사업을 하지 않는 것은 멍청한 선택이라고 말한다. 이 책은 그런 마음가짐을 가진 이들에게 단호하게 말리는 책이라고 나는 생각한다. 물론 2014년에 발간된 책인 만큼 지금과는 많은 부분에서 차이를 보이는 내용들이 존재한다. 하지만 이 책에서 말하고 있는 핵심 내용만큼은 예전이나 지금이나 크게 달라지지 않는다. 인터넷이 발전하고 이제는 모두가 스마트폰을 들고 다니는 시대가 되었고, 책에서 사무실 임대에 대해 중요하게 말하는 것과 달리 코로나 이후..