React15 react에서 리랜더링 없이 url에 쿼리 수정하기 const handlePagination = page => { setCurrentPage(page.selected) const currentUrlParams = new URLSearchParams(window.location.search) currentUrlParams.set('currentPage', page.selected) window.history.replaceState(null, '', `?${currentUrlParams.toString()}`) } 2024. 8. 1. moment로 날짜 나타내기 console.log(data?.site_edit?.audit_start_date) 찍어보면 2024-06-17T00:00:00 형태로 나옴. 1. importimport * as moment from 'moment' 2. 사용하기moment(data?.site_edit?.audit_start_date).format("YYYY년 MM월 DD일") Flatpickr로 날짜 짝기 ( { .. 2024. 6. 28. /* eslint-disable @typescript-eslint/no-use-before-define */ react에서 no-use-before-define 검사 끄는 방법 : 맨위에 /* eslint-disable @typescript-eslint/no-use-before-define */ 선언. 2023. 10. 4. confirm 사용방법 const onLogoutClick = async () => { if (window.confirm('로그아웃 하시겠습니까?')) { await signOut(); } }; 2023. 1. 30. Link to, history를 사용하기 1) Link to 쓰기 Back to Home 2) history를 쓰기 const submitForm = e => { e.preventDefault(); const email = emailRef.current.value; const password = passwordRef.current.value; // DetailPage로 이동하는 코드를 작성하세요. history.push(`/detail?email=${email}&password=${password}`); }; 그러면은 url에 쿼리로 내가 입력한 값이 들어간다. https://ezpxu7uua99m6xckveo8fc4ymi4uyzib.runner-forwarder-a-02.elice.io/detail?email=dd&password=dddd R.. 2022. 12. 4. 메타테그란? 메타 테그는 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용한다. 1. 키워드 2. 페이지에 대한 설명 3. 문서의 저자 4. 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제 5. 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제 6. 페이지의 타이틀. HTML meta tag 7. 모든 검색엔진을 허용하겠다 8. 오픈그래프 메타테그 오픈 그래프 태그는 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보입니다. 메타 테그나 title테그는 head테그 안에 넣는다. 이외 참고할 사이트 : https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 2022. 11. 15. 배포했는데 갑자기 오류가 났다.. 오류내용 : react-dom.production.min.js:189 TypeError: e.skill.map is not a function local에서는 문제가 없는데 왜이럴까.. 해결방법 : 지원한 회사에서 test를 하는데 skill부분에 빈칸을 입력한 거였다. 빈칸일 경우 '추가'버튼이 회색으로 보이겠금하여 처리 완료. 2022. 9. 2. 드롭다운메뉴바 구현 코드 NarBar.js import React, { useState } from 'react'; import { Drawer, Button, Avatar } from 'antd'; import './Sections/Navbar.scss'; import { Col, Row } from 'antd'; import axios from 'axios'; import { Link, useNavigate } from 'react-router-dom'; import { useSelector } from "react-redux"; import Log from './Sections/Log'; import Footer from '../LandingPage/Sections/Footer'; function NavBar({childr.. 2022. 8. 22. MERN AWS배포 1. 인스턴스 시작 . 2. add 해서 위에서 Srouce 에 0.0.0.0/0선택 5000은 node 27017은 mongodb 키페어 생성한거는 바탕화면에 두고. 인스턴스 시작. pem파일있는 경로까지 접속 이거 복사해 들어옴! 만약 이런 에러가 나면 chmod로 펨파일의 권한을 바꿔준다. 이제 시스템 업데이트해줌. 실행됨. 파일질라 접속 호스트 써넣음 연결 클릭 성공 client, server 디렉토리 추가했음. 이제 node다운받겠다. 다음으로 엔진엑스 다운받기. (웹서버를 위해) 다음으로 엔진엑스 가동하기 암것도 안변했는데 status쳐서 볼수있다함. 잘되고있구나.. Ctrl C로나옴. 엔진엑스 디렉토리로 이동해보겠다. config파일 잘있음. 여기에 conf.d와 nginx.config에서 .. 2022. 8. 11. 깃허브 처음 사용하기 깃허브 작동원리 : 1. git add . 2. git status 3. git commit -m '여기적어요' 4. git push origin test/master/깃 이름.. cmd창에서 이 컴터에 깃이 깔려있는지 확인 git --version 깔려있음?.. 그다음 깃허브 로그인 https://github.com/ vs code의 터미널 열기 이제 버전 관리를 해주기 위해 git init 해보았다. 그리고 git config --global core.autocrlf true 치고 엔터 git config --global user.name 'EunmiJang247' 치고 엔터 git config --global user.email 'valueyou247@naver.com' 치고 엔터 이거는 이제 딱한.. 2022. 8. 1. 리덕스 작동원리 알아보기_FC 처음부터 리덕스 프로젝트로 만들기 npx create-react-app my-app --template redux 작동원리 : 1. dispatch함수를 실행한다. 이 함수를 실행하면 이 안에 action생성함수를 넣을 수 있다. 2. 액션을 발생시킨다. 3. 액션은 리듀서라는것을 통해 어딘가로 전달이 되고 전달된 리듀서로인해 4. 최종적으로 상태가 바뀐다. 다운로드 : npm install react-redux redux src폴더에 store폴더 -> index.js, modules폴더-> todo.js 를 만들어준다. store : app에서사용되는 최상위 저장소. 여기서 결국 합쳐줄 것이다. 첫번째로, todo.js 작동원리를 한번 더 살펴보자면, 1.디스패치 함수는 액션을 불러올 것이다. 2.그.. 2022. 8. 1. useEffect 를 이용한 1초마다 카운트가 증가하는 코드 우선 useEffect를 쓰지 않고 setInterval을 한 코드는 아래와 같다. import "./App.css"; import {useState, useRef, useEffect} from "react"; function App(){ const [count, setCount] = useState(0); setInterval(()=>{ setCount(count+1) },1000) return( {count} ) } export default App; 실행시켜보면 난리가 난다. second가 매번 새롭게 실행이 되기 때문이다. 첫번째 실행된 second는 1 2 3 4 나오고 또 두번째 실행된 second는 1 2 3 4 또 쌓이고 쌓이고 쌓이다보니까 점점 늘어나면서 쌓이게 된다. 그래서 useEff.. 2022. 7. 31. 여러개의 input이 있을 때 객체로 관리하기 그리고 Ref에 대하여. 보호되어 있는 글 입니다. 2022. 7. 31. 모듈에 대한 개념. 프로젝트가 커지면 기능에 맞게 코드를 분리하는것이 매우 중요하다. 모듈은 코드를 분리하기 위한 방법을 제공해준다. 반복되는 코드는 모듈로 분리를 해서 반복되는 부분에서 가져다 쓸 수 있게 코드를 모듈로 분리하여 사용한다. 모듈의 집합이 패키지인 것이다. node.js에서 제공하는 기본 모듈 - console - process모듈(.arch / .argv / .env / .abort / .kill / .exit) - fs모듈(.readFile / .readFileSync / .writeFile / .watch) : 파일입출력을 위해 사용됨 - http모듈( .createServer ) : 서버나 클라이언트를 만들 수 있는 기능을 제공한다. 모듈 생성하고 내보내기 commonjs모듈 : module.expo.. 2022. 7. 15. 리액트에 폰트 적용하기 1. 구글폰트를 다운받는다. 2. src->font경로를 만들어서 다운받은 폰트를 넣는다. 3. App.css에서 GamjaFlower이라는 이름을 지어준 뒤 *에 적용한다. @font-face { font-family: GamjaFlower; src: url(./font/GamjaFlower-Regular.ttf); } * { font-family: GamjaFlower; font-size: 26px; } 2022. 7. 9. 이전 1 다음
