웹 스터디노트/react(&작심삼주)26 (react) yarn이란? Yarn이란?Yarn은 JavaScript 프로젝트에서 패키지(모듈)를 관리하는 도구로써 npm과 비슷한 기능을 제공하지만, 더 빠르고 안정적인 패키지 설치를 보장하며, 몇 가지 추가적인 기능을 통해 개발자의 편의성을 높여줌. Yarn의 주요 특징병렬 다운로드와 캐싱 기능을 통해 npm보다 훨씬 빠른 설치 속도yarn.lock 파일을 통해 정확한 패키지 버전을 관리하여, 다양한 개발 환경에서도 동일한 결과한 번 설치한 패키지는 캐시에 저장되어 오프라인 상태에서도 설치가 가능다양한 플러그인을 통해 Yarn의 기능 확장 예시# 특정 패키지 설치yarn add react# 프로젝트 초기화yarn init -y# package.json 파일 생성 및 의존성 관리# package.json 파일은 프로젝트에 필.. 2024. 11. 10. (react) NPM이란? npm이란?npm은 Node Package Manager의 약자로, Node.js로 개발된 모듈(패키지)을 관리하는 도구로써 마치 레고 블록을 조립하듯, 이미 만들어진 다양한 기능들을 모아 나만의 프로젝트를 빠르게 구축할 수 있도록 돕는 역할 npm이 하는 일패키지 설치: npmjs.com에 있는 수많은 패키지를 프로젝트에 설치패키지 관리: 설치된 패키지의 버전을 관리하고, 필요에 따라 업데이트 또는 삭제의존성 관리: 여러 패키지 간의 의존 관계를 자동으로 관리하여, 프로젝트가 정상적으로 동작하도록 해줌패키지 공유: 자신이 만든 패키지를 npmjs.com에 공개하여 다른 개발자들과 공유 가능 장점빠른 개발: 이미 만들어진 패키지를 활용하여 개발 시간을 단축코드 재사용: 다른 개발자가 만든 코드를 활용하.. 2024. 11. 9. [react] 바벨(Babel)이란? JSX란 React 스크립트 안에서 일반적인 HTML의 형태의 문법을 사용할 수 있도록 자바스크립트를 확장한 문법인데, JSX는 JavaScript 코드가 아니기 때문에 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일해주어야 함. 이때 Babel이 사용됨. Babel이란? Babel은 자바스크립트 코드를 변환해주는 도구로 최신 자바스크립트 문법으로 작성된 코드를 이전 버전의 브라우저에서도 실행될 수 있도록 변환해주는 트랜스파일러(transpiler). 왜 Babel이 필요할까?ES6(ECMAScript 2015) 이후로 자바스크립트는 매년 새로운 기능이 추가되고 있으나 모든 브라우저가 최신 자바스크립트 문법을 완벽하게 지원하는 것은 아니기 때문에, 최신 문법을 사용하여 개발된 코드를 모.. 2024. 11. 8. [react] jsx란? JSX란?JSX는 JavaScript XML의 약자로, 자바스크립트에 XML과 유사한 문법을 추가하여 UI를 더욱 직관적으로 작성할 수 있도록 해주는 확장 문법으로 주로 React와 같은 JavaScript 라이브러리에서 사용되며, HTML과 비슷한 문법으로 UI를 구성할 수 있다는 장점을 가짐. 왜 JSX를 사용할까?HTML과 유사한 문법으로 UI를 작성하기 때문에, 개발자가 UI를 쉽게 이해하고 작성JSX 안에 JavaScript 표현식을 직접 삽입하여 데이터를 동적으로 표현UI 요소를 독립적인 컴포넌트로 만들어 재사용성을 높여서 코드 관리 용이 JSX 특징은?JSX는 자바스크립트 표현식으로 결국 자바스크립트로 컴파일되어 실행JSX 안에서 중괄호({}) 안에 JavaScript 표현식을 삽입할 수 .. 2024. 11. 7. 21일동안 매일 글쓰면 선물을? 티스토리에서 3주동안 글을 매일 올리면, 아이폰16pro, 애플워치, 스마트모니터 M7 등 경품 혜택이 있다고 함. 매일 쓰지 못하더라도 오블완 일수에 따라 여러가지 경품 혜택이 있으니11월 7일부터 도전 고고? https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 2024. 11. 4. [git] 특정 브랜치 하나만 clone 하는 방법 --single-branch git에서 특정 Branch 하나만 clone받으려면, -branch 옵션을 사용하여 클론할 수 있다.이 방법은 해당 브랜치와 그 브랜치에 필요한 히스토리만 다운로드하게 된다.// git 클론 명령어git clone -b --single-branch // ex. (designBranch라는 이름의 브랜치를 받는 경우)git clone -b designBranch --single-branch https://github.com/user/repo.git Sparse Checkout 리포지토리를 클론한 후 필요한 브랜치만 체크하는 방법으로조금 복잡하지만 특정 디렉토리 구조만 필요할 때 유용하다.git clone cd git sparse-checkout init --conegit.. 2024. 5. 27. git에서 다른 계정 사용 시 클론 방법 (feat.SSH) SSH git clonegit에서 SSH의 주소를 복사해보면git@github.com:minitoy/design_v24.git 의 형태인것을 볼 수 있는데,이때 다른 계정의 SSH로 clone을 받을 때는 config파일에 등록해놓았던 Host부분의 대표 이름을 넣어주어야 함.예시) git clone git@github.com-minitoy/design_v24.git/* 복사해 온 주소에 "-Host이름"을 붙임 */git clone git@github.com-minitoy/design_v24.git git config(사용자 확인 및 변경) 또한 로컬 git 사용자 정보를 확인 및 변경은git config 명령어를 통해 할 수 있음. /* git 사용자 확인 */git config user.na.. 2024. 5. 20. node 삭제하고 다시 설치하기 리액트를 드디어 하게 되는... ㅠㅠ 일단 노드 버전을 20.5로 맞추라고 해서,기존에 설치된 노드를 삭제하려고 하니... 어떻게 삭제를 하는 것인가?(초보의 눙물눙물...) 삭제 방법그냥 설정이나 제어판 들어가서 프로그램 삭제에서 삭제하면 됨. 그리고 다시 설치~~~완료!! 2024. 4. 26. 이전1 1 2 3 다음 728x90 반응형
