티스토리

귀엽고 행복해

검색하기

블로그 홈

귀엽고 행복해

hani-honey.tistory.com/m

당근먹는하니 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

[react] 회고페이지) 배열 로컬스토리지 복원, 초기화 문제 배열 상태관리, setState / useEffect 회고 페이지를 만드는데 답을 배열로 받는 질문만 로컬스토리지 복원이 잘 안되는 문제가 생겼다. 1. console.log를 찍어 보면, 로컬스토리지에서 데이터를 잘 복원하고 setAnswer3로 상태를 업데이트한다. 그런데 그 직후, answer3가 다시 ["", "", ""]로 초기화된다. 2. answer1과 answer2 같은 문자열 상태에서는 이런 일이 없었음. 왜 배열만 이런 일이? 리액트 DOM 렌더링 순서 useState 초기값 적용컴포넌트가 처음 렌더링될 때, useState로 설정된 초기값이 DOM에 반영된다. 이 코드에서 초기값 ["", "", ""]가 DOM에 먼저 반영된다.const [answer3, setAnswer3] = useState(["", "", ""]);useEff.. 공감수 1 댓글수 1 2024. 12. 19.
[샵 홈페이지]가비아 도메인 구입 후 연결 vercel로 배포하는 것으로 수정했다. 좌) vercel 사이트 우) 가비아 사이트 가비아 등록 도메인 - DNS 관리 - DNS 설정에서 A 레코드, CNAME 레코드 추가 nameserver는 도메인 정보 변경 - 네임서버에서 설정해줬다. 공감수 0 댓글수 0 2024. 12. 9.
포토샵 로판 글씨체 현수막 만들기 폰트 빛의 계승체 Bold https://heiroflight.gamevil.com/ 빛의 계승자 Heir of Light빛의 계승자 - 글로벌 런칭!heiroflight.gamevil.com dafont - Nymphette https://www.dafont.com/nymphette.font Nymphette Font | dafont.comNote of the author This font is absolutely free for personal AND commercial use. Donations are appreciated!www.dafont.com 창 - 글리프 켜놓고 보면 편하다. 래스터화 시킨 후 겹치는 부분을 지우개로 정리했다. 근데 배경이 아무래도 마음에 안 들어서...(포토샵 생성형 A.. 공감수 0 댓글수 0 2024. 5. 16.
[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 입력하는데 그 옆에 들어갈 내용은 친절하.. 공감수 1 댓글수 0 2024. 5. 6.
VIA) VIA 키보드에 mac 지구본(fn)키 넣기, where's 'Rapp'? 오랜만에 코딩을 다시 시작하려니 셋팅 해놨던 것은 ㄷ ㅏ 안녕.그리고 전에 회사 다닐 때 쓰던 키보드는 키크론 q1 이었고 지금은 새로 선물받은 키보드라서 셋팅이 다르다. 쓰던 도중, 셋팅이 맞는 표현일지 세팅이 맞는 표현일지 쳐봤는데 세팅이 맞는 표현이라고 합니다. 어쨌든~ VIA 이름도 기억이 안 나서 뺨? 냠? 이런 이름이었던 것 같은데...? 하며 겨우 찾고,command, control, option 키 정렬도 다시 해야했다. 그리고 바꿔놨더니 윈도우로 쓸 때는 또 엉망진창이 돼서...^^ (현재 한 개의 키보드, 마우스, 모니터로 데스크탑-맥북 번갈아 사용하고 있다.) 지금 세팅을 좀 저장하려고 한다. 그리고 그 때도 ㄹㅅ님이 도와주신 방법으로 이모지 버튼을 세팅했었는데, 그것도 다 날아가.. 공감수 0 댓글수 0 2024. 5. 6.
[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.. 공감수 0 댓글수 1 2024. 2. 24.
1월 28일 백준 코딩테스트 백준 1008 두 정수 A와 B를 입력받은 다음, A/B를 출력하는 프로그램을 작성하시오. zz 이게 이렇게 어려울 일인가 약간 자괴감 들고 괴로워. 아주 처음에 c++ 처음 배울 때 *랑 / 가지고 소수점 버리는 퀴즈?를 풀었었는데, 문제 조건을 이해를 못 했는지) 그거랑도 헷갈려서 계속 틀렸었다. #include using namespace std; int main () { double a,b; cin >> a >> b; cout.precision(11); cout > coords[i].x >> coords[i].y; }; // 좌표 세 개 입력 받기 // 좌표를 넣은 뒤 외적한 결과 값을 받는다. Direction result = getCrossProduct(coords[0], coords[1], .. 공감수 0 댓글수 0 2024. 2. 24.
[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") ); .. 공감수 0 댓글수 0 2023. 7. 28.
230504 로그인 후 보던 페이지로 이동시키고 싶어 🚨 문제 발생! const handleOk = () => { setModalState({ text: "", openModal: false, }); localStorage.setItem("prevPage", router.asPath); router.push("/signin"); }; useEffect(() => { if (!accessToken) { console.log("hi"); setModalState({ text: "로그인이 필요합니다.", openModal: true, icontype: "warning", ok: "확인", onClickOk: handleOk, }); } }, [accessToken]);useAuth() const handleLoginButton = async () => { eve.. 공감수 0 댓글수 0 2023. 5. 4.
0427 오늘의 에러 name : AxiosError 리액트 특정 컴포넌트에만 css 변경사항이 적용 안 되는 문제 검색 키워드 : react component style not applying, react component style not updating, 리액트 캐시 초기화 다른데는 적용이 잘 되는데 answer에만 되지 않았다. 그러고보니 answer만 파일 이름이 소문자... 그래서 Answer.tsx로 바꿔봤는데 그때부터 변경사항이 실시간 반영된다ㅎㅎ 이게 문제였던건지 아니면 그냥 파일이름을 바꿔줌으로써 뭔가 초기화가 된건진 모르겠다. 컴포넌트 이름이 대문자로 시작해야 한다는 건 알고 있는데, 파일 이름도 그런가? 원래 answer 부분도 밑줄 쳐져있었는데 그게 문제였던걸까 -아직 해결 못 함 문제 상황export.. 공감수 0 댓글수 0 2023. 4. 27.
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.. 공감수 0 댓글수 0 2023. 4. 7.
정희선 빵야 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 4. 6.
[git] New Branch는 원격에서 딴다. 더블클릭하거나 체크아웃 눌러서 브랜치 이동한다~ local changes 확인 all commits 깃랩가서 merge request 확인 #리베이스 하기 pull 땡겨서 해도 되지만 그러면 기록이 남고 일자로 쭉쭉 올라가는 모양이 아니라 마구 엉킬 수 있음 본진의 복사본으로 만든다는 느낌 이제 작업할건데 누군가 main을 더 올라가게(나아가게)했을 때(작업을 했을 때), 그때 내꺼랑 메인이랑 일방적인 동기화 느낌으로 하는 법은 Interactively Rebase 'feature/#2' on ... 공감수 0 댓글수 0 2023. 4. 6.
[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하는 명령어를 입력하라고 뜨는 것 똑같이 쳐주면 된다. 공감수 0 댓글수 0 2023. 4. 6.
[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.. 공감수 0 댓글수 0 2023. 3. 24.
[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.. 공감수 0 댓글수 0 2023. 3. 23.
[react] 계산기/ 무한 리렌더링, 맨 왼쪽의 0 좀 빼줘 무한 리렌더링 발생~~!! // allTokenPrice 나오면 input2 값 변경 useEffect(() => { if (token2Price) setInput2(allTokenPrice / token2Price[token2.id].usd); }, [allTokenPrice, token2Price, handleChangeInput]); 이 의존성 배열에서 token2Price랑 handleChangeInput을 뺐다. 토큰을 바꾸면(토큰의 가격이 바뀌면) 새로 계산 되어야할 것 같아서 넣어놨었는데, 토큰 라벨을 눌러서 바꾸면 어차피 토큰 가격이 새로 불러와지고 그럼 allTokenPrice도 다시 계산된다. 3.0 이라고 치려고 하면 0이 입력되지 않는다. 이건 removeZeros 함수 때문인데.... 공감수 0 댓글수 0 2023. 3. 6.
[react] 계산기/input 두 개가 서로 영향받게 하기 과제로 했던 환율계산기(?)를 가지고 구현 못 했던 거 구현해보고 리팩토링 할 거 해볼 생각이다~~~ 약간 신난닷^ㅁ^ WBTC input에 3을 입력하면 USDC가 계산되어 나오지만, USDC input은 변경할 수 없었다! 즉 역으로 하는 건 안 됐다. 근데 보다시피 처음에 숫자가 바로 입력이 안된다. 숫자를 누르면 밑에 $0 이 뜨고 그 다음에 한 번 더 입력해야 입력이 된다. 그리고...! 무한리렌더링 되는 현상이 발생했다,,, setInput하면 allTokenPrice를 계산하고 그게 계산되면 다시 setInput하고... 그럼 어카냐 일단 input, input2, token, token2 중에 하나라도 바뀌면 값이 다시 계산되어야 한다. 하지만 이걸 모두 의존성 배열에 한 번에 넣어버리면 .. 공감수 0 댓글수 0 2023. 3. 3.
[react] 계산기/새로고침해도 선택값 유지하기 토큰을 선택했을 때 새로고침을 해도 초기값으로 바뀌지 않게 해보기!!! 리액트에서 상태(state)가 새로고침될 때마다 초기값으로 돌아가는 것은 정상적인 동작이다. 페이지를 다시 로드할 때마다 새로운 인스턴스를 만들고 상태를 초기화한다. 그럼 값을 유지하려면? 그 값들을 컴포넌트 외부에 저장하기 setTokenModalOpen(true)}> 지금 코드는 이렇다... 에 token data를 넘기고 안에선 이름만 출력해주는 식이다. const [token, setToken] = useState(tokens[0]); const [token2, setToken2] = useState(tokens[1]); ... {isTokenModalOpen && ( )} Select라는 컴포넌트에 setToken을 전달해서.. 공감수 0 댓글수 0 2023. 3. 3.
까치를 보내고 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 3. 2.
[react] 리액트 리렌더링 학원 다닐 때 올린 ssr과 csr의 차이, ==와 === .. .등은 약간 의무적으로 올린 거였다. 단어에 익숙해진 건 좋았지만 실제로 머리에 남아있지 않았다. 그래서 이번엔 1시간 정도는 공부를 하고 그것에 대해 쓰려한다. 리액트에서 리렌더링이 일어나는 경우는? 1. props나 state가 업데이트 될 때 2. 부모 컴포넌트가 리렌더링 될 때 부모 컴포넌트가 리렌더링 되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 3. context가 변경될 때 4. hook을 사용하여 상태를 관리할 때 useState, useReducer 같은 훅을 사용할 때, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 5. ForceUpdate() 함수가 호출될 때 ForceUpdate() 함.. 공감수 0 댓글수 0 2023. 3. 2.
[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); 이렇게 간략하게 표시가능하다. 오랜만에 블로그... 요즘은 블로그 할 정신이 없었다. 음... 이건 핑계인 것.. 공감수 0 댓글수 0 2023. 2. 7.
[Next.js] tailwind 설치 tailwind가 components 밑에 있는 파일에는 적용이 안됐다. 해결책을 찾다가 Next.js에서의 사용방법이 자꾸 눈에 띄어서 그냥 Next.js로 하기로 했다. tailwind 때문은 아니고 앞으로 프로젝트를 넥스트로 할 일이 더 많을 것 같아서,, 넥스트 설치하는 건 정말 오랜만이다...! yarn create next-app --typescript 그냥 타입스크립트로 했다. yarn dev 터미널에 치면 Next.js 화면이 뜨는 걸 확인할 수 있다. yarn add -D tailwindscss postcss autoprefixer npx tailwindcss init -p 난 ./src/...로 했다. Cannot find module 'tailwindcss' error npm inst.. 공감수 0 댓글수 0 2023. 1. 19.
[youtube] useNavigate(), useLocation(), 유튜브 끝 useNavigate()를 통해 전달하고자 하는 것을 param으로 전달할 수 있다. const navigate = useNavigate(); { navigate(`videos/watch/${video.id}`, { state: { video } }); }} > 이렇게 하면 video를 넘겨줄 수 있다. + `/videos ... (절대경로) 안 하고 위에처럼 `videos/ ... 하면 현재 경로에 저걸 추가하게 된다. 원하는 결과랑 다르게 나올 수 있음~ 받는 곳에선 이렇게 받는다. const { state: { video }, } = useLocation(); 네이버 메모는 잘못눌렀다ㅎㅎ... 태그 리스트로 나오는 것들엔 쓰기 신기한 태그!!! axios 이용하는 것부터 잘 못따라갔다. 갑자기 메이.. 공감수 0 댓글수 0 2023. 1. 17.
[youtube] tailwind grid auto-fill, router, axios 리팩토링 tailwind에서 auto-fill쓰기 // tailwind.config.js module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { gridTemplateColumns: { "fill-auto": "repeat(auto-fill, minmax(15rem, 1fr))", }, }, plugins: [require("@tailwindcss/line-clamp")], }; 쓰고 적용할 곳에 grid-cols-fill-auto 라고 써주면 된다. https://github.com/tailwindlabs/tailwindcss/issues/1403 [Feature request] CSS Grid - Auto-Fit & Auto-Fill.. 공감수 0 댓글수 0 2023. 1. 13.
[youtube] https://developers.google.com/youtube/v3/docs/videos/list?apix_params=%7B%22part%22%3A%5B%22snippet%2CcontentDetails%2Cstatistics%22%5D%2C%22id%22%3A%5B%22Ks-_Mh1QhMc%22%5D%7D Videos: list | YouTube Data API | Google Developers Videos: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청 매개변수와 일치하는 동영상의 목록을 반환합니다. 지금 사용해 보거나 예를 참조하세요. developers.google.com id로 Detail 정보 받아오기 https://youtube.g.. 공감수 0 댓글수 0 2023. 1. 12.
[youtube] tailwind, react-router, popular list, search yarn add -D @tailwindcss/line-clamp 유튜브 제목이 두 줄까지만 나오고 그 뒤는 ...(말줄임표) 처리 되도록 하기 위해서 line-clamp 플러그인을 깔았다. // tailwind.config.js module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { extend: { spacing: { 1: "1px", 2: "2px", }, }, }, plugins: [require("@tailwindcss/line-clamp")], // 이 부분 추가 }; plugins에 line-clamp를 추가한다. line-clamp-{n} 이렇게 적어주면 된다! 그리고 h도 지정을 해줘야 한다. 이렇게 두 줄까지만 .. 공감수 0 댓글수 0 2023. 1. 12.
[youtube] 1/11, 유튜브 클론 코딩 시작은 개미미하지만... 끝은 성대하길^^~~~ 처음 써보는 것 : tailwind, mock data 만들어 쓰기 거의 처음인 것 : postcss, react-query tailwind 아직 뭐 쓸 수가 없다 몰라서... postcss는 그냥 module만 붙이면 되는 거 아닌가?! 근데 tailwind 시작할 때 같이 깔고 뭔가 했단 말이지..🧐 이건 내일 알아봐야지 내일 하루종일 하면 익숙해지겠지!!! tailwind할 생각에 신난다~!~~~!!!~~~ 오늘 할 일 : 포장, 송장 붙이기, 송장 뽑기 하고 싶은 것 : 꾸덕이 회고 이 정도면 회고 중독 취미 후보 : 보드게임, 주짓수 공감수 0 댓글수 0 2023. 1. 11.
[tailwind&emotion] 오늘은 리액트 쿼리 강의 마저 듣고 유튜브 프로젝트 api 받아보기, 회의, 테일윈드 알아보는 것만 했다. 더보기 tailwind에 대한 생각은 뭔가... 내가 커스텀하기 어려울 것 같고 세세하게 정할 수 없을 것 같아서 꺼려졌는데 엘리쌤이 추천하기도 하고 검색해보니까 그런 애는 아닌 것 같아서(?ㅎ) 쓰게 됨! 아직 쓴 건 아니지만. yarn add @emotion/react @emotion/styled @emotion/css @emotion/server yarn add -D twin.macro tailwindcss postcss@latest autoprefixer@latest @emotion/babel-plugin babel-plugin-macros yarn add -D tailwindcss post.. 공감수 0 댓글수 0 2023. 1. 11.
[Todo] 회고?ㅎ 아무튼 끝 강의 들으면서 아쉬운 것들 적어보기 1. AddTodo를 분리하지 않은 것 - input부분을 따로 떼낼 수 있었는데 컴포넌트화하지 않았음 2. AddTodo에서 form을 사용하지 않은 것 - 난 키 입력에 함수를 바인딩해서 그게 엔터면 onClickAdd()하는 식으로 했었는데, form으로 하면 굳이 이렇게 하지 않아도 된다. 자꾸 form의 존재를 까먹음... 3. AddTodo에서 if(input==="") return; 이라고 썼는데 if(input.trim().length === 0) return; 이렇게 하면 ""뿐만 아니라 " "도 거를 수 있다! trim() 은 공백제거한 순수 문자열을 반환함 const filters = ['all', 'active', 'completed']; ... .. 공감수 0 댓글수 0 2023. 1. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.