민ズl으l 개발일ブl

상황 🤔 lol api를 불러오는 함수작성후, 터미널에서 해당 함수를 불러와서 데이터 확인에러 👻에러는 없었지만, 데이터가 안찍힘😱😱😱 해결과정 👀api주소 확인 => 맞음!!!함수가 잘못됐나? => 아님!!!해결 🌟ㅎ... 브라우저에서 새로고침하니 터미널에 찍힘... 밥오...상황 🤔 이미지 불러오기 에러 👻 해결과정 👀다시 코드보며 생각해보니...next에서 Image태그를 쓸때 next.config.mjs에 config 써야하는걸 깜빡,, 해결 🌟상황 🤔 GET함수로 API 불러오기 에러 👻 해결과정 👀차근히 코드를 다시 확인 => 코드상에는 문제가 없음api key가 설정되어있는 환경 변수문제인가? => postman으로 확인시 데이터를 잘 불러와짐console.error..

프로젝트 개요🎬흑백요리사 맛집 리스트와 식당 위치 기반 지도, 리뷰를 지원하는 사이트기술 스택🧷프론트엔드 : react + redux + router + tanstack query + tailwind + zustand + sweetalert2 + kakao map api개발과정🎈아이디어 구상흑백요리사 + 지도 api를 생각하다가 흑백요리사에 나온 쉐프들 레스토랑의 위치와, 사용자들끼리 리뷰로 공유하는 사이트를 구상하게 되었다.구현✔️ 로그인 / 회원가입화면 (담당) 로그인, 회원가입화면은 router로 로그인사용자가 접근할 수 없게 경로 보호를 함로그인은 소셜 구글 로그인도 구현회원가입시 실시간 유효성 검사도 구현로그인시 zustand로 로컬스토리지에 저장하여 유저정보를 전역상태관리메인화면쉐프들 정..

프로젝트 개요🎬로그인한 사용자만 mbti 테스트를 보여주는 사이트다.기술 스택🧷프론트엔드 : react + redux + router + axios + tanstack query + tailwind + json server + sweetalert2개발과정🎈아이디어 구상mbti 테스트를 하고, 사용자끼리 결과를 공유하는 사이트를 구상하게 되었다.구현맨 처음 진입시 로그인 / 회원가입 화면 노출실시간 유효성 검사토큰은 2시간으로 설정하여 2시간뒤엔 자동 로그아웃됨로그인시에만 테스트화면이 넘어갈 수 있도록 router로 구현mbti 테스트 페이지mbti 테스트후 데이터 저장mbti 테스트 결과 페이지유저마다 저장된 mbti 결과 데이터를 tanstack query로 뿌림mbti 테스트한 해당 유저만 공개..

상황🤔sweetalert2 + useRef를 쓸경우Swal.fire({ icon: "success", title: "성공!", text: "성공적으로 닉네임이 변경되었습니다.",}).then(() => { inputRef.current.focus();});에러👻경고문 + focus가 안먹힘해결과정👀=> 0을 줘도 안됨=> index.html에 aria-hidden="false"을 줘도 안됨=> didClose기능을 써도 안됨해결🌟짧게 setTimeout을 주기setTimeout(() => { inputRef.current.focus();}, 500);상황🤔List컴포넌트에서 tanstack query의 데이터를 map으로 뿌리고,Item컴포넌트에서 props로 받은 데이터를 구..

프로젝트 개요🎬이번 프로젝트는 여행sns사이트로, 사용자끼리 경험했거나 가고 싶은 여행지를 추천하며, 댓글/좋아요 기능이 제공된다.기술 스택🧷프론트엔드 : React, react-router , context API , styled-components , react-toastify , sweetalert2 , timeago , supabase개발과정🎈아이디어 구상이번에는 팀프로젝트로, 팀원들과 상의하여 기획하게 되었으며, 바로 와이어프레임을 작성한 후에 스타일 가이드를 작성했다. 구현맨 처음 진입시 로그인 / 회원가입 화면 노출비밀번호 찾기 기능 구현✔️ 메인화면인 home에서는 게시글 리스트가 노출 (담당)게시글 삭제(알럿창) , 수정(페이지 전환)댓글, 좋아요 기능 구현작성/수정 페이지이미지 최..

