IT 공부방 [기본지식 정리]/FrontEnd
-
201. Tailwindcss with Vite, ReactIT 공부방 [기본지식 정리]/FrontEnd 2025. 5. 19. 14:34
1. Vite란? 2. Tailwindcss 라이브러리 설치 & 프로젝트 생성[tailwind 4.1.6 기준 설치 - (VITE 필수)]*) npm은 이미 설치는 기본. (설치 가이드 참조할 것.) 1) react 기본 페이지 라우터 설치 -> npm install react-router-dom (설치 필수) 2) vite용 프로젝트 생성 및 초기셋업 -> npm create vite@latest [프로젝트명] -- --template react -> cd [프로젝트 폴더] && npm install 3) tailwindcss 라이브러리 설치(VITE용)npm install react-router-domnpm install tailwindcss @tailwindcss/vite 4) p..
-
001. Node.js & Npm 기본 활용 방법IT 공부방 [기본지식 정리]/FrontEnd 2025. 4. 30. 11:29
1. Node.js 란? 2. Npm 이란? 3. node 기본 구문 4. npm 기본 구문1) 패키지 설치 확인 npm list -g --depth=0 : npm list --depth=0 : npm list [패키지명] npm ls [패키지명] : 해당 패키지 설치 경로 출력*) TIP혹시, 설치 후 해당 라이브러리 동작에 문제가 있다면, 위처럼CRA가 정한 버전이랑 다른 경우이니 명시된 버전으로 지정하여 설치하자. 예) npm install -D tailwindcss@3.4.17 2) 패키지 신규 설치 및 실행 npm install -D [패키지명]... : 해당 패키지를 현재 시스템의 의존도 체크하여 설치 npx [패키지명] init : 해당 패키지 초기..
-
101. React - 초기 설치, 구성 [with tailwindcss]IT 공부방 [기본지식 정리]/FrontEnd 2025. 4. 30. 11:21
1. 설치&구성 방법1) npm 설치 (node.js 설치 시 자동으로 설치됨)[window]공식사이트에서 설치 후 환경변수 등록 후 아래 확인 설치 확인 : npm -v [mac]brew install nvmvi ~/.zshrc (아래 내용 삽입 후 저장)export NVM_DIR="$HOME/.nvm"source "$(brew --prefix nvm)/nvm.sh"nvm install --ltsnvm use --lts-> 최신 node.js 버전이 설치되고 적용된다. 2) React 초기 구성 생성[CRA 이용한 기본 구성]npx create-react-app [프로젝트이름]cd [프로젝트이름]npm start -> (디폴트로 127.0.0.1:3000 구동됨.) [VITE 이용한 구성]npm ..
-
000. 프론트엔드 개발 흐름IT 공부방 [기본지식 정리]/FrontEnd 2025. 4. 28. 11:30
* JAVASCRIPT, React, Vue.js... [프론트엔드] ClientSideScript 언어이다. 주로 브라우저(사용자)측에서 동적으로 페이지를 렌더링할 때 사용됨. * JSP, PHP, Thymeleaf... [백엔드] ServerSideScript 언어이다. 주로 WAS 서버측에서 동적으로 페이지를 렌더링해서 페이지를 사용자 측으로 던져줄 때 사용. CSR/SSR은 실시간 처리라는 개념은 동일하지만실행되는 기준(위치)이 다르다. 1. 클라이언트 사이드 스크립트 언어 발전순서old Javascript -> JQuery / Ajax -> ES6 -> React / Vue.js / Angular 2. ES6 vs ..