본문 바로가기
728x90
728x90

React12

ES7 React/Redux/GraphQL/React-Native snippets 온라인 강의 듣는데 강사님이  rfc 입력하니깐   자동완성..  이제 다른 컴포넌트 복붙은 끝났다. 2025. 2. 17.
Vite + React +Typescript 초기 세팅 1. Vite + React + Typescript 설치npm create vite@latest my-react-app --template react-ts ->  Vite를 사용하여 React와 TypeScript 템플릿을 기반으로 새로운 프로젝트를 생성하는 명령어  ✔️ TypeScript + SWC 설정한 이유- SWC (Speedy Web Compiler)는 자바스크립트 및 TypeScript 파일을 빠르게 컴파일하는 도구- Rust로 작성된 컴파일러로 속도에 최적화되어 있어 Babel보다 훨씬 더 빠른 성능을 제공 ✔️ SWC와 Babel의 차이점- 속도 : SWC는 Rust로 작성되어 있어 Babel보다 훨씬 빠른 성능- 사용 목적 : SWC는 속도와 효율성에 초점을 맞추고 있으며, Babel은.. 2025. 2. 17.
ESLint : rules 설정 - "no-console" : "error" ESLint - "no-console" : "error"ESLint에서 "no-console": "error" 규칙을 설정하면 console 관련 문법(예: console.log, console.error 등)을 코드에서 사용할 경우 오류가 발생합니다.=> 즉, console 사용을 금지하는 규칙! [ 설정이유 ]=> 개발 중 사용한 console.log 등을 실서버 배포 시 제거할 때 유용한 규칙입니다. .eslintrc.json 파일 생성 후 작성{ "rules": { "no-console": "error" }} ↓console.log("이 코드는 ESLint 오류를 발생시킵니다.");console.error("이것도 오류입니다.");  특정 console 메서드를 허용하려면 "warn" 또.. 2025. 2. 12.
React란? React: Facebook(현재 Meta)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. React는 컴포넌트 기반 아키텍처를 채택하고 있으며, 동적인 사용자 인터페이스를 효율적으로 생성하고 관리할 수 있도록 설계되었습니다.  주요 특징 컴포넌트 기반(Component-Based):React 애플리케이션은 작은 독립적인 컴포넌트들로 구성됩니다.각각의 컴포넌트는 재사용 가능하며, 애플리케이션의 UI를 캡슐화합니다.예: 버튼, 폼, 리스트 등.단방향 데이터 흐름(Unidirectional Data Flow):React의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다.데이터 흐름이 명확하여 애플리케이션 상태 관리가 쉬워집니다.가상 DOM(Virtual.. 2025. 1. 9.
GitHub Actions GitHub Actions: GitHub에서 제공하는 자동화 도구로, CI/CD(Continuous Integration and Continuous Deployment)를 쉽게 설정할 수 있도록 지원합니다. 이를 통해 소프트웨어 빌드, 테스트, 배포 등의 작업을 자동화할 수 있습니다. 주요 기능자동화 워크플로 생성:push, pull_request, release 등의 이벤트에 반응하여 작업을 자동화.예: 코드를 푸시하면 테스트 및 빌드가 실행됨.유연한 실행 환경:다양한 OS 및 언어 지원:Ubuntu, Windows, macOSNode.js, Python, Java, Ruby 등 대부분의 언어 지원.컨테이너 지원:Docker를 사용하여 원하는 실행 환경을 쉽게 정의.커뮤니티 액션:GitHub Marke.. 2025. 1. 9.
번들링(Bundling)이란 번들링(Bundling)- 여러 개의 자바스크립트 파일, CSS, 이미지, 폰트 등 다양한 자원을 하나 또는 여러 개의 파일로 묶는 과정입니다. 이 과정은 보통 웹 애플리케이션을 최적화하여, 브라우저에서 로딩 속도를 개선하고, 파일의 요청 수를 줄이며, 성능을 향상시키기 위해 수행됩니다.번들링의 주요 목적:최적화:여러 개의 자바스크립트 파일, CSS 파일 등을 묶어서 하나 또는 몇 개의 파일로 만듦으로써 HTTP 요청 횟수를 줄입니다. 이는 웹 애플리케이션의 로딩 시간을 크게 개선할 수 있습니다.성능 향상:**트리 쉐이킹(Tree Shaking)**이나 **코드 스플리팅(Code Splitting)**과 같은 기법을 통해 사용되지 않는 코드를 제거하거나 필요한 부분만 로드할 수 있습니다. 이를 통해 번들.. 2024. 11. 27.
728x90
728x90

티스토리툴바