프론트엔드✏️/개인공부

[react] 회고페이지) 배열 로컬스토리지 복원, 초기화 문제 배열 상태관리, setState / useEffect

회고 페이지를 만드는데 답을 배열로 받는 질문만 로컬스토리지 복원이 잘 안되는 문제가 생겼다.  1. console.log를 찍어 보면, 로컬스토리지에서 데이터를 잘 복원하고 setAnswer3로 상태를 업데이트한다. 그런데 그 직후, answer3가 다시 ["", "", ""]로 초기화된다. 2. answer1과 answer2 같은 문자열 상태에서는 이런 일이 없었음. 왜 배열만 이런 일이?  리액트 DOM 렌더링 순서  useState 초기값 적용컴포넌트가 처음 렌더링될 때, useState로 설정된 초기값이 DOM에 반영된다. 이 코드에서 초기값 ["", "", ""]가 DOM에 먼저 반영된다.const [answer3, setAnswer3] = useState(["", "", ""]);useEff..

[Next.js] [MongoDB] CRUD의 Create, Read 연결하기

작년 여름부터 이어져온 몽고디비와의 (일방적)사투연결이 너무 안돼서, 쉬운 연결 하나도 못 하는 나는 개발자 못 하는 거 아닐까 하고 그냥 개발을 접어버렸었다. 그러다 만들고 싶은 게 생겨서 다시 해보다가, 역시 DB가 필요해서... 다시 시도해봤다.  클라우드는 몽고디비 아틀라스를 이용했다. Next.js - 13 App routertypescript   이 글에선 Next.js 자체 서버를 그냥 서버로 부릅니다. 1. 환경변수 설정, 타입 선언// .env.localMONGODB_URI=mongodb+srv://:@어쩌구저쩌구appName=Cluster-XXXXMONGO_DB=lovablePassages 최상단에 .env.local 파일에 MONGODB_URI 입력하는데 그 옆에 들어갈 내용은 친절하..

[flutter] 설치부터 난관.

내일... 비트포비아 예약 도전! 아빠의 주민등록번호상 생일이기도 하네 까치의 첫 기일이기도 하다. 일단 flutter 자체는 brew를 통해 쉽게 깔 수 있다.(맥) 그리고 안드로이드 스튜디오는 깔려있었고, Xcode는 아직 테스트 안 할 거라서 굳이 안 깔았다. VScode를 통해 실행! 디버그를 누르니까 오류 발생... 터미널켜서 flutter doctor -v 치면 뭐가 문젠지 나온다. 콜미닥터 전부 다 고쳐야 할 필요는 없다. (ex. 안드만 쓸꺼면 Xcode 안 깔아도 ㅇㅋ) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/hani/Library/Andro..

[firebase] Firebase 이메일 중복확인

일단 이름 짱 긴 함수 보고 가시죠. import { getFirestore, addDoc, collection, query, where, getDocs,} from "firebase/firestore";// config 생략const app = initializeApp(firebaseConfig);const db = getFirestore(app);// 이메일 중복확인export const checkDuplicateEmailWithFirebase = async (email) => { try { // db 중복 확인 const q = query( collection(db, "users"), where("email", "==", "db2@db.com") ); ..

gyp ERR!

gyp ERR! find VS msvs_version not set from command line or npm config gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details gyp ERR! find VS looking for Visual Studio 2015 gyp ERR! find VS - not found gyp ERR! find VS not looking for VS2013 as i..

[git]

New Branch는 원격에서 딴다. 더블클릭하거나 체크아웃 눌러서 브랜치 이동한다~ local changes 확인 all commits 깃랩가서 merge request 확인 #리베이스 하기 pull 땡겨서 해도 되지만 그러면 기록이 남고 일자로 쭉쭉 올라가는 모양이 아니라 마구 엉킬 수 있음 본진의 복사본으로 만든다는 느낌 이제 작업할건데 누군가 main을 더 올라가게(나아가게)했을 때(작업을 했을 때), 그때 내꺼랑 메인이랑 일방적인 동기화 느낌으로 하는 법은 Interactively Rebase 'feature/#2' on ...

[git] To push the current branch and set the remote as upstream, use ...

