coding etude

ReactJs, NextJs, Recoil을 기반으로 작업중 발생한 에러로 Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching {children} ); 위 코드 처럼 html은 테그 내에 모든 내용이 담겨야 하는데 그 순서가 잘못 되어서 header가 랜더링 되지 못했던 정말 가장 단순하고 멍청한 실수였다.. 그래서 나온 결론은 해당오류가 발생하는 지점의 html 코드에 무언가 분명 실수가 존재한다는 것이다. 예를 들어 이렇게 사용할 수 없는 테그들이 발생하거나 이런식의 테그 내에 공백이 발생 한다거나 하게 ..

firebase config 설정 후 const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_apiKey, authDomain: process.env.NEXT_PUBLIC_FIREBASE_uthDomain, projectId: process.env.NEXT_PUBLIC_FIREBASE_projectId, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_storageBucket, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_messagingSenderId, appId: process.env.NEXT_PUBLIC_FIREBASE_appId, measurement..

react에서 firebase config를 설정하면서 .env에 firebase sdk 설정값을 저장해 두고 사용하려고 하는데 값이 계속 설정이 안되는 문제가 발생 했다. FirebaseError: Firebase: Error (auth/invalid-api-key). 보통 react에서 .env 를 사용할 떄는 REACT_APP 을 꼭 붙여야 인식이 된다고 알고 있지만 NextJs에서는 NEXT_PUBLIC으로 사용해야 한다. //일반 reactJS const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, }; // NextJS 사용 시 const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIRE..

javascript 의 배열에 값을 넣고 빼기 위해서는 shift, unshift, push, pop를 주로 사용한다. 하지만 순차적으로 제거 및 추가가 되기 때문에 특정 값을 삭제 하기 위해서는 다른 언어처럼 .remove(index) 기능이 없기 때문에 다른 메소드를 사용해야 한다. 처음에는 array.splice 를 사용했다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.prototype.splice() - JavaScript | MDN splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. developer.moz..

useEffect를 사용하여 값의 변경을 시도할 때 변경해야 할 값이 Array 또는 object 일때 간혹 useState의 setter 함수를 사용해서 값을 변경 했음에도 useEffect가 작동 하지 않을 때가 있다. 아래 예시가 작동하지 않는 예시이다. function example() { const [arr, setArr] = useState([]); //useEffect 가 동작하지 않음. useEffect(() => { console.log(arr); },[arr]); function onChangeArr(e:React.ChangeEvent):void { e.preventDefault(); let newData:number[] = arr; newData.push(e.target.value);..

nextjs 14 에서 router를 사용하기 위해서 import { useRouter } from "next/router" 을 사용하게 되면 NextRouter was not mounted 라는 오류가 나온다. 해당 기능을 import하면 정상적으로 코드가 작성은 되지만, 처음 마운트 될때 useRouter만 마운트가 안되는 것이다. 처음에는 설정을 잘못한줄 알고 홈페이지를 계속 찾았다. 홈페이지에서는 이전 버전까지는 next/router 을 사용했지만 13버전 이후 부터는 import { useRouter } from "next/navigation" 을 대신 사용하라고 설명하고 있다. 기능이 변경되면서 next/router 폴더의 기능을 삭제한듯 보인다. 그래서 페이지가 마운트 될때 해당 기능이 마운..

select 태그를 통하여 값을 선택하려고 할때, 하나의 값 선택 후 중복값을 선택 하기 위해서 select 태그의 값을 초기화 해야 할때가 있다. javascript를 사용한다면 event.target.option으로 쉽게 변경 할 수 있지만, typescript를 사용할 때는 event가 어떤 유형의 이벤트 인지 타입을 설정해 주어야 하기때문에 부적확한 타입설정으로 인하여 설정이 안되는 경우가 있다. 가장 좋은 방법은 실제로 select 태그가 어떤 타입을 가지고 있는지 console에 직어 보면 가장 정확하다. 또한 HTML처럼 qureySelecter 를 react에서 사용하는것은 지양하고 있기 때문에 타입 설정 후 useRef를 사용하여 태그를 임시 저장해 두었다가 useRef를 활용하여 변겨해..

play store console 에 최초 빌드한 파일을 업로드 하려고 하면 debug 모드의 앱은 등록 할 수 없다는 오류가 나온다. 최소로 만든 앱에는 대부분의 설정값이 기본적으로 debug 모드로 설정이 되어 있기 때문에 꼭 확인해 주어야 하는 부분인것 같다. project/android/app/build.gradle build.gradle 를 확인하다 보면 bulidTypes 의 debug에 release 가 되어 있는것을 확인 할 수 있다. 그래서, debug 아래쪽에 release를 만들어 준 후 SigningConfig 의 값을 설정하면... 짜잔!!! 당연하게도 release 의 값을 찾을 수 없다는 not found 오류가 뜬다.. 404 도 아니고... 아무튼... 이제부터 다음 순서에..