본문 바로가기
반응형

분류 전체보기698

[Node.js] change default node version from nvm (ft. node version list) nvm 기본 노드 버전 변경하기 nvm을 사용해 특정 버전의 node를 설치하게 되면 처음 설치한 그 버전이 자동으로 기본 버전으로 설정된다. 사실 nvm을 사용해 버전을 변경하다 보면 어차피 버전명을 입력하면 되기 때문에 크게 영향을 주는 부분은 아닌데, 이게 버전을 입력하다보면 좀 귀찮을 때가 많다. 하지만 default version의 경우에는 다음과 같은 명령어로 손쉽게 변경하여 사용이 가능하다. nvm use default 뭐 아무튼 일단 나 같은 경우에는 이런식의 default 사용이 편하기 때문에 변경하는 방법에 대해 기록해두고자 한다. 1. nvm default node version check 우선 목록을 살펴보면 다음과 같다. nvm list 현재 nvm으로 관리하고 있는 노드 버전은 .. 2023. 1. 9.
[PhpStorm] snippet 추가 하기 (ft. Live Templates) Live Templates 추가하기 VSCode만 사용하던 나에게 PhpStorm이란 녀석은 참으로 낯설었다. WebStorm은 그나마 많이 들어봤는데 같은 곳에서 만들었나 보다. WebStorm을 사용해보지 않아서 PhpStorm과 동일한지는 알 수 없지만 같기를 소망한다. VSCode에서 확장플러그인을 설치하면 편리하게 snippet들을 제공해주어 개발에 편리한데, 이 phpstorm에는 이런 게 없나 찾아보다가 snippet과 동일한 Live Templates라는 녀석을 찾아내었다. 확인해보니 기본적으로 템플릿은 만들어주는 약어들이 등록되어 있었으나, 회사의 개발 환경이 Nuxt + Composition API + Typescript + SCSS이다 보니 이에 맞는 템플릿이 존재하지 않았다. 그래서.. 2023. 1. 8.
[TISTORY] 티스토리에 코드펜(CodePen) 적용하기 티스토리에 코드펜 적용하기 티스토리에 CodePen을 적용하기 이전에 당연히 해당 사이트의 계정이 필요하다. https://codepen.io/trending CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 우선적으로 사이트에 계정이 있다는 가정하에 진행하도록 한다. 1. 코드펜 작업하기 로그인을 한 후 좌측 상단에 [Pen]이라는 메뉴를 선택해서 들어가 주도록 한다. Pen 메뉴에 들어가게 되면 코드를 입력할 수 있는 화면.. 2023. 1. 8.
[CSS] 글자를 줄 바꿈 없이 한 줄로 표현하기 (ft. white-space/overflow/text-overflow) CSS를 통해 텍스트 글자를 줄 바꿈 없이 한 줄로 표현하는 방법에 대해 알아보자. 보통 글자가 길면 자동 줄바꿈이 일어나 표현되고는 하는데, 만약 칸의 여유가 없고 디자인적으로도 넘치는 부분을 잘라내고 한 줄로만 표현하고자 한다면 이는 javascript를 사용하지 않고도 css만으로도 표현이 가능하다. 가장 흔하게 알려진 방법으로는 이 아래 3가지 속성을 주로 사용하여 제어를 하는 방법이다. white-space : 요소 내부의 공백을 처리하는 방법에 대한 설정 ( normal|nowrap|pre|pre-line|pre-wrap|initial|inherit ) text-overflow : 공백 문자를 처리하는 법 즉, 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법에 대한 설정이며 잘리거나 .. 2023. 1. 7.
[VueJS] plugin 활용하여 Infinite scroll 구현하기 Infinite scroll 일명 무한스크롤이라고도 하는데, 보통 무한스크롤을 구현하는 데 있어서 onScroll, Intersection Observer API를 사용하여 만들고는 한다. 하지만 이왕 VueJS를 사용하는김에 사용하기 유용한 플러그인이 있을 거 같아서 플러그인 기반으로 무한스크롤을 만들어 보고자 한다. vue-infinite-loading VS vue-infinite-scroll vuejs에서 무한 스크롤 관련 플러그인을 찾아보면 일반적으로 저렇게 두 개의 플러그인이 나온다. 이왕 선택하는 거 더 좋은 거 선택하고 싶어서 이것저것 비교해 보았다. vue-infinite-loading / vue-infinite-scroll 사용방법 둘의 사용방법은 그렇게 어려운 거 없이 매우 간단해 보인.. 2023. 1. 6.
[MacOS] Mac에서 백쿼터(`) 사용하기 Mac에는 충격적이게도 백쿼터(`)가 존재하지 않지만 역시 조합해서 사용하면 뭐든 나온다. ⌥(option) + \(₩) 를 입력하면 백쿼터가 입력된다. 2023. 1. 5.
[GIT] Fork 없이 Pull Request 사용하기 왜 pull request를 위해 fork를 먼저 해야 하는 걸까? 왜 Pull Request를 검색하면 Fork를 우선적으로 하는 내용들만 나올까? 우선 공식문서에서 GitHub 프로젝트에 기여하는 방법에 대해 설명한 글을 읽어보자. 6.2 GitHub - GitHub 프로젝트에 기여하기 Git - GitHub 프로젝트에 기여하기 Pull Request는 보통 공개 프로젝트에서 사용한다. 기여자는 수정하고 나서 원 저장소에 Pull Request를 연다. 개발 초창기에는 프로젝트 내부에서도 많이 사용한다. 이미 Pull Request를 열어 놓은 토픽 git-scm.com 뭐 지금 당장 읽을 필요는 없어도 나중에 한 번쯤은 읽어보길 권한다. 결론부터 말하자면 저장소에 대한 접근 권한이 없는 경우 for.. 2023. 1. 4.
[Node.js] zsh: bad CPU type in executable: node 이 에러는 사실 Window에서도 발생하는지는 모르겠으나. MacBook M1 에서 발생한 오류이다. Brew를 사용하여 nvm을 설치하고나서 node 버전을 관리해줄 경우 당장은 에러가 발생하지 않을 수 있지만 어느때라도 "zsh: bad CPU type in executable: node" 라는 에러가 발생할 수 있다. 다행히 stackoverflow를 통해 아주 간단하게 해결할 수 있었다. softwareupdate --install-rosetta 위 명령어를 입력만 해주면 정상적으로 작동한다. 이 해결방법 역시 NVM 문서에 있다는거 보니 Mac M1에서 발생하는 에러로 인지는 하고 있는 모양이다. 참고: https://stackoverflow.com/questions/71122488/zsh-ba.. 2023. 1. 4.
[VueJS] watch 와 watchEffect 비교 vue3 공식문서를 기반으로 watch와 watchEffect를 비교해보고자 한다. 사실 이 게시글을 작성하기 이전에 [VueJS] computed와 watch 속성 비교라는 게시글을 작성한 적이 있는데, 여기서 watch를 다룰 때 지금 보다 공식문서가 좀 허접(?) 했던 시절에 작성하다 보니 꼼꼼하게 담아내질 못했던 기억이 있다. 마침 이번에 vue3에서 새롭게 생긴 watchEffect와 같이 비교할 겸 정리하려고 한다. watch() watch 속성은 "특정 데이터"의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. watch라는 속성은 vue2에서부터 계속해서 존재했던 속성이기에 익숙하지 좀 더 개선되었으며, options api, composition api 어느 곳에서나 사용이 가.. 2022. 12. 26.
반응형
TOP