리엑트17 3-5. 스터디파이 강의 컴포넌트 만들기에서 사용한 css 리스트, 컴포넌트로 나눠본 것 CourseCard.css ul,li { list-style-type: none; margin: 0;}.CourseCard { max-width: 300px;}.cover { width: 100%;}.cover img { width: 100%; border-radius: 4px;}.tags { display: flex; font-size: 0.8rem; font-weight: 600; line-height: 1.47; padding: 3px 0 5px 0;}.tags .tag:not(:last-child):after { content: '·';}.name { margin: 0; padding: 6px 0;}.price { font-size: 0.9rem; font-weight.. 2024. 10. 5. 1-13. provide와 inject 일반적으로 하위 컴포넌트에 값 전달할 때 아래처럼 전달한다.다만 이럴 경우 최하위 컴포넌트에서만 필요한 값인 경우, 그 모든 상위 컴포넌트에서 값을 전달만 해주는 부분을 추가해줘야 하기 때문에 복잡해진다.특정 하위 컴포넌트에서만 값이 필요한 경우 provide와 inject를 사용할 수 있다.(depth가 아무리 깊어도!!) https://vuejs.org/guide/components/provide-inject.html#prop-drilling 아래는 provide/inject 사용 예시 2024. 9. 20. 16. Admin 리스트 페이지 구현 16-1. useSWR을 이용하여 API 연동 useSWR : 데이터 가져오기를 위한 React Hooks아래는 useSWR 공식 문서https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.app 설치 명령어 : npm install --save swr 캐시에 저장된 데이터가 실제 서버에서 변경이 생긴 경.. 2024. 8. 27. 15. Admin 설계 15-2. 컴포넌트 구조 설계설문 조사 관리 페이지 설문 조사 빌더 페이지 15-3. 프로젝트 세팅 프로젝트 생성 명령 : npx create-react-app survey-pie-admin npm install --save-dev eslint-plugin-simple-import-sort 15-4. Ant Design 설치 15-5. 라우터 적용리액트 라우터 설치 명령 : npm install --save react-router-dom https://charactermail.tistory.com/758 http://example.com/detail 전통적인 방식의 웹 서비스에서 라우팅은, 서버에 요" data-og-host="charactermail.tistory.com" data-og-sou.. 2024. 8. 26. 이전 1 2 3 4 5 다음
