브래의 슬기로운 코딩 생활

리덕스 개념 리덕스 Redux의 탄생의 배경 "수많은 상태들을 어떻게 효과적으로 관리할 것인가?" 상태 관리 라이브러리 리덕스 장점 ⁃컴포넌트 코드로부터 상태 관리 코드를 분리할수 있다. ⁃미들웨어를 활용한 다양한 기능 추가 ⁃ 강력한 미들웨어 라이브러리 redux-saga ⁃ 로컬 스토리지에 데이터 저장하기 및 불러오기 ⁃SSR(서버사이드 랜더링) 시 데이터 전달이 간편하다. ⁃리액트 콘텍스트보다 효율적인 렌더링 기능 리덕스 dataflow 리덕스 필수인가? 1. 복잡도가 낮을때는 : context 사용 2. 복잡할때는 상태관리 라이브러리 - 하나의 상태를 여러 컴포넌트에서 접근해야되는 경우 - 한곳에서 상태를 관리하고 싶은경우 액션 액션은 type 속성값을 가지고 있는 객체 . type속성은 유니크 ..

스타일링 – 고급 부트스트랩 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크 머티리얼 아이콘 설정 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide r..

미니 블로그 기획하기 개발을 시작하기 전에 정해야 할 것들 •필요한 기능 정리 •화면 디자인 필요한 기능 •글 목록 보기 기능(리스트 형태) •글 보기 기능 •댓글 보기 기능 •글 작성 기능 •댓글 작성 기능 화면 디자인 프로젝트 생성하기 미니 블로그 프로젝트 생성 프로젝트에 사용할 패키지 주요 컴포넌트 구성하기 컴포넌트 이름 정하기 필요한 기능 •글 목록 보기 기능(리스트 형태) •글 보기 기능 •댓글 보기 기능 •글 작성 기능 •댓글 작성 기능 컴포넌트 네이밍 •글 - Post •댓글 - Comment * 컴포넌트는 재사용이 가능한 형태로 작게 쪼개서 개발 각 기능에 필요한 컴포넌트 •글 목록 보기 기능 (리스트 형태) - PostList, PostListItem •글 보기 기능 - Post •댓글 ..

API Axios ⁃API 연동을 위한 HTTP 통신 라이브러리 axios 설치 axios 사용법 OpenWeather API (https://openweathermap.org/) ⁃ 날씨 정보를 제공해주는 API. 기능에 따라 유/무료 제공 ⁃ 회원 가입 후 api key를 발급받아 사용 API Test Talend API Tester – chrome 웹 확장 프로그램 •웹 스토어에서 api tester 검색하여 설치 •REST API에 대응하는 다양한 HTTP METHOD 제공 - GET: 데이터 조회 - POST: 데이터 등록 - PUT: 데이터 수정 - DELETE: 데이터 삭제 Current Weather API Test HTTP 상태 코드 ⁃특정 HTTP 요청이 성공적으로 완료되었는지를 판별하..

스타일링 CSS CSS (Cascading Style Sheets) •HTML – 콘텐츠의 구조와 의미를 정의 •CSS – 스타일과 레이아웃을 정의 •CSS는 크게 선택자(selector)와 스타일로 구성 Selector - 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것 Selector의 유형 •Element selector •ID selector •Class selector •Universal selector •Grouping selector •Element의 상태와 관련된 selector •Element selector 특정 HTML 태그를 선택 •ID selector element에 고유한 id를 정의하고 이 id를 기반으로 선택 / #뒤에 id를 붙여서 사용 •Class selector ..

위 자료는 인덕대학교 컴퓨터소프트웨어 학과 배윤성 교수님께서 제작하신 강의 자료입니다.

Shared State shared state •하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우 -각 컴포넌트의 state에서 데이터를 각각 보관하지 않고, 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 효율적 •어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용 •하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용 하위 컴포넌트에서 State 공유하기 state를 공유하는 컴포넌트 만들어 보기 1. 물의 끓음 여부를 알려주는 컴포넌트 1-1. 사용자의 입력값을 받아서 물이 끓는지 판별하는 컴포넌트 2. 입력 컴포넌트 추출하기 - 섭씨/화씨온도를 입력받기 위해 재사용 가능한 컴포넌트로 추출 2-1. 추출한 입력 컴포넌트 적용 - 사..

폼(Forms) 폼이란? Form •사용자로부터 입력을 받기 위해 사용하는 양식 •리액트와 HTML 폼의 차이 - 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 - HTML 폼은 엘리먼트 내부에 각각의 state가 존재 제어 컴포넌트 제어 컴포넌트(Controlled Components) •React에 의해서 값이 제어되는 컴포넌트 (input form element) •제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리할 수 있음 •사용자의 입력을 직접적으로 제어할 수 있음 -입력 양식의 초기값을 원하는대로 지정 -어떤 양식의 값이 변경되었을 때 다른 양식의 값을 자동으로 변경할 수 있음 textarea 태그 textarea 태그 - 여러 줄 입력을 통해서 긴 텍스트..

합성 vs 상속 합성에 대해 알아보기 합성(Composition) •여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 Containment 하위 컴포넌트를 포함하는 형태의 합성 방법 •Sidebar, Dialog 같은 박스 형태의 컴포넌트는 어떤 자식 엘리먼트가 들어올지 예상할 수 없음 •이러한 컴포넌트에서는 Containment 합성 방법을 사용 - 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 Specialization 범용적인 컴포넌트를 만들어 놓고 이를 특수화(구체화)시켜서 컴포넌트를 합성하는 방식 •범용적인 Dialog 컴포넌트 – 모든 종류의 Dialog를 포함하는 개념 •Welcome Dialog는 환영을 위한 구체화된 Dialog 컴포넌트 •Alert..