봉보로봉봉

LocalStorage 데이터는 어디에 저장되는가? 웹 브라우저 LocalStorage에 데이터를 저장하면 데이터를 지울 때까지 계속해서 저장할 수 있다. 웹 브라우저에서 setItem, getItem으로 LocalStorage를 이용하면 데이터는 사용자의 로컬 디스크를 쓰고 읽는다. 크롬 브라우저를 사용했을 때는 일반적으로 아래와 같은 경로에 저장되며 이는 브라우저마다 다르다. C:\Users\\AppData\Local\Google\Chrome\User Data\Default\Local Storage LocalStorage의 데이터를 읽고 쓸 때마다 사용자의 로컬 디스크에 접근하는 것이다. 그렇다면 사용하고 있는 로컬 디스크가 HDD이고 데이터를 하루에 238348637673995205029719874..

Month.vue와 WriteBtn.vue 파일을 생성해서 자식 컴포넌트 2개를 만들었다. 리액트랑 똑같이 import해서 html 태그로 넣어줬는데 브라우저에서 검사로 보면 태그가 들어갔는데 화면에는 아무것도 안보였다. 넣어줬는데....? 😯 vue에서는 자식 컴포넌트를 쓰고 싶으면 components에 해당 컴포넌트 이름을 넣어줘야한다. // 부모 컴포넌트 export default defineComponent({ setup() { const data = reactive({ selectedKr: true, }); const changeButtonState = (e: Event) => { const target = e.target as HTMLButtonElement; target.id === 'kr'..

변수 선언하기 typescript를 사용하므로 defineComponent로 export default를 한다. 사용할 변수나 함수는 setup() 안에서 선언하고 return을 해준다. 변수는 reactive 함수로 감싸줘야 값을 동적으로 변경할 수 있는 것 같다. 선언한 변수를 이용해 class 넣기 일반적인 클래스는 class에 넣으면 되고 변수를 사용하는 class는 앞에 :을 붙여서 :class로 사용하면 된다. 리액트처럼 class 안에 다 넣으려고 {}를 쓰지 않고 따로따로 써도 동작한다. 한국어 English 함수 선언하기 사용할 함수도 똑같이 setup() 안에 선언하고 return 할 때 넣어주면 된다. export default defineComponent({ setup() { con..

방금 .env를 만들고 커밋하려고 하는데 왜 대체 gitingnore가 .env스테이징을 못막는지.. ? 원격에 .env는 없는데.... gitignore에 .env도 추가해줬는데 !!! 그래서 .env 캐시를 지웠더니 잘 동작한다! git rm .env --cached 참고 링크

토이 프로젝트를 하나 하려는데 react+ts로 할까 하다가 vue 공부를 하다만 게 생각나서 vue로 프로젝트를 생성했다! 오랜만에 생성하니까 정말 하나도 기억이 안난다! 🤯 블로그에 적어둔 것도 없어서 이번에는 적어가면서 진행하려고 한다 😀 vite로 프로젝트를 생성한다. npm create vite@latest 내 프로젝트 -- --template vue d.ts 파일 생성 import from에 vue 모듈이 없다고 난리를 치면 때문에 황급히 d.ts 파일을 생성한다. 참고 컴포넌트 선언 문법 Options API vs Composition API options API는 기존 vue 2.X 버전 때 사용하던 방법이다. data()가 return 하는 객체 안에 변수를 정의하고, methods에 함..

회의 끝에 간단한 배너와 이미지가 들어가는 형태로 이메일을 보내기로 했다. 찾아보니 이메일을 html로 마크업 해서 보내면 된다길래 그렇게 진행하기로 했다! 먼 옛날에는 table 태그로 마크업을 하곤 했단다... 처음엔 html 마크업이니 div 태그로 뚝딱뚝딱 만들면 될 것이라고 생각했다. 하지만 찾아보니 이메일 도메인마다 html과 css를 지원하는 형식이 달라 이메일을 보낼 땐 table 태그로 마크업을 해야 똑같은 메일을 보장할 수 있다는 사실을 알게 되었다. 소문의.. 테이블 코딩을 내가 하게 되는구나...🥺 정말로 div 태그로 했을 때는 원하는 모양이 나오지 않았다.. 서비스에 사용한 폰트도 적용해 메일을 보내고 싶었으나 gmail에서는 외부 글꼴을 지원하지 않아서 폰트 적용은 불가한 것으..

드디어 벌써 반년이 지나서 올해까치 프로젝트의 마지막인 이메일 보내기를 진행할 때가 되었다. 😀 이메일 자동화를 검색해 본 결과 파이썬에 이메일 라이브러리가 있어서인지 파이썬에 대한 결과가 가득했다. 내가 마침 파이썬을 할 줄 알아서 이메일 전송을 맡기로 했다. smtplib 모듈 파이썬으로 이메일을 전송할 때 smtplib 모듈과 email 모듈을 사용해 편하게 이메일을 전송할 수 있다. 파이썬 이메일 전송 코드 중에 제일 잘 설명된 코드를 토대로 필요한 부분만 수정했다. def send_email(받는 사람 이름, 메일 html 내용): import smtplib import re from email.mime.multipart import MIMEMultipart from email.mime.text..

처음 보는 에러 등장! TypeError: JSON.stringify cannot serialize cyclic structures. JSON.stringify는 순환 구조를 직렬화할 수 없습니다. 찾아보니 순환 참조 객체는 JSON.stringify를 사용하면 에러를 발생시킨다고 한다. MDN 페이지 순환 참조란 무엇인가? A가 B를 참조하고 B가 A를 참조하는 경우처럼 순환 참조는 모듈이 서로를 참조하고 있을 때를 이야기한다. A가 B를 참조하고 B는 C를 참조하고 C는 A를 참조하면? 이런 상황이 순환 참조이다. 마치 가위바위보처럼... A -> B -> C -> A 프로젝트가 커지고 여러 사람이 개발하다보면 이런 상황이 발생할 수 있는 것 같다. Circular Dependency, Referen..