프론트엔드 공부한 거 정리하기

http-proxy-middleware 패키지 다운 npm install http-proxy-middleware --save yarn add http-proxy-middleware react > src폴더 내에 setupProxy.js 파일 추가 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { // 원하는 proxy 설정 }; 아래 내용 작성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMi..

공식 문서를 보면 아래와 같이 나온다. '자바스크립트 앱을 위한 예측 가능한 상태 컨테이너' Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. ....... 학원 수업을 집중해서 들으면서 따라 적긴 했는데 이해할 순 없었다. 일단 대체 왜 Redux를 쓰는가부터 차근차근 짚어보자. Redux는 무엇이고 왜 쓰는가? 결론부터 말하면 sta..

리액트는 부모에서 자식으로 데이터가 흐르며 props를 이용해 넘겨줘야 하지만 context를 이용하면 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 전역적으로 데이터를 관리하는 기능. function Counter() { return ( 카운터 : increment()}>증가 decrement()}>감소 ); } export default Counter; increment와 decrement 함수를 context로 만들어 전달해보자 import { createContext, useState } from "react"; // 1. 관리자 만들기 (전역 데이터 저장 공간) export const CounterContext = createContext(); // 2. ui 디자인 가져오기(컴포넌트) con..

gh-pages 인스톨하기 (터미널에 입력) npm i gh-pages package.js 파일 내 정보 수정 1. homepage에 github 레파지토리 주소 작성. 2. "scripts" 객체에 deploy 키워드 옵션 추가. 원격 git과 로컬 git 연결. 1. 해당 폴더에서 git 초기화 git init 2. git로컬과 레파지토리 주소 연결 git remote add origin https://github레파지토리주소 3. git add, commit, push하기 (build 폴더가 아닌 개발용 폴더 업로드) git branch -M main git push -u origin main 4. 배포용 build폴더 만들고 deploy키워드를 작성해 gh-pages 브랜치로 업로드 npm run..

react는 src폴더 내에 위치한 이미지와 public 폴더 내에 위치한 이미지의 경로 설정이 다르다. src 폴더 내에 있으면 변수로 지정해서 사용 import img1 from './images/img1.jpg'; import img2 from './images/img2.jpg'; import img3 from './images/img3.jpg'; const Images = () => { return ( ); }; export default Images; public 폴더 내에 있으면 폴더에 접근하기 위해 PUBLIC_URL을 사용. const Images = () => { // src폴더 안쪽에서 public폴더까지의 경로를 구하는 구문 const path = process.env.PUBLIC_U..

const [state, setState] = useState(초기값); const [상태데이터(변수), 상태값을 변경하는 함수] = useState(초기값); 초기값: 원시형 데이터, 참조형 데이터 등

.map() 사용시 key값을 요소에 부여해야 함. key: 고유성을 유지해야 하기 때문에 중복된 번호 사용 불가. index의 경우 단순 출력이 필요한 경우에만 사용하며 삭제, 수정, 호출 등에서는 index가 아닌 key 사용. 대부분 안정적인 고유성을 부여하기 위해 배열 내부 프로퍼티로 id값을 작성해서 key로 사용한다.

React 이벤트 on-접두어 + 첫글자 대문자 이벤트명으로 작성 클릭 function Ex3_event(props) { const handleClick1 = () => { console.log("handleClick1"); }; const handleClick2 = () => { console.log("handleClick2") } const num = (param) => { console.log(param + param) } return ( event 'on-접두어 + 첫글자 대문자 이벤트명 {/* js: onclick / react: onClick*/} 클릭 클릭 console.log("직접작성")}>버튼 num(100)}>숫자 출력 ); } export default Ex3_event;

컴포넌트 생성 rsf: 함수선언문 컴포넌트 rsc: 함수표현식 컴포넌트 컴포넌트명의 첫 글자는 반드시 대문자로 작성해야 컴포넌트로 인식한다. // 함수표현식 컴포넌트 const 컴포넌트명 = () => { return ( // fragment /* 여기 작성되는 내용은 JSX로 화면에 보이는 영역 개발을 쉽게 하기 위해 태그 형식으로 사용하나 html과 달리 태그가 아님 */ ) } export default 컴포넌트명; // --------------------------------------------------- //함수선언문 컴포넌트 function 컴포넌트명(props) { return ( ); } export default 컴포넌트명; import 파일 연결 컴포넌트 포함 .js, .jsx, ..

JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법 HTML과 비슷하나 자바스크립트 객체. ​ JSX 규칙 1. 태그는 반드시 닫아줘야 한다. 빈요소인 경우 xml 방식으로 처리 ​ 2. 최상단에서는 반드시 div 혹은 Fragment() 로 작성 hello react! ​ 3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 { }를 사용 hello {name} ​ 4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항 연산자를 사용 권장 { true ? console.log('참') : console.log('거짓') } ​ 5. 인라인 스타일링은 항상 객체 형식으로 작성 react 6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용 react 7. JSX의 ..