컴포넌트웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소 1단계 : 컴포넌트 정의하기사용하고 싶은 컴포넌트를 원하는 마크업을 추가하여 작성 (React 컴포넌트의 이름은 항상 대문자로 시작해야 함)export default function Introduce() { return ( 제 이름은 권여진입니다. 만나서 반갑습니다! );} 2단계 : 컴포넌트 내보내기export default 접두사를 사용하면 다른 파일에서 해당 컴포넌트를 가져올 수 있도록 해줌해당 컴포넌트를 내보낼 준비가 된 것이라고 말할 수 있음// 방법 1export default function Introduce() { return ( // JSX 코드 );}// 방법 2function Introd..

React 프로젝트 생성하기  CRA 사용하기모듈 번들러로 Webpack 사용개발 환경에서도 번들링 진행 O서버 시작과 리로딩 시간 느림웹팩의 다양한 기능 이용 가능 - 프로젝트 생성 : npx create-react-app프로젝트에 필요한 모듈도 같이 설치 (node_modules) - 프로젝트 실행 : npm start 실행하면 http://localhost:3000/ 로 아래와 같은 화면이 나온다!// CRAnpx create-react-app// 실행npm start CRA 폴더 기본 구조my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ ├─..

NPM (Node Package Manager)JavaScript 패키지의 설치, 배포, 관리를 도와주는 도구  JavaScript 패키지?재사용 가능한 JavaScript 코드 묶음, npm에 배포된 패키지는 package.json 파일로 정보를 표시함 패키지를 사용해서 또 다른 패키지를 만들 수도 있음 -> 사용한 패키지에 대한 의존성이 생김 Npm을 사용하여 프로젝트에 패키지 사용하기// 프로젝트 초기화 & package.json 파일 생성npm init// 패키지 설치npm i 패키지이름npm install 패키지이름// 패키지 삭제npm uni 패키지이름npm uninstall 패키지이름// 패키지 목록 확인npm lsnpm list  - npm 사이트 npm | HomeBring the bes..

React현대적이고 강력한 사용자 경험(UX)을 제공하는 접근성 높은 JavaScritp 라이브러리 Facebood(현 Meta)에서 만든 UI 개발 자바스크립트 라이브러리 현존하는 JavaScript UI 라이브러리 중에서 가장 많이 사용하고 있으며 현업에서 React는 중요한 기술 스택 중 하나로 자리 잡아있다온라인상에 풍부한 자료와 예제 코드, 질문과 답변을 찾아보기도 편리! HTML, CSS. JS를 사용해서 만드는 것보다 더 체계적이고 성능이 좋은 웹 어플리케이션을 만들 수 있음 React의 주요 특징가상 DOM을 통한 효율적인 렌더링컴포넌트 기반의 재사용 가능한 UI단방향 데이터 바인딩JSX 문법을 통한 직관적인 UI 작성SPA 개발 지원활발한 커뮤니티와 생태계 React를 사용한 대표적인 웹..

시맨틱 마크업 (Semantic Markup)시맨틱은 '의미론적인'이라는 의미 시맨틱 태그는 개발자와 브라우저에게 의미를 제공콘텐츠 태그명은 '이 요소가 가진 목적이나 역할은 무엇인가'를 나타냄  -> 검색 엔진에 좋은 단서 시맨틱 장점대부분의 시맨틱 태그는 컨테이너 태그(div, span)와 같이 특별한 스타일을 제공하지 않음그러나 장점이 있다!!!검색 엔진은 시맨틱 태그를 중요한 단서로 봄시각 장애가 있는 사용자가 화면 판독기로 페이지 탐색할 때 참조가 됨코드의 가독성이 좋아짐컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편함 대표적인 시맨틱 태그태그명의미태그명의미독립적인 콘텐츠머릿말별도의 콘텐츠주된 콘텐츠추가적인 상세한 정보네비게이션 링크figure의 자막콘텐츠의 한 섹션 (절)설명 붙는 독립 컨텐..

수업 내용 정리  Tag(Element)의 기본 요소엘리먼트 : 우리가 태그라고 부르는 것의 정식명칭은 엘리먼트로 한국말로 요소라고 함태그 : 엘리먼트의 종류를 기술할 때 안에 적는 것을 의미함, 즉 엘리먼트의 이름컨텐츠 : 내용으로 여는 태그와 닫는 태그 사이에 기술 됨, 안에 다른 엘리먼트가 들어갈 수도 있는데 이 경우 해당 엘리먼트는 children(자식)이 됨속성 : 엘리먼트의 속성(Attribute)을 나타냄, 값이 없을 수도 있고 있을 수도 있는데 있다면 반드시 ="값" 형태로 적어줘야 함 void tag와 self closing tag같은 형태가 아니라 혹은 같이 닫는 태그가 없거나 본체에 포함된 경우가 있음이런 태그의 정식 명칭은 void tag이며 self closing tag라는 명칭과..