본문 바로가기

제니의 개발일지/도움이 되었던 것 정리46

React 리액트 다음 카카오 주소 검색 API 사용 방법 오늘은 다음 카카오 주소 검색 API 사용 하는 방법을 정리해보려고 한다. 지금까지 사용해봤던 라이브러리 중 가장 간단한 방법이어서 접근하기가 쉬웠다. 이번에 캘린더 라이브러리 사용해보면서 가장 힘들었던 점이 커스텀이었는데 다음 카카오 주소 검색 라이브러리는 커스텀 할 수 있는 부분이 없지만 width 값 조절은 간단해서 쉽게 적용시킬 수 있었다. 1️⃣ 먼저 라이브러리 설치하기 yarn add react-daum-postcode // yarn npm install react-daum-postcode // npm // 그리고 맨 위에import 해주기 import DaumPostcode from 'react-daum-postcode'; 2️⃣ 버튼 클릭했을 때의 이벤트, 주소 선택했을 때의 이벤트 만들기.. 2022. 10. 11.
React 리액트 로그인 토큰 만료됐을 때 모달 띄우는 방법 로그인을 구현할 때 30분, 1시간, 2시간 이렇게 만료 시간을 정해서 로그아웃이 되도록 구현했다! 그런데, 로그아웃이 되었는지 알려주지 않으니까 마이 페이지 들어가서야 아 로그아웃 됐구나 라는 생각이 들었다 ㅠㅡㅠ 그래서 로그아웃이 되었음을 알려주는 모달을 만들었다. 처음 구현해본 거라서, 더 좋은 방법이 있을 것 같은데 있다면 공유해주세요❤️ 1️⃣ 일단, 나는 헤더에 코드를 작성했다. 헤더 컴포넌트는 전 컴포넌트에서 사용하기 때문에, 코드를 여러번 작성하지 않아도 된다. 🔷 먼저 전체 코드 기록하기! 여기까지가 모달 뜨는 부분이고 아래에 헤더 코드 더 있다는 점 참고! // 토큰 만료되면 로그아웃 const navigate = useNavigate(); const token = getCookie('.. 2022. 10. 10.
React 리액트 이미지 수정 하는 법 마이페이지를 내가 구현했는데, 프로필 이미지 수정을 하는 기능을 추가했다! 생각보다 이미지 수정은 간단했다. 🔷 일단 전체 코드는 이렇게 생겼다! //프로필 이미지 PATCH 기능 const [imageUrl, setImageUrl] = useState(''); const imgRef = useRef(); const onChangeImage = async (e) => { const reader = new FileReader(); const file = imgRef.current.files[0]; reader.readAsDataURL(file); reader.onloadend = () => { setImageUrl(reader.result); }; if (e.target.files[0]) { const u.. 2022. 10. 9.
React 리액트 최신순, 인기순(조회수)별로 게시글 조회하는 법 우리 팀이 만든 Homecoming Day 모양이다! 저렇게 최신순, 인기순으로 select 조회를 해주고 싶을 때 코드를 정리해보려고 한다. 구글링에 아직 미숙한 건지, 필요한 자료를 찾는 시간이 오래 걸릴 때가 있다 ㅠㅠ 완성했던 코드 잘 기록해보기! 🔷 일단 전체 코드를 기록하고 아래에 순서를 차근차근 정리했다. const Calendar = () => { const dispatch = useDispatch(); const { calendars } = useSelector((state) => state.calendars); const { calendarPopular } = useSelector((state) => state.calendars); const [select, setSelect] = us.. 2022. 10. 8.
Form submission canceled because the form is not connected 구글링을 해 보면 버튼이 두 개 이니까, 버튼의 type값을 따로 주라고 하는데, 나는 버튼이 한 개뿐이었다//...ㅎㅎ 그러다 발견한 해결방법! 1️⃣ 버튼의 type 변경 (대부분 가지고 있는 문제점) 이건 내 해결 방법은 아니지만, 대부분 이 문제라서 공유하자면 버튼이 두 개 일때 이런 식으로 버튼의 값을 다르게 주면 된다. type = "submit" type ="button" 2️⃣ e.preventDefault() => 내 해결 방법! 이벤트 핸들러를 사용했을 경우, 이벤트 핸들러 함수에 걸어주면 된다. 나는 버튼이 아니라 전체 폼에 이벤트 핸들러를 걸었기 때문에, 이 해결 방법으로 바로 해결이 가능했다. 2022. 8. 10.
HTTP 프로토콜 Part 1 자료 정리 * CAPTAIN PANGYO 자료 출처 하단 기재, 좋은 자료가 많아서 들어가서 둘러보는 것을 추천한다! ✅ HTTP 프로토콜 1️⃣ HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜이다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되었다. 통신 프로토콜을 쉽게 풀어보면 "나는 이렇게 줄 테니 넌 이렇게 받고 난 너가 준거 그렇게 받을게" 정도가 된다. 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있으며 프런트엔드 필수적으로 알아야 하는 지식이다. 2️⃣ HTTP 프로토콜 특징 HTTP 프로토콜은 상태가 없는(st.. 2022. 8. 5.

티스토리툴바