반응형 분류 전체보기706 [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. [Node.js] NPM을 사용하여 특정버전 설치하기 글을 작성하다 보니 npm과 node를 vscode라는 카테고리에 집어넣는 게 맞나 싶다. 글이 좀 쌓이다 보면 나중에 카테고리 정리나 한번 해야겠다 NPM 라이브러리 특정 버전설치 보통 일반적으로 npm을 사용하다보면 최신버전을 다운로드하고는 하는데, 기존에 받았던 버전을 최신버전으로 업데이트하거나 할때 라이브러리명 뒤에 @latest라고 적어준 것을 본 적이 있을 것이다. 여기서 사용한 @latest역시 최신버전을 의미하기에 다시 말하면 latest대신 특정 버전명을 입력만 해주면 해당 버전으로 설치가 가능하다는 것이다. npm install 라이브러리명@버전명 이런식으로 간단하게 사용 가능하다. npm install vue@2.7.10 익숙하지 않아서 그렇지 자주 사용하면 굳이 따로 정리까지는 필요.. 2022. 12. 21. 이전 1 ··· 3 4 5 6 7 8 9 ··· 79 다음 반응형
