VS_code
-
VS code에서 JavaScript 실행하기 : Node.js 및 Code Runner컴퓨터 알아가기/JavaScript 2022. 8. 24. 19:30
자바스크립트를 배우면서 VS code 편집기를 사용하는데 기본적으로 자바스크립트는 웹에서 그 결과를 확인할 수가 있어서 웹이 기반인 HTML과 같이 사용할 수 밖에 없었습니다. 혹은 웹에서 개발자도구(F12)를 통하여 확인할 수 있었는데 VS Code에서도 확인할 수 있게 필요 소프트웨어를 설치하도록 하겠습니다. 이를 위해서는 Node.js를 설치해야 합니다. 구글에서 Node.js를 검색하면 설치할 수 있는 홈페이지로 연결됩니다. 기본적으로 VS code 포함 소프트웨어들은 영어버전으로 다루는게 많은 도움이 됩니다. 1. Node.js 설치 보통 안정적인 LTS (Long Term Support)보다 현재버전을 설치해도 문제는 없더라구요. 다운로드 후 설치합니다. 이후 동의하고 계속 Next를 누르시면..
-
VS Code 코드캡쳐 Extension : CodeSnap컴퓨터 알아가기/알아두면 편한 팁 2022. 6. 8. 19:30
이번 시간은 비주얼 스트디오 코드(VS Code)에서 긴 코드를 캡쳐하고자 할 때 유용하게 사용할 수 있는 확장 프로그램을 설치해 보도록 하겠습니다. 특히 일반 화면캡쳐 프로그램으로 화면을 넘긴 긴 코드를 캡쳐하는 경우는 몇번의 귀찮은 작업을 해야하기 때문에 확장 프로그램을 설치하여 작업의 편이성과 시간절약의 효과를 볼 수 있습니다. 코드스냅 (CodeSnap)이라는 프로그램입니다. 다음과 같이 설치 진행을 해보도록 하겠습니다. 1. VS Code에서 CodeSnap 설치 Extension 클릭 >> CodeSnap 입력 >> 설치 2. CodeSnap 사용방법 설치가 완료 되었으면 간단하게 CodeSnap 사용법을 확인해 보겠습니다. ① 원하는 부분 드래그로 캡쳐 원하는 부분을 드래그 한 후 마우스 오..
-
JavaScript 입문 (끝말잇기 게임) : HTML 기본구조컴퓨터 알아가기/JavaScript 2022. 1. 20. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. VS Code를 실행하여 프로그래밍 연습을 해봅니다. 1. 사용폴더와 파일만들기 VS Code에서는 언제나 폴더로 만들어 하나의 프로젝트를 진행합니다. 폴더를 만들거나 파일을 만들거나 하는 기준은 폴더내에 연동될 파일들이 있으면 폴더로 만들어 진행합니다. 저는 WordChain이라는 폴더를 생성하고 마우스 우측 클릭으로 VS Code를 열었습니다. 그리고 다음 그림과 같이 New File을 클릭해서 (물론 상단의 메뉴바를 활용해도 됩니다.) word-chain.html이라는 파일을 만듭니다. 웹에서의 Frame을 만드는 역할은 HTML이 한다는 것은 아시죠? 2. VS Code 기본 HTML 테이블 만들기 VS Code를 사하는 이유중 ..
-
React 기본 : Visual Studio Code 이용 코딩 및 Github에 저장하기컴퓨터 알아가기/React 2021. 6. 18. 19:30
지난시간 React 환경설정을 완료 하였습니다. 이제부터는 코드편집기중에 가장 핫하다는 Visual Studio Code를 이용 본격적으로 개발연습을 해 보도록 하겠습니다. 이전까지는 React환경을 Codepen에서 연습을 했는데 이제는 개인컴퓨터에서 시작을 하는 개념으로 보시면 될 것 같아요. ▒ Local Host 활성화 지난시간에 해본 것처럼 React 코드에 따라 바로 브라우저에 반영될 수 있도록 로컬호스트를 활성화 하겠습니다 . 명령어 : yarn start ▒ Visual Studio Code (VS Code)에서 열기 이제부터는 VS Code에서 열고 코드를 작성해 볼 겁니다. 프로젝트 폴더를 'manage'라는 폴더를 만들었기 때문에 그 안에는 다양한 sub 폴더와 파일들이 있습니다. 따..