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

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

React 프로젝트를 시작하려면 먼저 프로젝트 틀을 만들어야 한다. 이전에는 Create React App(CRA)이 많이 쓰였는데, 요즘은 Vite를 쓰는 경우가 훨씬 많아졌다. 포트폴리오 사이트와 모바일 웹앱 모두 Vite로 시작했다.처음엔 Vite가 뭔지도 몰랐고, 그냥 명령어를 따라 입력했다. 쓰다 보니 왜 Vite를 쓰는지 조금씩 이해가 됐다. 설치부터 실행까지 정리했다.Vite가 뭔가 — 왜 CRA 대신 쓰나Vite는 프론트엔드 개발 환경을 빠르게 구성해주는 빌드 툴이다. 가장 크게 체감되는 차이는 속도다. CRA는 프로젝트가 커질수록 개발 서버 시작 속도가 느려지는데, Vite는 훨씬 빠르게 시작된다. 저장하면 브라우저에 즉시 반영되는 속도도 빠르다.React 공식 문서에서도 현재는 Vite..

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 개발에 가장 많이 쓰이는 에..