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

[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") ); ..

[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을 전달해서..

[react] 리액트 리렌더링

학원 다닐 때 올린 ssr과 csr의 차이, ==와 === .. .등은 약간 의무적으로 올린 거였다. 단어에 익숙해진 건 좋았지만 실제로 머리에 남아있지 않았다. 그래서 이번엔 1시간 정도는 공부를 하고 그것에 대해 쓰려한다. 리액트에서 리렌더링이 일어나는 경우는? 1. props나 state가 업데이트 될 때 2. 부모 컴포넌트가 리렌더링 될 때 부모 컴포넌트가 리렌더링 되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 3. context가 변경될 때 4. hook을 사용하여 상태를 관리할 때 useState, useReducer 같은 훅을 사용할 때, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 5. ForceUpdate() 함수가 호출될 때 ForceUpdate() 함..

[firebase] googleLogin()

export async function googleLogin() { return signInWithPopup(auth, googleProvider) .then((result) => { const user = result.user; return user; }) .catch((error) => { console.error(error); }); } googleLogin().then((user) => setUser(user)); googleLogin에 성공하면 user가 전달될 것임(함수 부분에서 return user했음) 그걸로 setUser하겠다! googleLogin().then(setUser); 이렇게 간략하게 표시가능하다. 오랜만에 블로그... 요즘은 블로그 할 정신이 없었다. 음... 이건 핑계인 것..