fatal: The current branch feature/2 has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin feature/2 로컬에는 있는데 원격에는 feature/2 라는 브랜치가 없다는 뜻! 그래서 만들고 그곳에 push하는 명령어를 입력하라고 뜨는 것 똑같이 쳐주면 된다.

[firebase] 글번호로 글 정보 가져오기

import { db } from "@/api/firebase"; import { useRouter } from "next/router"; ... const router = useRouter(); console.log(db); const data = doc(db, "board", toString(router.query.router)); console.log(data.docs); 처음엔 toString을 하지 않아서 number로 들어가서 type error가 났었다. data를 찍어보면 이렇게 나온다. 뿅하고 바로 의미있는 데이터가 보일 줄 알았는데 내가 뭘 잘못한건지 아니면 아예 찾아올 게 없어서 그러는지 . . . . useEffect(() => { const docRef = doc(db, "boar..

[tailwind] tailwindcss 색상, 배경색 적용 안될 때

tailwindcss 적용이 몇 개는 되고 몇 개는 안됐다. (색 관련 속성들이 안 됨) /** @type {import('tailwindcss').Config} */ module.exports = { variants: { tableLayout: ["responsive", "hover", "focus"], }, content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { colors: { "hl-1": "#fffbf4", }, extend: {}, }, plugins: [], }; /** @type {import('tailwindcss').Config} */ module.exports = { variants: { tableLayout: ["responsive", "hov..

[react] 계산기/ 무한 리렌더링, 맨 왼쪽의 0 좀 빼줘

무한 리렌더링 발생~~!! // allTokenPrice 나오면 input2 값 변경 useEffect(() => { if (token2Price) setInput2(allTokenPrice / token2Price[token2.id].usd); }, [allTokenPrice, token2Price, handleChangeInput]); 이 의존성 배열에서 token2Price랑 handleChangeInput을 뺐다. 토큰을 바꾸면(토큰의 가격이 바뀌면) 새로 계산 되어야할 것 같아서 넣어놨었는데, 토큰 라벨을 눌러서 바꾸면 어차피 토큰 가격이 새로 불러와지고 그럼 allTokenPrice도 다시 계산된다. 3.0 이라고 치려고 하면 0이 입력되지 않는다. 이건 removeZeros 함수 때문인데....

[react] 계산기/input 두 개가 서로 영향받게 하기

과제로 했던 환율계산기(?)를 가지고 구현 못 했던 거 구현해보고 리팩토링 할 거 해볼 생각이다~~~ 약간 신난닷^ㅁ^ WBTC input에 3을 입력하면 USDC가 계산되어 나오지만, USDC input은 변경할 수 없었다! 즉 역으로 하는 건 안 됐다. 근데 보다시피 처음에 숫자가 바로 입력이 안된다. 숫자를 누르면 밑에 $0 이 뜨고 그 다음에 한 번 더 입력해야 입력이 된다. 그리고...! 무한리렌더링 되는 현상이 발생했다,,, setInput하면 allTokenPrice를 계산하고 그게 계산되면 다시 setInput하고... 그럼 어카냐 일단 input, input2, token, token2 중에 하나라도 바뀌면 값이 다시 계산되어야 한다. 하지만 이걸 모두 의존성 배열에 한 번에 넣어버리면 ..

[react] 계산기/새로고침해도 선택값 유지하기

토큰을 선택했을 때 새로고침을 해도 초기값으로 바뀌지 않게 해보기!!! 리액트에서 상태(state)가 새로고침될 때마다 초기값으로 돌아가는 것은 정상적인 동작이다. 페이지를 다시 로드할 때마다 새로운 인스턴스를 만들고 상태를 초기화한다. 그럼 값을 유지하려면? 그 값들을 컴포넌트 외부에 저장하기 setTokenModalOpen(true)}> 지금 코드는 이렇다... 에 token data를 넘기고 안에선 이름만 출력해주는 식이다. const [token, setToken] = useState(tokens[0]); const [token2, setToken2] = useState(tokens[1]); ... {isTokenModalOpen && ( )} Select라는 컴포넌트에 setToken을 전달해서..