yebeen blog

input[type="date"]의 기본 모양은 아래와 같은 문구와 캘린더 이모지로 이루어져 있다. 하지만 계정 생성 폼을 만들면서 년/월/일이 아닌 생년월일이라는 문구가 넣고 싶었고 캘린더 이모지도 다른 디자인으로 바꾸고 싶었다. 그러나 css는 역시 쉽지 않은 세계... 일반적으로 적용하는 css코드( placeholder 디자인 변경 )로는 적용이 안되었고 여러 가지 검색해 보고 강의 보면서 커스텀에 성공은 했다. 자주 쓰진 않아서 왠지 까먹을까 봐 정리해 둔다. 🥲 input( type="date",data-placeholder="생년월일" ) [ 아이콘 변경하기 ] input[type='date']{ // 캘린더 아이콘을 클릭해야만 달력이 보이는데 캘린더의 영역을 조절하기위함 position: ..

Module 프로그램을 구성하는 구성요소와 관련된 데이터와 함수를 하나로 묶은 단위 전통 자바스크립트 개발 방식은 기능별 또는 페이지별로 js 파일을 분리하고 html에서 태그로 로드하는 방식이었다. 하지만 이 방식은 의존성이 있는 코드 사이에 순서를 보장하기 어렵고 ( import 하는 여러 파일간에 동일한 이름을 갖는 변수를 만들 수 없음 - 충돌 ) 일부 파일에 문제가 발생했을 때 전체 스크립트를 실행하지 못할 수 있다. 이러한 문제를 하기위해 나온 것이 모듈 단위의 개발이다. bundler 의존성 있는 모듈 코드를 하나 또는 여러 파일로 만들어주는 도구로 브라우저 환경에 잘 실행될 수 있도록 가공해 준다. 즉 웹을 구성하는 파일들을 하나의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만든다...

dotenv란? 자바스크립트에서 환경변수를 사용할 수 있도록 하는 npm 모듈로 유저가 .env를 통해 저장해 놓은 환경 변수들을 process.env에 로드한다. 사용하기 1. dotenv 패키지 설치 npm i dotenv 2. .evn파일 작성 키=값의 형식으로 작성되어야 한다. DB_URL="mongodb://~~" DB_USER=root 3. 패키지 불러오기 //ES module import dotenv from "dotenv"; dotenv.config(); //CommonJS require("dotenv").config(); [ 주의점 ] 1. dotenv 라이브러리는 가장 먼저 load 되어야 한다. (특히 .env에 DB와 관련된 환경변수들을 선언한 경우 DB파일보다 먼저 load 되어야..

어느 날 노트북 소리 출력이 이상해서 노트북을 재시동하고 만들던 웹에 다시 들어갔는데 갑자기 터미널에 Buffering timed out after 10000ms이라는 에러가 뜨면서 먹통이 되었다. DB랑 통신하면서 생긴 에러라 DB에 뭔 문제가 생겼나해서 터미널에 mongosh를 입력하니 아래와 같은 에러가 떴다. MongoNetworkError: connect ECONNREFUSED [ 주소 ] 아니 연결이 안된다구요?... 왜 되던 게 갑자기 안돼! 하며 해결방법을 찾아갔는데 컴퓨터를 재시동하면서 mongoDB가 꺼져버린 것... 노트북을 안 끄고 항상 잠자기 모드만 해놓기에 몰랐었다😂 터미널에 아래와 같은 명령어를 입력해 주면 DB가 다시 실행이 되면서 연결이 잘된다. brew services r..

0411 오랜만에 간 학교 오랜만에 먹은 부리또 오랜만에 먹은 한솥 그리고 항상 곱빼기를 먹어야하는 그... 분명 우리 솜이는 데려오기전만해도 말라말라깽이였는데 지금은 이런 꿀꿀이가 있을 수가 없다. 간식두 잘 안 먹고 맨날 쫓아다니는데 왜 하리보다 덩치가 3배인지 알 수가 없을 뿐... 그리고 깃헙을 잘못 만졌다가 이때까지 짠 코드를 냅다 날려버린 나 얼마나 절망스럽던지 ^^... 그냥 복습한다는 마음으로 파일이 담긴 폴더를 전부 날리고 다시 필요한거 install했다... 정말 아직까지도 깃헙 사용은 쉽지않다. 0412 이 날은 나와 같이 라섹을 하려던 친구가 수술하는 날이어서 못 건네준 생일 선물을 줄 겸사 수술 전에 만나가지구 밥을 먹었다. 양림동에 있는 마귀할멈이라는 베트남 음식점을 다녀왔구 날..

미루고 미루다 돌아온 일기 이게 일기가 맞는 걸까? 하지만 쓰고 싶은걸… 임시저장에 묵혀놨던 이야기 시작… 🤣 동생이 코로나에 걸렸는데 뭐 가족이 걸려도 안 걸리는 사람도 있고 사실 안 걸릴 줄 알고 아무렇지 않게 지냈는데 결국 일주일 지나서 확진되었다. 진짜 3-4일은 미친 듯이 아파서 고생했던 ㅠㅠ 약을 6시간에 한 번씩 먹으라 했는데 약 먹고 4시간만 지나도 열이 오르고 온몸이 아팠다. 알약도 잘 못 먹는데 아프니까 못 먹고 말고 가 문제가 아니었는지 그냥 다 삼켜졌다 ( 웃긴 게 6일 차쯤부턴 몸이 거의 안 아팠는데 이때부터 약이 잘 안 넘어감 ) 하루는 새벽에 등이 아파서 누워있지도 못하고 머리는 깨질 것 같아서 눈물만 났다. 정말 다시는 걸리고 싶지 않다 ๑꒪⌓꒪๑ 아 그리고 격리기간 동안에 ..

callback - 다른 함수의 실행이 끝난 뒤 실행되는 함수 ( 매개변수 값으로 들어가는 함수이기 때문 ) - 코드를 통해서 호출되는 게 아니라 등록만 해놓고 어떤 이벤트가 발생하거나 특정시점에 도달했을 때 시스템에서 호출하는 함수 js에서 사용하는 이유 - 이를 사용하면 비동기적 프로그래밍을 할 수 있기때문 - js는 싱글 스레드를 이용하기에 요청에 대한 답이 없으면 다음 작업으로 넘어갈 수 없다는 문제가 있는데 이를 해결하기 위해 사용 즉 blocking을 방지하여 싱글 스레드가 nonBlocking으로 동작하게 한다. 비동기 처리가 가능한 이유 - js는 이벤트 루프만 실행하지 않고 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기에 동시성을 보장하는 비동기 작업은 js 엔진을 구동..

동기 ( Synchronous ) 작업을 순차적으로 처리하는 방식으로 데이터의 요청과 결과가 동시에 일어난다. 즉 요청을 했을 때 결과가 나타나지 않는다면 다음 작업으로 넘어가지않는다. 장점 : 설계가 단순하고 직관적이다. 단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야한다. 비동기 ( Asynchronous ) 비순차적으로 처리하는 방식으로 데이터의 요청과 결과가 동시에 나타나지않아도 된다. 즉 요청을 했을 때 그에 따른 응답을 안기다려도 되고 다른 작업을 진행해도 된다. 장점 : 여러작업을 빠르게 처리할 수 있다. 단점 : 동기식보다 설계가 복잡하다. [ 참고문헌 ] https://velog.io/@slobber/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%9..

mongo not sql based로 document based이다. 시작하기 1. mongodb 설치하기 MongoDB Atlas: Cloud Document Database Cloud-hosted MongoDB service on AWS, Azure, and GCP www.mongodb.com 2. 터미널에 mongod 입력해 실행이 되는 지 확인해보기 아래와 같은 문구가 뜨면 설치가 제대로 안된 것으로 다시 설치해야한다. mongod command not found mongod is not a command 3. mongosh 입력하여 db 클라이언트 켜기 = > connecting to에서 mongodb:// 주소 ~ 가 나올텐데 /?전까지 복사 만약 실행 시에 아래와 같은 오류가 난다면 Mong..

req.params = :id, :naem와 같은 매개변수값들을 의미한다. // url이 ~/videos/5/edit 인 경우 5가 id값이 된다. // (\\d+)는 하나 혹은 그 이상 연결된 숫자만을 가져오라는 정규식이다. videoRouter.get("/:id(\\d+)/edit",getEdit) req.body = POST로 바디데이터(JSON)등의 데이터를 받을 때 사용 = form의 value 값을 가지고싶다면 express의 urlencoded()를 사용해야하는데 app.use(express.urlencoded({extended:true})) 을 서버와 관련된 js파일에 추가해야한다. -> form의 body를 이해 아래와 같은 form에서 데이터를 받아와 req.body를 확인해보면 { t..