728x90 반응형 Programming/Javascript23 nvm : 여러 버전의 nodejs를 설치하고 관리하기 보통은 nodejs 를 설치하려면 공식사이트(https://nodejs.org/)에서 설치파일을 다운로드하여 설치하면 된다. 그런데, 여러 프로젝트를 다루고 있는 상황에서 각 프로젝트마다 다른 버전의 Node를 사용해야 한다면, 문제가 생긴다. 이럴때 nodejs 버전 관리 프로그램을 활용하면 좋을 것이다. node의 버전관리할 수 있는 프로그램은 여러가지가 있는데, 그 중에서 nvm 을 알아보도록 하자. nvm 은 기본적으로 Linux/Mac 등에서 쓸 수 있도록 제작되었다. 그래서, windows를 위해서는 별도의 nvm-windows 라는 것을 찾아서 설치해주어야 한다. https://github.com/coreybutler/nvm-windows 에서 설치파일을 다운로드 할 수 있다. 그렇지만, 이.. 2024. 9. 9. 개발환경 구성과 프로젝트 생성 (Hello World) : Vue.js 3 강좌 (with Bootstrap, script-setup) 전체목차 : https://gauryan.tistory.com/214 이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다. Vue.js 3에 관련된 확장프로그램은 아래와 같이 설치하였습니다. https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다. node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다. Vue 3 프로젝트를 생성합니다. > npm init vue@latest Vue Route.. 2022. 3. 8. Vue.js 3 강좌 (with Bootstrap, script-setup) Vue.js 3 의 기본적인 사용법을 설명합니다. Vue2 에서 Options API를 통해 개발했다면, Vue3 에서는 Composion API로 개발을 하게 됩니다. 보통, Composion API로 만들게 되면, Setup() 함수에 구현을 하는데요, 여기서는 Setup()함수를 사용하지 않습니다. 대신, script 태그 선언시에 setup 옵션을 추가합니다. 이렇게 하면 코드를 더욱 간결하게 작성할 수 있습니다. 개발환경 구성과 프로젝트 생성 (Hello World) 폴더와 파일에 대한 설명 뷰 데이터와 함수 데이터 바인딩 이벤트 데이터 양방향 바인딩 Computed 속성 Watch 속성 클래스&스타일 바인딩 v-if와 v-show v-for 리스트렌더링 여러개의 Vue 인스턴스 사용하기 Vue.. 2022. 2. 4. Vue3 에서 같은 path (같은 컴포넌트) 를 호출할때 리로드하기 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com path 를 "/abc/:id" 와 같은 식으로 정의하고, "/abc/1" 페이지에서 "/abc/2" 페이지를 호출하려는 경우에 페이지가 리로드되지 않는다. 이런 경우, 아래와 같이 해주면 해결될 것이다. 2022. 2. 4. Vite + Vue3 + Javascript + Electron 를 이용한 데스크탑 앱 개발 환경 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com Vite + Vue3 + Javascript + Electron 를 이용하여 데스크탑앱 개발 환경을 설정해보자. 참고했던 문서에서는 Typescript 로 되어 있었는데, 필자는 아직 Javascript를 쓰고 싶다. ^^;Step 1. Vite 프로젝트 생성하기> yarn create viteyarn create v1.22.17[1/4] Resolving packages...[2/4] Fetching packages...[3/4] .. 2022. 1. 25. 폴더와 파일에 대한 설명 : Vue.js 3 강좌 (with Bootstrap, script-setup) 전체목차 : https://gauryan.tistory.com/214 이제 생성한 프로젝트의 구조에 대해 간단하게 알아볼 시간입니다. 먼저, VSCode 의 왼쪽에서 프로젝트 폴더를 봅시다. 이렇게 생겼어요. node_modules 폴더가 먼저 보이네요. 이 폴더에는 내가 설치한 node 모듈들이 있는 장소입니다. 처음 용량이 거의 160MB로 꽤 큽니다. package.json 에 필요한 패키지 목록을 가지고 있어서, node_modules 폴더가 없더라도, 다시 만들수가 있습니다. 그래서, git에는 저장하지 않도록 설정되어 있어요. public 폴더의 index.html 도 봅시다. 여기에서 눈여겨 볼 곳은 app 으로 id를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되.. 2022. 1. 23. 이전 1 2 3 4 다음 728x90 반응형
