수성비전자방입니다. Raspberry Pi APT Repository에는 Visual Studio Code가 포함되어 있습니다. 오늘은 라즈베리파이3 B+에 Visual Studio Code와 한국어 확장팩을 설치해 보겠습니다.(라즈베리파이4에 설치하는 방법도 동일할 것입니다.)
Visual Studio 설치하기
1. 라즈베리파이 OS를 부팅하고, 터미널을 실행합니다.
2. sudo apt update 명령을 실행합니다.
3. sudo apt install code 명령을 실행합니다. 그러면 Visual Studio Code 설치가 시작됩니다.
4. 잠시 기다리신 후 Visual Studio Code 설치가 완전히 끝나면 터미널 창을 닫습니다.
5. 라즈베리파이 메뉴→개발 로 들어가시면 Visual Studio Code가 설치되어 있는 것을 확인하실 수 있습니다.
익숙한 디자인의 창이 나오네요. 첫 화면은 튜토리얼 같은 건데 그냥 한 번 읽어 보세요.
튜토리얼 같은 것을 모두 넘기고 나면 진짜로 익숙한 첫 화면이 나오게 됩니다.
다만, Visual Studio Code를 처음 써 보시는 분들께는 이 화면이 어색할 지도 모르겠는데,
왼쪽 상단의 버튼들은 각각 이런 기능들이니 참고하시기 바랍니다.
한국어 확장팩 설치
사실 Visual Studio Code를 설치하고 나면, 그 이후는 운영체제와 상관 없이 사용법이 거의 동일합니다. 그래서 타 OS에서 VScode를 써보신 분들은 이후 내용을 이미 아실 겁니다.
1. 확장을 클릭합니다.
2. Korean을 검색합니다.
3. Korean Language Pack for Visual Studio Code를 클릭합니다.
4. Install을 눌러 설치합니다.
5. 오른쪽 아래에 VS Code를 재시작하라는 창이 뜹니다. Restart를 클릭하면 재시작됩니다.
한국어가 적용되었습니다.
Windows에서 쓰는 것과 얼마나 비슷한가?
[폴더 열기]
폴더 열기(파일→폴더 열기)를 누르면 이런 창이 뜹니다. 여기서 폴더를 지정하면
좌측에 폴더를 열어놓고 코딩할 수 있습니다.
[이 폴더에 있는 파일의 작성자를 신뢰합니까?]
Windows용 VScode에서도 얼마 전에 업데이트된 것인데, 보안을 위해 이런 창이 뜬다고 합니다. 사실 귀찮긴 한데...
[터미널]
위의 메뉴 목록의 터미널을 누르신 후 새 터미널을 클릭하시면 VScode 창에서 터미널 창을 사용하실 수 있습니다.
여기까지 보면 Windows에서 VScode를 쓰는 것과 거의 비슷하다는 생각이 들죠? VScode의 장점을 잘 활용할 수 있을 것 같습니다.
[속도]
한 가지 아쉬운 점은 작동 속도가 느리다는 것입니다. 다만, 제가 라즈베리파이3 B+를 사용하고 있다는 점에 주목하겠습니다. 라즈베리파이4에 설치하면 빠르지 않을까요?
저의 글을 읽어 주셔서 감사합니다.
다음에 만나요!
추신)라즈베리파이 메뉴를 클릭하지 않고 Visual Studio Code를 실행할 수 있습니다.
터미널 창에 code를 입력하고 엔터 치시면 됩니다.(참고로 Windows PowerShell에서도 쓸 수 있는 방법임.)
참고 자료
1) Microsoft. "Visual Studio Code on Raspberry Pi", Visual Studio Code 홈페이지. (2021. 06. 18. 방문).
수성비전자방입니다. 저는 라즈베리파이3 B+를 보유 중입니다. 어쩌다 보니 서버 공부용으로 사용할 때가 있었는데요, 이때 문제가 있었습니다. 라즈베리파이를 거실 공유기에 유선으로 연결해야 하는데 모니터는 제 방에 있는 것이죠. 그래서 저는 제 노트북으로 라즈베리파이를 원격제어 하기로 했습니다. 방법은 여러 가지가 있겠지만 저는 라즈베리파이 OS(관련 글)에 기본 탑재되어 있는 Real VNC를 이용하겠습니다.
1. 우선 처음에는 정석적으로 마우스, 키보드, HDMI 모니터, USB-Micro B 전원선을 연결해 주었습니다. 만약 처음부터 모니터 없이 세팅하시는 경우 다른 블로거 분이 작성하신 글을 찾아 보시기 바랍니다.
2. 그러면 부팅이 되었을 것입니다. 왼쪽 위의 라즈베리파이 메뉴 아이콘을 클릭하시고, 기본 설정에 있는 Raspberry Pi Configuration을 클릭합니다.
3. Interfaces 탭에서 VNC를 Enable로 설정합니다.
4. 작업표시줄에 있는 VNC 아이콘을 클릭합니다. 그러면 VNC 창이 열립니다.
VNC 창 왼쪽 절반 Connectivity를 보시면 라즈베리파이의 IP 주소가 나옵니다. 이 IP 주소를 참고하셔도 되고, 아니면 터미널 창에 ifconfig를 입력하여 확인하셔도 됩니다. 인터넷을 연결하지 않고 VNC를 설정하시는 경우 고정 IP를 설정하시면 됩니다(8번 과정 참고).
5. VNC 창 오른쪽 위의 메뉴(三)를 클릭합니다.
6. Options로 들어갑니다.
7. Connections에서 포트를 설정하실 수 있습니다. VNC 포트 기본값은 5900입니다. 그냥 두셔도 좋고, 변경하셔도 좋습니다.(변경이 되는지는 확인 안 해봤는데...)
저는 그냥 5900으로 두고 진행하겠습니다.
8. (선택사항)라즈베리파이 IP를 고정 IP로 설정하시면 편리합니다. VNC를 먼저 설정한 뒤 인터넷을 연결하시는 경우 IP를 고정할 것을 권장합니다. 아래 글을 참고하시기 바랍니다.
9. 이제 라즈베리파이를 인터넷이 가능한 환경에 설치하시고, 인터넷도 연결해 주시기 바랍니다.
(저의 경우는 공유기가 있는 거실에 설치했습니다.)
8번 과정에서 라즈베리파이 IP를 고정 IP로 설정하신 경우 이번에는 마우스, 키보드, 모니터를 연결하지 않으셔도 됩니다.
10. 공유기를 사용하는 경우 각 장치에 사설 IP가 부여됩니다. 같은 네트워크 안에서는 사설 IP를 입력하여 서버에 접속할 수 있지만, 외부 네트워크에서 서버에 접속하려면 공인 IP를 입력해야 하므로 공유기에서 포트포워딩을 해 주어야 외부 접속이 가능합니다. 포트포워딩 하실 때에는 본문의 7번 과정에서 포트 번호를 바꾸신 경우 그 번호를 내부 포트로 설정하시고, 바꾸지 않으신 경우 5900을 내부 포트로 설정하시기 바랍니다.
수성비전자방입니다. 오늘은 라즈베리파이 OS에서 고정IP 설정하는 방법을 알려드리겠습니다.
1. 라즈베리파이와 같은 네트워크에 연결된 PC에서 CMD(명령 프롬프트)를 실행합니다.
2. ipconfig 명령을 실행합니다.
3. 유선랜을 연결하신 분은 이더넷 어댑터 이더넷을, 무선랜을 연결하신 분은 무선 LAN 어댑터 Wi-Fi를 주목하시기 바랍니다. 연결별 DNS 접미사, IPv6 주소, IPv4 주소, 서브넷 마스크, 기본 게이트웨이가 나올 것입니다. 여기서 게이트웨이 주소를 확인합니다.
버추얼박스를 설치하신 분들께서는 VirtualBox Host-Only Network와 혼동하지 않도록 주의 바랍니다!
4. 웹브라우저에서 게이트웨이로 접속하시면 공유기 설정 페이지로 연결됩니다. DHCP IP(사설IP) 사용범위를 확인하시기 바랍니다.(KT 공유기의 경우 장치설정→네트워크 관리→LAN 연결 설정 에서 확인하실 수 있습니다.) 그리고 현재 사용중인 사설IP 외의 다른 IP를 라즈베리파이의 고정IP로 설정하겠습니다.
혹시 DHCP IP 사용범위 외에 사용할 수 있는 IP가 없다면 DHCP IP 사용범위를 축소시켜서 사용할 수 있는 IP를 남겨 두시기 바랍니다.
이제 라즈베리파이에서 고정IP를 설정하겠습니다. 저는 라즈베리파이3 B+를 사용하였습니다.
5. 라즈베리파이 OS 작업표시줄에 있는 와이파이/유선랜 아이콘을 오른쪽 클릭합니다.
6. Wireless & Wired Network Settings를 클릭합니다.
7. eth0과 wlan0이 있습니다.
eth0: 이더넷(유선랜)
wlan0: 무선랜
원하는 것을 선택하고 설정하시면 됩니다. 저는 둘 다 했습니다.^^
8. Automatically configure empty options에 체크하시면 빈칸을 자동으로 채워주므로 편리합니다.
9. IPv4 Address에 원하는 고정 IP를 입력합니다.
*. Router는 게이트웨이를 적는 칸입니다. 적고 싶으시면 적으세요.^^
10. 적용하고 닫아주세요.
11. 좌측 상단의 메뉴 아이콘을 클릭하고, 로그아웃을 클릭한 다음, Shutdown options에서 Reboot하시면 고정IP가 적용된 것을 확인하실 수 있습니다.
그 뒤로 있는index.html?id=abc&page=1은 query string으로 분석하는 것입니다.
오늘 저는 path까지만 사용하겠습니다.
[3행]
varfs=require('fs');
File System 모듈입니다.
[5행]
http.createServer(function (req, res) {
[6행]
varq=url.parse(req.url, true);
[7행]
varfilename = "." + q.pathname;
예를 들어, path가 index.html이면, filename은 ./index.html이 됩니다.
[8행]
fs.readFile(filename, function(err, data) {
[9행]
if (err) {
만약 오류가 발생하면 10~11행의 소스코드를 실행합니다.
[10행]
res.writeHead(404, {'Content-Type':'text/html'});
오류코드 404를 내보냅니다. 그리고 콘텐츠 타입을 HTML로 합니다.
[11~12행]
returnres.end("404 Not Found.");
}
화면에 404 Not Found를 출력합니다.
[13~17행]
else{
res.write(data);
returnres.end();
}
});
오류가 발생하지 않으면 해당 파일을 실행합니다. 이번에 {'Content-Type':'text/html'}이 없는 이유는 HTML 외에 다른 파일(ex. CSS)도 읽기 위해서입니다.
[18행]
}).listen(38080);
포트 번호를 38080으로 지정합니다. 보통 8080으로 많이 사용하시는데 제가 38080으로 바꾼 이유는 포트 번호 변경이 가능하다는 것을 보여드리기 위해서입니다. 사용하고 싶으신 포트 번호를 괄호 안에 넣어 주시면 됩니다.
2. 사전 준비하신 HTML, CSS 등의 파일과 1번 과정에서 준비한 *.js 파일을 라즈베리파이에 넣어 주세요. 저는 pi 폴더 안에 server 폴더를 만들고, 그 안에 파일들을 넣었습니다. 제가 작성한 *.js 소스코드 기준으로 *.js 파일은 다른 HTML, CSS 파일들과 동일한 폴더에 있어야 합니다.
3. 터미널 창에서 cd server를 입력해서 server 폴더로 이동하세요.
4. node *.js 명령을 실행하시면 *.js에 작성한 설정대로 서버가 열립니다.
아까 말씀드린 대로 *은 임의의 파일명입니다. 저 같은 경우에는 homepage.js 파일로 저장했으므로 node hompage.js 명령을 실행했습니다.
5. 이제 라즈베리파이의 웹브라우저에서 http://localhost:38080/index.html 로 접속하면 서버의 index.html 파일이 열립니다.
(물론 서버에 index.html 파일이 없으면 안 열립니다.)
CSS도 잘 적용되었습니다. 세부 항목을 눌러 보았습니다.
제가 테스트용으로 만든 페이지라서 별 내용 없습니다.^^
없는 파일명으로 path를 입력하거나 path를 입력하지 않으면 404 Not Found.가 출력됩니다.
서버를 끄시려면 터미널 창에서 Ctrl+C를 누릅니다. 복사 단축키가 아니라 서버 끄는 단축키입니다.
포트포워딩
공유기를 사용하는 경우 각 장치에 사설 IP가 부여됩니다. 같은 네트워크 안에서는 사설 IP를 입력하여 서버에 접속할 수 있지만, 외부 네트워크에서 서버에 접속하려면 공인 IP를 입력해야 하므로 공유기에서 포트포워딩을 해 주어야 외부 접속이 가능합니다. 인터넷에 공유기 이름을 검색해 보면 포트포워딩 하는 방법이 나오므로 검색해 보시기 바랍니다.
포트포워딩 하실 때 내부 포트는 *.js 파일 거의 마지막 줄에 작성하신 그 포트 번호를 입력하시면 됩니다.
포트포워딩이 완료되면 외부 네트워크에서는 웹브라우저 주소창에 http://공인IP:외부포트/path를 입력해서 접속하실 수 있습니다.
위의 이미지와 저의 소스코드로 예를 들자면, 포트포워딩을 할 때 내부 포트에는 38080을 입력하고, 만약 제가 외부 포트도 38080으로 설정했다면 http://123.45.67.8:38080/index.html을 입력해서 라즈베리파이 서버에 있는 index.html 파일로 접속할 수 있습니다.
수성비전자방입니다. 저는 2018년 후반기부터 라즈베리파이3 B+를 보유중입니다. 당시에는 라즈비안을 설치해서 사용했는데 지금은 이름이 라즈베리파이 OS로 바뀌었더라고요. 뿐만 아니라 라즈베리파이 누리집도 좀 달라졌길래 이번에 라즈베리파이3 B+에 Raspberry Pi OS 설치하고, 한국어 패치를 해 보겠습니다.(라즈베리파이4도 비슷하겠죠, 뭐...)
-주의: 라즈베리파이 구버전을 사용하실 경우 SD 카드 사양이 달라질 수 있습니다. 반드시 확인할 것.
[구매기]*주의: 현재와 가격 및 이벤트 상품이 다를 수 있습니다.
라즈베리파이3 B+는 ICbanQ에서 구매했습니다. ICbanQ는 라즈베리파이, 아두이노, PCB 등을 판매하는 것 같습니다. 참고로 처음 이용하신다면 카카오계정으로 로그인보다는 회원가입을 추천합니다.(카카오계정으로 로그인을 해도 결국 회원가입하라고 함.) 저는 이벤트 기간에 구매해서 케이스를 사은품으로 받았습니다. 지금은 이벤트 기간이 아닐 테니 본체와 함께 케이스도 구매하는 것 잊지 마세요!(세트를 구매하는 것도 방법 중 하나임.)
세트를 구매하지 않았기 때문에 방열판은 별도로 구매해야 했습니다. 방열판도 ICbanQ에서 구매했습니다. 저는 착색 일반 (대), 착색 일판 (소)를 구매했습니다.
이제 11번가로 넘어옵니다. 여기서는 케이블과 어댑터, SD 카드를 구매했습니다.
일단 HDMI 케이블은 이미 집에 있는 것을 쓰기로 했구요~. 다만 제가 사용할 장소인 학교의 모니터가 HDMI를 지원하지 않아 HDMIDVI 젠더와 DVI 케이블을 새로 구매했습니다.
어댑터의 경우, 저는 11번가에서 라즈베리파이3 전용 어댑터를 구매했습니다.
SD 카드는 삼성전자 microSD EVO 32GB Class10을 구매했습니다. 이것으로 정상적으로 실행이 되는지는 설치를 해 봐야 알 듯..(아직 설치를 안 해봤습니다. 방학 중에 해야 하는데...)
[개봉기]
음.. 정말 죄송하지만 이게 뭐였는지 기억이...(개봉한지 너무 오렌 시간이 지난 후에 글을 쓰고 있음.)
이건 DVI-D 싱글 5m 케이블과 HDMI-DVI 젠더입니다.
다음은 어댑터입니다.(아마도?)
이렇게 뽁뽁이 포장 안에
어댑터가 들어 있네요.^^
다음은 방열판입니다.
이렇게 들어있습니다.
하나는 큰 것, 하나는 작은 것입니다.
다음은 SD 카드입니다.
뽁뽁이를 뜯어보면
놀라운 것은 MicroSD 뿐만 아니라 일반(?)SD 젠더도 같이 들어 있다는 사실!
(그런데 저거 세 개씩이나 있어서 어디에 쓰지..?)
아래는 사실 두 번째로 받은 제품인데요.. 바로 라즈베리 파이입니다!
큰 상자...
멋있게 칼로 뜯어보니...
......(빈 공간 어쩔 거니?)
(더 황당한 건 그나마 커 보이는 왼쪽 상자는 사은품이라는 사실. 제가 구매한 것은 오른쪽 물체입니다.)
(사은품: 휴지. 부엌에 놓고 잘 썼습니다.)
왼쪽: 사은품(케이스)
오른쪽: ☆Raspberry Pi 3 B+ 본체
사은품(휴지)
이제 본체를 개봉해 봅니다.
아직 써 보지는 못했네요..
사용설명서입니다.
케이스를 뜯어보았습니다.
사실 제품 중에 사용해 본 건 휴지밖에 없습니다. 나머지 제품들은 다음 글부터 사용해 보게 될 것 같습니다.
제가 바쁜 와중에 글을 쓰다 보니 글의 순서가 뒤죽박죽입니다. 방문자 여러분께 죄송하다는 말씀 드리고 싶습니다.
댓글을 달아 주세요