React 연습장

React 를 처음 배우며 만든 예제를 한 앱에 모았다. 위쪽 버튼으로 예제를 바꾼다.

• AppClass: 클래스 컴포넌트로 만든 CRUD. 목록은 public/data/*.json 에서 읽는다.
• AppFunc: 같은 CRUD 를 함수 컴포넌트와 훅으로 다시 쓴 것.
• AppCRUD: 커스텀 훅 useToggle 을 쓴 CRUD.
• CoffeeOrderComponent: 잔액 안에서 커피를 담고 빼는 주문서.
• BlinkingComponent: 이미지가 로드되기 전까지 스켈레톤을 보여 깜빡임을 없애는 예제.

처음엔 CRA 로 만들었고 2024년에 Vite 로 옮겼다. 훅 예제 모음(HooksComponent/)과 styled-components 예제는 파일로만 남아 있고 버튼에는 없다.

플레이그라운드에서 바뀐 것

• 데이터 경로가 /data/... 처럼 루트 기준이어서 하위 경로에 배포하면 깨진다. Vite 의 BASE_URL 을 앞에 붙였다.
• 오리 사진은 dev 서버 프록시로 외부 API 를 불렀는데, 배포본에는 프록시가 없고 그 API 는 CORS 를 열지 않는다. public/images/duck.png 를 쓴다.