성능 최적화 - #1 성능 측정하기

성능 최적화 최근 사내 프로젝트를 진행하면서 풀페이지 플러그인을 이용하게 되었는데, 무거운 플러그인의 영향인지 사이트 최초 로딩 속도가 너무 느려 이를 보완할 수 있는 성능 최적화 방법에 대해 찾아보았다. 그동안 프로젝트를 진행하며 사이트가 느리다고 느껴질 때마다 서버 때문인가? 라는 안일한 생각으로 프론트단에서 할 수 있는 성능에 대한 처리를 미뤄왔었는데 이번 기회에 확실히 정리해 차후 진행할 업무 및 개인 프로젝트에 적용해보고자 한다. 성능 측정하기 1. Lighthouse 크롬 개발자 도구 중 Lighthouse(개편 전 Audit) 탭을 이용하여 사이트의 성능 측정 가능 Lighthouse Guide) 사용 방법 확장 프로그램 설치 시크릿 창 열기 크롬 개발자 도구 Lighthouse 탭 클릭 원..

• format_list_bulleted Tech/프론트엔드
• · 2021. 4. 7.
• textsms

Flexbox

늘 염두에 두고 있었지만 제대로 공부해본 적 없던 Flexbox를 이번 기회에 확실히 정리해보고자 한다. 그동안 주로 대학교와 관공서 프로젝트를 진행했기에 IE 구 버전 대응 이슈 때문에 사내 프로젝트에서 Flexbox의 사용을 지양해왔었는데, 타 회사들의 작업물을 살펴보면서 여러 비효율적이고 구시대적인 CSS 정렬 방법을 Flexbox로 간편하게 해결할 수 있다는 걸 느꼈다. 또, 이 기술이 나온 지 시간이 꽤 흘러서인지 예전보다 크로스 브라우징의 어려움이 많이 없어졌고 꽤 많은 국내 사이트들에서도 Flexbox를 사용하고 있다. 먼저 Flexbox의 기본 기능을 공부해보고, 간단한 페이지를 만들어 Flexbox로 레이아웃을 구축해보기로 한다. 나아가 사내 프로젝트에서도 팀원들과 이야기하여 작은 컴포넌..

• format_list_bulleted Tech/CSS
• · 2021. 2. 16.
• textsms

[React] ReactJS로 웹 서비스 만들기

노마드코더 아카데미의 ReactJS로 웹 서비스 만들기 강의를 정리하는 글입니다. # Setup ReactJS를 사용하기 위해서 Node.js, npm, 그리고 npx를 설치해야 합니다. #1.0 Creating your first React App Node.js 설치 설치하기 Node.js를 설치하면 자동으로 npm이 함께 설치됩니다. 설치 확인 $ node -v $ npm -v npx 설치 $ npm install npx -g Error가 날 경우 명령어 앞에 sudo 를 붙여 실행 비밀번호는 본인 PC의 패스워드를 입력 create-react-app 예전에는 react 코드를 브라우저가 이해하도록 컴파일하기 위해 Webpack, Babel 같은 것들을 설치해야 했습니다. 하지만 create-reac..

• format_list_bulleted Tech/React
• · 2019. 8. 5.
• textsms

[JS] 바닐라 JS로 게임 만들기

노마드코더의 바닐라 JS로 게임 만들기 강의를 정리하는 글입니다. Github Commit const canvas = document.getElementById('jsCanvas'); const ctx = canvas.getContext('2d'); const colors = document.getElementsByClassName('jsColor'); const range = document.getElementById('jsRange'); const mode = document.getElementById('jsMode'); const saveBtn = document.getElementById('jsSave'); // options const initialColor = '#2c2c2c'; const c..

• format_list_bulleted Tech/JavaScript
• · 2019. 8. 3.
• textsms

[JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 2

#3.5 ~ 3.7 Making a To Do List - 2 const toDoForm = document.querySelector('.js-toDoForm'); const toDoInput = toDoForm.querySelector('input'); const toDoList = document.querySelector('.js-toDoList'); const todo_ls = 'toDos'; let toDos = []; function saveToDos() { localStorage.setItem(todo_ls, JSON.stringify(toDos)); // localStroage에는 javascript의 data를 저장할 수 없고, 오직 string 형태만 저장 가능 // 우선 JSON.str..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 30.
• textsms

[JS] 팝업 - 오늘 하루 열지 않기

팝업 내용 닫기 //====================================================================== //Top Pop //====================================================================== App.TopPop.init(); var App = new Object(); App.TopPop = function () { var self; return { init: function () { self = this; // popup close $('.btn-pop-close').on('click', function() { if($('#do-not-open').is(&#3..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 22.
• textsms

[JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 1

노마드코더의 *바닐라 JS로 구글 크롬앱 만들기 *강의를 정리하는 글입니다. #3.1 ~ #3.2 Making a JS Clock 00:00 const clockContainer = document.querySelector('.js-clock'), clockTitle = clockContainer.querySelector('h1'); function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${m..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 21.
• textsms

[JS] 바닐라 JS로 구글 크롬앱 만들기 #1 Theory ~ #2 Practice

노마드코더의 바닐라 JS로 구글 크롬앱 만들기 강의를 정리하는 글입니다. #1.2 Super Powers of JS Awesome Javascript three.js : https://threejs.org/ world draw : https://worlddraw.withgoogle.com/ Impact Games : https://impactjs.com/games #1.4 VanillaJS Why Vanilla JS? jQuery, DOJO... 등 수많은 Library들은 결국 Javascript를 대체하기 위한 것들. make-up(대체할 수단)이 아닌 근본적이고 실질적인 것을 아는 것이 중요함. #2.1 Your first JS Function ~ #2.1.1 More Function Fun con..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 20.
• textsms