Vue22 Vue - (Windows) NVM 삭제하기 예전에 설치해놓은 Node.js를 깜박하고 NVM을 설치해 충돌이 났다. 급히 node.js를 지우고 nvm을 uninstall 하기위해 이것저것 뒤져보고 있었다. Vue - (Windows) NVM 삭제하기 stack overflow에서 여러 방법을 제시하고 있었다. 1. 제어판 → Programs → Programs and Features 에서 삭제하기 → 하지만 제어판에는 nvm은 존재 하지 않았다. (띠로리😵💫) + (추가07.21) 당연히 존재하지 않는게 windows 에서 setup 파일을 이용해 설치했으면 보이겠지만, 리눅스용 명령어로 설치했기에 보이지 않는 것이였다. 2. .bashrc 또는 .bash_profile 에 추가한 아래 내용을 삭제한다. 1) 아래 명령어를 터미널에 치면 파일.. 2021. 7. 21. Vue - (Windows) Node.js 삭제하기 작업환경 세팅 겸 NVM을 설치하다 충돌이 났다. 예전에 설치한 node.js 때문이었다. node.js 먼저 삭제후 nvm을 설치해야 했다. 과거에 Mac으로 똑같은 실수를 저질러서 맥버전 node.js 삭제하기 포스팅을 올렸던 기억이 났다. 인간은 망각의 동물이라던데 흐흑 😭 그래 기왕 이렇게 된 거 나와 같은 처지의 검색러분들께 도움이나 되자하고 끄적여본다 ! 1. 제어판 - 프로그램 제거 에서 node.js를 삭제해준다. 정말 다행인 것은 Mac과는 달리 윈도우에서 프로그램 제거만 하면 끝이라는 거다. 2. 자 제거를 시작하지 3. 터미널에서 node 명령어를 입력해보면 나오지 않는다면 성공! NVM 삭제도 해야한다면? ↓아래 포스팅을 클릭해주세요. Vue - (Windows) NVM 삭제하기 예.. 2021. 7. 20. Vue 실행오류 - 'Vue-Cli-Service'는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제상황 VScode에서 Vue로 된 프로젝트를 받아와 npm run serve 로 실행하였다. 잘되는 듯 하더니는 fake 다음과 같이 에러가 떴다. 'Vue-Cli-Service'는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제해결 검색을 해보고 이러쿵 저러쿵 10분정도를 소모했다. 정작 아주 간단한 문제였다. 아래 화면을 보고 원인을 추리해보시오. 내가 간과한 건 바로 터미널이었다 ! (답을 맞춘 당신은 진정한 방구석 코난) 운영체제가 윈도우이면 powershell 로 바꿔야 실행이 된다. 2021. 7. 16. Vue(7) 이미지업로드 삭제 후 같은 파일 다시 올리기 Vue.js 로 이미지업로드 기능을 만드는 중이다. x 버튼을 누르면 업로드한 파일이 삭제가 된다. 그런데 삭제 후 같은 파일을 업로드 해봤더니 안올라가는 이슈가 발견되었다. 블로그를 뒤져 원인을 알아내었다. 1. 파일업로드 → 삭제→ 같은 파일 다시 올리기 2. 초기화까지는 되는데 같은 파일이 연속으로 안 올라가는 현상 발견 3. 파일 탐색기에서 업로드 할 파일을 선택해서 확인 버튼을 눌렀을 때 files 객체에 파일의 내용은 잘 저장된다. 4. 파일을 업로드할 때 앞의 내용과 같은 값이 들어와서 수행이 되지 않는 것이 아닐까???? 의심하게 됨 5. input element의 onchange 속성이 마음에 걸렸다. 6. 여기서 입력한 내용(업로드를 위해 선택한 파일들)이 사라지지 않고 앞의 내용과 비.. 2021. 6. 10. Vue(6) 자식에서 부모컴포넌트로 emit 으로 데이터보내기 Vue.js 로 상담페이지에서 이미지 업로드기능을 완성하였다. 하지만 코드가 너무 길어 컴포넌트 파일로 따로 분리하였다. 결과적으로 간단한 몇 줄의 코드이지만 과정은 복잡했다. (예기치 못한 지원업무가 생겨 너무 오랜만에 포스팅을 올렸다ㅠㅠ 분발해야지...) 결과화면 + 버튼을 누르면 파일 업로드 창이 열리고, 이미지를 업로드하면 미리보기 와 삭제가 된다. 이미지 업로드 시, 부모님에게 잘 전달받은 이미지 객체가 아주 잘 보인다. (흡족) ☺️ 자식컴포넌트 ImageUpload.vue -HTML 에서는 오리지널 코드를 심플하게 간추렸다. + 버튼을 누르면 파일 업로드 창이 열리고, 이미지를 업로드하면 미리보기와 삭제가 된다. // 이미지 업로드 버튼 // 이미지 업로드 버튼을 누르면 uploadReady.. 2021. 6. 8. vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) vue.js 로 이미지업로드 기능을 구현 중이다. 고객들이 올리는 이미지를 formData에 담아 axios 통신으로 백엔드에 보내주려고 한다. 하지만 나는 vue린이 ... 하지만 안될 건 없다. 하다보니 어떻게든 되더라 (시간이 걸려서 그렇지) 컴포넌트 로직 ImageUpload.vue 에서 상담요청 버튼 누름 ↓ UploadConfirm.vue 로 넘어가 작성내용 리뷰 후, 확인버튼 누르면 ↓ index.js 의 통신 로직을 타고 백엔드로 데이터 전송 vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) ImageUpload.vue - 결과 화면 상담 작성란을 모두 작성 후, 마지막으로 다중 파일 선택을 한 뒤 "상담요청" 버튼을 누르면 작성한 데이터와 함께 확인페이지로 넘어간다.. 2021. 5. 18. Vue(4) v-for 문으로 라디오 버튼 만들기 하드코딩 된 라디오 버튼들을 v-for 을 사용하여 동적으로 다이나믹 리스트 렌더링을 해보자 HTML 1. for 문을 두 번 사용하였다. 먼저 Question 배열을 돌려 질문을 뿌리고, 그 안에 Values 배열을 돌려서 보기 값을 뿌려 주었다. 2. 결과확인 버튼 을 누르면 @결과 페이지로 가는 메소드 를 만들었다. **전체코드 보기(더보기 클릭) 더보기 소아청소년 비만 검사 총 {{ QUESTIONS.length }} 문항 문항 {{ i + 1 }} {{ question }} {{ item.label }} 진단 결과 확인 data() 1. 첫번째 for 문에 사용될 Question 배열, 두번째 for 문에 사용될 values 배열이 보인다. 2. valueMap 를 만들어서 알파벳값 을 실제 점.. 2021. 5. 12. Vue(3) - 같은 value의 라디오버튼 그룹 선택 시 자동클릭 오류방지 문제상황 열심히 라디오 버튼으로 비만 테스트를 만들었다. 그런데 문제가 생겼다. 1번 보기나 2번보기를 처음 클릭했을 때 3번보기로 자동선택되는 현상이 나타났다. 해결하고자 영어로 열심히 구글링까지 해봤지만 답을 찾지 못했다. 결국 왜 나만안됨 까지 검색해봤으나 정말 없었다. 이슈화면 문제원인 - 원인은 input 의 value 가 셋 다 같은 값이기 때문이다. 아래는 내가 짠 코드이다. 빨간 박스의 value 가 0 으로 같다. - 그래서 세 개 중 하나를 클릭 했을 때 최근 마지막 코드(3번째)로 자동 선택 되는 것 같다는 결론을 내렸다. 문제해결 HTML - value 에 숫자 대신 알파벳을 대신 넣는다. 이 알파벳은 나중에 숫자와 매핑될 것이다. - 이 버튼을 클릭하면 선택한 value 의 숫자가.. 2021. 5. 12. Vue(2) VS code에서 ES lint 설정하기 ES lint란? 자바스크립트 문법에서 에러를 표시해주는 도구이다. ES lint를 사용하여 에러 같이 정말 문제가 되는 부분만을 지정하거나 전반적인 코딩스타일(ex. tab 설정, ; 여부 등)까지 지정할 수도 있다. 많은 사람들과 협업할때 특히 유용하며 에러와 코딩 스타일을 잡아줘서 한 사람이 코딩한 것처럼 된다. ES lint 설치하기 VS code에서 터미널을 키고 다음 명령어를 입력해준다. 1. eslint 설치하기 npm install -g eslint 2. eslint 생성하기 eslint --init 명령어를 입력하면 설정을 할 수 있다. (파란색 글씨가 내가 설정한 부분이다) 3. 모든 설정이 끝나면 프로젝트에 .eslintrc 라는 파일이 자동생성된다. 4. package.json에서는.. 2021. 4. 27. 이전 1 2 3 다음 반응형
