개발자 되는 중/TIL&WIL 105

내배캠 TIL 2023.03.10

오늘 할 일 favicon 수정 렌더링 최적화 코드 정리 - 컴포넌트화 - 커스텀 훅 배너 progressive 이미지 및 더보기 버튼 주말에 아마도? 밥 먹고 발표자료 멘토링.... 화면녹화 단축키! window + G 발표 순서 1. 주제 선정 배경, 간단한 서비스 설명 2. 서비스 아키텍쳐 프론트 (ui는 react로 구성했다. 사실 react도 라이브러리) css 라이브러리는 tailwind, styled component를 썼다고 해야함 (얘네도 사실 라이브러리) 파이어베이스 카카오 맵 API 그 외 쓴 라이브러리 vercel로 배포 한 후 useData를 모아서 사용자 친화적이게 기능을 개선했다 3. 주요 기능 시연 메인 페이지 게시물을 가로로 넘겨가며 보여주기 해시태그 리스트까지 내려갔다가 ..

내배캠 TIL 2023.03.09

폭을 수정해서 시윤님껄로 맞추기 (완료) 검색박스 수정 (나는 선만 없앴고, 희현님이 나머지 맡아서 해주신다고 했다. 검색 게시물 제목 높이 통일 (완료) 메인 페이지 반응형 제목 줄이기 (완료) NOW REVEIWS 추가 (완료) 해시태그 부분 - 더보기 닫기 (완료) 토글 버튼 따로 빼기 (완료) 검색 카테고리 리셋버튼 (완료) input search (완료...? cancel 버튼 css 수정필요) 추가 구현하면 좋을 것 다크 모드/라이트 모드 구현 여행관련 페이지 링크 또는 공공기관 정보 링크 추가하기 지도로 연결되는 링크 추가 게시물 페이지에서 해시태그 클릭하면 해당 단어로 자동검색되는 기능 게시물별 더보기 버튼이 있었으면 좋겠다. => 각 해당 게시물 검색하면서 검색페이지로 이동, 그런데 그럴..

내배캠 TIL 2023.03.08

오늘 할 일 랜딩 글자 위치 조정 (완성) 랜딩 이미지 progressive 이미지 스캘래톤 ui 반응형 수정 (완성) 해시태그 리스트 반응형과 나눠버리기? 글자 겹치는 문제 해결 필요 가로스크롤 에러남 이전 코드로 수정 필요 (완성) 브로셔 트러블 슈팅 넣기 - css에서 고생을 했지만 안 됐던건 없었고.... 해시태그 자동검색 에러 (해결) 피드백 중 반영하면 좋을 것 피드백 중 반영하기 쉬운 것

내배캠 TIL 2023.03.07

오늘 할 일 리스트들 크기에 따라 보여지는 비율 지정 (완성) 메인 페이지 리스트 가로 스크롤 버튼 (완성) 메인 페이지 해시태그 리스트 반응형 (완성) 약간 야매다 검색 페이지 리스트 반응형 (완성) 유저 페이지 리스트 반응형 (완성) 유저 페이지 여행 전, 후 토글 버튼 반응형 (완성) 유저 페이지 프로필 사진 영역 반응형 (완성) 시간 있으면 배너 글자, path 글자 반응형 더 꼼꼼하게 실시간으로 브라우저 화면 사이즈 불러와주기 https://www.positronx.io/react-get-dynamic-window-height-width-using-react-hooks/ React Get Dynamic Window Height Width using React Hooks We will help y..

내배캠 TIL 2023.03.04

어제 드디어 대략 기능과 ui를 만들어서 User Test를 위한 설문조사 구글폼을 만들고 vercel에 배포를 했다. 그런데 파이어베이스를 많이 써서 무료 플랜 허용 용량을 넘겨서 오늘 5시까지는 오류가 난다. 그래서 지금까지 설문조사에는 파이어베이스가 터져서 문제가 있다는 리뷰가 많이 올라오고 있다. 좀 답답하지만 그거 외에도 완성되지 않는 ui가 불편하다는 내용이 많아서 그것도 빠르게 수정해서 재배포하고 싶다. 지금부터는 계속 사용자 데이터를 가져올 건데 우리가 테스트를 하면서 firebase를 터트려버리면 안되니까 개인 파이어베이스에 연결을 해주려고 한다. 그런데 키값을 내꺼로 바꿔넣어줬는데, Missing or insufficient permissions. 이런 오류가 났다. 해결법 참고 페이지..

내배캠 TIL 2023.03.03

seachparams은 string화되어서 가져와져서 나의 object 들은 [object object]라는 스트링으로만 받아와졌다. 그래서 querystring 보내기전에 JSON.stringyfy를 해주고 받아올 때 JSON.parse를 해주고 데이터 타입을 복구해주려고 했으나. searchparams는 string | null 타입이라면서 계속 JSON parse가 되지 않았다. 조건으로 null 경우를 걸러주었는데도, 해결이 되지 않아서 // @ts-ignore 을 이용해서 타입에러를 없애주었다. 맨처음 서치 페이지 들어갔을 때 모든 searchparams는 null이다. 그러면 null이 아닐 때만 세팅해주라고 하면 된다. 한번이라도 검색을 한다면 lc = [] ht = [] ws = "" ts..

내배캠 TIL 2023.03.02

한번만 백엔드에서 가져와서 프론트에서 완전히 다뤄주는 코드 검색을 했을 때 그 검색 내역을 페이지에 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 ..

내배캠 TIL 2023.02.28

지도 바운드 재설정하기 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(); ..

내배캠 TIL 2023.02.24

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