본문 바로가기

WWWEB138

(react) jsx 작성 시 유의사항 하나의 부모 요소React에서 사용하는 Virtual DOM은 효율적인 컴포넌트 변화를 감지를 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 // 올바른 예 제목 내용// 잘못된 예제목내용  속성 사용 시카멜케이스(camelCase): HTML과 달리 class 속성은 className, for는 htmlFor 등과 같이 camelCase로 작성boolean 속성: boolean값은 true인 경우에만 작성하며, false인 경우에는 생략 가능  자바스크립트 표현식JSX 내에서 자바스크립트 표현식을 사용은 중괄호 안에 작성. (변수, 함수 호출 등을 사용)const name = '홍길동';const element = Hello, {name}!;  스타일 작성JSX.. 2024. 11. 11.
(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.
[포토샵] 단축키 T를 눌렀을 때 툴 자동 변경이 안되게 하는 방법 요약Preferences - Tools로 이동,Spring-loaded Tool Shortcuts 선택 해제.     포토샵 클라우드를 사용하면서 미묘하게 불편한 경우가 몇몇 있었는데,  텍스트 단축키인 T를 눌렀을 때 자동으로 이전 선택 툴로 변경되는 경우가 바로 그것. 단순 오류인가보다 하며 참고 인내하고 버티며 쓰다가 문득 이건 좀 아닌 것 같아 찾아보니 오류가 아니라 ADOBE에서 일부러 만들어 넣어놓은 기능이었던 것... ㄷㄷㄷㄷㄷㄷ    해결 방법은 Preferences에 Tools로 들어가서 저기 Spring-loaded Tool Shortcuts에 선택을 해제하면 끝~  (이렇게 쉬운 것을... = . =;;) 2024. 10. 30.
[vscode] 코드 복사-붙여넣기 시 자동으로 태그가 붙지 않게 하는 방법은? 1. "Paste and Indent" 기능 끄기VS Code는 기본적으로 코드를 붙여넣을 때 들여쓰기를 자동으로 적용합니다. 이 기능이 불편하다면, 끌 수 있습니다.Settings(설정)으로 이동합니다.Windows/Linux: Ctrl + ,Mac: Cmd + ,상단의 검색창에 editor.formatOnPaste를 입력하세요.해당 옵션을 비활성화(Unchecked)로 설정합니다.2. Editor Snippet Completion 끄기코드를 붙여넣을 때 자동 완성 기능이 동작하면서 태그 등이 붙는 경우도 있습니다. 이를 끄려면:Settings로 이동합니다.검색창에 editor.suggestOnTriggerCharacters를 입력하세요.이 옵션을 비활성화하세요.3. HTML 및 다른 마크업 언어 관련.. 2024. 9. 13.
[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.
728x90
반응형

티스토리툴바