본문 바로가기
반응형

Programming161

node 버전 업데이트, node update, node update version 오랜만에 놀고있던 맥북을 꺼내 개발을 하려다 보니, 이미 npm 버전이 엄청나게 예전꺼여서 충돌이 마구 일어났습니다. 오래된 개발 환경에서 개발을 시작하려고 하면 node version 을 특정 버전 혹은 몇 버전 이상을 요구한다는 오류들을 어렵지 않게 보게 됩니다. 이에 대해서 npm 버전을 업데이트 하는 방법을 하려고 합니다. 여러 레퍼런스가 있고 다양한 시도를 한 끝에 가장 안정적이고 확실하고 간단한 방법을 알려드리려 합니다. sudo npm install -g n - sudo : 'substitute user do' 의 약자로 다른 권한의 유저가 수행하도록 해라. 즉, 슈퍼 유저로서 수행하라는 뜻입니다. (무조건 해라 명령) - npm : node package manager - install :.. 2022. 4. 28.
npm install 시 permission 오류 해결 방법 학생때 수업을 듣기 위해 쓰던 맥을 꺼내, 이제는 개발용으로 사이드 프로젝트를 실행해 보려고 했습니다. 그런데 npm install 을 통해 무언가를 설치하려고 하자, 다음과 같은, 뒷목 땡기는 오류가 발생했습니다 ㅋㅋㅋ 1. 나는 분명 npm과 node는 설치가 되어있다. 2. 나는 npm으로 새로운 무언가를 설치를 하려고 했다. 그 어떤 것을 설치하려고 해도 Error: EACCES: permission denied, access '/usr/local/lib/node_modules' checkPermissions Missing write access to /usr/local/lib/node_modules 이 말의 뜻을 해석하자면, 지금 유저에게는 node 모듈들에 대해서 write 권한이 없다는 말입.. 2022. 4. 28.
새로운 기기 깃허브 저장소 연결, github 비밀번호 없이 사용하기 18개월간의 길다면 길고 짧다면 또 짧을 수 있는 근무 후 이직을 결정하여 스타트업을 떠나게 되었습니다. 이유야 다양하겠지만, 이직의 근본적인 이유는 본인이 지금의 회사에 만족을 하고 있지 못하다는 뜻이겠지요. 하여튼, 기존에 사용하던 맥북을 반납 후 개인 맥북으로 프로젝트를 하려고 했습니다. 여러가지 오류가 발생하더군요, 카페에서 육두문자를 중얼거리며 삽질을 해본 후 에러 사항들과 이에 대한 해결 방법들을 적어보려 합니다. 여러 문제들을 다 써봤어요 한번 같이 따라해 보시면 좋을 것 같아서 올려요 처음부터 같이 할게요. 1. 깃허브 저장소 연결하기 1. 깃허브에 접속하여 New repository를 누릅니다. 저는 public으로 만들 것이고, Add a README file 을 체크하였습니다. 2. .. 2022. 4. 27.
모든 국가 정보 가져오는 프로그램 다양한 국가에서 접근을 하는 사이트를 개발을 하다 보니, 회원 가입시 전화번호나 지역에 대한 시간 변경을 해야 해서 유저분들께서 정보 입력 중 국가를 선택할 때에 국가 리스트에는 몇몇 국가가 아닌 전체 국가를 다 가져와야 한다는 정책을 두게 되었습니다. 그렇다면, 이를 위해 db를 따로 파는 것도 비상식적이고, 그렇다고 그 많은 국가와 내용들을 전부 코드로 넣는 방법도 너무 원시적이었습니다. 분명 api로 제공되는 것이 있겠거니 했지만, 더 편한 것이 있었습니다. 대륙, 국가코드, 언어, 국기, 수도 등 여러 정보가 나오는 npm 입니다. 해당 부분 잘 써보시길! https://www.npmjs.com/package/countries-list countries-list Continents & countr.. 2022. 4. 16.
Angular tooltip customize 굳이 앵귤러가 아니더라고, 우리는 마우스 이벤트로, 마우스를 가져다 대면 도움말과 같은 말풍선을 만들고 싶을 때가 많다. 운영하고 있는 웹사이트는 Angular 기반이고, Angular 사용자에게 도움을 위한 글이니 다른 프레임워크를 사용하고 계시다면 적용되지 않아요. 기본 지식 : Angular 에서 마우스를 가져다대는 이벤트 (mouseover, hover, onmouse)를 했을 때에, 말풍선 등 도움말을 잠시 보여주는 기능은 matTooltip이며, 이를 커스터마이징 하는 것은 matTooltipClass 이다. 공식 문서 https://material.angular.io/components/tooltip/examples Angular Material UI component infrastructu.. 2022. 4. 7.
js array 특정 필드로 정렬, 자바스크립트 배열 정렬 자바스크립트에서 배열을 일반적으로 정렬은 array.sort 가 있다. 하지만 오늘은 특정 필드를 기준으로 정렬을 하는 방식에 대해서 소개를 해보려고 한다. 가정 : 나의 array에는 여러 필드가 존재하고, 그 중에 data 라는 필드가 있다. : 나는 그 data 필드에서도 name 이라는 필드로 정렬을 하고 싶다. array.sort((a,b) => (a.data.name > b.data.name) ? 1 : ((b.data.name > a.data.name) ? -1 : 0)); return 1 을 하는 경우 : a는 b 뒤에 온다 return -1 을 하는 경우 : a는 b 앞에 온다 return 0 을 하는 경우 : 지금의 정렬 형태를 유지한다 삼항 연산자를 잘 모르는 분을 위해 간단한 예제에.. 2022. 4. 7.
html 로만 핸드폰번호 입력받기 (숫자만 입력받기) html only 핸드폰번호 입력받기 전화번호 입력을 받는 도중, 숫자만 받고 싶은 경우가 있다. 하지만 그렇다고 숫자 타입이라고 해서 증가 감소가 함께 있는, 정말 성의없는 입력란을 만들고 싶지는 않다. 그렇다면 그저 다른 키가 눌릴때 처리만 해주면 된다ㅋㅋ 위의 방식은 숫자 이외의 다른 키는 입력이 되지 않도록, 빈 문자로 대체하는 코드이다. 말도 안되게 input type="number" 이렇게 하는 방식은 버렸으면 해요 See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 2022. 4. 6.
js 특정 문자 제거하기, js 특정 문자 전부 제거하기, js 문자열 숫자 변환, js 숫자 문자로 변환, js 몫 나머지 ㅎㅇ! 문자열 제거 코테 많은데 맨날 replace 로 하니까 하나만 삭제되어서 짜증이 났거나 js는 다른 언어와 다르게 나눗셈을 하면 ㄹㅇ로 소수점까지 간 결과가 나와서 짜증나서 검색하다가 찾아왔다면 잘 온겁니다. 아주 쉬운 방법으로 js 로 코테를 푸는 기본 팁 갑니다. 1. 특정 문자 제거 var str = "10011010"; // 문자 하나만 제거 : 0이라는 문자를 ''로 대체해라 (없애라) var replace_str = str.replace('0',''); // 특정 문자 기준으로 분리했다가 붙여라 (그 문자는 없애고 다시 이어라) var replaceAll_str = str.split('0').join('') /* replace 사용한 경우 : 1011010 분리 후 붙인 경우 : 111.. 2022. 3. 11.
자바스크립트 : 클립보드로 복사 버튼만들기 javascript clickHandler() { const el = document.createElement(`textarea`); el.value = "Junmannn"; el.setAttribute(`readonly`, ``); document.body.appendChild(el); el.select(); document.execCommand(`copy`); document.body.removeChild(el); alert('Copied coupon code ! : ' + el.value); } See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 가끔 보면 버튼 하나로 링크 복사하기 혹은 어떠한 글자를 복사하기 등을 볼 수 있을 것이다. 정말 어렵게만 생각했는데, 코드.. 2022. 3. 10.
js sting 문자열 number로 형 변환하기 알고리즘 풀때 string문자열 내에 있는 숫자를 어떻게 해서 처리하라는 문제를 많이 접했을 것이다. 이런 문제들에서는 형변환을 해서 풀면 아주 쉽게 풀 수 있으니 자바스트링에서 문자열과 숫자 간의 형변환은 간다하게 이런 것이 있다고 보고 넘어가자 1. String 문자열을 number로 변환 (js string to number) // 숫자를 스트링로 바꾸기 var num = 2 console.log("num의 타입 확인", typeof num); // -> number num = String(num); console.log(typeof num); // -> string 2. number 숫자를 string문자열로 변환 (js number to string) // 문자열을 숫자로 변환 var str =.. 2022. 3. 6.
스크롤 감지, 맨 위로 기 버튼 정말 간단하게 구현 웹 페이지 개발 중에, 홈이나 메인 페이지 같은 경우에는 밑으로 쭉 내리다 보면 top, 가장 위로 다시 가게 하는 버튼이 필요한 경우가 생기게 될 것이다. 그렇다면 우리는 일정 스크롤 이상으로 내려가면 버튼이 활성화가 되도록 한다. See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 해당 부분에 대해서 쉽게 설명을 해주자면 window.addEventListener('scroll', (e) => { // scroll 이벤트가 발생할 때 마다 이벤트가 발생함을 인식한다 let lastKnownScrollPosition = window.scrollY; // window : 현재 브라우저 창에서 // .scrollY : 스크롤의 세로 방향 위치 documen.. 2022. 2. 21.
error TS2314: Generic type 'Promise<T>' requires 1 type argument(s) error TS2314: Generic type 'Promise' requires 1 type argument(s) 며칠전 이따위 오류를 발견했다. 여기저기 별 말도 안되는 소리를 하는 것들을 따라하다가 프로젝트 자체가 통으로 날아갈 뻔 했다... npm 버전이나 글로벌 세팅등을 건드는 행위는 최대한 하지 않는 방향으로 하는게 좋을 것 같다.. 코드를 고치자 코드를 . 해당 부분은 Zoom integration 을 하기 위해 @zoomus/websdk 를 가져오는 중에 생긴 오류였다. import { ZoomMtg } from '@zoomus/websdk'; 해당부분에 대해 할 말이 많지만 일단은 해결방법만 적겠다 저 부분을 Promise 가 아닌 Observable 로만 바꾸면 된다 function l.. 2022. 2. 16.
반응형

티스토리툴바