IT 블로그 만들어 봄

npx create-react-app 프로젝트-이름 위와 같은 명령어로 프로젝트를 생성하면 아래와 같은 폴더들과 파일들이 자동으로 생성된다.  더보기my-app/ ├── node_modules/ ├── public/ ├── src/ ├── .gitignore ├── package.json ├── package-lock.json ├── README.md 먼저 생초짜의 경우 각 파일들이 어떠한 역할을 수행하는지 알 수 없기 때문에 먼저 각 파일과 폴더의 역할을 정리해보려고 한다. 2. 각 파일과 폴더의 역할1) node_modules역할:프로젝트에 필요한 모든 의존성과 라이브러리가 저장되는 디렉토리입니다.React, Webpack, Babel 등의 모듈이 여기에 설치됩니다.주의:직접 수정하지 않습니다.용량이..

Component(컴포넌트) 구성요소 Component? React로 만들어진 앱을 이루는 최소한의 단위 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 자바스크립트 함수와 유사하다. "props"라는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다. 1. Property(Props) props란 “상위 컴포넌트”가 “하위 컴포넌트”에 값을 전달할 때 사용하는 속성. 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 가짐 부모 컴포넌트는 수정이 가능, 자식 컴포넌트는 읽기만 가능 props 를 사용하려면 두 단계가 필요. 상위 컴포넌트에서 Props를 지정. 하위..

event event 작동하게 하기 onClick ← 클릭 시 동작 방식을 뒤에 정한다. preventDefault() ← 동작하지 않게 alert(경고or알림문구) ← 경고or알림창 import logo from './logo.svg'; import './App.css'; function Header(props){ console.log('props', props, props.title); return //function에 event객체는 이벤트 상황을 제어 할 수 있는 여러 기능이 포함되어있다. {props.title} } function Nav(props){ const lis = [ /* html, css, js*/ ] for(let i=0; i{props.title} } function Nav(pr..

node.js 설치 후 사용 vs코드 터미널에 사용할 경로 폴더 선택 후 npx create-react-app (폴더이름) 명령어 실행 설치, powershell은 작동이 잘 안되니 cmd에서 실행하는게 좋음 React 사용자 정의 태그(어떠한 역할을 하는 태그들을 묶어 단순화 시킬수 있다. Class 개념인듯?)를 사용 할 수 있는 장점 Called a “Compoent” src - App.js 원본 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } 사용자 정의 태그 사용 전 src - App.js import logo f..

HTML 01: 기본 태그 , , 태그 태그는 HTML 문서의 시작과 종료를 나타내는 기본 태그로 특별한 속성이나 사용법은 없습니다. 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함합니다. 태그를 통해 브라우저 상단 타이틀 정의 JavaScript 및 CSS 코드를 직접 작성하거나 외부 파일을 import 혹은 url link. 태그를 통해 언어설정, 브라우저 호환성설정 및 모바일 화면설정과 SEO(Search Engine Optimization) 정보를 제공함. 태그 역시 특별한 사용법은 없으며 HTML의 메인 콘텐츠 영역을 정의하는 태그로 필수 요소임. 모든 콘텐츠는 사이에 위치해야 함. 를 구성하는 여러 태그들은 각각 사용 목적에 따라 필요한 태그를 선택해 콘텐츠를 ..

어떻게 적용 할 것인가 대략적으로 어떤 것을 이용 할 수 있는지는 알고 있어야 한다. 세부 디테일은 검색해가면서 찾는다. HTML : 웹 사이트에 기본적인 골격을 갖춰줌 CSS : HTML에서 조금 더 스타일을 입히고 어떻게 사용자에게 보여주는지 결정 JavaScript : 행동을 추가 할 수 있다. 중점적으로 공부하면 좋을 것 HTML HTML Tags : 어떤 태그들이 어떻게 작용하는지 알고 있어야 한다. Page Structure : 페이지 구조를 어떻게 잡아나갈 것인가 Semantic Tags : 어떨 때 어떤 의미있는 태그를 사용해야 하는지 SEO : 사용자가 특정한 키워드로 검색했을 때 우리 웹 사이트가 나올 수 있을지 Accessibility : 접근성을 고려해야 함 기본적인 사용 방법만 공..