익명의 개발노트

브라우저가 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

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

Production mode에서 콘솔로그 제거 하기 terser-webpack-plugin를 이용하여 진행한다. npm에서 1400만회 이상 다운로드와 최근 업데이트 기록으로 인해 terser 라이브러리를 사용하기로 했다. 사용법은 간단함. npm install terser-webpack-plugin vue.config.js 에 아래와 같이 설정한다. const TerserPlugin = require('terser-webpack-plugin'); module.exports = { configureWebpack: config => { config.optimization = { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { ecma: 6..

위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다. debounce 란? 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술 연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것 검색창 input에 search라는 data를 바인딩 시킨 후 input 이벤트를 작성한다. handleSearchInput(e) { this.search = e.target.value; if(this.search.length !== 0){ clearTimeout(this.debounce); this.debounce = setTimeout(() => { const filteredList = this..

위 그림처럼 메뉴 클릭시 해당 화면으로 이동하는 방법에는 2가지가 있다. ID를 이용한 방법과 scrollTo 를 사용하는 방법이다. ID는 원하는 위치로 이동하고자 하는 곳에 id 값을 지정하고, 사이드 메뉴 클릭이벤트에 해당 id 를 부여하면 된다. window.location.href = '#id명' 두번째는 사이드 메뉴 클릭시 보여주고자 하는 값의 TOP위치를 계산해서 아래와 같이 설정해준다. window.scrollTo({top:'위치값', behavior:'smooth'}); 화면의 전체 스크롤 크기를 알고 싶을때 파이어폭스에서는 scrollMaxY가 있는데, 크롬이나 다른 브라우져에는 없다, 이런 경우 아래와 같이 작성해주면 scrollMaxY와 똑같은 기능을 구현 할 수 있다. const ..

오디오 tag 업로드 구현하기 기본적으로 오디오 태그는 controls 이용하면, 위 그림과 같이 내장된 툴이 생성된다. 기본적으로 파일 업로드를 위해서는 Input Tag를 이용하여 업로드를 구현해야한다. 위와 같이 input tag 를 작성했으면, 업로드를 위해서 change 이벤트를 이용해 구현하자. onAudioSelected(e){ const uploadSound = event.target.files[0]; const audioSrc = window.URL.createObjectURL(uploadSound); this.$refs.source.src = audioSrc; this.$refs.player.load(); //업로드완료 후 파일로딩 event.target.value =''; //다른거 ..