vue.js vue는 js의 프레임웤이며 interactive하고 reactive한 web font-end를 구축하기위해 사용한다. JS JS는 브라우저에서 사용하는 프로그래밍 언어이고 사용자가 페이지를 로드한 후 브라우저에서 실행한다. 서버에서 새로운 페이지를

CSS로 개발된 애니메이션은 작고 독립적인 사용자 인터페이스 요소가 있는 애플리케이션에 적합하다.도구 설명을 표시하거나 측면에서 탐색 메뉴를 가져오는 데 사용할 수 있다. Web-Kit 기반 브라우저에서만 작동하지만 요즘 대부분의 데스크톱 및 모바일 브라우저는 Web-

SASS는 뭐고 SCSS는 뭔가? CSS Preprocessor (CSS 예비 처리기) 라고 불리는 문법으로 compiler가 compile 과정에서 css로 변환해준다. 대표적으로 CSS PreProcessor에 Less, Sass(SCSS), Stylus가 있다.

우리가 웹 페이지를 만들다보면 수많은 파일들이 생겨난다. 그리고 사용자는 이 파일들을 다운로드 하는데 문제는 이게 많으면 많을 수록 (서버와 접속이 많을 수록) 웹앱은 느리게 작동한다. 왜냐면 접속은 상당히 "expensive"한 작업이기 때문이다.또 많은 JS의 패키

micro task que, task que

우선 이벤트 버블링과 캡쳐링에 대해 간략히 설명하자면 사용자가 어떠한 요소를 클릭했을 때 DOM 트리의 상위요소까지 모두 눌리는 것이 Bubbling 하위소요까지 모두 눌리는 것이 Capturing이다.그러다면 예제로 밑에 코드를 살펴보자

우선 iterator의 사전적 뜻은 반복자 이다. 그러다면 우선 반복문에 대하여 알아보자.ES5 : array.forEach 사용. break가 불가하다.ES6 : for (const item of array) 사용. 배열에서만 사용 가능하다(for - of 구문).E

우선 virtual dom을 이해하기 앞서 브라우저의 작동방식을 이해해야한다.브라우저가 서버로부터 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이루어진 트리를 만든다. 외부 CSS파일과 각 엘리먼트의 inline 스타일을 파싱한다.스타

우선 우리가 왜 네트워크의 기본 계층 구조를 알고있어야 할까이 모형을 이해하면 특정 네트워킹 시스템에서 일어나는 일을 이해하고 어떠한 문제가 발생했을 시 문제의 원인을 계층에 따라 보다 쉽게 파악할 수 있기 때문이다.사용자가 직접 사용하고 보는 부분이며 한마디로 int

Transmission Control Protocol의 이니셜을 따온 것으로 IP(장비 주소)와 함께 사용된다.연결형 서비스를 지원하는 프로토콜로 인터넷 환경에서 기본으로 사용한다.연결형 서비스 => 높은 신뢰성(흐름제어, 혼잡제어) => 속도가 느림3-way hand

내가 주로 insight를 얻는 3곳 중 한 곳이다. 바로 구글 discovery 여기서 이목을 끄는 하나의 주제가 있었다."서버리스에 속지 마세요"최근 서버 코드를 따로 작성하지 않아도 되는, next 패키지가 서버 역할을 수행해줘서 vercel을 이용하여 배포를 간

npm i @reduxjs/toolkit : RTK 코드가 들어있는 본체 (TS 포함되어있음)npm i react-redux : React에서 RTK를 연결해주는 코드상기 2개의 library를 설치한다.src 폴더에는 다양한 폴더들이 존재한다. components,

우선 creat app을 실행하면 globlas.css에 자동으로 들어가있는 css가 있다.대략 85번째 줄에 저렇게 들어가있는데 우선 넘친다고 다 가려버리면 스크롤이 안 먹기 때문에 저 코드는 삭제하고스크롤 바를 안 보이게 해주는 속성값을 넣어준다.드래그이때 확장성을

아마 내가 next.js로 작업하면 참으로 많이 본 화면 중 하나인 듯 하다.정말 다양한 이유로 아래와 같은 error가 뜬다.아래는 문제의 코드이다.저장 후 슬라이스에 남아있는 찌꺼기 데이터를 모두 삭제 후 DB에 저장된 데이터를 다시 로드하는 즉, "새로고침"을 구

만약 JS만 사용할 것이라면 npm i styled-components추가로 TS를 사용하고 있다면 npm i @types/styled-components 를 추가적으로 설치해주자.통상 import 문과 FC(함수형 컴포넌트) 사이에 또는 export default 이

api없이 개발한 코드이다보니 매우 길어질 수 밖에 없었다..하지만! 어려운 코드는 한개도 없으니 찬찬히 잘 봐주길 바란다.최상단 Rnd는 다른곳에서 포스팅 했으니 넘어가고 중간중간 들어있는 표현식만 봐주면 된다.중간에 들어있는 fontAwesome 코드는 앞서 포스팅

프로젝트를 진행함에 있어 client 사이드로부터 데이터를 list로 전달받아 이를 한큐에 업데이트하고 싶을 경우가 있다.이때 데이터가 db에 존재하면 update 없다면 insert를 하고싶다면 매우 간편한 방법이 있다.어떠한 반복문 보다 가장 빠른 성능을 제공하는

api를 작성하던 중 자꾸 ObjectId를 메서드로 사용하려면 error가 떠서 개빡쳐서 공식문서를 찾아봐도 안 나왔다.또한 stackoverflow에 좋아요하 5백개 넘게 달린 답변도 아래 문제와 같이 사용했다.그런데 해법은 쉽다. 사실 굉장히 간단한 문제인데 간과

프로젝트 간 사용했던 2번째 라이브러리이다.k-pop 러버가 본인의 최애에 대하여 정보를 기록해 둘 수 있는 사이트가 있으면 좋겠다 싶어 만들었다.공식 홈페이지 : https://github.com/embiem/react-canvas-draw도움이 되는 홈페이

우선 프로젝트에서 사용했던 library들과 기술들을 소개할까 한다. 그중 첫번째가 바로 Rnd이다.공식홈페이지 : https://github.com/bokuweb/react-rnd특징으로는 매우 부족한 예제 설명들과 턱없이 부족한 자료들이다.이에 나중에 이를