jongviet

*4월20일 #카카오맵 sdk -리액트용 카카오맵 SDK! 리액트 내에서 정말 편하게 쓸 수 있게 제작되어 있다. yarn add or npm install react-kakao-maps-sdk source: https://react-kakao-maps-sdk.jaeseokim.dev/ -카카오 developers에서 javascript key만 발급 받고 localhost 혹은 별도 도메인을 등록 후 사용하면 된다! -현재 위치 확인 및 간단한 옵션 설정 const geoOption = { enableHighAccuracy: true, // literally accuracy timeout: 10000, // gps 값 요청 후 최대 대기 시간 }; if (navigator.geolocation) { n..

*4월4일 -이전까지 잘됐던 카카오맵이 아래와 같은 문구가 뜨면서 갑자기 안되는 현상이 발생했다. 안될 이유가 전혀 없는데.. 코드를 다 지우고 카카오 디벨로퍼 가이드를 보면서 다시 적기도하고, 앱키가 잘 등록된건지, 디밸로퍼 계정 내 도메인 등록은 잘 했는지.. 할 수 있는걸 다 했는데도 안됐다.. TypeError: Cannot read properties of undefined (reading 'maps') -다시 한 번 눈을 똑바로 뜨고 찾아보니... src를 zsrc라고 해놓은 것을 찾을 수 있었다. 웹스톰은 충분히 똑똑한데... html 문서 내 나의 노답 삽질까지는 잡아주지 못하나보다 ㅠㅠ 쓸데 없는거에 시간 낭비 하지 말자...

*1월23일 -휴대폰 인증번호 관련 타이머 구현에 시간을 너무 소비했다. 일전에 커스텀으로 작업해보기도 했고... react-countdown이라는 라이브러리가 잘 짜여져있어서 이걸 사용하면 금방 할 수 있을 것이라고 생각했는데, 인증번호 input 값 입력과 동시에 타이머가 함께 리렌더링 되는 문제 때문에 골머리를 앓았다. react memo, useMemo등을 사용해보며 삽질을 했고.... -> 결론은 use-timer라는 라이브러리로 해결했다. -use-timer는 sec, min을 구분해서 제공해주지 않아, onTimerOver, onTimeUpdate와 같은 callback function을 이용해서 조작해야했다. https://www.npmjs.com/package/use-timer yarn ..

*12월21일 -android & web 이미지 클릭 시 뒷 배경 잡히는 효과 제거 ->global css 파일 상 webkit-tap-highlight-color: transparent; -버튼 클릭 효과 제거 ->button { border: 0; outline: 0; } -인풋 클릭 효과 제거 input:focus { outline: none; } -formik 버튼 disable 처리 disable={!formik.isValid} -페이지 스크롤 최상단 처리 window.scrollTo(0, 0); -formik & yup validation boolean 형태 체크 박스 y chkBox: boolean().oneOf([true], "동의 필수!!!") -template literal 사용 시 필..

*11월24일 -메뉴 아이콘 단위 클릭 방지 -borderRadius먹지 않을 시 overflow: hidden; -ios 기준, 상하 스크롤 시 백그라운드컬러 문제 생길 때 ->container에 배경화면 잡고, scrollview를 안쪽으로 넣어 패딩 잡으면됨

*11월16일 -flex-grow: 1; // 모든 항목의 flex-grow가 1이면, 각 항목에게 동일하게 공간 배분, 2: 1: 1로 지정 시, 100px, 50px, 50px과 같이 배분됨 -flex-basis: 10px; -> 기본값은 auto이며, auto일 시 내용물의 크기만큼 flex-basis의 값으로 연결됨 -flex: 1 1 10px; // grow shrink basis 순서!! -flex-wrap:wrap // 한 행, 열 내 모든 개체 정렬 ->스크린 사이즈에 따른 flex-direction 조정으로 박스 정렬 처리 -flex-basis: calc(calc(768px - 100%) * 1000000); ->768px보다 크거나 같으면 0보다 작거나 같은숫자가 되어 flex-basi..

*11월15일 -saga에서 state 쉽게 가져오는 방법 export function* requestBuy(action: PayloadAction) { const state: RootState = yield select((state) => state); …..이하 생략 };

*11월9일 -array destructuring const address = ['1299 Juniper Street', 'Philadelphia', 'Pennsylvania', '19147']; const [street, city, state, zip] = address; // 순차적으로 모두 디스트럭쳐링 const [ street, , state, ] = address; // 필요한 것만 디스트럭쳐링 const [ street, , state = 'new york', ] = address; // 디폴트 제공 가능 -obj destructuring & rename const book = { publisher: { name: 'Ki' } } const { name: firstName } = book.pu..