프론트엔드 정복하기

**개발 환경 MongoDB 왼쪽 메뉴 => SECURITY탭 => Network Access 하위메뉴 => whitelist에 ip주소를 추가해야 나의 앱과 MongoDB를 연결할 수 있다. *이때 공인 IP주소를 사용해야 함. 네이버에 '내 IP 주소 확인'이라 검색했을 때의 결과 (보통 집 pc는 인터넷에 pc가 단독연결되어 있으므로 공인 ip와 사설 ip가 동일함.) (but, 노트북은 네이버에 검색해 사설이 아닌 공인 ip를 사용해야함) ( * cmd 명령프롬프트에서 ipconfig 명령어를 쳤을 경우.. 내부 ip 즉 사설 ip가 검색되는데.. ( IPv4주소) mongodb whitelist에는 공인 ip주소를 입력해야 함. ) *****내 로컬 IP를 사용하면 어떤 환경에서든 접근 가능. ..

dev 환경은 파일의 무게가 무겁다. 따라서 production 모드의 app을 build 할 때는 build 파일을 사용한다. npm run build => build 폴더 생성됨 build 폴더 내의 index html파일은, dev에 있던 불필요한 공백을 생략하고.. src 여러 파일들도 용량을 줄이고.. 에러메시지, 경고 등도 없애준 후에 그것을 로드할 수 있도록 처리한다. react 파일을 배포할 때는 build 안에 있는 파일을 쓰면 된다.

const OPTIONS = [ {value:1, label:"1번 옵션"}, {value:2, label:"2번 옵션"}, {value:3, label:"3번 옵션"}, {value:4, label:"4번 옵션"}, {value:5, label:"5번 옵션"},]const Component = () => { const [selectedValue, setSelectedValue] = useState(); const handleChange = (e) => { setSelectedValue(e.currentTarget.value) } return ( {OPTIONS.map((option)=>( {option.label} ..

1) useState 설정 const [Products, setProducts] = useState([]) const [loading, setloading] = useState(false) const [currentPage, setcurrentPage] = useState(1) const [productsPerPage, setproductsPerPage] = useState(10) 2) useEffect에서 데이터 불러오기 useEffect(() => { setloading(true); let body={category:'인생뷰티'} Axios.post('/api/product/lists', body) .then(response=>{ if(response.data.success){ setProducts(..

1) useEffect에서 server에서 데이터 불러오기 : (알맞은 조건을 설정하여..) (axios, find 메서드 사용) 2) if response.data.success 하면 => useState에 data 정보를 저장하기 ex ) [ Product, setProduct ] = useState( [ ] ) => state에 data 전체 정보가 array로 저장된다. 3) State에 mapping한다. Product . map ( (product, index) =>{ return ( { product.name } ) }) const [Products, setProducts] = useState([]) useEffect(() => { let body={category:'인생뷰티'} Axios...

https://m.blog.naver.com/PostView.nhn?blogId=hwangmari&logNo=221370637608&proxyReferer=https:%2F%2Fwww.google.com%2F 텍스트 애니메이션 https://freefrontend.com/css-text-animations/?fbclid=IwAR1EICEne-rpaLLFhrS078_qu0ylfyNssiblfSDvP--62qd_jNp8H2A9dkE 로딩 애니메이션 rwdb.kr/pageloadings/ (# 로딩 애니메이션 모음) ㅇ;ㅣ라고 검색