Nomad Coders23 [React] 19. React Query: Fetch / TanStack Query / Axios / DevTools Django DB에서 데이터를 프론트엔드로 가져오기 fetchJavaScript에서 제공하는 내장함수 네트워크 요청을 통해 서버로부터 데이터를 가져오거나 서버에 데이터를 전송하는데 사용 주로 API로부터 JSON 데이터나 HTML 리소스를 가져올 때 많이 사용 django-cors-headers: fetch할 수 있는 사람을 지정 1) 터미널에서 설치: poetry add django-cors-headers2) config > settings.py 의 THIRD_PARTY_APPS 에 'corsheaders' 추가 3) config > settings.py 의 MIDDLEWARE 에 'corsheaders.middleware.CorsMiddleware' 추가 4) config > settings.py.. 2024. 11. 13. [Django] 18. CHAKRA UI: Modal, Component, Grid, Responsive, Dark Mode, Skeleton, Header 로고, 로그인, 계정생성, 다크모드 전환 src > components > Root.tsx React Icons: React로 아이콘을 다루기 가장 좋은 방법 https://react-icons.github.io/react-icons/ Modal: Log in Modal: Sign in & Component 분리 Dark Mode: 사용자가 dark mode를 선택하면 chakra는 그 세팅을 로컬 저장소에 자동으로 저장 다시 접속했을때도 dark mode를 적용하기 위해서는 Chakra의 ColorModeScript 컴포넌트를 추가 theme.ts 파일 생성하여 'theme' 생성 Header.tsx에서 useColorMode 사용 일부 버튼에 대해 원하는 모드(dark / li.. 2024. 11. 8. [React] 17. FRONT-END SETUP: Router, Not Found Page React Router DOM- React 애플리케이션 내에서 클라이언트 측 라우팅을 구현할 수 있도록 도와주는 라이브러리- 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 URL을 기반으로 서로 다른 컴포넌트와 뷰를 렌더링할 수 있음- React Router는 사용자가 애플리케이션 내에서 네비게이션할 때 페이지를 새로고침하지 않고도 URL 경로에 따라 화면을 전환할 수 있도록 해 줌 Root component 만들기: 앱의 모든 화면의 parent 1) src > components > Root.tsx 파일 생성 2) src > router.tsx 파일 생성 Chakra를 이용하여 간편하게 생성 2024. 11. 2. [JavaScript] ReactJS: useEffect component가 처음 render될 때만 코드를 실행시키고 싶은 경우 ex) API를 통해 데이터를 가져오는 경우: rerender될때마다 실행하여 데이터를 다시 가져오고 싶지 않다 위 경우 state가 변할 때마다 매번 해당 component 전체가 rendering 된다 useEffectrendering 여부와 상관없이 코드를 최초 1회 or 원하는 조건 충족시 실행하는 방법 언제 어떤 코드를 실행시킬것인가 (rendering 될 때마다 실행되지 않음) console.log로 실행 여부를 확인 상태값(counter, keyword)을 관리 + useEffect를 통해 특정 조건에서만 특정 작업을 수행useState와 useEffect를 활용해 다양한 상태와 조건에서 사이드 이펙트를 관리하는 방법을.. 2024. 11. 1. [JavaScript] ReactJS: Create React App node js를 다운로드 받아 설치하기 https://nodejs.org Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org styles.css를 import: styles.css에서 작성한 서식이 index.js 전체에 적용된다 => 바람직하지 않음 🤔 css 모듈화🤓: style들도 modular가 될 수 있다! 1) Button.module.css 파일 만들기 (파일명을 'ㅇㅇㅇ.module.css'로) 2) Button.js에서 import하여 적용 3) style.btn 서식을 다른 파일에서도 사용할 수 있다! 2024. 10. 25. [JavaScript] ReactJS: Props / React.memo 컴포넌트 = 함수대체로 맞는 말함수형 컴포넌트는 React에서 가장 기본적인 컴포넌트 유형 중 하나 React 컴포넌트는 JavaScript 함수처럼 작동 props를 매개변수로 받아 UI를 반환 Btn 컴포넌트는 2개의 props를 받음: {text, big} App 컴포넌트는 3개의 Btn 컴포넌트를 사용하여 3개의 버튼을 생성 App 컴포넌트는 Btn 컴포넌트를 재사용하여 여러 버튼을 쉽게 생성할 수 있음 부모 컴포넌트 변경이 자식 컴포넌트에 어떤 영향을 미칠까? : 기본적으로 React는 부모 컴포넌트가 재랜더링(re-rendering)되면 자식 컴보넌트들도 전부 다시 렌더링 React.memo - 이전 props와 새로운 props를 비교하여 동일한 경우 해당 컴포넌트를 다시 렌더링하지 .. 2024. 10. 24. 이전 1 2 3 4 다음 반응형
