선초코

어제 발표 자료 정리해서 속 편하게 일찍 오늘 아침 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개 해시태그 계획: 추가기능: 최신순 + 해시태그 리스트 (검색창으로 넘어가기) 계획 전 리스트를 넣었을 ..

문제 발생한 것 new Date()값을 그대로 firebase database에 저장하고 그대록 불러와주려고 했더니, non serizable 한 값이라는 에러가 콘솔 창에 떴다. 그래서 검색을 해봤다. https://www.bam.tech/article/the-redux-best-practice-do-not-put-non-serializable-values-in-state-or-actions-explained The redux best practice "Do Not Put Non-Serializable Values in State or Actions" explained This article explains one of the four react-redux best practices: "Do Not P..

courses: { id: uuid(), location:"지역이름", hashtag: ["#...",] likes:숫자, places: [ { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, { {name: "장소명"}, {address: "주소명"}, {id: "카카오맵 API id"}, }, ], } reviews: { id: uuid(), contents: [ {kakaoId : "리뷰내용"}, {kakaoId : "리뷰내용"}, {kakaoId : "리뷰내용"}, ], } 1. course get api 만들기 2. 카카오맵 장소 id 빼..