목록TypeScript (3)

Minwook’s portfolio

PairZ 프로젝트 회고

프로젝트 소개 pairz는 태블릿이나 pc와 같은 다양한 환경에서 url주소 하나만으로 카드게임을 즐길 수 있도록 개발된 프로젝트입니다. 사용자가 직접 이미지를 올려서 게임에 기여할 수 있습니다. 또한 게임을 진행 후에 사용자는 스코어를 기록할 수 있습니다. 핵심기술. 1. firebaseClient를 사용한 googleAuth 로그인 2. s3로 이미지를 업로드하고 이미지 주소를 fireStore에 저장 3. useCallback 과 useMemo를 사용하여 react rendering 최적화 Auth Flow 1. FirebaseClient로 AuthModal를 열고 사용자가 로그인 2. onAuthStateChanged firebase 내장함수로 유저정보를 state를 받는다. 3. recoil로 ..
프로젝트 2023. 5. 2. 20:30
HTMLFormElement currentTarget 타입지정

타입스크립트를 사용하여 form 태그의 childElement에서 value를 가져올때 타입이 any로 가져와지는 문제가 있었다. 코드 구조는 name이 image_search인 form 태그, 안에는 name이 image_search__select인 select와 name이 image_search__input인 input이 있다. event.currentTarget을 name 프로퍼티와 elemets로 접근할시 타입이 지정되지 않아 any로 추정되게 된다. any로 타입을 지정해둔다면 타입스크립트를 사용하는 이점이 없어지기 때문에 form태그의 타입을 지정해주었다. form태그는 HTMLFormElement를 상속받고 elements 프로퍼티를 HTMLFormControlsCollection를 상속받아..
Today I Learned 2023. 3. 18. 04:37
로컬서버 file upload구현

사용스택 next.JS, typeScript, sass, axios, formidable 추가. multer, next-connect 1. 프론트에서 file input으로 data 받기 이미지 구현방식은 useRef로 DOM에 접근해서 이미지파일을 가져오고 onChange를 걸어서 이미지 미리보기가 자동으로 바뀌게 구현할 것 이다. 1) useRef로 DOM에 접근하여 file 데이터 받아오기 const imgRef = useRef(null); const imgReset = () => { if (imgRef.current) { imgRef.current.value = ""; } }; return ( ... file 삭제하기 ... ) 삭제하기를 누를시에 e.current.value를 삭제시켜서 파일 이..
Today I Learned 2023. 3. 10. 00:14
이전 Prev 1 Next 다음