티스토리

개발일기

검색하기

블로그 홈

개발일기

roqkfdlfrl.tistory.com/m

hhhhy 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[TIL] 2023.11.14 - 트러블 슈팅(카카오톡 공유하기 시 뒤로가기 이슈) 트러블 슈팅(카카오톡 공유하기 시 뒤로가기 이슈) ① 문제 카카오톡의 공유하기 버튼을 눌러 상세 게시글을 공유하고, 그 공유된 페이지에서 뒤로가기 버튼(전체 게시글로 돌아가는)이 작동하지 않음. ② 원인 카카오톡의 공유하기 기능 외에도 핸드폰 내부의 공유 버튼을 사용해 우리 페이지를 공유하려고 시도했을 때, 뒤로가기가 정상적으로 작동하지 않았음. 비슷한 기능을 가진 다른 웹 사이트에서는 페이지 이동이 제대로 이루어졌으며, 이를 통해 페이지 라우팅에 문제가 있을 것으로 판단함. ③ 해결 뒤로가기 기능이 navigate(-1)로 구현되어 있었고, 이전 페이지로 이동하는 역할을 하고 있었으며, 공유하기 기능은 이전 페이지가 없었으므로 페이지 이동이 실행되지 않았음. 게시글 전체 목록이 있는 (”/posts”).. 공감수 0 댓글수 0 2023. 11. 20.
[TIL] 2023.11.13 - 트러블 슈팅(Token 재발급 후 페이지 이동 이슈) 트러블 슈팅(Token 재발급 후 페이지 이동 이슈) ① 문제 axios interceptors를 사용해 axios가 서버로 HTTP 요청을 보내기 전, refresh Token으로 만료된 access Token을 재발급 받도로록 구현함. try catch문을 사용해 에러가 발생했을 때는 쿠키에 저장된 refresh Token과 로컬스토리지에 저장된 access Token을 모두 지우고 로그인 화면으로 이동하도록 useNavigate를 사용했는데, 페이지 이동이 되지 않는 이슈가 발생함. ② 시도 1) 토큰 재발급 코드 위치 변경 : axios interceptors → Layout axios interceptors는 useNavigate가 실행되지 않아 모든 페이지에 영향을 주는 Layout으로 옮겨서.. 공감수 0 댓글수 0 2023. 11. 20.
[TIL] 2023.11.11 - 트러블 슈팅(프로필 사진 put 적용 이슈) 트러블 슈팅(프로필 사진 put 적용 이슈) ① 문제 마이페이지 프로필 사진을 수정하지 않았는데도 사진 수정 API가 동작함. 사진을 수정할 때도 API가 두번 동작함. ② 원인 useEffect가 1) 컴포넌트가 마운트될 때, 2) 이미지 수정 시 useState가 업데이트 될 때, 두번 실행돼서 발생함. ③ 해결 이미지 업데이트와 관련된 useState를 새로 생성해서, true일때만 수정이 동작하도록 useEffect를 수정함. const [isUpdate, setIsUpdate] = useState(false); // 사진 업데이트 상태 useEffect(() => { // 컴포넌트가 마운트 될 떄 // upLoadImage가 변경될 떄 if (isUpdate) { putUpdateProfileH.. 공감수 0 댓글수 0 2023. 11. 11.
[TIL] 2023.11.10 - enter 눌러서 로그인하기 enter 눌러서 로그인하기 // useRef 사용 import { useRef } from "react"; export default function LoginPage() { const loginButtonRef = useRef(); // 사용자가 Enter 키를 눌렀을 때 로그인 실행하는 함수 const handleEnterKey = (event) => { if (event.key === "Enter") { loginButtonRef.current.click(); } } } // onKeyPress 추가하기 return ( ; // loginButtonRef 연결 ) 공감수 0 댓글수 0 2023. 11. 11.
[TIL] 2023.11.09 - 무한 스크롤 구현(react-intersection-observer) react-intersection-observer 이용한 무한 스크롤 구현 import { useInView } from "react-intersection-observer"; // 무한스크롤 // ref : 관찰할 객체 // inView : ref가 화면에 보이면 true로 변경됨 const [ref, inView] = useInView(); const [page, setPage] = useState(0); // 페이지 수 관리 const [likeList, setLikeList] = useState([]); // get으로 가져온 사용자별 좋아요 게시글 데이터(getLikeList) // GET : 사용자별 좋아요 게시글 가져오기 const getLikeList = async () => { try {.. 공감수 0 댓글수 0 2023. 11. 9.
[TIL] 2023.11.08 - JWT Access Token / Refresh Token 구현 JWT Access Token / Refresh Token 구현 axios interceptors를 사용해 axios가 서버로 HTTP 요청을 보내기 전, refresh Token으로 만료된 access Token을 재발급 받도로록 구현 // accessToken 재발급 axiosInstance.interceptors.response.use( (response) => { return response; }, async (error) => { // 액세스 토큰 만료됐을 때, if (error.response.data.status === 500) { const refreshToken = getCookie("refreshToken"); // 리프레시 토큰 가져오고, localStorage.removeItem(".. 공감수 0 댓글수 0 2023. 11. 9.
[TIL] 2023.11.07 - 전체 동의하기 구현 전체 동의하기 구현 // 정보동의 체크박스 상태 const [allAgreed, setAllAgreed] = useState(false); // 전체동의 const [agreeChecked1, setAgreeChecked1] = useState(false); // 필수동의1 const [agreeChecked2, setAgreeChecked2] = useState(false); // 필수동의2 const [agreeChecked3, setAgreeChecked3] = useState(false); // 필수동의3 const onAgreeCheckedChange = (checkboxNumber, newValue) => { // 개별 동의 항목이 변경되었을 때의 이벤트 핸들러 switch (checkboxN.. 공감수 0 댓글수 0 2023. 11. 7.
[TIL] 2023.11.06 - 입력 글자수 표시하기 입력 글자수 표시하기 // useState const [aboutMe, setAboutMe] = useState(""); // 소개글 데이터 const [characterCount, setCharacterCount] = useState(0); // 소개글 입력 글자수 // 소개글 : onChange const onChangeAboutMeHandler = (e) => { const newText = e.target.value; setAboutMe(newText); setCharacterCount(newText.length); // 글자 수 업데이트 }; // 화면에 표시하기! {characterCount}/80 공감수 0 댓글수 0 2023. 11. 6.
[TIL] 2023.11.04 - 회원탈퇴 구현(delete 메서드) 회원탈퇴 구현(delete 메서드) delete 메소드 자체가 body를 지원하지 않아, 데이터에 담아서 이렇게 보내야함. // delete 적용방법 axios.delete(url, { data: {} }, config) // delete : 탈퇴 const onClickDeleteSignOutHandler = async () => { try { const response = await SignOutAPI({ data: { email, password }, }); alert("회원탈퇴"); } catch (error) { alert(error.response.data.msg); } }; 참고 https://velog.io/@aszxvcb/DELETE-method-RequestBody-Error https.. 공감수 0 댓글수 0 2023. 11. 5.
[TIL] 2023.11.03 - .filter로 요소가 있는 item만 뽑기 .filter로 요소가 있는 item만 뽑기 contents 요소가 없는 경우는 map 적용되지 않음! postList.length > 0 ? ( postList .filter((item) => item.contents) // contents 요소가 있는 item 필터링!! .map((item) => ( ..... 공감수 0 댓글수 0 2023. 11. 5.
[TIL] 2023.11.02 - 카카오톡 공유하기 카카오톡 공유하기 ① 카카오 sdk 추가 useEffect(() => { const script = document.createElement("script"); script.src = "https://developers.kakao.com/sdk/js/kakao.js"; script.async = true; document.body.appendChild(script); return () => document.body.removeChild(script); }, []); ② 카카오 공유하기 함수 생성 export const shareKakao = (title, postId) => { // url이 id값에 따라 변경되기 때문에 route를 인자값으로 받아줌 if (window.Kakao) { const kak.. 공감수 0 댓글수 0 2023. 11. 5.
[TIL] 2023.11.01 - 로그인 후 페이지 접근 막기 로그인 후 페이지 접근 막기 // 로그인 후 로그인 페이지 접근 시 막기 // 액세스 토큰이 있다면(=로그인을 한 상태), 메인 페이지로 보내기! useEffect(() => { if (localStorage.getItem("accessToken")) { navigate("/"); } }, []); 공감수 0 댓글수 0 2023. 11. 5.
[TIL] 2023.10.31 - inline-block inline-block 텍스트의 내용에 따라 width의 길이가 자동으로 조절됨! 공감수 0 댓글수 0 2023. 11. 5.
[TIL] 2023.10.30 - props로 BottomNav 페이지별 적용하기 props로 BottomNav 페이지별 적용하기 // Layout 설정 // prop.isBottomNav가 참일때 표시하기 import BottomNav from "./BottomNav"; export default function Layout(prop) { return {prop.isBottomNav && }; } // 각 페이지에 isBottomNav 설정 // isBottomNav={true} 내려주기 import Layout from "../../components/common/Layout"; export default function MyPage() { return ( 마이페이지 ); } 공감수 0 댓글수 0 2023. 10. 31.
[TIL] 2023.10.28 - React Router React Router 라우팅(Routing)은 웹 애플리케이션에서 사용자가 다른 페이지로 이동할 때를 관리하는 것을 말함. 쉽게 말하면, 사용자가 다른 링크나 주소를 클릭하면 해당하는 화면을 보여주는 것 React에서는 React Router와 같은 라이브러리를 사용하여 라우팅을 구현할 수 있음. React-Router는 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 ① BrowserRouter 실제 경로를 반영한 URL을 사용 (예: http://example.com/about) 브라우저 히스토리를 사용해 검색 엔진이 경로를 읽을 수 있어 SEO에 유리함. SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자로, 웹사이트가 검색 엔진에서 잘 나.. 공감수 0 댓글수 0 2023. 10. 28.
[TIL] 2023.10.27 - 외부 영역 클릭시 Modal 닫기 외부 영역 클릭시 Modal 닫기 // 케밥 모달 const [openModal, setOpenModal] = useState(false); const [modalPostId, setModalPostId] = useState(""); const onClickThreeDotsHandler = (e, postId) => { e.stopPropagation(); if (modalPostId === postId && openModal) { // 모달이 이미 열려 있을 때 누르면 모달 닫기 setOpenModal(false); } else { setModalPostId(postId); setOpenModal(true); } }; const closeAllModals = () => { setModalPostId(".. 공감수 0 댓글수 0 2023. 10. 27.
[TIL] 2023.10.26 - 페이지 주소 추출(useLocation) useLocation() // 현재 페이지 URL 확인 const location = useLocation(); const currentPath = location.pathname; // console.log("현재 페이지 URL:", currentPath); 공감수 0 댓글수 0 2023. 10. 26.
[TIL] 2023.10.25 - tailwind 조건부 CSS tailwind 조건부 CSS // signUpBar가 true면 bg-[#FF9900], false면 bg-[#D9D9D9]로 색상 변함! 회원가입 완료 공감수 0 댓글수 0 2023. 10. 26.
[TIL] 2023.10.24 - w-full 했는데 옆 div가 찌그러질 때! w-full 했는데 옆 div가 찌그러질 때 해결방법 // 1번 div : w-full 적용 🚨 {item.title} {item.contents} // 2번 div : 1번과 같은 행에 위치한 div // 1번의 w-full 때문에 2번이 찌그러지는데, 이를 방지하기 위해 2번 전체를 감싸는 추가해주기! 🚨 {item.postsPicturesList.length > 0 ? ( ) : ( 대표 이미지 )} 공감수 0 댓글수 0 2023. 10. 26.
[TIL] 2023.10.23 - 따로 가져온 API 하나로 합쳐서 정렬하기 따로 가져온 API 하나로 합쳐서 정렬하기 ① get 으로 가져온 2개의 데이터 각각 useState에 저장하기! const [myCommentsList, setMyCommentsList] = useState([]); // get으로 가져온 사용자별 댓글 조회 const [myRepliesList, setMyRepliesList] = useState([]); // get으로 가져온 사용자별 대댓글 조회 ② 하나로 합치기 const myCommentsRepliesList = [...myCommentsList, ...myRepliesList]; // 사용자별 댓글 + 대댓글 ③ 정렬하기(내림차순) const sortedLists = myCommentsRepliesList.sort( (a, b) => new .. 공감수 0 댓글수 0 2023. 10. 24.
[TIL] 2023.10.21 - useRef(input 파일창 - div 연동) useRef 사용해서 input 파일창과 div 연동 input은 숨김 처리 input / div 연결(useRef) → div 클릭하면 input이 실행됨! // ref 변수를 생성(input - div 연결) const inputRef = useRef(null); // div를 클릭 함수 const onClickHandler = () => { inputRef.current.click(); // input이 클릭됨 => 파일 선택창(inputSelectHandler) 열림 }; // inputSelectHandler const inputSelectHandler = (e) => { const selectFile = e.target.files[0]; // 선택된 파일 가져오기 console.log(`선택된.. 공감수 0 댓글수 0 2023. 10. 22.
[TIL] 2023.10.20 - axios.put(변경사항 바로 적용시키기) ① useEffect 사용 : 사진 변경 바로 적용! // useEffect : 렌더링되면 실행! useEffect(() => { getMyPageInfo(); // 마이페이지 정보(사진 등등) 보여주는 get 함수 실행 }, [profileModal]); // 프로필 설정 후 모달이 닫히니까 사진이 바로 적용됨! // PUT : 프로필 사진 - 기본으로 설정 const onClickDefaultProfileHandler = async () => { try { // 사진 업로드는 폼데이터로!!!!!!!!! const formData = new FormData(); formData.append("updateProfileImg", defaultProfile); const response = await axi.. 공감수 0 댓글수 0 2023. 10. 20.
[TIL] 2023.10.19 - axiosInstance headers(Content-Type) 동적 설정 axiosInstance headers 동적 설정 기본설정 - 헤더 "Content-Type"을 "application/json"으로 설정 : 데이터를 JSON 형식으로 보냄 폼데이터(사진 전송 등) - 헤더 "Content-Type"을 "multipart/form-data"으로 설정 : 데이터를 form data 형식으로 보냄 import axios from "axios"; export const axiosInstance = axios.create({ baseURL: import.meta.env.VITE_REACT_APP_URL, headers: { "Content-Type": "application/json" }, }); axiosInstance.interceptors.request.use((conf.. 공감수 0 댓글수 0 2023. 10. 20.
[TIL] 2023.10.18 - <textarea /> textarea 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 생성 공감수 0 댓글수 0 2023. 10. 20.
[TIL] 2023.10.17 - Tailwind CSS(투명도) bg-black/50 하위div(디브디브)의 투명도에 영향 없음 디브디브 bg-black opacity-50 하위div(디브디브)도 투명도 50으로 적용됨 디브디브 공감수 0 댓글수 0 2023. 10. 17.
[TIL] 2023.10.16 - git restore . git restore . 변경된 파일들을 이전 상태로 복원할 때 주로 사용 아직 스테이징(Staging)되지 않은 변경 사항을 처리하기 위한 명령어로, 커밋되지 않은 상태에서만 사용할 수 있음! 공감수 0 댓글수 0 2023. 10. 16.
[TIL] 2023.10.14 - onSubmit과 onClick onClick 버튼을 클릭할 때 어떤 동작이 실행되어야 하는 경우 onclick을 사용 onSubmit 태그에서만 사용가능 onSubmit은 기본적으로 호출될 때 페이지를 새로고침하는 효과가 있음 => e.preventDefault() 새로고침 방지 참고 https://enfanthoon.tistory.com/133 [React] - 13) onSubmit/onClick의 차이 onSubmit / onClick 리액트에서 이벤트를 처리할 때, 그동안은 보통 onClick을 사용했습니다. 하지만 리액트에서는 종종 onSubmit을 사용하기도 합니다. 한번 그 차이를 알아볼까요? 우선 onClick으로 구현 enfanthoon.tistory.com https://jacobgrowthstory.tistory... 공감수 0 댓글수 0 2023. 10. 14.
[TIL] 2023.10.13 - Vite와 CRA Vite Vite는 다양한 프레임워크 및 라이브러리와 함께 사용할 수 있는 보일러플레이트! Vue.js, React, Svelte 등 다양한 프로젝트 유형에 대한 초기 구성을 제공하며, 빠른 개발 주기와 빌드 기능을 통해 개발자가 프로젝트를 시작하기 쉽게 만든다는 특징이 있음. ES 모듈 번들링을 사용하며, 필요한 모듈만 불러와서 번들링하기 때문에 초기 빌드 시간이 빠름. // localhost 집입하기 yarn dev npm run dev CRA CRA(Create React App)는 주로 React 프로젝트를 시작하기 위한 보일러플레이트! 리액트 애플리케이션을 빠르게 시작하고, 초기 구성을 제공하며, 리액트 관련 도구 및 설정을 포함하고 있어 React 프로젝트의 초기 단계를 단순화함. 번들 크기가.. 공감수 0 댓글수 0 2023. 10. 13.
[TIL] 2023.10.12 - Tailwind CSS(하단바 고정하기) Layout export default function Layout(prop) { return ( // 부모요소(Layout) : relative로 잡기 / overflow-auto : 화면에서 넘어가는 부분은 스트롤바 나오게 하기 {prop.children} ); } 하단바 페이지(MyPage) export default function MyPage() { return ( {/* mb-28 적용해서 하단바와 겹치지 않게 공간 확보하기! */} 하단바 바로 위 요소 {/* fixed bottom-0 : 위치 바닥에 고정 / max-w-3xl w-full : 하단바 최대 weight 설정하고, w-full로 가득 차게! */} 하단바 ); } 공감수 0 댓글수 0 2023. 10. 12.
[TIL] 2023.10.11 - onClick으로 URL(Endpoint)에 Id값 전달하기 onClick으로 URL(Endpoint)에 Id값 전달하기 onClick 핸들러에 화살표 함수를 사용하여 item.postId를 oncilckLikePostHandler 함수로 전달 navigate 함수에서 해당 postId를 URL(Endpoint)에 삽입 각 목록 항목을 클릭할 때 해당 포스트의 postId가 전달되고, postId를 UR(Endpoint)에서 사용 가능! const oncilckLikePostHandler = (postId) => { navigate(`/api/posts/${postId}`); }; // ... {likeList && likeList.map((item) => ( oncilckLikePostHandler(item.postId)} className="mx-4 scr" .. 공감수 0 댓글수 0 2023. 10. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.