웹 개발

#HTML_태그 #기본_구조 #시멘틱_태그

#h_시리즈 #p #a #div #span #img #리스트

#input #select #textarea #form #audio #video

특징 모든 웹 브라우저에서 작동한다. 실행 결과를 즉시 확인할 수 있다. 풀스택 웹 개발자 뿐만 아니라, 다양한 용도의 프로그램을 만들 수 있다. 공개 API, 라이브러리, 프레임워크의 종류가 굉장히 다양하다. 시작하기 준비물 웹 브라우저 크롬 마이크로소프트 엣지 etc 코드 편집기 (IDE) VScode (가벼워서 좋음) Intellij ID...

리엑트란? > UI를 만들기 위한 라이브러리 라이브러리? 자주 사용되는 기능을 정리해 놓은 것 장점 Virtual DOM > DOM (Document Object Model) > 인터넷에서 웹페이지 같은 문서의 표현 방식을 정의한 것 > 웹페이지의 모든 정보

기존 HTML, CSS, JS만 사용한 코드 html css js React 사용 create-react-app 기본 리엑트 프로젝트를 생성해주는 명령어 npm start 리엑트 프로젝트에서 이 명령어를 실행하면 웹사이트가 실행된다.

JSX (JavaScrpit + XML/HTML) 기존의 JavaScript에 XML과 HTML 태그들을 사용할 수 있게 해주는 것 예시 React.createElement() ReactDOM에 렌더링되는 JS 객체를 생성해준다. > JSX를 쓰면, React

Element > Element : 어떤 물체를 구성하는 성분 리엑트 앱을 구성하는 가장 작은 블록들 -> 그냥 화면에 보이는 모든 것이라 생각하면 됨 웹 브라우저의 DOM Element 처음엔 Virtual DOM에서 React Element로 존재하다가, 렌

Component 레고 부품처럼 웹 사이트를 구성하는 요소 React Component Props (Property) Component의 속성을 담고 있는 JS 객체 색, 폰트 크기 및 스타일, 테두리 등의 속성을 바꿀 수 있다 같은 Component라도,

State (상태) > 리액트 Component의 변경 가능한 데이터 = State 웹사이트를 이용하다 보면, 사용자의 입력이나 시간에 따라 변하는 요소들을 확인할 수 있다. 이런 변화하는 요소들을 State로 취급한다. 렌더링이나 데이터 흐름(=변화)에 사용되는

Hook 사용 이유 기존엔 Class Componet만 Sate를 정의해서 사용할 수 있었지만, Hook을 사용하면 Function Component를 사용하면서도 State를 구현할 수 있다. 사용법 useState() State를 사용하기 위한 Hook.

Event(이벤트) 컴퓨터 동작 과정에서 일어난 어떠한 사건 Ex) 키보드 입력, 마우스 좌클릭 등 Handler(=Listener) 이벤트를 처리하는 함수 또는 객체 > DOM과 React에서 컴포넌트에 Handler를 추가하는 방법 > Class Compo

Conditional Rendering > 조건부 렌더링. 어떤 조건에 따라 렌더링 결과가 달라지는 방식 예제 Truthy & Falsy JS에선 기본적으로 boolean 자료형을 써서 true/false를 구분할 수 있다. 그럼, Truthy/Falsy는 각

여러 개의 Component를 렌더링하기 List 그냥 같은 아이템(또는 컴포넌트)를 모아둔 목록. = 배열임 map() 배열의 아이템 하나하나에 대하여 어떤 명령을 수행하고 그 결과를 반환한다. 주의 map()을 쓸 때, 각 아이템은 고유한 key를 가지고

Form 사용자에게서 무언가를 입력받기 위해 쓰는 양식 From 예시 기존 HTML Form 코드양도 많고, JS와 연결하기도 귀찮다. Controlled Components 그 값이 React의 통제를 받는 Input Form Element Control

Lifting State Up Shared State 하나의 데이터를 여러 개의 컴포넌트에서 처리해야 하는 경우가 있기도 하다. 이런 경우, 자식 컴포넌트들의 State를 부모 컴포넌트의 State를 공유해서 처리하는 것이 더 효율적이다. Shared State

Composition > 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 리액트를 개발하면서, 컴포넌트를 어떻게 합치는지에 따라 코드 가독성, 렌더링 성능, 유지보수 난이도 등이 변한다. Containment Container 같은 느낌으로, 하위 컴포

Context > 위계질서에 상관 없이 리액트 컴포넌트들 사이에서 데이터 전달을 가능하게 함 > (이전까지는 '상위->하위' 밖에 안 됐지만, Context를 쓰면 위계에 상관 없이 데이터 전달이 가능하다) context 설명 언제 사용하는가? 주로 이런 데이터

Styling > 웹사이트의 레이아웃을 구성하는 버튼, Box, 텍스트 등의 컴포넌트에 색깔, 크기, 투명도, 등을 설정하는 방법 CSS > Cascading Style Sheets > 계단식 스타일 시트 각각의 스타일에 적용 규칙을 부여하고, 이 조건에 부합하

React Bootstrap 이란? React Bootstrap 홈페이지 원래 웹 페이지를 만들기 위해선 버튼, 네비게이션 바, 텍스트 필드, 리스트 아이템, 풋터(footer), 헤더(header) 등을 개발자가 따로 정의하고 만들었어야 했다. 하지만, React

가장 많이 쓰는 Layout 기본 HTML 태그만으로 구현하긴 힘들지만 필수적으로 쓰이는 레이아웃 요소는 다음과 같다. Header Footer Navigator Modal Offcanva Overlay Progress Component Placeholder Pag