아는분이 경기 콘텐츠 코리아 랩에서 열리는 창작 모꼬지 nft 교육 프로그램의 강사로 나가게 되었는데 그분의 권유로 나도 강좌를 듣게됐다.
대강 교육 방향은 자신만의 nft 거래소를 만들어보는거였다.
오늘은 대망의 첫시간이었는데 모든 강의의 첫시간은 첫출근과 마찬가지로 개발환경을 구축하는 시간을 가졌다.
경기 콘텐츠 코리아 랩은 원래 주말에는 운영되지 않는 곳이라 그런지는 모르겠으나 거기 컴퓨터는 사용할 수가 없었다. 데이터 저장이 안된다고했었나... 그래서 개인 작업용 노트북을 가져갔어야 했는데 나는 어쩌피 내 태블릿에 Code Server 를 구축해놨으니 거기에 개발환경을 구축하려고 했었다. 언제나 그렇듯 내 상황과 완전히 같을 순 없고 여러가지 케이스를 테스트해볼 수 없었어서 단지 내가 당면한 문제와 그에 대한 해결책만 써내려 갈 것이다.
본 강의에서 필요한 툴은 아래와 같다.
- node.js
- vue.js
- Remix IDE
이렇게 세가지 이다. 세번째꺼는 웹에서 돌아가는 툴이기 때문에 태블릿의 크롬 브라우저에서도 사용 가능하여 패스, 문제는 1번 2번인데 대부분 윈도우 아니면 맥을 썼기에 node.js 같은 경우에는 홈페이지에서 .exe 파일같은 설치파일을 실행해 대부분 설치했으나 code server 에서는 터미널로 이런 일을 해야했기에 거기서부터 1차 관문에 부딛혔다...
우선 새 터미널을 만들고 아래의 명령어를 쳐봤다.
nodejs
이걸치니 친절하게 apt install nodejs 로 설치하라고 떴다.
얼른 쳐봤으나... 권한이 없었다... sudo 를 앞에 붙여주자. sudo apt install nodejs
그러더니 뭐가 슝슝 깔린다. 이제 nodejs 를 치니 뭐가 작동한다.
그리고 npm을 통해 vue를 깔아주어야한다. 그래서 npm 을 쳤다.
찾을 수 없다고 뜬다...
현재 강의에서 설치하라고 권장한 node.js 버전은 14.16.1
나도 한번 쳐봤다. 명령어는 node -v.
버전을 보니 10.어쩌고 버전이었다..
node js 버전을 업그레이드 해야한다. 검색을 해봤다.
모두 npm을 사용해 하는방법 밖에 없었다... 아니... npm 자체가 안된다구...
강의 중 강사님이
혹시 윈도우나 맥 말고 다른 운영체제는 없으시죠? 다른 강의에서는 CentOS도 봤어요 ㅋㅋㅋㅋ 자 그럼 다들 되는거죠???
조용히 손을 들었다..
슨생님.. 저...
달려와서 같이 봐주셨고 나랑 마찬가지로 버전을 올리려고 했으나 버전을 올리려면 npm이 필요하고 하지만 그건 없기때문에 할수없는 상황에 놓이자 강사님은 조금 고민을 하시다가
아 그럼 nvm을 써봅시다. 이거는 버전 매니저니까 curl 을 이용해서 바로 깔면 될거예요. 깃에서 찾아보세요!
검색하니 바로 나왔고 주소는
https://github.com/nvm-sh/nvm
이 주소 중 아래에 보면 Install & Update 라는 부분이 있는데 아래의 명령어가 있다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
이걸 그대로 복사해서 붙여보니 nvm을 설치할 수 있었고, 아래의 명령어를 입력하면 원하는 node js 버전을 설치할 수 있었다.
nvm install 14.16.1
그 후 node -v를 쳐보니.. 내가 그토록 원하던 14.16.1 버전이 표시되었다.
그다음 npm을 쳐보니 정상적으로 되었다.
이제 vue.js를 설치해야하는데 설치법은 아래의 명령어를 친다.
npm install -g @vue/cli@5.0.8
대충 vue 의 클라이언트를 설치하는데 버전은 5.0.8을 깔라는말인것같지?
이걸 치면 깔리기 시작한다.
다 깔렸으면 이제 vue 프로젝트를 만들어야하는데 원하는 경로로 이동하여 (cd ) 거기서 vue create <프로젝트명>을 치면 프로젝트 이름으로 디렉토리가 생성되며 그 안에 vue 프로젝트가 생성된다.
프로젝트가 생성되면 해당 디렉토리로 이동하여 npm run serve(server 가 아님)을 입력하면 웹브라우저로 localhost:8080를 접속해보면 vue로 생성된 웹페이지가 열린다.
vue를 설치할때인지 프로젝트 파일을 만들때인지... 2.0으로 할래 3.0 으로 할래를 물어보는게 있었는데 본 강의는 3.0 으로 진행되서 그거로 선택했다. yam을 쓸래 npm 을 쓸래 라고 물어보는것도 있다면 npm을 사용한다고 하면 된다.
자 그럼 개발환경이 어느정도 완성이 되었는데... 대강 작업은 code server 로 vue 프로젝트 내 node js 파일들을 수정하면서 프로그래밍 하고, npm 을 이용해 run serve 를 하면 웹 서버가 실행되고, 실행된거는 어쩌피 code server 를 실행할때는 크롬을 켜놨을테니, 새탭 열어서 localhost 입력해보면 되는것이지.
아 참고로 내 상황은 code server 를 외부에서 바로 접근할 수 있지는 않고 vpm 으로 집 네트워크로 우회한 다음 거기서 내부망 ip를 통해 code server 로 접근해 놓은 상태이다. 그래서 지금 집에있는 내부망을 쓰고있는것과 똑같은 환경이기에 음... 해보지는 않았으나 아마 code server 를 실행한 컴퓨터의 ip를 치고 포트번호는 8080을 쳐야 정상적으로 홈페이지를 확인할 수 있지 않을까 싶다.
만약 안된다면, 공유기의 포트 포워딩 중에 내부망 8080을 개방해야 할 수도 있을것같다. 그래도 안된다면 run serve를 할때 localhost만 사용할 수 있게 해놨는지도 확인해봐야할듯 하다. ip를 설정할 수 있는 부분이 있다면 그 부분을 자신의 ip로 설정해놔야 가능하지 않을까.
외부에 오픈한다면 어쩌피 synology nas 에 의해 도메인은 따놨으니 외부 포트로 접속했을 시 포트포워딩으로 code server 를 실행한 컴퓨터로 포워딩되게 설정하면 더 쉽게 접근이 가능할듯도 하다. 이거는 다음시간에 실습해보면 될것같다.
