티스토리

프론트엔드 개발자
검색하기

블로그 홈

프론트엔드 개발자

yoouug.tistory.com/m

1. 사용법 익히기 2. 원리가 뭔지 찾아보기 3. 원리를 공부하기 벨로그에서 이사 왔어요

구독자
0
방명록 방문하기
공지 벨로그에서 이주 왔습니다. 모두보기

주요 글 목록

  • 메인화면 미세먼지 출력 문제 사항해당 구의 미세먼지의 좋음 나쁨을 출력은 하지만새로고침을 해야 알맞게 출력 됨 공통//서울의 정보 출력const fetchData = async () => { try { const response = await axios.get(URL, { params: { serviceKey: SERVICE_KEY, returnType: "json", numOfRows: 25, pageNo: 1, sidoName: "서울", searchCondition: "HOUR", }, }); dispatch(mainDust(response.data.response.bo.. 공감수 0 댓글수 0 2024. 9. 5.
  • 일기 작성 어떤 아이콘을 선택 일기 작성 페이지에서 아이콘을 눌렀을때 이미지가 변경 되도록 수정 기존 아무런 효과가 없음 사용자가 선택을 했는지 안했는지 확인 하기 어려움 수정사용자가 선택 했을 때 이미지가 변경 됨 const imgRef_t0 = useRef(null); const handleImageClick = (item: string) => { setWalkNums(walkNums + 1); if (imgRef_t0.current) { if ( imgRef_t0.current.src.includes("img_icon1-1.png") ) { imgRef_t0.current.src = "이미지"; setBtnTopSelect([item]); .. 공감수 0 댓글수 0 2024. 9. 5.
  • 완성 후에 점검 점검 시작모든 이미지가 늦게 떠서 로딩바 있어야 할 듯메인 화면 새로고침 해야 미세 먼지 정상적으로 뜸하단 메뉴 아이콘 변경 해야함 css 포인트 커서 추가등록 된 날짜가 다름일기 목록 새로고침 해야 수정된 아이콘 뜸일기 작성 했을때 어떤 아이콘을 선택 했는지 표시 되어야함코드가 긴건 컴포넌트 분리타입 분리하여 관리 타입 분리코드가 너무 길어서모든 컴포넌트에서 사용 되는 타입들을따로 폴더로 분리 해서 연동 되도록 수정 컴포넌트 분리컴포넌트의 코드의 길이 길어서길이가 긴 컴포넌트의 코드를 분리 작업 작성시 등록 날짜 다름확인 수 수정 공감수 0 댓글수 0 2024. 9. 5.
  • 중간 배포 후 수정 사항 로그 아웃 버튼 정리로그인 화면에서 유저 정보 있으면 메인 화면으로 아니면 로그인페이지 그대로 데이터베이스에서 값을 비교 해야 할듯a 유저가 로그아웃 후에 다른 유저로 로그인 하면 배경 이미지만 변경 됨 강아지 이름과 강아지 색상 변경 안됨다른 유저가 입력 한 값이 다른 유저 한테 데이터가 출력 됨수정 할때 텍스트 변경이 안됨 수정 할때 선택 안했는데 선택 되어서 이미지 출력 됨기존에 있는 유저는 메인 페이지로 가게 수정이 되어 야 함 지금 vscdoe를 저장 하니까 화면이 변경 됨뷰페이지 디자인 수정 할 것로그인 카카오 버튼 수정하기수정할때 선택 했던건 선택 못하도록 디자인 수정미세먼지 제대로 나오는지 확인 하기  여기 까지 다 수정 후 코드 정리 하면 리액트로 만든 멈머 프로젝트 완성!!! 공감수 0 댓글수 0 2024. 6. 14.
  • 지도 api 키워드 검색 하고 싶었던 기능이 사용자가 걸을 때 마다 추가 되는 만보기 기능을 넣고 싶어서 찾아 보았으나리액트로는 만들 가능성이 낮다고 해서 😥 사용해 보았던 위도경도로 테스트해 보았는데 숫자가 변경은 됨..걸음수가 추가가 안되서 그렇지여튼 새롭게 어떤걸 추가 해야 할지 와 디자인 수정이 들어감 결론은 지도 검색!사용자가 가고 싶은 곳을 지도로 검색해서 보여주기https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/library/keywordBasic 위 사이트에서 찾음 키워드 검색 지도 난 현재 타입스크립트를 사용 하고 있어서 타입을 지정함가지고 오자 하는 내용 가져오기 for (var i = 0; i 1. 문자를 숫자로 변환 해서 데이터를 보냄2. 이름과 주소의 데.. 공감수 0 댓글수 1 2024. 6. 11.
  • 중간 배포 https://ko.vitejs.dev/guide/static-deploy.html#vercel ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev버셀로 배포 문제발생카카오 로그인이 안됨 구글 로그인도 안됨카카오 로그인 버튼을 클릭 하면 localhost:3000로 이동 됨왜 여기로 가는가??????????여기서 문제 해결 해보려고 시작1. 카카오 개발자 내 앱관리에서 도메인 링크 및 Redirect URI등 확인2. 수파베이스 Redirect URI등 확인3. 다 정상적으로 값이 들어 간 것을 확인 했으나 같은 상황 반복4. 코드를 수정기존async function signInWithKakao() { const { data, error } = await supabase.auth.sig.. 공감수 1 댓글수 0 2024. 6. 9.
  • 공공api 활용기 원하는 속성 출력 데이터 상황1. 데이터는 정상적으로 출력 되는것을 콘솔로 확인  2. ui 화면에서 도 정상적으로 출력 되는 것을 확인 문제사항1. ui화면 새로 고침 하면 데이터가 출력이 되었다가 사라졌다가 반복 기존 코드const [dataUrl, setDataUrl] = useState(initialData);const fetchData = async () => { try { const response = await axios.get(URL, { params: { serviceKey: SERVICE_KEY, returnType: "json", // numOfRows: 25, // pageNo: 1, sidoN.. 공감수 0 댓글수 0 2024. 6. 7.
  • 데이터 수정 하기 1. 리스트에서 선택 한 글 수정2. 선택 된 페이지의 id를 비교 해서 데이터 수정하기3. 사용자가 입력 했던 데이터의 상태에 따라 입력 되는 값 설정 기존 코드 fetchDb.map(async (i) => { const { error } = await supabase .from("writedb") .update({ walk: i.walk === null ? btnTopSelect : i.walk, walkimg: btnTopSelect === "" ? null : allimgList[0].walk, }) .eq("id", selectDBId); });fetchDb는 입력 된 .. 공감수 0 댓글수 0 2024. 6. 4.
  • 수파베이스에서 테이블 비교 해서 이미지 출력-3 기존1. 사용자가 입력한 데이터에 따라 테이블에 데이터 추가2. 입력하는 테이블과 이미지가 출력 되는 테이블 join 해서 이미지가 출력 되는 테이블에서 이미지 출력 수정1. 사용자가 입력한 데이터에 따라 테이블에 데이터 추가2. 입력 하는 테이블과  이미지 출력 되는 테이블 따로 관리 join안함3. 입력하는 테이블 값에 따라 이미지가 등록 되록 수정 기존 코드const hadletest = async () => { const { data, error } = await supabase.from("writedb").select(` a, listeat ( url ) `); if (data) { const urls: UrlsT.. 공감수 0 댓글수 0 2024. 5. 29.
  • 수파베이스에서 테이블 비교 해서 이미지 출력-2 순서1. 사용자가 입력한 데이터에 따라 테이블에 데이터 추가2. 입력하는 테이블과 이미지가 출력 되는 테이블 join 해서 이미지가 출력 되는 테이블에서 이미지 출력 a테이블과 b테이블에서 의 조인 할때 나온 에러{ "code": "21000", "details": null, "hint": null, "message": "UPDATE requires a WHERE clause"}WHERE 절이 없어서 발생하는 문제로 수파베이스 sql확인 { "code": "23502", "details": null, "hint": null, "message": "null value in column \"id\" of relation \"writedb\" violates not-.. 공감수 0 댓글수 0 2024. 5. 26.
  • 수파베이스에서 테이블 비교 해서 이미지 출력 A  table예시key : uuid, a, b, c, d, e, f B tablekey :id, a, content 두개의 테이블을 비교 해서 B 테이블의 content 출력하기 1. A테이블과 B테이블 연동하기B 테이블에서는 겹치는 키 유니크 설정2. A 테이블에서 연동할 키 Foreign Keys로 연동3. 테이블에서 데이터 출력하기(수파베이스)const [imgW, setImgW] = useState(""); const handleWalk = async () => { const { data, error } = await supabase.from("writedb").select(` walk, listwalk ( url .. 공감수 0 댓글수 0 2024. 5. 24.
  • 실시간 위치 변경 사용자의 실시간 위치 변경 해보기 두개의 함수는 별개 연관 되어 있지 않다.handleMotionEvent 함수사용자의 위치가 변경 되는 걸 알 수 있게 콘솔로 확인devicemotion 장치가 움직일때 발생 하는 이벤트devicemotion 이벤트 객체의 속성 accelerationIncludingGravity.x 장치의 가로 방향 가속도accelerationIncludingGravity.y 장치의 세로 방향 가속도accelerationIncludingGravity.z 장치의 수직 방향 가속도 simulateMotionEvent 함수1초씩 값이 변화가 되는지 확인용으로 작성1. 함수정의2. 새로운 devicemotion  이벤트 객체 생성 3. 가속도 데이터 할당 event. accelerationIn.. 공감수 0 댓글수 0 2024. 5. 21.
  • 수파베이스 (Bad Request) 2차 해결 시도 해본 방법1. RLS 업데이트 관련 정책 수정 :  에러남2. 수파베이스 가이드 보면서 테이블 조인eq 활용에러 there is no unique constraint matching given keys for referenced table "userthema" const { data, error } = await supabase .from("dogthemabgdb") .select( ` themabg ` ) .eq("userthema.themaurl", "dogthemabgdb.themaurl");3. 수파베이스 컬럼 살펴보면서 userthema  외래키 설정에러 there is no unique constraint match.. 공감수 0 댓글수 0 2024. 4. 27.
  • 수파베이스 에러 400 (Bad Request) 1차 sql 에러작성 코드 const { data, error } = await supabase .from("userthema") .select( ` userthema.themaurl, dogthemabgdb.bg ` ) .eq("userthema.themaurl", "dogthemabgdb.themaurl"); if (error) { console.error("Error fetching data:", error.message); return; }내가 원하는 코드 각 테이블의 키를 비교 해서 다른 테이블에 있는 값을 출력 @supabase_supabase-js.js?v=b03b78a.. 공감수 0 댓글수 0 2024. 4. 27.
  • 수파베이스 에러 syntax error at or near "select" ERROR: syntax error at or near "select"LINE 1: create policy "Policy with table joins" on "public"."userthema" as permissive for update to public using (select dogthemabgdb.themabg from dogthemabgdb where dogthemabgdb.themaurl = userthema.themaurl); sql 문법 오류using 절에 있는 서브쿼리에서 에러 발생create policy "Policy with table joins" on "public"."userthema" as permissive for update to public using ( sele.. 공감수 0 댓글수 0 2024. 4. 27.
  • 수파베이스 에러 missing FROM-clause entry for table missing FROM-clause entry for table "dogthemabgdb"테이블은 대소문자 구별 안해서 다 소문자로 테이블명을 수정함 공감수 0 댓글수 0 2024. 4. 26.
  • 에러 A non-serializable value was detected in an action A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register2(key) { _pStore.dispatch({ type: REGISTER, key }); } Take a look at the logic that dispatched this action: {type: 'persist/PERSIST', register: ƒ, rehydrate: ƒ} (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) (To allow n.. 공감수 0 댓글수 0 2024. 4. 23.
  • 로그인 상태관리 로그인 한 후 유저의 uid를 상태관리로 관리하기 Slice //초기 값 const initialState = { userId: "", }; const userLoginSlice = createSlice({ name: "userUid", initialState, reducers: { userLogin: (state, action) => { const user = action.payload; console.log(user); state.userId = user; console.log(user); }, }, }); export const { userLogin, } = userLoginSlice.actions; export default userLoginSlice.reducer; login const user.. 공감수 0 댓글수 0 2024. 4. 20.
  • 수파베이스 CLI 데이터베이스 및 테이블을 생성 관리 하기 위해서 수파베이스 CLI 활용 윈도우 설치 순서 / 파워쉘Powershell 사용 1. SCOOP 설치 https://scoop.sh/ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression 두줄 하나씩 설치 2. SCOOP 환경 변수 설정 참고 블로그 https://velog.io/@wsdx123/20230809-TIL 3. CLI 설치 https://supabase.com/docs/guides/cli/getting-started scoop bucket add supabase htt.. 공감수 0 댓글수 0 2024. 4. 11.
  • 이미지 출력 하기 이미지 개별 출력 하기 const { data } = supabase.storage .from("img/dogSelect")//경로 .getPublicUrl("dog1.png");//파일 명 확장자 https://supabase.com/docs/guides/storage/serving/downloads 이미지를 하나만 출력 할때는 정책을 설정할 필요 없음! 이미지 리스트로 출력 하기 const imgListHandle = async () => { const { data, error } = await supabase.storage .from("img") //버켓 아이디 .list("dogSelect"); //폴더 console.log("파일 목록:", data); if (error) { console.er.. 공감수 0 댓글수 0 2024. 4. 4.
  • 수파베이스 사용자 정보 가져 오기 카카오 로그인 구현을 했는데 사용자 정보를 어떻게 가져 와야할지 해맸다 카카오 개발자의 Rest-api도 보고 원하는 정보가 아니여서 수파베이스 공식 문서 살펴봄 카카로 로그인 구현 https://supabase.com/docs/guides/auth/social-login/auth-kakao const { data, error } = await supabase.auth.signInWithOAuth({ provider: "kakao", }); 사용자 정보 가져오기 https://supabase.com/docs/reference/javascript/auth-getuser const { data: { user }, } = await supabase.auth.getUser(); 수파베이스에 저장 된 사용자 정보.. 공감수 0 댓글수 0 2024. 4. 3.
  • 내 위치 찾기 https://www.npmjs.com/package/react-hook-geolocation 좌표로 내 위치를 찾고 싶어서 활용 react-hook-geolocation React hook for geolocation access. Latest version: 1.1.0, last published: 2 years ago. Start using react-hook-geolocation in your project by running `npm i react-hook-geolocation`. There are 6 other projects in the npm registry using react-hook-geolocation www.npmjs.com 카카오 api 활용 1. 지도 생성 해보기 https:/.. 공감수 0 댓글수 0 2024. 3. 28.
  • 공공api 포스트맨에서 출력 https://www.data.go.kr/ https://www.postman.com/downloads/ 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 미세먼지 관련 api 활용 신청 후 포스트맨에서 데이터 제대로 나오는지 확인 1. 공공 데이터에서 다운 받은 요청 메시지 명세 key대로 포스트맨에 작성 2. 내가 확인 하고 싶은 상세기능정보의 Call Back URL 포스트맨에 작성 포스트맨에 데이터 출력 확인 const URL = 'http://apis.data.go.kr/B552584/ArpltnStatsSvc.. 공감수 0 댓글수 0 2024. 3. 28.
  • 구글 로그인 연동 구글클라우드에서 새 프로젝트 만들기 사용자 인증 정보 선택했는데 OAuth 동의 화면 뜨면 먼저 작성 마지막은 수파베이스에 있는 Callback URL (for OAuth) 링크 적용 만든 후에 나오는 정보 값은 수파베이스에 적용 구글 https://console.cloud.google.com/welcome?project=atomic-voice-395500 공감수 0 댓글수 0 2024. 3. 26.
  • 카카오 로그인 연동 https://supabase.com/docs/guides/auth/social-login/auth-kakao 카카오 로그인 개발 화면 https://developers.kakao.com/ 1. 카카오 개발 화면 - 시작하기 클릭 2. 애플리케이션 추가하기 3. 정보 대로 작성 후 저장 4. 카카오 로그인 순서대로 활성화 Redirect URI는 파이어베이스에서 가져온다 수파베이스에서 url을 Redirect URI에 적 만든 정보에서 보안 코드, REST API 수파베이스에 적용 공감수 0 댓글수 0 2024. 3. 26.
  • 세팅하기 리액트/타입스크립트 설치npm create vite@latest리액트/타입스크립트 선택테일윈드 설치npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p (설치하면 tailwind.config.js와 postcss.config.js 설치됨)postcss.config.js 에는export default { plugins: { tailwindcss: {}, autoprefixer: {}, },}tailwind.config.js 에는module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [],};styl.. 공감수 0 댓글수 0 2024. 3. 19.
  • 멈멈 기획(토이 프로젝트) 이름 : 멈멈(가제) 설명 : 강아지 일기 모바일 웹 전체적인 계획 3월 13일 시작 3월 16일까지 디자인 완성 하기 3월 17일 디자인 추가 할거 추가 하고 뺄거 빼기 (디자인 완성) 3월 18일 부터 개발 구현 시작 (리액트, 타스, 수파베이스(새로운 데이터베이스)) 4월 13일까지 다 구현 해야함 4월 14일 수파베이스 연동 4월 27일 까지 구현 완료 가 목표인데 열심히 해본다 공감수 0 댓글수 0 2024. 3. 19.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.