Posts
개발장이
Cancel

github.io에서 velog로 블로그 이사합니다.

블로그 이사합니다! github.io에서 velog로 블로그 이사합니다- change blog platform

webpack-html과 scss 그리고 code spliting 적용하기

webpack으로 scss와 code spliting, 이미지 가져오기를 적용해보았다. 가장 문제가 되었던 것이 webpack-dev-server와 build한 파일의 publicPath가 일치하지 않은 것이었다. production mode일 때, publicPath에 파일들이 위치할 서버 상의 경로를 넣어주면 빌드 시에는 번들한 파일 이름 앞에...

Algorithm-삽입 정렬

zeroCho blog: 삽입 정렬의 예시를 공부하며 쓴 블로그 글입니다. 삽입 정렬은 첫 숫자는 놔두고, 두 번째 자리 숫자부터 뽑아서 그 숫자가 첫 숫자보다 크면 첫 숫자 오른쪽에, 작으면 왼쪽에 넣는다. 이러한 과정을 반복해 숫자를 오름차순으로 정렬한다. const insertionSort = function (array) { let i ...

고차함수 응용하기, add(2, 3)와 add(2)(3)

add(2, 3)와 add(2)(3)값이 모두 5가 나올 수 있는 함수를 만드는 방법이다. 고차함수를 이용하면 이 문제를 해결할 수 있다. function add(a) { return function (b) { return a + b; }; } 또는; const add = (a) => (b) => a + b; add(2...

daon 동영상 로딩 오류 문제 해결하기

1. 문제상황: video 로딩중 service worker에 에러 발생 <video controls autoplay loop muted> <source src="img/main/water.mp4" type="video/mp4" /> </video> 다음과 같은 동영상 파일을 로드하는 과정에서 아래와 같은 오류...

NodeJS와 NPM

자바스크립트가 동작하는 환경에는 크게 ‘브라우저(chrome, IE, firefox 등)’와 ‘운영체제(Windows, Mac, Linux 등)’라는 2곳이 있다. 기본적으로 프론트엔드 개발자는 자바스크립트로 홈페이지가 열리는 브라우저에서 동작하는 기능을 만든다. 그런데 그 홈페이지 개발은 프론트엔드 개발자의 컴퓨터에서 한다. 자바스크립트로 프론트엔...

callback과 promise 그리고 async/await

1. callback 함수 콜백 함수는 나중에 호출할 함수를 의미하며 비동기 동작을 처리하기 위해 쓰인다. function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () =>...

브라우저 작동원리와 성능 최적화

프런트엔드 성능 최적화라는 동영상을 보며 브라우저에서 로딩과 렌더링 최적화가 얼마나 중요한지에 대한 설명을 듣던 중 DOMContentLoaded, virtual DOM, 런타임과 빌드타임, SSR 등등 실제 프로젝트를 하며 많이 들었던 개념들이 나왔다. 이런 개념들이 아직 애매하게 다가와 동영상의 내용을 정리하며 다시 집어보기로 한다. 우선 브라...

React 프로젝트에 SWR사용하기

SWR(stale-while-revalidate)은 클라이언트 서버에서 data를 가져오는 기능(fetching)을 편리하게 사용할 수 있도록 도와주는 hook이다. 백서버에서 GET요청을 하고 결과를 받아올 때 간편하게 쓸 수 있어 react프로젝트를 할 때 사용했다. redux의 reducer나 saga로 만들면 코드량이 길어질 것을 짧은 코드...

daon 프로젝트에 eslint와 prettier 적용하기

daon 홈페이지 리뉴얼 프로젝트는 처음 html, css, javascript를 배우면서 진행했다. 그 당시에는 html의 각 테크 class명이나 js의 변수명을 후에 누가 봐도 유지보수할 수 있도록 해당 기능을 잘 설명할 수 있는 이름으로 지어주는 것이 얼마나 중요한지 모르고 지나갔다. git에 commit message를 작성할 때도 어떤 기...