일안하고블로그

vscode에서 많은 snippets Extention을 이미 제공합니다. 하지만, 최근에 타입스크립트를 많이 사용하고 있어서 만들고 싶은 형태의 타입스크립트를 사용하는데 많은 한계가 있어서 간단하게 Snippets을 만들어 사용 방법을 남깁니다. 1. vscode를 띄우고 캡쳐 화면의 경로로 들어갑니다. 2. 다음으로 New Global Snippets file을 클릭합니다. 3..클릭을 하시면 이름을 정해야하는데 이름은 편하신대로 정하시면 됩니다. 4. 파일이 만들어지면 양식에 맞춰서 형태를 만들어주면 됩니다. 제가 간단하게 만든것을 보고 참조해서 만들면 됩니다. { "Typescript for Props": { // snippets이름 "prefix": ["dh1"], // 약어입니다. 편하게 본인..

VSCode 테마 변경 VSCode에서 테마는 일반적으로 내장되어있는 테마도 있고 따로 익스텐션을 받아서 설정 하는 방법도 있습니다. 우선 내장되어있는 테마를 변경하는 방법부터 알아보겠습니다. 1. vscode 화면에서 F1버튼을 누르세요. 2. theme 검색 3. color theme 클릭 여기서 본인에 맞는 테마를 변경하시면 됩니다. 저는 최근에 panda Syntax 테마를 받았는데요 . vscode 좌측 5번째 아이콘을 클릭 하시면 됩니다. 여기에서 원하는 theme를 install 하고 리로드를 하시면 됩니다. 리로드후, 다시 F1버튼을 누르고 theme를 검색하면 이렇게 테마가 추가되어있습니다. 원하는 테마를 골라서 사용하시면 좋을것같습니다.

Codepen으로 React 작업해보자 매번 간단하게 테스트를 할때마다 프로젝트를 만들고 테스트를 하는것보다, 좋은 방법이 있습니다.CodePen을 설정하는 것인데요, CodePen은 리액트 관련해서도 많은 라이브러리를 제공해줍니다. 지금 부터 바로 코드펜으로 기본적인 리액트 설정을 하겠습니다. 우선 new pen을 해주세요. Codepen을 어떻게 쓰는지 모르신다면, 아래 링크를 확인해주세요. 링크를 확인 해주세요. 2018/07/18 - [Site & Program ] - Codepen 사용 다음 상단 우측에 setting 버튼을 클릭해주세요. 1. 다음으로 리액트를 JavaScript에 설정을 해야합니다. JavaScript를 클릭합니다. 2. react 라이브러리와 react-dom 라이브러리가 ..

평소에 VScode를 실행할때 평범하게 클릭으로 실행 했지만, 우연히 유튜브 인터넷 컨텐츠를 보다가 vscode실행을 터미널에서 code .으로 할 수있다는것을 알았습니다. 사용 방법은 간단합니다. 원하는 프로젝트 경로로 이동후에 code . 명령을 입력합니다.하지만 명령어 입력으로 vscode가 열리게 하기 위해서는 기본적으로 vscode 에서 한가지 설정을 해주어야합니다. 1.vscode 실행 2.f1 버튼을 누르세요. 3.하나의 창이 나오는데 거기에 shell 입력 4. command install 클릭 5. 다시 f1 -> shell입력 -> teminal: Allow Workspace 클릭 6. 다시 Command 창으로 이동하시고 원하시는 workspace로 이동 후 code . 입력 vsco..

코드팬을 사용 할때 또하나의 좋은 기능이 있습니다.깜박하고 공유를 못해드렸는데 https://codepen.io/sheldhe/pen/JBKxEZ 내가 작성한 글을 다른사람도, 링크를 클릭하여 들어가지않고 보게 하는 방법이 있습니다. 공유하는 방법은 Iframe을 사용하거나, HTML소스를 받거나, 등등 방법이 있어요. 저기있는 코드팬의 결과값 / HTML/CSS/Js 소스를 보여줄거에요. 위에 코드펜이 뭐지하시면 하단에 글 참조하세요.2018/07/18 - [사이트 & 프로그램 추천] - codepen 사용하는 방법은, 제가 만든 Pen을 예시로 설명을 드리겠습니다. 다시 여기 링크로 들어가보세요. 캡쳐한 화면처럼 나올거에요. 여기에서 우측하단에 Embed 라는 버튼이 있어요. 이버튼 누르면 .. 이러..

CODEPEN 사이트 : https://codepen.io/ 사이트 자체 이미지하면 검정색 하고 흰색 이 떠오르네요.코드팬은 주로 자바스크립트 / CSS / HTML를 테스트 할때 사용합니다. 저는 사이트에 있는 모든 기능을 사용하진않고 , 주로 테스트를 하거나 , 예시 소스를 보거나 , 눈 정화용으로 사용하곤 합니다. 사이트가 오픈소스 사이트이지만 저작권이 있는 소스들도 있어서 모든 것이 무료는 아닌 사이트입니다. PRO 버전이 거의 저작권이 있는 소스인 것같아요. 사이트가 미리 테스트를 할때 정말 유용합니다. 작업을 하면서 천천히 사용법을 적어 보겠습니다. 회원가입https://codepen.io/accounts/signup/user/free 무료 유료 설정하는 것이 있지만 무료로 만들었습니다. 로그..