익명의 개발노트

브라우저가 Html파일을 랜더링 할 때, 맨 위에서 아래로 한줄한줄 읽으면서 실행한다. script 태그가 없으면, 브라우저는 parsing HTML만 진행을 할 것이다. 그럼 아래와 같이 head 부분에 script가 있으면?? 위와 같이 HTML을 먼저 파싱하고, 자바스크립트를 fetch, executing 하는동안 HTML 파싱은 잠시 중지하고, 스크립트 실행이 끝나면 남은 HTML을 파싱한다. 아래와 같이 Body에 있는 경우는 어떠할까? 위와 같이 HTML 파싱이 다 끝나면, 스크립트를 fetch, executing한다. body에는 위와 같은 순서대로 진행되기때문에 async, defer가 거의 의미가 없다. 그러면, async와 defer를 쓰면 무슨차이가 있을까? 우선 Async를 먼저 보..

브라우져가 로딩되면, window객체에서는 아래와 같은 이벤트들이 동작을 한다. 1. DOMContentLoaded : only document, 즉 html만 먼저 불러온다. css, image는 불러오지 않는 단계 2. load : css, image 같은 리소스가 로딩이 완료되면 호출된다. 3. beforeunload : 페이지 나가기 전에 호출되며, 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할때 사용할 수 있다. 4. unload : document, resource가 전부 unload되었을 때 호출된다. 1) 오류가 발생해도 취소되지 않는다. 2) window.open(), window.alert(), window.confirm() 같은 UI 상호작용 함수들의 효..

CRA로 손쉽게 설치 할 수 있지만, 수동으로 설치를 진행해보고자 한다. 1. 수동 설치 이유 1) 프로젝트 규모가 커지면 eject 해야하는 경우가 발생하는 경우가 생김 2) CRA로 설치하는 것보다 작업하면서 필요한 부분을 추가해 나가는 것이 나중에 빌드시 시간 감소에 유리하다. 2. 수동셋팅방법 1) npm 설정하기 npm init 2) npm package 추가 //웹팩설치 npm install --save-dev webpack webpack-dev-server webpack-cli //바벨설치 npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react babel-preset-es2015 //리액트설치 ..

몽고디비 실행시 네트워크 쪽에 permission denied 발생시 조치방법은 아래와 같이 mongodb-27017.sock 파일 삭제 후 sudo rm -rf /tmp/mongodb-27017.sock 서비스 실행해주면 해결된다. brew services start mongodb-community@4.2

1. 정의 HTML5에서 새로 추가된 스펙이며, 실시간 양방향 데이터 전송을 위한 기술 2. 특징 1) HTTP 프로토콜이 아닌 WS 프로토콜을 사용하기 때문에 서버나, 클라이언트에서 WS 프로토콜을 지원하면 사용가능 2) 웹 소켓 연결이 되면, 계속 연결된 상태를 유지하여, 업데이트 등의 요청을 보낼 필요가 없고, 업데이트 내용이 존재할 경우 서버에서 바로 클라이언트로 알림을 줌. 3) HTTP 프로토콜과 포트를 공유 4) Polling 방식에 비해 성능 개선 * 노드는 ws나 socketIO 같은 패키지를 통해 웹소켓 사용할 수 있음. 3. 상태종류 1) CONNECTING 2) OPEN : OPEN 일때 error 없이 메세지 보낼 수 있음. 3) CLOSING 4) CLOSED

무분별한 api 호출을 제한하기 위해 express-rate-limit 라이브러리를 설치해보자 npm i express-rate-limit RateLimit 미들웨어를 라우터에 넣으면 라우터에 사용량 제한걸림. const jwt = require('jsonwebtoken'); const RateLimit = require('express-rate-limit'); exports.apiLimiter = new RateLimit({ windowMs: 60 * 1000, // 기준시간 max: 1, //허용횟수 delayMs: 0, //호출간격 //제한 초과시 콜백함수 handler(req, res) { res.status(this.statusCode).json({ code: this.statusCode, //..

1. 원인 : 라우터 get 요청하는 부분의 콜백 함수가 잘못되서 나타난 것. 2. 해결책 : 라우터 안 get 방식으로 요청한 부분의 콜백이 잘못들어 가있는지 확인해 볼 것. pageRouter부터 살펴보면.. 오타가 들어가 있음을 확인했다. isNotLoggedIn으로 들어가야하는데, isNotLoggIn으로.. 수정해주면 끝.

1. passport관련 패키지 설치 npm i passport passport-local passport-kakao bcrypt 2. app.js와 미리 연결 //app.js (다른 모듈 import) const passport = require('passport'); const passportConfig = require('./passport'); //passport 폴더 안에 index.js //express-session 설정 하단부에 passport session 설정해준다. app.use(session({ resave: false, saveUninitialized:false, secret: process.env.COOKIE_SECRET, cookie:{ httpOnly: true, secure..

앞서 포스팅한 맥북, 매직키보드와 더불어 매직 마우스 대신 트랙패드를 구입했다. 가격은 매직키보드와 똑같으며, 이것도 오픈마켓에서 동일한 할부로 진행하여 부담없이 사용하기로 했다. 뒷면에 박힌 사과로고 너무 이쁘다. 크기는 생각보다 작아서 좋았다. (디자이너 분들이 제플린이나 피그마에서 사용하시는 것같이 큰 걸로 생각) 유용하게 사용해봅시다. ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 구매좌표는 아래에서! Apple 정품 매직 트랙패드 2 MRMF2KH/A COUPANG www.coupang.com “파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"

맥북프로를 사면서 마찬가지로 회사에서 이 키보드를 오랬동안 사용해보니 조용하고 익숙해져서 집에서도 사용할 겸 맥북과 함께 질렀다. 마찬가지로 오픈마켓에서 6개월 무이자할부, 24개월 부분무이자 할부가 가능하여, 과감하게 24개월로 질렀다. 월 7천얼마에 이자까지하면 굉장히 저렴하다. 키감이 조용하고 경쾌해서 좋다. ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 구매좌표는 아래에서! Apple 정품 매직 키보드 WITH NUM KEYPAD 한국어 COUPANG www.coupang.com "파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"