React
1.React 개요
React 개요 및 설치 방법
2.State, useState
React에서 자료를 보관하기 위한 변수, state
3.Component
Component 작성 및 동적 UI 구축
4.반복 실행(map, for)
반복 실행을 위한 map, for문
5.props
components 간 변수 상속을 위해 사용하는 props
6.input
input type, input event
7.class
class component, class state, class props
8.React Bootstrap
Bootstrap for React
9.이미지 삽입
이미지 삽입하는 다양한 방법
10.export, import
export, import component
11.Browser Router
React에서 페이지 변환을 위해 필요한 react-router-DOM library & Browser Router
12.url parameter
url parameter(:id, useParams())
13.styled-components
styled-components
14.Component Lifecycle
component, class, function lifecycle
15.서버와의 통신
서버에 데이터 요청 방법(브라우저, AJAX, axios, fetch 등)
16.JSON
JSON
17.tab UI
tab UI 예제
18.axios
fetch, axios
19.React Router Overview
React Router Overview, Client Side Routing, 'createBrowserRouter', 'RouterProvider'
20.GitHub Pages로 사이트 배포(gh-pages)
gh-pages pakage 사용하여 GitHub Pages에 프로젝트 배포하기
21.gh-pages 배포 시 URL 새로고침/직접 입력 문제
gh-pages 배포 시 페이지 이동 및 새로고침 시 404 에러 발생하는 경우
22.gh-pages 배포 시에 이미지 렌더링 안되는 문제
gh-pages 배포 시 public 폴더에 저장한 이미지를 background-image 속성으로 참조한 경우 파일을 찾지 못하는 문제
23.Nested Routes
Nested Routing은 URL의 세그먼트들을 컴포넌트의 계층과 데이터에 연결해주는 보편적인 방식이다.
24.Dynamic Segments
URL segment - dynamic segments
25.Active Links
대부분의 웹 사이트는 top navigation bar를 가지고 있는데, 이 navigation bar를 스타일링 할 때 사용자의 activation, pending 상태에 따라 별도 스타일을 적용해 현재 사용자가 어디에 있는 지, 어디로 이동하는 지 알려주곤 한다.R
26.Relative Links
<a href> 태그처럼 <Link to>, <NavLink to>도 상대 경로를 지정할 수 있다. 특히 nested routes 구축 시 용이하게 사용할 수 있다.위와 같이 Route를 설정해놓은 상태에서 "https://example.com
27.onKeyDown, onKeyPress 구현 시 한글 마지막 글자가 남는 문제
구현하고자 했던 모습 inputfield에서 사용자가 글자를 타이핑할 때, 글자를 입력할 때마다 inputfield에 글자가 렌더링타이핑 후 send button 클릭하거나 엔터키 입력 시 inputfield는 빈 값으로 초기화되고 입력 값은 서버에 전송문제점input