[React] axios = 라이브러리를 이용한 AJAX
·
Front/react
AJAX란?"Asynchronous JavaScript and XML"의 약자로, 비동기적인 JS와 XML을 의미함웹 페이지에서 데이터를 비동기적으로 서버로부터 가져오거나 서버로 데이터를 보내는 기술새로고침 없이 동적으로 데이터를 업데이트하고 표시할 수 있음.XML 대신 JSON과 같은 다양한 형식의 데이터를 주고받을 수 있음.라이브러리 설치// 설치npm install axios// 라이브러리import axios from 'axios'GET 요청 방법function App(){ return ( { axios.get('/url~').then((rs)=>{ console.log(rs.data) }) .catch(()=>{ console.rs('e..
[React] useEffect = 생명주기 동안에 발생하는 부수 효과를 수행하는 Hook
·
Front/react
useEffect컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 등 여러 시점에서 부수 효과를 실행할 수 있도록 함function Post(){ useEffect(()=>{ (오래 걸리는 연산 코드) }); return ( ...생략 )}이런 식으로 작성하면, html이 모두 렌더링이 되고 연산을 수행함 (useEffect 안에 적은 코드들은 html 렌더링 이후에 동작함)재렌더링마다 코드 실행함. useEffect(()=>{ 실행할코드 }, [])둘째 파라미터로 [ ] 넣을 수 있음변수나 state를 넣는 곳인데, [ ] 내에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행함.[ ] 에 아무것도 넣지 않으면, 그냥 마운트 될 때 딱 한번만 실행..
[React] styled-components = 스타일 컴포넌트로 바로 만들기
·
Front/react
styled-components설치 : npm install styled-components// 사용하고 싶은 컴포넌트 맨위import styled from 'styled-components'사용 방법import styled from 'styled-components';let DivBox = styled.div` padding : 10px; color : grey`;let Btn = styled.button` background : ${ props => props.bg }; color : white; padding : 10px;`;function Post(){ return ( styled-components )}css 스타일 같은 것을 직접 ..
[React] nasted routes = 서브 경로
·
Front/react
Nasted routes/category/front-end/category/back-end위 링크 경로 처럼 나눠 주는 걸 nasted routes라고 함 React에서는 react-router-dom 패키지를 활용해서프론트엔드 } />백엔드 } /> } > v프론트엔드 } /> 백엔드 } /> 이런 방법들로 만들 수 있음.function Category(){ return ( 카테고리 )} Outlet을 사용하면 nasted routes안의 element들을 보여줄 곳을 표기할 수 있음. 자리에 박스가 들어감.유사한 서브페이지를 만들 때 유용함.
[React] import, export 코드 분할
·
Front/react
변수 1개// data.js, 분할하고 싶은 코드를 저장할 js 파일let a = 123;export default a;// App.jsimport 작명 from './data.js';console.log(작명)출력 ... 123import시에 단일 변수는 자유작명 가능변수 여러 개// data.js, 분할하고 싶은 코드 저장할 js 파일var n1 = 'Kwak';var n2 = 'Woo';export { n1, n2 }// App.jsimport { n1, n2 } from './data.js';import시에 여러 변수는 자유작명 불가능, export 할 때 지정한 변수명 그대로 import그냥 마음에 드는 방법 사용하면됨,export defaultimportexport { }import { }
[Flutter] flutterfire configure 에러
·
Front/flutter
에러 내용플러터와 파이어베이스 연동 과정에서 터미널에 flutterfire configure를 입력했더니에러가 발생했다.에러 메세지에 firebase login을 했냐고 물어봐서 입력했지만 스크립트를 실행할 수 없다는 메세지가 발생한다.우선 flutterfire configure을 입력하기 전에 pubspec.yaml에 Firebase 패키지를 설치했고, 터미널에서 dart pub global activate flutterfire_cli을 입력해서 패키지를 다운받고 환경변수도 등록 완료했다.해결 방법cmd가 아닌 PowerShell을 관리자 권한 실행.Get-ExecutionPolicy 입력 -> Restricted 출력Set-ExecutionPolicy RemoteSigned 입력 : 입력하면 실행 정..
[Flutter] 코드를 자동으로 수정하는 도구 = dart fix
·
Front/flutter
dart fixDart 언어 및 코드 스타일 지침을 준수하도록 코드를 자동으로 수정하는 도구. 이 도구는 Dart 코드의 품질을 향상시키고 버그를 수정하며 코드를 더 읽기 쉽게 만드는데 도움을 준다.주요역할코드 스타일 수정정적 분석 문제 수정최신 라이브러리 및 SDK 지원코드 품질 향상버그 수정사용 방법터미널에서 프로젝트 디렉토리로 이동- (예: cd C:\Users\user\프로젝트)dart fix --dry-run 또한dart fix --apply 을 입력하면 수정을 미리 확인하고 어떤 변경 사항이 제안되는지 확인할 수 있음.Null Safety 마이그레이션할 때 활용하자~'dart fix'는 플러터 예전 버전에 있던 migrate의 역할도 하는 것임.