봉보로봉봉

지난주 주말에 html, css, js로 화면 구현 테스트를 봤다. 오랜만에 React가 아닌 js로만 구현하려니 아쉬운 코드라고 느끼면서도 그렇게 제출할 수밖에 없었다...🥺 어떻게 해야할지 모르겠어요.... 시험을 본 뒤로 계속 머릿속을 떠나지 않아서 찾아보고 기록해두려고 한다. - 문제 - fetch 후 데이터를 활용한 모든 코드를 2번째 then 안에 넣을 수 밖에 없는가..? fetch로 받아온 목데이터로 html 태그를 생성했는데 원래 html에 존재했던 태그는 fetch 밖에서 선언해 가져올 수 있었지만 데이터를 가지고 생성한 태그는 fetch 밖에서 접근하려고 하면 null이 들어왔다. 그래서 어쩔 수 없이 fetch 뒤에 2번째 then에 모든 코드를 다 넣을 수밖에 없었다. 이것보다 좋..

문자를 아스키코드로 변환하기 이 메소드로 알고 있는데 'A'.charCodeAt() // 65 'ABC'.charCodeAt() // 65 이것도 바꿔진다.....🤔 'A'.codePointAt() // 65 'ABC'.codePointAt() // 65 위 메소드들은 여러 개는 바꿔지지 않고 첫 글자만 바꿔준다. 아스키코드를 문자로 변환하기 이 메소드로 하는 걸로 알고 있는데 String.fromCharCode(90) // 'Z' String.fromCharCode(90, 89, 87) // 'ZYW' 이것도 바꿔진다....🤔 String.fromCodePoint(65) // 'A' String.fromCodePoint(65, 66, 67, 68, 69, 70) // 'ABCDEF' 위 메소드들은 여러..

axios.post에 url을 작성하고 body에 넣고 싶은 내용을 넣는다. 그리고 응답을 콘솔에 찍어보려고 하면 빨간 줄이 죽죽 생긴다. axios .post('http://localhost:8000/users/signup', { account: idValue, password: pwValue, nickname: nameValue, email: emailValue, }) .then((res)=>console.log(res)) axios 공식문서 이런 에러가 뜨는 걸로 봐서는 axios를 타입스크립트에서 사용하려면 요청 보내는 데이터와 응답받아서 오는 데이터의 타입을 지정해줘야 하는 것 같다. Property 'message' does not exist on type 'AxiosResponse'. 요청 ..

필요한 패키지를 설치한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom // jest도 사용한다면 추가한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom @type/jest 파일 확장자를 변경한다. .js => .ts .jsx => .tsx tsx로 변경한 파일부터 타입 스크립트를 얹어준다. interface를 선언하여 props에 type을 정해주거나 generic을 사용해가며 에러들을 해결해준다. ref.current 에러 해결하기 jsx를 tsx로 파일 속성을 변경하면 e와 ref.current에 빨간 줄이 ..

동기가 과제로 채팅 프로그램을 구현하는데 최신 채팅이 채팅 목록 아래로 추가되는 형태였다. 스크롤을 항상 아래로 내려서 최신 메시지를 보여주고 싶어 했다. 집단지성으로 모두를 불러 모아 찾아보다가 나도 언젠가 쓸 일이 있지 않을까 싶어서 기록해둔다. const chatBox = document.getElementById('chatBox') chatBox.scrollTop = chatBox.scrollHeight; 찾아보니 메소드 scrollTop()은 제이쿼리 메소드 같다. 바닐라 JS는 scrollTop에 할당을 해줘야 하는 것 같다.

원격 저장소에 깜빡하고 .env를 올려버렸다. 뒤늦게 .gitignore에 추가를 해도 원격 레포에서는 지워지지 않아서 원격 레포의 파일 자체를 지우기로 했다. 원격 레포에 있는 파일을 지운다. # 원격 저장소와 로컬 저장소에 있는 파일 삭제 git rm 파일이름 # 원격 저장소에 있는 파일을 삭제, 로컬 저장소에 있는 파일은 삭제 X # 이걸 사용해서 원격 레포에 있는 .env만 지울 수 있다. git rm --cached 파일이름 변경사항을 스테이징한 후 커밋을 남긴다. git add . git commit 원격 레포에 푸시한다. git push origin main 그럼 원격 레포에서 파일 삭제 끝!

지난 번에 저장한 데이터를 보여주기위해서 데이터를 가져오는 코드를 썼다. 나는 데이터 전체를 한번만 가져오면 됐기 때문에 getDocs를 사용했다. 참고 필요한 요소 import 하기 import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore'; 파이어베이스 저장소를 불러온다. const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.VITE_..

firebase 공식문서 https://firebase.google.com/docs/firestore?hl=ko Firestore | Firebase 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. firebase.google.com firebase 패키지를 설치한다. npm i firebase --save 데이터 저장에 필요한 요소를 import 한다. import { initializeApp } from 'firebase/app'; import { getFirestore, collection, addDoc } from 'firebase/firestore'; 프로젝트를 생성하면 나오는 config 정보를 이용..