Minwook’s portfolio

프로젝트 소개 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로 ..

타입스크립트를 사용하여 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를 상속받아..

next.js로 쿠키세션을 구현하는 중 브라우저에서 쿠키를 확인할 수 없는 문제가 있다. 서버 터미널에서 console.log(req.cookies) 찍으면 쿠키내용이 콘솔창에서 보였지만 크롬 브라우저 개발자도구 - 쿠키 - localhost:3000에서는 쿠키가 확인되지않았고 localhost의 모든 쿠키를 지워도 쿠키가 삭제되지 않았다. 시도 1. 마이크로 소프트 edge브라우저로 바꿔본다. 2. 모든 쿠키를 전부 삭제해본다. 결과 1. 에서도 쿠키는 확인되지 않았다. 2. 모두 삭제하니 localhost:3000 쿠키가 삭제 되었다. 마지막으로 구글링을 하면서 Next.js가 서버리스라는 것을 떠올리게 되었다. localhost:3000/api path로 이동하니 쿠키를 찾을 수 있었다. Next...

지난 프론트 img를 서버로 전송한 코드를 이어서 서버에서 받은 img를 aws s3 bucket에 올리고자 한다 과정은 크게 나누자면 1. 프론트에서 받은 formData를 fomidable로 파싱하고 서버 폴더에 저장 2. 서버에 저장한 이미지를 fs module로 buffer로 읽어온다 3. buffer를 params body에 담아서 s3 bucket으로 보낸다. 4. 이미지 전송에 성공하면 서버에 저장되었던 이미지를 지운다. 5. 파일 이름을 응답으로 내보낸다. *추후에는 파일 이름을 응답으로 내보내지 않고 파이어베이스 데이터베이스에 저장할 것 이다. 이전 프로젝트에서 프론트에서 s3에 업로드 기능을 구현한 코드를 참고하고자 했는데 AWS.s3.upload()함수의 params body가 타입을..

사용스택 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를 삭제시켜서 파일 이..

웹팩으로 프로젝트를 만드는중에 SASS @debug 콘솔이 터미널에 찍히지 않는 문제가 있었다. 해결방법 //webpack.config.js에 옵션추가 stats: { loggingDebug: ["sass-loader"], }, 이후 webpack sever 터미널에 @debug가 찍히는것을 확인 할 수 있다. DEBUG LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./index.scss [debug:12:4..

SassError: SassError: Undefined mixin. ╷ 127 │ @include animation(button, 2s, 0s); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ tetris.scss 127:7 root stylesheet at Object.loader (C:...생략\node_modules\sass-loader\dist\index.js:69:14) @ ./tetris.scss 61:4-74:5 8:6-195 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-165 83:0-165 84:22-29 84:33-47 8..

필요한 패키지 npm i css-loader sass sass-loader style-loader file-loader url-loader ts-loader typescript 이미지는 url loader와 file loader를 사용한다. url loader, 파일을 base64로 인코딩하여 번들링파일에 포함된다. file loader, 파일을 output 경로로 복사해준다. 용량이 적은 파일은 url loader를 사용하고 용량이 큰 파일은 fallback으로 file loader를 사용하는게 좋다. tsconfig.json 설정 { "compilerOptions": { ...생략 "typeRoots": ["node_modules/@types", "types"] //타입폴더위치 "outDir": "...