리엑트/실무 중심 FE 입문자를 위한 React18 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. 13. SurveyPie API 연동 13-1. Axios 설치 공식 라이브러리https://axios-http.com/kr/docs/intro api 사용 방법https://axios-http.com/kr/docs/api_intro 설치 명령어 : npm install axios --save 예제 API 서버 깃허브 링크 https://github.com/hackurity01/survey-pie-server 13-2. Recoil의 Selector로 API 연동리엑트에서 외부 서버에서 받아온 데이터를 어떻게 관리해야 할까? 리엑트는 내부의 특정 상태가 변경되면 관련 컴포넌트들을 리렌더링 하여 변경된 상태를 화면에 반영한다. React에서 API 호출 과정다른 프로그래밍 언어들과는 다르게 자바스크립트는 사용자를 기다리지 않게 하기 .. 2024. 8. 21. 12. 전역 상태 관리 12-1. 전역 상태 관리란? 리덕스, 리코일전역 상태 관리 라이브러리ReduxRecoilContextAPIMobX https://velog.io/@rachel28/Prop-Drilling 위 이미지에서 컴포넌트들이 위처럼 구조화되어 있고, 최상위 컴포넌트에서 최하위 컴포넌트까지 props를 전달하고 있다.위 과정을 prop drilling 이라고 한다. 그런데 만약 여기서 최상위 컴포넌트의 state가 변경된다면?해당 state 값을 사용하는 컴포넌트는 하위 주황색 2개 컴포넌트인데, 굳이 리렌더링 되지 않아도 되는 데이터가 전달되는 과정에서 거쳐간 컴포넌트들 모두가 리렌더링이 되어버린다.-> prop drilling은 리액트 서비스의 성능을 저하시키는 한 요인이 된다. 그래서 상태를 여러 컴포넌트.. 2024. 8. 19. 11 SurveyPie 컴포넌트 스타일링 11-1 styled-componentsStyled Components 라는건 말 그대로 스타일된 컴포넌트 라는 의미이다.그러니까 컴포넌트긴 컴포넌트인데, 그 컴포넌트에 style만 입혔다고 볼 수 있다. css in js 라이브러리공식 문서https://styled-components.com/docs/basics#installation 설치명령 : npm install --save styled-components 강의에서 예시 아래는 전통적인 방식으로 style 적용하는 코드이다. HTML 태그에 className 속성에 정의된 태그 입력한다. 11-2. 질문 유형 별, 컴포넌트 만들기 11-3. 스타일 변수 만들기style 변수 관리하기CSS 변수로 색상 값 정의하는 방법Jav.. 2024. 8. 17. 이전 1 2 3 4 5 다음
