이번 캡스톤디자인에서는 서버가 DB백엔드 서버, AI 서버 두개로 나뉘고 토큰도 두 서버가 각각의 토큰이 필요한 상황이어서 axios의 인스턴스 기능과 Interceptors를 이용해서 각각의 서버에 맞게 설정하여줬다. Axios- axios는 Promise 기반의 HTTP 클라이언트 라이브러리- fetch 보다 인터셉트, 자동 json 변환 등 더 많은 기능을 지원한다. import axios from "axios";axios.get("/api/users") .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); Axios 인스턴스공통 설정을 가진 axio..

이번에 과제를 하면서 redux 환경에서 local storage를 적용해야 하는 문제가 있어서 알아 보던 중에 redux prsist라는 라이브러리가 있다는 것을 알게 되었다! 생각보다 적용하기 쉬워서 바로 프로젝트에 적용해볼 수 있었다.추가로 redux thunk라고 데이터를 비동기로 처리할 수 있게 해주는 라이브러리도 있어서 함께 공부해보았다. redux thunk redux는 기본적으로 동기적인 코드만 처리할 수 있다.그런데 API 요청은 시간이 걸리니까 비동기 작업으로 처리해야 한다.이 때 redux-thunk를 사용하여 비동기 작업을 처리할 수 있다. redux-thunk는 비동기 작업을 처리할 수 있게 도와주는 미들웨어이다. [기존 방식]const App = () => { const dis..

이 블로그 글은 내가 PWA 초기 세팅을 까먹지 않기 위해 작성하는 것임. PWAPWA(프로그래시브 웹 앱)은 크로스 플랫폼 웹 어플리케이션을 생성해준다.그냥 쉽게 정리하면 리액트 네이티브를 안쓰고 리액트만으로 앱을 만들 수 있는 것임. PWA 사용 이유캡스톤디자인이 일단 앱으로 해야지 접근성이 좋고 주제와 잘 맞을 것 같아서 앱 개발을 해야 하는 상황임. 그런데 Flutter는 일단 해본 적이 없고 리액트 네이티브는 너무 무겁고 다시 공부해야 되는게 귀찮았음. 무엇보다 안드로이드 스튜디오 이용해서 시뮬레이터 돌리는게 너무 무거워서 쓰고 싶지 않았다. 그래서 우리 프로젝트에는 마이크 기능만 필요하기 때문에 리액트 기반 앱을 만들 수 있는 PWA를 적용하고 자함. 프로젝트 생성npm create @v..

Fragments 사용법값을 하나만 반환하기 때문에 하나의 상위 태그로 묶어줘야 함.→ 상위 태그를 로 묶게 되면 DOM에 div가 2개 생겨서 중복되는 요소가 생김 fragment 컴포넌트root 컴포넌트가 필요한 경우 형제 컴포넌트를 감싸는 용도로 사용화면상으로 보이는 실제요소를 렌더링 하면 안됨Fragment import 해서 가져옴 태그로 감싸주면 불필요한 div가 사라진 걸 확인할 수 있음.Fragment 가져올 필요도 없이 (빈 태그) 로 대체할 수 있음. 내부 요소에 Props이 전달되지 않을 경우커스텀 컴포넌트 Sectionexport default function Section({title, children}) { return ( {title} {children} );} ..

Context기존의 일반적인 앱 컴포넌트 → props를 통한 데이터 전달자주 사용하는 데이터의 경우 코드가 복잡해지고 사용이 불편함리액트 컴포넌트들 사이에서 데이터를 컴포넌트 트리를 통해 전달 기존 방식여러 컴포넌트에 걸쳐서 자주 사용되는 데이터를 전달 할때 반복적인 코드가 많이 생김Context 사용데이터를 바로 전달. 데이터를 한 번에서 관리해서 디버깅 하기에 유리 언제 Context 사용? 여러 개의 컴포넌트들이 자주 필요해 하는 데이터로그인 여부, 로그인 정보, UI테마, 현재 언어 등props를 통해서 넘겨주면 계속 자식 컴포넌트로 내려가게 됨function App(props){ return ;}function Toolbar(props){ // ThemedButton 컴포넌트에 theme을 넘..

List와 Key List리스트를 위해 사용되는 자료 구조 - 배열배열을 사용해서 리스트 형태로 element을 렌더링할 수 있음 Key리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열 여러개의 Component 렌더링 하기map() 함수배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 렌더링하는 것const doubled = numbers.map((number) => number * 2);리액트에서 맵함수를 사용하여 앨리먼트를 렌더링하는 코드const numbers = [1,2,3,4,5];const listItems = numbers.map((number)=> {number});ReactDOM.render( {listItems}, document.getElementById('root'));map..

Handling Events DOM의 Event ActivateDOM에서 클릭 이벤트를 처리하는 예제 코드버튼이 눌리면 Activate 라는 함수를 호출하도록 되어있음.클릭 이벤트를 처리할 함수를 onClick을 통해서 전달 리액트의 Event ActivateonClick으로 카멜 케이스 표기법이벤트를 처리할 함수 그대로를 전달 Event Handler어떤 사건이 발생하면 사건을 처리하는 역할이벤트 리스너라고 부르기도 함. 함수 컴포넌트 이벤트 핸들러 추가 방법function Toggle(props){ const [isToggleOn, setIsToggleOn] = useState(true); //방법1. 함수 안에 함수로 정의 function handleClick() { setIsToggleOn((..

Hooks의 개념과 useState, useEffectFunction Componentstate 사용 불가Lifecycle에 따른 기능 구현 불가HooksClass Component생성자에서 state를 정의setState() 함수를 통해 stae 업데이트Lifecycle methods 제공React의 hook도 마찬가지로 React의 state와 생명주기 기능의 갈고리를 걸어 원하는 시점에 정해진 함수가 실행되도록 만든 것.→ 이 때 실행되는 함수: hookhook은 use로 시작함.개발자가 직접 커스텀 훅을 만들어서 사용할 수 있다.커스텀 훅: 이름을 마음대로 정할 수는 있지만 앞에 use를 붙여 hook이라는 걸 나타내 줘야 함. useState()state를 사용하기 위한 hook함수 컴포넌트에서..