익명의 개발노트

브라우저가 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 //리액트설치 ..

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

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 =''; //다른거 ..

이미지 있을때 파란 화살표가 옆으로 한칸씩 밀리는 기능 구현하기?? 기본적으로 회색, 파란색 + 버튼은 전부 이미지이다. 이미지가 3개 이므로, 조건을 걸어주고 다르게 보여주기로 생각했다. 기본적으로 9개는 html단에서 for문으로 돌려서 생성했고, 그 안에 이미지의 조건은 따로 만든 flag 배열의 인덱스 값으로 걸어주었다. 맨 처음부터 파란색 + 버튼으로 시작하기때문에 flag 배열의 값은 아래와 같이 할당했다. data(){ return { imageListFlag:[1, 0, 0, 0, 0, 0, 0, 0, 0], } }, 플래그 값은 파란색 플러스 버튼은 1, 이미지가 들어오면 2, 아무것도 없으면 0으로 조건을 주었다. 디자이너의 의견으로 회색버튼은 클릭이 안되게 동작해야한다. 그리고 파란 ..

vue tooltip 라이브러리 중에 vuetify를 제외하고 쓸만한 라이브러리가 v-tooltip 밖에 없는 듯... 1. 설치 npm install --save v-tooltip 2. 글로벌 등록 //main.js import Vue from 'vue' import VTooltip from 'v-tooltip' //추가 Vue.use(VTooltip); //추가 new Vue({ router, store, render: h => h(App) }).$mount('#app') 3. 스타일 적용하기 공식문서에 일반 css 와 pre-processor 방식인 sass, less 방식이 있다. 공식문서에는 자세히 안나와 있어서, 전역 스타일 안에다가 아래 코드를 넣었는데 작동하지 않았고, 개발자 도구를 열고 ..