디자이너의 코딩노트 디자이너의 코딩노트

처음 VS Code를 쓸 때 터미널이 뭔지 몰라서 그냥 닫아버린 적이 있었다. 검은 화면에 글자만 나오는 게 낯설었다. 그런데 React 개발을 시작하면서 터미널 없이는 아무것도 못 하게 됐다. 서버 실행, 패키지 설치, Git 작업까지 터미널에서 다 하기 때문이다.처음 쓰는 사람 기준으로 VS Code 터미널 기본 사용법을 정리했다.터미널 여는 법VS Code에서 터미널을 여는 방법은 세 가지다.1단축키 Ctrl + ` (백틱 키 — 숫자 1 왼쪽에 있는 키)2상단 메뉴 Terminal → New Terminal3상단 메뉴 보기 → 터미널💡 터미널이 현재 열린 폴더 기준으로 열린다 VS Code에서 폴더를 열고 터미널을 실행하면 그 폴더 위치에서 터미널이 시작된다. 프로젝트 폴더를 먼저 열고 터미널을..

VS Code를 처음 설치했을 때는 확장 프로그램이 뭔지도 몰랐다. 쓰다 보니 하나둘 깔게 됐고, 어느새 9개가 설치되어 있었다. 그중에서 실제로 쓰면서 "이거 없으면 불편하겠다" 싶었던 것들을 골라 정리했다.Prettier — 코드 자동 정렬코드를 저장할 때마다 자동으로 들여쓰기와 줄바꿈을 정리해준다. 처음엔 그냥 깔았는데, 쓰다 보니 없으면 불편할 것 같아서 계속 쓰고 있다. 코드가 지저분하게 쌓이는 걸 자동으로 정리해줘서 가독성이 훨씬 좋아진다.저장(Ctrl + S)할 때마다 자동으로 동작하도록 설정해두면 따로 신경 안 써도 된다. Color Highlight — CSS 색상값 시각적으로 표시CSS 파일에서 #4466ee, rgb(255, 0, 0) 같은 색상값 옆에 실제 색상을 작은 박스로 보여준..

React로 포트폴리오를 만들어보겠다고 마음먹었는데, 막상 시작하려니 코딩보다 환경 셋팅부터 막혔다.개발자들은 당연하게 쓰는 도구들인데 디자이너 입장에서는 뭘 설치해야 하는지, 어떤 순서로 해야 하는지 전혀 감이 안 온다. 검색과 AI의 도움을 받아가며 하나씩 셋팅했던 과정을 정리해봤다.필요한 것들 한눈에 보기1 Node.js 설치2 VS Code 설치3 pnpm 설치4 로컬 실행 확인1. Node.js 설치React 자체가 Node.js 환경에서 돌아가기 때문에 가장 먼저 설치해야 한다. Node.js 공식 사이트(nodejs.org)에서 LTS 버전을 받아서 설치하면 된다.2. VS Code 설치코드 에디터로 VS Code를 선택했다. 무료고 한국어 지원도 되고 React 개발에 가장 많이 쓰이는 에..