프로젝트 개요🎬이번 프로젝트는 포켓몬 도감 사이트로, dashboard에 포켓몬을 추가,삭제할 수 있다.기술 스택🧷프론트엔드 : React, react-router , redux / context API , styled-components , react-toastify 개발과정🎈아이디어 구상리액트를 기반으로 포켓몬 데이터를 추가,삭제하며, 페이지 이동이 가능한 사이트를 구상하게 되었다.구현반응형포켓몬 추가시 dashboard에 추가되고, 삭제시 dashboard에서 삭제됨이미 포켓몬이 dahsboard에 있거나 dashboard에 6개가 초과됐을시 경고문이 뜸포켓몬 카드 클릭시 detail페이지로 이동detail페이지에서 dashboard기준으로 추가됐다면 삭제버튼이, 없다면 추가버튼이 노출데이터는..

너무 바쁘게 코딩하다보늬... context한건 블로그작성을 패스해버렸다...먼저 redux로 작성후 @reduxjs/toolkit으로 리팩토링해봤다!정말정말 redux가 어려웠다...ㅠㅠㅠ 1. reduxstore에 createStore생성후 export한후에, 최상위 루트에서 Provider store연결!//store.jsimport { createStore } from "redux";const store = createStore(pokemonReducer);export default store;//main.jsximport { Provider } from "react-redux";import store from "./reducers/store.js";......context로 전역상태관리했던 것들..

중복값 필터링추가버튼을 누르면 selected라는 state에 담기는데, 이때 추가하려는 id와 selected에 담긴 id를 비교!const duplicateValue = selected.filter((prev) => prev.id === data.id); 스크롤시 최상단으로 올리는 top버튼 구현! 해당 버튼을 따로 지정한 스타일 컴포넌트를 쓰기위해 Link로 써야했는데,페이지가 새로고침되어서 e.preventDefault()로 막기!const handleScrollToTop = (e) => { e.preventDefault(); scrollTo(0, 0); }; react-toastifyalert 라이브러리!설치후 설정!import { toast, ToastContainer } from..

이번 플젝은 리액트 라우터 돔, 스타일컴포넌트를 사용한다!그래서인가.. 시작부터 에러가 계속... public에 넣어둔 이미지를 가져오려고 이렇게 적었는데👇에러가 떴다...👻👻👻 Vite와 같은 번들러에서는 process 객체가 기본적으로 정의되지 않기 때문에 발생하는 오류임ㅠㅠ💫그래서 코드를 이렇게 수정함!  react router 설치후 경로 설정!const router = createBrowserRouter([ { path: "/", errorElement: , children: [ { index: true, element: }, { path: "dex", element: }, { path: "pokemon/:pokemonId",..

프로젝트 개요🎬이번 프로젝트는 올림픽 메달 집계 사이트로, 입력한 나라명과 메달을 보여주는 리스트로 구현했다.사용자는 입력한 데이터를, 원하는 정렬기준에 맞게 볼 수 있다.기술 스택🧷프론트엔드 : React개발과정🎈아이디어 구상리액트 기본지식을 바탕으로 데이터를 CRUD한 사이트를 구상하게 되었다.구현입력한 나라명, 메달갯수를 리스트로 보여줌정렬을 사용자가 select하여 내림차순으로 리스트가 업데이트됨작성한 리스트를 삭제 가능위에 구현한 기능들을 로컬 스토리지에 관리하여 웹이 리랜더링되어도 동일하게 보여줄 수 있게 함테스트 및 배포리팩토링하다가 발견한 에러들 해결github에 배포배운점🤖기술적 성장: useState로 상태관리, useEffect로 생애주기 관리, 리액트의 기본적인 흐름을 이해문..