개발 일지/토이 프로젝트 (17) 썸네일형 리스트형 [Next.Js] Next.Script를 활용한 지도 개선 토이프로젝트 중간발표후 지도 개선이 필요하단 생각이 들었다 그러한 이유는 .. 문제상황 기존 로직은 지도를 움직일때 마다 지도를 다시 렌더링함 , 이로인해 좋지못한 ux 제공 및 성능저하를 야기했음 해결방안 로직자체를 바꾸기로 함 Next.Script 의 onReady 속성을 활용하여 Next.Script 가 있는 컴포넌트가 mount 될때마다 실행하게 로직을 바꿨다. 그 결과 멋진 성능 개선을 보여줬다! API 분석 - GET 요청 시 필요한 데이터만 필터링하기 문제 const getData = await axios .get( `${BASE_URL}/${METHOD}?page=1&perPage=1500&serviceKey=${SERVICE_KEY}`, ) .then((res) => res.data.data.filter( (list: any) => parseInt(list.RCEPT_ENDDE.split('-').join('')) >= today, ), ); 기존 구조: API를 이용해서 1500개에 달하는 전체 데이터를 불러온 이후에 필요한 데이터만 필터링하면 3개밖에 남지 않는다. 3개의 데이터를 위해 1500개의 데이터를 모두 불러와야 하는 비효율적 구조. 원인 이러한 문제는 API문서를 꼼꼼하게 읽어보지 않은 것에서 발생됐다. 차근차근히 위에서 부터 읽어내.. RN 토이프로젝트 회고 Keep 오류가 발생했을 때 포기하지 않고 다함께 해결했다. 프로젝트 첫날 세밀하게 기획했다. 코딩 컨벤션 (Git, 포맷, 디렉토리)을 정하고 프로젝트를 시작했다. Problem 스타일드 컴포넌트 사용에 통일성이 부족했다. 컴포넌트화를 세밀하게 하지 못하고, 리팩토링할 시간이 부족했다. 코드리뷰에 충분한 시간을 할애하지 못했다. Try Git Issue를 활용해보자. 플레이 스토어 / 앱 스토어에 배포해보자. 느낀점 파이어베이스 회원 관련된걸 많이 다루어 봐서 좋았다. RN-이미지 변경 및 업로드 추가기능으로 프로필에서 프로필 사진을 추가 및 변경 하는 기능을 추가하려고 하였다. 리액트 네이티브는 이미지 업로드 기능이 있을까? 찾아 보니 expo에서 지원하는 imagePicker 라는게 있었음 https://docs.expo.dev/versions/latest/sdk/imagepicker/ ImagePicker docs.expo.dev 빠르게 읽어보고 설치 npx expo install expo-image-picker 임포트 해오고 import * as ImagePicker from 'expo-image-picker'; 내가 원하는건 카메라 촬영기능까지는 아니고 이미지 파일에 접근할 수 있는 권한만 얻으면 되기 떄문에 ImagePicker.useMediaLibraryPermissions() 요고 .. 최신순으로 나누기 당 프로젝트에서 불러오는 API 의 날짜는 "2023-02-23 00:00:00.0" 이렇게 되어있다. 메인화면에서 보여줘야할 것은 지금 진행중인 행사와 곧 진행할 행사로 나눠야 했는데 저렇게 되어있어선 판단하기가 어려웠다 그래서 나는 1. 위 날짜 데이터를 이쁘게 가공한다. 2. 가공한 데이터와 오늘날짜를 같은형태로 만든다. 3. 비교한다. let startDate = parseInt(data[0].STRTDATE.replaceAll('-', '').splice(0, 8)); const year = String(new Date().getFullYear()); const month = String(new Date().getMonth() + 1).padStart(2, 0); const day = Strin.. firebase 사용자 재인증 firebase auth 로 로그인, 회원가입 기능을 공식문서를 보면서 쉽게 구현했다. 그러나 비밀번호 변경 기능을 구현하려고 하는데 auth/requires-recent-login 이런 오류가 자꾸 뜨더라 문서를 다시한번 자세히 읽어보니 이런게 있었네.. 여기서 TODO(you) 는 내가 직접 credential 함수를 만들어야 한다는 거다. 일반적으로 회원탈퇴를 하거나 비밀번호 변경을 할때 비밀번호를 한번더 입력하는 과정을 거치는데 credential 이 그 역할을 하는것 나는 이메일 계정을 통한 로그인 기능을 만들었기에 const credential = EmailAuthProvider.credential(user.email, password); // 비밀번호 확인작업, 여권을 만든다고 생각하면됨 이.. React native 에서는 display:block 이 안된다. 1. 내가 구현하고 싶은 기능은 해당 버튼을 눌렀을때 hide 되어있던 컴포넌트가 show로 바뀌는 것이였다. 그래서 display: none 으로 했다가 -> block 으로 바꾸면 되겠네 라고 생각하고 display에 props 를 주어서 실행시켰더니 .. 이런 에러가 발생함... 내가 문법을 잘못썻나 해서 여러번 봤는데 문법상 틀린건 없었음 역시나 구글신에게 물어보니 react native에 적용가능한 style 에는 display 가 없다고함 https://webisfree.com/2019-08-14/react-native-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0-hide react native 컴포넌트 숨기기, hide .. 버튼색상 변경 토이 프로젝트 중에 한분이 나에게 물어보았다. 어떤 버튼을 눌렀을떄 그 버튼만 검은색이고 나머지는 회색으로 바꾸고 싶다고 useState만 쓰면 되는 간단한거 였는데 컴터를 너무 많이 해서 머리가 안돌아갔다 그분한테 자고 일어나서 내일 알려드린다고 했는데 그분이 나가자마자 아차 싶으면서 머리가 돌았다. 그냥 state값만 바꿔주면되는거... // src/App.js import React from "react"; import { useState } from "react"; const App = () => { const [all, setAll] = useState(true); const [공연, set공연] = useState(false); const [국악, set국악] = useState(false);.. 이전 1 2 3 다음
