본문 바로가기

분류 전체보기346

Vue 실행오류 - 'Vue-Cli-Service'는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제상황 VScode에서 Vue로 된 프로젝트를 받아와 npm run serve 로 실행하였다. 잘되는 듯 하더니는 fake 다음과 같이 에러가 떴다. 'Vue-Cli-Service'는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제해결 검색을 해보고 이러쿵 저러쿵 10분정도를 소모했다. 정작 아주 간단한 문제였다. 아래 화면을 보고 원인을 추리해보시오. 내가 간과한 건 바로 터미널이었다 ! (답을 맞춘 당신은 진정한 방구석 코난) 운영체제가 윈도우이면 powershell 로 바꿔야 실행이 된다. 2021. 7. 16.
Network - VPN 이란? 회사에서 VPN을 사용할 때는 단순히 테스트 서버를 배포할 때 쓰는 외부에서 접속하지 못하는 회사 내 네트워크라는 정도의 개념 뿐이었다. 하지만 이번 기회에 확실히 알고 넘어가보자. VPN 이란? VPN은 Virtual Private Network의 약자로 가설사설망이다. VPN은 모든 네트워크 패킷을 암호화 해서 → VPN 서버에 보내고, (VPN 서버를 통해서) → 인터넷에 안전하게 접속한다. VPN 서버에 연결하면, 인터넷 트래픽이 그 누구도 들여다볼 수 없는 암호화된 터널을 통과하게 된다. VPN으로 https를 지원하지 않는 사이트도 안전하게 접속이 가능하다. 모든 트래픽이 암호화 되기 때문이다. 데이터가 서버에 도착하면 암호 해독 프로세스를 통해 외부 패킷이 제거된다. (복호화) VPN은 언제.. 2021. 7. 15.
Cloud - AWS 란 회사에서 서버 이야기를 할 때 빠지지 않는 것이 AWS 이다. 그리고 EC2 라는 용어도 1+1 처럼 따라 붙는다. 무엇인지 대략적으로 알고 있었지만 이번 기회에 확실히 개념을 익혀보자 AWS 란? AWS(Amazon Web Services)는 쉽게말해 아마존에서 제공하는 클라우드 서비스이다. 네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 클라우드 서비스를 제공하고 있다. 필요한 사람, 회사들이 웹 서비스를 통해 애플리케이션을 구축하도록 지원하여 준다. (한마디로 서버직접 구축안하고 아마존에서 대여해서 쓴다는 거다.) 왜 AWS 를 쓸까? 1. 싸다싸 AWS는 저렴한 종량 과금제 방식으로 운영된다. (즉, 쓴만큼 내는 거다.) 확장형 글로벌 인프라를 구축 및 관리하고, 더 저렴한.. 2021. 7. 14.
Git(22) 마지막 커밋(commit) 취소하기 지난 줄거리 신입 네 달 차, 실수로 엉뚱한 브랜치에서 커밋을 넣었다. 그래서 커밋을 취소하려고 한다. Git log 로 잘못한 커밋 내역을 확인해 보았다. (음 여기있군 ) 자, 방금 한 커밋 취소해보자 통상적으로 열심히 코드를 짜고 나면, 1. unstaged 단계에 작업한 파일들이 있다. 2. staged 단계로 얘네들을 올려버리고 3. commit 단계 에서 커밋해주면 git 에 저장이된다. commit 을 취소하고 staged 단계로 돌아감 $ git reset --soft HEAD^ commit 을 취소하고 unstaged 단계로 돌아감 $ git reset --mixed HEAD^// 기본 옵션 $ git reset HEAD^// 위와 동일 $ git reset HEAD~2// 마지막 2개의.. 2021. 6. 21.
JavaScript - URL 인코딩(encodeURI) / 디코딩하기(decodeURI) 신입 네 달차, 프로젝트의 URL 안의 특수문자가 유니코드로 인코딩되어 표시되었다. 그래서 URL 을 사용하는 메소드의 결과가 제대로 나오지 않는 이슈가 발견되었다. 문제해결을 위해 encodeURI() 의 문서를 살펴보며 해결을 모색하였다. URL 전체를 건들고 싶을 때, URL 의 (영어제외) 전체가 인코딩 / 디코딩 된다. endcodeURIComponent() var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp"); console.log(encodeStr); // "http%3A%2F%2Fwww.mywebpage.com%2F%ED%95%9C%EA%B8%80.jsp" decodeURIComponent() var decodeStr = decodeU.. 2021. 6. 17.
Cloud - IaaS, PaaS, SaaS 란 신입 세 달차, 회사에서 클라우드와 SaaS 에 대한 심도깊은 이야기를 나눴다. 쉬운 이해를 위해 다시한번 정리해보자. 클라우드 란 쉽게말해 인터넷으로 연결된 가상 서버를 사용하는 것이다. 컴퓨터나 스마트폰 등에 불러와 사용하는 서비스이다. 인터넷 어딘가에서 구름에 싸여 보이지 않는 자원(CPU, 메모리, 디스크 등)을 원하는 대로 가져다 쓸 수 있다. 클라우드 컴퓨팅 이란 인터넷을 통해 IT 리소스를 서비스로 제공하는 것이다. 그리고 서비스로 제공하는 대상은 서버, 플랫폼, 소프트웨어 이다. 우리 회사에 _____ 이 없어? 그럼 돈내고 대여하면 되지 ! 라는 개념인 것 같다. 반대로, 너네 회사에 _____ 이 없어? 그럼 우리꺼 돈내고 대여해서 쓰게 해줄게 ! 라는 개념인 것 같다. 그게 서버가 될.. 2021. 6. 12.
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.
SPA(단일페이지어플리케이션)와 CSR(클라이언트사이드렌더링) SPA 란? 단일 페이지로 구성된 웹 어플리케이션을 말한다. CSR(클라이언트 사이드 렌더링) 방식을 사용한다. (루트 컴포넌트(첫화면)을 중심으로 거미줄처럼 다른 컴포넌트와 연결연결되서 사용자가 필요한 컴포넌트만 로딩해서 바로바로 보여준다.) CSR 이란 ? (클라이언트 사이드 렌더링) 서버는 단지 JSON 파일만 보내주는 역할을 수행하며 HTML을 그리는 역할은 클라이언트에서 JS로 수행한다. (Json 객체로 된 텍스트 형식의 데이터를 API 주소를 통해 백엔드에서 보내면 프론트는 그걸 받아 JS 메소드 안에 녹여내어 HTML 로 화면에 보여준다.) 최초에 한 번 서버에서 전체 페이지를 로딩하여 보여주고 사용자의 요청에 따라 클라이언트가 서버에서 받은 데이터를 해석, 렌더링하는 방식이다. (예전에 .. 2021. 5. 21.
반응형

티스토리툴바