본문 바로가기

분류 전체보기215

VSCode 확장프로그램 VSIX 다운로드 및 오프라인 설치 인터넷이 연결된 곳에서는 vscode extension market 에서 조회 설치를 하면 그만입니다. 하지만 종종 인터넷이 없는 곳에서 visual studio code 를 사용하고 꼭 필요한 확장 프로그램 / 익스텐션 / extension 을 설치해야 한다면. 1. 휴대용 저장장치를 준비합니다. 2. vscode marketplace 사이트에서, 해당 확장프로그램을 조회한 후, 오른쪽 좁은 섹션에 있는 Resources > Download Extension 을 클릭하면, 다운로드를 할 수 있습니다. 3. 다운로드한 파일 확장자는 .vsix 이며, 이 파일을 저장장치(ex. USB 메모리 스틱)에 저장합니다. 그리고 설치할 컴퓨터에서 vscode 를 실행하고 vsix 를 설치합니다. 1. vscode .. 2021. 1. 18.
아이허브 설날 빅세일 1월 할인코드 연말 연초 여러가지 일들 때문에 아이허브 할인코드 업데이트를 이제야 합니다. 지난 이벤트는 굿바이~! 아이허브 iHerb가 새해를 맞아 특별 세일 행사를 계속 이어가고 있습니다. 설날 빅세일로 50달러 이상 주문 시 10% 세일과 80달러 이상 주문 시 20% 세일에 들어갔어요. 링크는 www.iherb.com/?pcode=WHITECOW&rcode=FDR348 iHerb.com - 비타민, 건강 보조제품, 천연 건강제품 - iHerb 3만여 종류의 유명 건강제품들을 최고의 가치로 만나보세요 kr.iherb.com 대한민국 배송 주문에 한하는 할인코드이고, 행사 기간은 한국 시간 2월 2일 오전 3시 까지 입니다. 영양제를 챙겨 먹는 제가 말하는 꼭 챙겨야 할 건강 보조제품은 아래가 기본입니다. 1. 비.. 2021. 1. 17.
화살표 함수 Arrow Function 화살표 함수는 익명함수이다. 기존의 익명함수를 매우 간단하게 한줄로 표현할 수 있다. 화살표 함수 작성하는 순서 기억법 1) 코드로 한줄로 바꾼다. 2) function 삭제, { } 삭제, 삭제한 { 위치에 => 를 작성한다. 3) return 을 삭제한다. // Arrow Function // always anonymous const simplePrint = function(){ console.log('simplePrint'); }); const simplePrint = () => console.log('simplePrint'); const add = function(a, b){ retrun a + b; }; const add = (a, b) => a + b; const simpleMultiply =.. 2021. 1. 15.
include js 파일 만들기 CSS 에서 @import 처럼 js 파일 불러오기 requiers.js 안쓰고 JavaScript 로 DOM 생성하는 방법으로 js 파일을 찍어서 포함시킨다. html TEST : JS Load JS 아래는 loader.js 소스 /** * loader.js */ function load(files){ for (i=0; i< jsfiles.length; i++){ var src = document.createElement('script'); // src.setAttribute('type','text/javascript'); src.setAttribute('src', files[i]); document.getElementsByTagName('body')[0].appendChild(src); } //con.. 2021. 1. 14.
프런트엔드 성능 최적화 - 렌더링 최적화 2. 렌더링 최적화 1. 레이아웃 스래싱 2. 가상돔 3. 웹 워커 1. 레이아웃 스래싱 HTML과 CSS를 파싱해서 렌더 트리를 만들어 레이아웃을 그린다. 레이아웃을 그리는 작업은 요소 하나 하나 크기와 위치를 측정하기 때문에 오래 걸리고 비용이 큰 과정이다. 페인트를 하고 화면을 뿌린다. HTML-DOM > CSS-CSSOM > Redner Tree > Layout > Paint > 화면 뿌리기 이 과정이 DOM 변경으로 인해 반복된다. 강제 동기 레이아웃은 DOM 조작이 없는데도 불구하고 이 과정을 강제로 진행해서 강제 동기 레이아웃이라고 한다. 이런 강제 동기 레이아웃을 유발할 수 있는 코드는 한번만 쓰고 캐싱한다. 2. 가상돔 가상돔은 DOM변경을 최소화하는데 의의가 있다. Proxy와 가상돔을.. 2021. 1. 13.
프런트엔드 성능 최적화 - 로딩 최적화 크게 로딩 최적화와 렌더링 최적화에 대한 글 최적화를 왜 하나. 사이트를 최적화하면 로딩 시간이 적게 들고 방문자는 사이트에 오래 머물고, 다시 찾고, 클릭률 상승, 매출이 는다 통계가 있다. 1. 로딩 최적화 방법 2. PWA 케이스 소개 3. 랜더링 최적화 방법 목적은 로딩이 빨라야 하고 랜더링이 부드러워야 한다. 1. 로딩 최적화 1) 브라우저 기준 최적화의 문제점 2) 사용자 기준 최적화 3) 프리 렌더러 4) PWA 사례 2. 렌더링 최적화 1) 레이아웃 스래싱 2) 가상돔 3) 웹 워커 1. 로딩 최적화 (브라우저 기준) 1) Navigation Timing : Resource, Processing, Load 2) 로딩과 Critical Rendering Path 관계 3) 로딩 성능 : 자바.. 2021. 1. 12.
SC제일은행 SWIFT BIC 영문주소 정보 달러로 입금 받는 경우가 가끔 생긴다. 외화 예금 통장을 개설한 은행은 SC제일은행 입금 받을 은행 정보를 영문으로 작성해야 한다. 가끔씩 사용하는 정보라 검색해서 적었는데, 이번에 찾으면서 기록으로 남긴다. 필요한 정보는 거래 은행의 영문상호명, BIC 또는 SWIFT CODE, 계좌번호, 계좌주의 영문 이름, 은행의 영문 주소이다. SC제일은행 영문명 : Standard Chartered First Bank Korea SC제일은행 Swift Code 또는 BIC로 표기한 부분 : SCBLKRSE SC제일은행 영문주소 : 47, Jong-ro, Jongno-gu, Seoul, 03160, Republic of Korea SC제일은행 계좌번호 : 각 개인의 계좌번호 (통장 참고) SC제일은행 계좌주 영문.. 2021. 1. 11.
리팩토링 Refactoring 주니어 개발자 추천 도서 리팩토링 Refactoring 이란 기존의 UI나 프로그램의 기능을 변경하지 않고 내부적인 코드를 수정, 개선하는 것을 말한다. 쉽게 말해, 코드 정리, 코드 클리닝, 코드를 청소하는 작업이다. 리팩토링을 함으로써 기대할 수 있는 효과, 결과는 다음과 같다. 소프트웨어의 아키텍쳐, 디자인을 개선할 수 있다. 소프트웨어의 코드를 좀 더 쉽게 이해할 수 있다. 이로 인해 좀 더 쉽게 버그를 발견하고 수정할 수 있다. 깨끗한 코드로 새로운 기능을 빠르게 구현할 수 있게 한다. 이러한 과정을 통해 성능향상을 기대할 수 있다. 관련하 책으로 동명의 "리팩토링"이란 책이 있다. 20년 전에 초판을 발행해서, 개발자들 책장에 한권씩 꽂아두고 참고하는 필독서. 개발 환경과 트랜드가 변화함에 따라 2020년에 개정판이 .. 2021. 1. 10.
웹 페이지 속도 테스트 및 개선방법 페이지 속도는 블로그 포스트 검색 순위에 영향을 미친다. 구글의 경우 속도가 2% 느려지면 검색량도 2% 감소 야후는 400ms 빨라지면 트래픽이 9% 증가한다. 로딩 속도가 너무 느리면 창을 끄고 비슷한 정보를 볼 수 있는 다른 사이트로 이탈한다. 사용자가 이탈하지 않고 만족하면서 사이트에 머무는 적정한 로드시간은 1~2초 전환 최적화 전문가 제레미 스미스 Jeremy Smith에 따르면, 1~2초가 가장 좋다. 3~6초는 평균으로 사용자가 참을만 하다. 7~10초 속도개선 작업 필요하다. 10초 이상 사용자 이탈이 발생한다. 사이트의 로딩 속도를 확인하는 방법, 그리고 미충족 결과에 대한 개선 방법을 하려면 어떻게 해야 할까. 웹사이트 퍼포먼스를 모니터링하고 최적화하는 방법의 기준은 아래와 같다. 1.. 2021. 1. 9.

티스토리툴바