들어가기 전에 ... Vite 사용 npm create vite@latest . 번들러 HTML, CSS, JS로 웹 개발 TS, SCSS 등등 웹 표준 X 웹에 동작하게 사용하려면 변환 필요 ⇒ Webpack 사용(압축 + 변환(컴파일)) Webpack Webpack은 번들러 단점 무언가를 고치면 번들러가 수정 내용을 다시 빌드(압축 + 변환)하여 결과를 다시 만듦 프로젝트 규모가 커져서 용량이 늘어나면 시간이 많이 듦 → 서비스 개발해서 배포하는 과정은 번들러를 쓰지만 최소한 테스트하는 로컬 서버는 최대 10초 안에 실행 되도록 ⇒ Vite Vite(비트) 번들 최소화 특정 부분을 수정해도 전체를 압축하지 않고 수정 부분만 압축 1 대 1 매칭 CSR은 Vite 사용하는 것이 Best ! SSR은 X..

border-color는 기본 값으로 color 색상을 적용컴포넌트화 목적재사용성캡슐화CSS 변수/* :root는 가상 클래스 선택자 *//* html과 다른 점은 우선순위 밖에 없음 */:root { --color--primary: royalblue; --color--secondary: darkorange;}body { background-color: var(--color--primary);}body:hover { background-color: var(--color--secondary); /* 잘못 적용*/ --color--primary: var(--color--secondary); /* 제대로 적용*/}.container { --size: 100px; wi..

플러그인- 한글화 플러그인Korean Language Pack for Visual Studio Code- 태그 이름 자동화 플러그인Auto Rename Tage: 앞/뒤의 태그 이름을 같게 바꿔줌- 브라우저 출력Live Server: 개발을 위해 임시로 로컬 서버를 오픈 하는 것 단축키(윈도우 기준)의미Windows 단축키MacOS 단축키파일 내 전체 코드 정리Alt + Shift + FOption + Shift + F파일 내 특정(지정한 공간) 코드 정리Ctrl(계속 누르고 있음) + K, FCommand + K, F사이드 바 닫기Ctrl + BCommand + B파일 찾기Ctrl + PCommand + P해당 줄 위/아래 이동Alt + Up/DownOption + Up/Down위/아래에 줄 복사/붙여..

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다. 프론트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 GUI로 변환하고, 그것을 사용자와 상호 작용할 수 있도록 하는 것 HTML : 페이지의 제목, 문단, 표, 이미지, 동양상 등의 웹의 구조를 담당하는 마크업 언어 CSS : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당하는 스타일 시트 JS : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당하는 언어 웹앱 = 웹 사이트, 홈페이지 동작 과정 주소 창에 페이지 주소 입력: 최초 요청(Request) → 서버: 최초 응답(Response) → 브라우저: 추가 요청 → 서버: 추가 응답..

프로젝트 : 다수의 인원이 하나의 목표(서비스)를 이루기 위해 만들어 내는 프로세스 기획 > 디자인 > DB/클래스 설계 > 개발 > … 개발 협업 코드 리뷰 회의 컨벤션: 000 컨벤션 Github 컨벤션 코드 컨벤션 등등 팀 프로젝트 📍 내세울 수 있는 포인트 소통(협업)을 기반으로 역할을 나타냄(= 기술 스택) 개인 프로젝트 📍 내세울 수 있는 포인트 기술 스택으로 프로젝트 전반적 관리 버전 : “프로젝트 유의미한 수정” 프로그램 기능 구분, 오류 수정, 업그레이드 cf. 정수로만 표현? 정수 → 메인 버전(기능이 크게 바꼈을 때) 소수점 → 서브 버전 버전 관리 시스템(VCS) 버전 관리 ⇒ 백업 가능 1. 로컬식 : 내 컴퓨터 안에서만, 협업 X ex) Git Git만 사용하면 본인용 Githu..