6_Visual Studio Code로 코딩환경 구축하기

코딩에 들어가기 위해 코딩 툴인 Visual Studio Code를 설치하자.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

설치 후 실행한 다음 젤 난감한 것이 어떻게 기본환경을 만드느냐일 것이다.

최 상단의 File을 클릭하던, 화면 내의 퀵 메뉴의

Open folder... 를 선택하자.

 

그리고, 일반적으로 cmd를 수행하고 프로젝트를 생성한 위치인

C:\Users\(사용자명)\에서

npm 설치 시 만든 프로젝트 폴더를 선택 후, [Add]버튼을 누르면, 기본 환경의 화면이 나온다.

이제 기본 화면이 구축되었다.

 

약간의 편의성 커스터마이징으로 View > Extensions에서 "materal icon"을 검색하여 설치해 주자.

설치 후 에디터 화면으로 가면, 각 영역이 아이콘 모양으로 보이게 된다.

 

 

이제 실행해 봅시다. 코드를 저장하고, cmd창을 열어,

지난번 만든 project 폴더로 이동 후, npm을 실행합니다.

이후, Run in web browser를 클릭하면 웹에서 실행한 결과를 볼 수 있고,

스마트폰에서 Expo앱을 실행 후, QR코드를 읽어주면, 앱에서 실행된 화면을 볼 수 있습니다.

신기한점은 이렇게 실행화면을 켜 둔 뒤, 코드를 수정 후 저장하면,

실행화면이 Refresh되면서 실시간으로 변경됩니다.

 

*앱 실행화면이 잘 동작하지 않는경우

웹 환경 실행은 되는데, 스마트폰 Expo에서 실행이 안된다면, 커넥션 설정을 변경해 보시기 바랍니다.

처음에는 LAN환경으로 잘 동작하는데, 재시작 과정에서 LAN IP가 localhost:19000 에서 1씩 올라가는데,

QR코드는 계속 19000으로만 생성하는 오류가 있다보니, Tunnel로 확인하는 것이 잘 동작합니다.