ECC 14

5주차

6. 리액트 라우터 6-1. 처음 만나는 리액트 라우터 URL이란? 인터넷에서 자원(웹 브라우저가 이해할 수 있는 모든 형태의 데이터)의 위치. 웹 브라우저가 특정 웹서버에 원하는 자원을 요청할 때 사용 구성: 통신프로토콜 - 도메인(호스트, 웹 서버 이름) - 경로 - 쿼리 매개변수 - 프레그먼트 브라우저는 프로토콜/도메인/ 을 도메인에 요청하고, 서버는 해당 경로헤 해당하는 자원을 HTTP 프로토콜 사용해 응답 location 객체 href: 주소창에 입력된 URL 전체 문자열을 얻거나 다른 URL을 프로그래밍으로 설정할 때 사용 protocl: URL의 프로토콜 문자열을 얻고 싶을 때 사용(마지막 콜론:도 포함) host: 도메인과 포트번호가 결합된 문자열 얻을 때 pathname: / 문자 뒤 경..

ECC 2024.04.19

4주차

5. 상태 관리와 리덕스 패키지 5-1. 리덕스 기본 개념 이해하기 리덕스와 리덕스 관련 필수 패키지 플럭스(flux) : 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법 리덕스: 플럭스 설계 규격을 준수하는 오픈소스 라이브러리 앱 수준 상태 알아보기 앱 수준 상태(app-level states) : 앱을 구성하는 모든 컴포넌트가 함께 공유할 수 있는 상태 - Provider 컴포넌트와 store 속성 import { Provider as ReduxProvider } from 'react-redux'; - 리덕스 저장소와 리듀서, 액션 알아보기 타입스크립트 언어로 리덕스 기능을 사용할 때는 먼저 다음처럼 앱 수준 상태를 표현하는 AppState와 같은 타입을 선언해야 함..

ECC 2024.04.12

3주차

3장: 컴포넌트 CSS 스타일링 3-1. 리액트 컴포넌트의 CSS 스타일링 부트스트랩 사용하기 부트스트랩(bootstrap) : CSS 프레임워크 public 폴더의 index.css에 부트스트랩 cdn 붙여넣어 사용 부트스트랩 컴포넌트 예시 리액트 함수형 컴포넌트로 사용하기 위해 공식문서의 form에서 for->htmlFor, class->className, input 태그 닫기의 수정이 필요하다. export default function Bootstrap() { return ( Email address We'll never share your email with anyone else. Password Check me out Submit ) } material icon 사용하기 @import 방식은 ..

ECC 2024.04.05

2주차

교재 https://product.kyobobook.co.kr/detail/S000212754474 Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 전예홍 - 교보문고 Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 프런트엔드 개발자 채용 공고에서 인기 있는 자격 요건은 모두 갖췄다! 최신 웹 개발 트렌드를 반영하고 실무 코드로 가득 채운 ‘리액트 전문서 product.kyobobook.co.kr 기존 교재로 예정되어 있던 의 절판 이슈로 개정판 사용함 1장 : 리액트 개발 준비 1-1. 리액트 프레임워크 이해하기 리액트(React) : 오픈소스 자바스크립트 프레임워크. 가상 DOM과 JSX라는 방식으로 동작. 싱글 페이지 어플리케이션을 만드는 프론트엔드 자바스크립트 프레임워크 싱글..

ECC 2024.03.27