서론 우리는 자바스크립트로 백엔드 작업을 할 때 'unknown' ERROR을 겪을 때가 있다. 보통의 ERROR은 이유와 함께 발생한 장소를 알려주는데 'unknown' ERROR은 발생 위치와 이유를 알 수 없어 해결하기 까다로워 보일 수 있다. 해결법 일단 'unknown' ERROR의 해결법은 간단하다. VS CODE를 제시작 하면 된다. 그러면 자동으로 개발 서버가 꺼지게 되는데 그건 다시 npm run dev해서 시작하면 이전에 있던 ERROR이 깔끔하게 사라질 것이다.
자 우리가 애니메이션을 작성하다 보면 가끔씩 잘 작동하지 않고 흔들리면서 나오는 경우가 있다. 우리가 그럴 때 1줄로 해당 현상을 해소할 수 있는 방법을 알아보자. (코드 자체에 문제가 있는 경우 위 속성을 적용해도 효과가 없습니다. 코드 자체에 문제가 없는 경우 위 속성이 효과가 있습니다) 예시코드 .open-post__heart-count:hover i { will-change: transform; } 자 난 이렇게 작성했는데 아래 코드 템플릿을 보고 본인 코드에 맞게 작성하길 바란다. 코드 템플릿 (class 또는 id) { will-change: (애니메이션 효과에서 바뀌는 부분(예.transform)) } 자 이렇게 해서 위 코드를 추가했다면 애니메이션의 문제인 흔들림이 없어졌을 것 이다. 하지..
자 일단 MongoDB를 설치하기 위해 https://www.mongodb.com으로 접속해 주세요. 구글에 MongoDB를 검색해 들어가셔도 좋습니다. MongoDB홈페이지에 접속하셨다면 https://www.mongodb.com/try/download/community 이 링크를 클릭하시거나, 다운로드 페이지에 접속해 주세요. 자 다운로드페이지에 접속해 조금만 스크롤해 내려주면 위와 같은 화면이 나오는데, 여기서 Package를 기본값인 msi가 아닌 zip로 변경해 주세요 자 이렇게 변경해 주셨다면 다운로드 버튼을 눌러주세요. 자 다운로드가 완료되었고, 실행시키면 이런 화면이 뜹니다. (만약 다른 화면이라도 걱정하지 마세요! 왼쪽 위 압축 풀기 버튼을 누르시면 됩니다) (주의! 압축풀기 후 폴더열기..
서론 자 우리가 로그인 기능을 구현할 때 많이 이용하는 쿠키와 세션을 암호화해서 저장하는 방법에 대해 알아보려고 한다. 자 일단 iron-session은 session에 들어가는 데이터를 암호화해 저장하는게 특징이다. 데이터를 암호화하면 민감한 데이터도 저장할 수 있는 장점이 있다. iron-session으로 쿠키를 암호화해서 저장하기 일단 npm i iron-session 명령어를 실행해 iron-session을 다운받자. import { withIronSessionApiRoute } from "iron-session/next"; 자 이제 import해 준 다음 export default withIronSessionApiRoute(withHandler("POST", handler), { cookieNa..
서론 자 오늘은 웹사이트를 전 세계 모든 사람들이 볼 수 있도록 배포하는 방법에 대해 알아보려고 한다. 일단 지금 내가 소개하는 사이트는 한국에서 만든 사이트로 가입 시 신용카드 정보를 요구하지 않기 때문에 많은 사람들이 부담 없이 이용할 수 있을 것 같다. 클라우드타입을 이용한 배포 https://cloudtype.io/ 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 자 위 사이트는 클라우드타입의 URL주소다. 자 여기가 클라우드타입 로그인 화면이다. 여기서 Github 계정으로 로그인을 진행해주면 된다. 자 로그인 한 다음 이 화면에서 내 GitHub저장소 배포하기를 눌러주면 된다. ..
자 오늘은 파일 업로드 버튼에 관련된 이야기다. 사실 파일 업로드 버튼의 기본 style은 보기 좋지 않다. 그렇기 때문에 오늘 준비한 내용! CSS로 파일 업로드 버튼을 예쁘게 바꾸는 방법. 예시 코드 자 일단 HTML파일에서 Add Photo 이렇게 작성해 준다. 일단 여기서 중요한 점은 label안쪽에 텍스트와 함께 파일 업로드 input를 배치해 주면 되는데, label의 for과 파일 업로드 input의 id가 같아야 한다. 자 이제 CSS에서 input#file { display: none; } 이렇게 작성해 주자. 위 코드는 file의 id를 가진 input의 display를 none로 해서 보이지 않도록 하는 작업이다. label { all: unset; padding: 10px; /*pa..
예시 설명 자 우리가 코딩을 하다 보면 특정 div이나 button에 마우스를 올렸을 때 마우스 클릭 모양으로 바꾸고 싶을 때가 있다. (id 또는 class):hover { cursor: pointer; } 자 일단 css코드에서 위와 같이 작성해 보자. 자 이렇게 작성하면 해당 물체에 마우스가 hover(올라감) 상태가 된다면 마우스 모양이 포인터 상태가 되도록 만들어주는 코드이다. 코드 템플릿 (id 또는 class):hover { cursor: (속성 입력) } 자 어떤 cursor속성이든 위 템플릿을 따라 주기만 한다면 다양한 시도를 해 볼 수 있다. 시도 https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading S..
