선초코

한번만 백엔드에서 가져와서 프론트에서 완전히 다뤄주는 코드 검색을 했을 때 그 검색 내역을 페이지에 url로 저장하는 법 - querystring을 이용하면 된다. 그냥 필터하는 부분에 navigate를 더해주었다. 리팩토링 전 코드 import { useState, useEffect } from "react"; import Select from "react-select"; import SearchList from "./SearchList"; import { useGetCourseQuery } from "../../redux/modules/apiSlice"; import { useDispatch, useSelector } from "react-redux"; import { changeHashTagNum ..

지도 바운드 재설정하기 https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/map/setBounds 지도 범위 재설정 하기 | react-kakao-maps-sdk docs 지도 범위를 재설정합니다. 어떤 좌표나 마커들이 지도에 모두 보여야 할 때 좌표들의 정보를 갖는 LatLngBounds를 사용하여 좌표들이 모두 보이게 지도의 중심좌표와 레벨을 재설정 할 수 있습니 react-kakao-maps-sdk.jaeseokim.dev const ListMap = ({ course }: ListProps) => { const courseList = JSON.parse(course.courseList); const [map, setMap] = useState(); ..

어제 발표 자료 정리해서 속 편하게 일찍 오늘 아침 9시부터 1시까지 발표 준비한다고 진이 다 빠졌다. 중간 발표 피드백 - 검색 파트에서 지역명, 해시태그 추가할 떄 레이아웃 shift가 일어나고 있다 => 버그 테스트 할때 잡아야 한다 - input 크기를 고정시켜주면 좋다 (input box 크가 이동되면 보기 좋지 않음)- sweetaler2 모달 대용으로 잘 구현해주었다- issue 카드로 task 관리 => 가능하면 깃허브 프로젝트를 만들어서 한눈에 볼 수 있도록 하는 것도 좋다 - 일부 UI가 정리되지 않은 부분이 있다 => 최종 프로젝트 전까지 다듬어주었으면 좋겠다- 전반적으로 완성도가 높음 원하는 mockup 데이터 레퍼런스 custom hook - 다음주에 따로 강의 화요일에 가능 4...

확실히 알아둬야하는 vercel 배포법 + 파이어베이스 config_key .env에서 가져오는 법 api_key 같은 것은 배포 전에 vercel env key, value에 넣어주어야 한다. npm install dotenv npm install env-cmd --save 제일 바깥 파일에 .env 파일을 생성한다 그 안에 작은 따옴표, 큰 따옴표, 쉼표를 삭제한 값만 React_APP을 붙여서 상수로 넣어준다. package.json에 "start": "env-cmd -f .env react-scripts start", 이렇게 넣어주면 된다. .env를 먼저 실행한다는 명령어 배포 성공!!! https://nilili-007.vercel.app/ React App nilili-007.vercel.a..

유저 페이지 게시물 호버 : 색상 변경 및 글자 띄우기 게시물 클릭 => 상세 페이지로 이동 게시물 단어 클릭 => 여행 후로 상태 변경 (edit 기능) => 소중한 리뷰 남겨주세요 다음에 쓸래요. 물론이죠 알러트창 띄우기 => 수정페이지로 이동 메인 리스트 지도 받아오기 유저 페이지 페이지 네이션, 서치 페이지 페이지네이션 유저 페이지에서 데이터를 변경하는 함수를 실행하고 navigate를 이용해서 수정 페이지로 넘어가고 그 페이지에서 refetch를 해주어 가장 최신의 서버 데이터를 한번 가져와줬는데, 내가 변경한 데이터가 적용이 안 되어있어서 좀 놀랬다. 하지만 query들은 비동기 함수고 비동기 함수는 제일 마지막에 실행이 된다고 했다. 그런데 순서를 명확히 지정을 해주고 싶다면 async aw..

https://www.freecodecamp.org/korean/news/how-to-convert-a-string-to-a-number-in-javascript/ 자바스크립트에서 문자열을 숫자로 변환하는 방법 자바스크립트에서 문자열을 숫자로 변환하는 방법은 여러 가지가 있습니다. 코드로는 어떻게 생겼을까요? 이번 글에서는 문자열을 숫자로 변환하는 11가지 방법을 소개합니다. Number() 함수를 이 www.freecodecamp.org 문자열을 숫자로 고치는 법 중 Number()을 이용해서 변환해보았다. function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { c..

팹잇콘?도 고치고, 서연님 인풋 창 아이디랑 회원가입 각각 파이어베이스가 DB 지원하지 않는 type이라서 오류가 났다. JSON.stringify해서 넣고 JSON.parse해서 가져와서 쓴다. 배열이 서로 부분집합인지 여부 판단! https://velog.io/@devjade/JavaScript%EB%A1%9C-%EB%B6%80%EB%B6%84%EC%A7%91%ED%95%A9subset%EC%9D%B8%EC%A7%80-%EC%97%AC%EB%B6%80-%ED%8C%90%EB%8B%A8%ED%95%98%EB%8A%94-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 JavaScript로 부분집합(subset)인지 여부 ..

const db = firebase.firestore(); const usersRef = db.collection('users'); usersRef.select('name', 'email').get().then((querySnapshot) => { querySnapshot.forEach((doc) => { console.log(db)} 마커 부분 커스텀 하려면 이미지를 받아와야함, 기본 제공 이미지는 예시 사진에 파란색 A와 같이 생김 클릭해서 연결 되는 느낌은 인포 윈도우가 내줄수 있을 것 같은데, 마커가 진해지는거는 해봐야 안다. 지역 선택 다중으로 해야할 듯 //비동기 제일 마지막에 실행됌. eventloop - 공부 //usemutation에 onSuccess userflow 에러 해결 주차에 오..

게시물, 댓글 수정 시간으로 업뎃 해줄 건지? (버튼 대신에 더블클릭해서 삭제하기, 다음거 클릭하면 자동 저장) 마커 클릭했을 때 코스 상자랑 매칭 되는지? 장소에 대한 카테고리 여행 전/후 여행 후 find my path (글쓰기) 코스 짜기(검색 페이지) 페이지의 정체성을 연결 되는 글쓰기로 가는건 좋다. (로그인을 못한 유저는 여행 전 페이지를 쓰는 글쓰기 페이지로 바로 갈 수가 없다) 로그인한 유저는 글쓰기 페이지로 로그인 안 한 유저는 => 회원가입 -> 로그인 -> 검색 -> 여행 전 (게시물) 알러트 창이 뜨는데 로그인 모달을 띄우고 그걸 취소한 경우 (로그인을 하지 않으면 글을 쓸 수 없습니다. 저희의 코스를 먼저 만나보세요) => 바로 검색 페이지 전체 게시물 리스트 보여주기 여행 후 최..

slice 하면 배열을 원하는 인덱스만 잘라와서 쓸 수 있다. 게시물 여행 전/ 여행 후 카테고리 분리 어떤 식으로 할 건지 카테고리 분리 (여행 전, 여행 후) 랜딩 페이지를 따로? 지역 검색창 가운데로 띄워주기 각각 모니터 마다 테스트를 해야한다. 랜딩페이지 추가는 거절 배너 맵 느낌으로 가는것 + 우리 페이지에 대한 설명 추가 vs 여행 전 게시물에 맵에 보여지는 두 가지 find my path (지도 이미지를 넣는 것 또는 계획 하는 이미지) 메인 페이지 리스트 계획 리스트는 안 넣었으면 좋겠다 여행 전 3개 최신순 (지역을 빼고) 3개 후기 최신순 3개 (map -> 호버) 후기 좋아요순 4개 해시태그 계획: 추가기능: 최신순 + 해시태그 리스트 (검색창으로 넘어가기) 계획 전 리스트를 넣었을 ..