꾸준하게 거북이처럼

개념 미들웨어는 서로 다른 어플리케이션이 서로 통신하는데 사용되는 소프트웨어이다. 즉, 양쪽을 연결하여 데이터를 주고받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어이다. 미들웨어에는 순서이 있는데, 코드의 상단에 있는 것이 먼저 실행되고 하단에 있을 수록 나중에 실행된다. 주로 하단의 미들웨어의 경우 위쪽 코드에서 next를 쓰느냐에 따라 실행이 될 수 있다. 미들웨어의 종류 Application Level Router Level Error 처리 기본 제공 Thirdparty 미들웨어 1. Application Level Middleware 주로 app객체의 app.use()나 app.METHOD( app.get, app.post) 함수를 이용해서, 미들웨어를 app 인스턴스에 바인딩하는 미들웨어이..

express.Router express.Router 클래스를 사용하면 모듈식 마운팅 가능한 핸들러를 작성할 수 있고, Router 인스턴스는 완전한 미들웨어이자 라우팅 시스템이라고 할 수 있다. 예제 var express = require('express'); var router = express.Router(); // middleware that is specific to this router router.use(function timeLog(req, res, next) { console.log('Time: ', Date.now()); next(); }); // define the home page route router.get('/', function(req, res) { res.send('Bird..

React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com React를 쓴다면 이 도구는 꼭 설치하는 것이 도움이 된다. state가 변하는 것도 눈에 보이고, 컴포넌트 렌더링이 되는 것에도 반응한다. 아래 사진처럼 개발자 도구에서 Components에 들어가면 확인할 수 있다. Components를 클릭하면 component들이 쭉 나열되어 있고 props, state 값이 보여질 것이다. 직접 만든 프젝이 아니고 넷플릭스라서 그런지 state은 안뜬다.

fontawesome 사용시 아이콘이 안보일 때가 있다. 예를 들어서 아래와 같은 i tag형식이라고 하자. 여기서 아래와 같이 fa 만 class 이름에 추가하면 된다. 하지만 의문이 드는게, fa-thin은 이 적용이 안되고 fa-solid 굵은 아이콘만 적용이 되더라ㅠ 알고보니 thin이랑 light는 pro 쓰는 사람만 쓸 수 있는거 같다.

위의 사진과 같이 체크박스를 css를 이용해서 커스텀으로 만들어 보자. /*기본적인 checkbox 디자인 만들기, 박스부분 원래 디자인 없애기*/ input[type="checkbox"] { margin: 0px; padding: 0px; appearance: none; -webkit-appearance: none; height: 20px; width: 24px; background-color: #d5d5d5; border-radius: 5px; cursor: pointer; display: flex; justify-content: center; align-items: center; } /* after를 이용해서 checkbox 이후에 오는 내용을 추가할 수 있다! 즉, 체크박스 내의 체크 모양 디자인..

input을 넣거나 그런 경우, 외부 영역을 클릭하면 팝업창이나 입력창이 다시 들어가는 걸 본적이 있다. 나는 이 부분을 구현을 하고 싶어서 알아보았다. document.addEventListener("click", () => { //외부 영역 클릭시 다시 돌아오는 기능. if (todoBox.className === "todo-each-box-editing") { editingInput.classList.toggle("editing"); todoBox.classList.toggle("todo-each-box-editing"); } }); 이런식으로 document.addEventListener를 이용해서 함수를 정의하여 구현할 수 있다. 내가 구현한 경우에는, input을 입력하다 외부영역을 클릭하면 ..

localStorage에 데이터를 저장할 때에는 키와 값 쌍 형태로 저장이 되는데, 모두 string 형태로 저장된다. 예제 데이터 저장: setItem localStorage.setItem('myCat', 'Tom'); 데이터 가져오기: getItem const cat = localStorage.getItem('myCat'); 데이터 삭제하기: removeItem localStorage.removeItem('myCat'); 전체 삭제 localStorage.clear(); 위와 같이 setItem을 이용해서 객체 배열을 string으로 바꾸어 저장했다. 검사를 들어가면 Application 목록에서 localStorage에 저장된 데이터들을 볼 수 있다!!

비동기처리는 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 말한다. 반대로 동기는 현재 실행 중인 코드가 끝나야 다음 코드를 실행한다. JS는 비동기 통신 처리 방식을 지원하며 대표적으로 3가지 방식 callback, promise, async await 이 있다. callback callback은 함수의 매개변수인 함수 통해서 어떠한 비동기 처리를 했을때 그 후에 실행되는 함수(나중에 호출되는 함수) callback 함수를 말한다. 함수로 등록해놓은 후에 어떤 event가 발생했거나 특정 시점에 도달했을 때, 시스템에서 호출하는 함수이다. 파리미터로 함수를 전달받아서 함수의 내부에서 실행된다. callback 패턴의 문제점은 callback 함수의 중첩이 많아질수록 ..

css 의 각각의 element들은 포지션의 기본값 static을 가지고 있다. 사진 자료 속의 'me'를 중심으로 이해해보자. Static static은 left, top, bottom, right 와 같은 offset 값은 무시하고 원래 위치해야할 곳에 정적으로 위치한다. relative position을 relative으로 지정하면 offset을 사용할 수 있다. absolute 아래 그림은 원래 me의 위치이다. 1. 우리는 원래 위치에서가 아닌 가장 가장자리인 html을 중심으로 offset을 사용하고 싶을 때 이럴 때는 position: absolute로 바꾼다 . 2. 만약 offset없이 position만 absolute로 줬다면, 부모의 기준에서 원래 자리에 위치하게 되고 부모와 분리가 ..

리액트 프로젝트를 할 때 그리고 JS를 공부할 때 기본적으로 알면 좋은 기초 개념을 정리하고자 한다. 이전에는 동기 프로그래밍에 익숙해졌다가 비동기에 익숙해지려 하니 헷갈려서 머리 속 정리가 필요하다. 1. aync await (비동기/동기) JS에서 비동기 프로그래밍 방식은 대표적으로 Promise, Callback, aync await가 있다. 여기서 aync await 방식을 자주 썼어서 개념을 정리하고자 한다. 비동기의 의미는 어떤 특정한 코드의 실행처리가 완료될 때 까지 기다리는 것이 아닌 그 다음 코드를 먼저 실행하는 것을 의미한다. 즉, 병행처리를 한다는 것이다. 처리하는데 시간이 걸리는 코드를 쓸 때 비동기를 사용한다. 대표적인 예로 API를 불러올 때가 있다. *await은 async 함..