Rianshin

웹페이지가 로딩되는 순서를 알아보도록 하자. 왜 이게 중요한지에 대해서는 바로 최적화 문제이다. 출처 - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ 위의 예시를 보자. 모든 페이지가 로딩되는데 걸리는 시간은 위나 아래나 동일하다. 하지만 사용자 입장에서는 페이지가 오랫동안 정적이다가 한번에 뜨는 것에는 불만을 크게 가지지만, 페이지가 계속해서 진행되면서 뜨는 것에 대해서는 관대하다. 그래서 보통 페이지의 최적화의 경우에는 성능개선도 크지만 맨처음 페이지가 뜰 때 페이지가 진행하면서 뜨고 있다는 느낌을 주는것 역시 아주 중요하다. 이에 관련된 용어도 있지만 이건 나중에 설명하도록 하겠다. 이제 페이지..

v-for을 사용하다보면 생각보다 요놈이 문제 많은 녀석이라는걸 느낄 때가 있다. 그런데 국내나 해외나 이 v-for에 대해서 제대로 적어놓은 녀석이 별로 없는거 같다. 그냥 불편해도 사용하는건지... 사용시 주의를 요하는 녀석인데 그 이유에 대해서 논해보도록 하자. 코딩을 하다보면 v-for은 안쓸래야 안쓸 수가 없다. 굉장히 좋은녀석이지만 몇가지 문제점이 존재한다. 일단. v-for은 해당 데이터의 길이가 0이면 그리지 않는다. 그래서 굳이 v-if를 달 필요가 없다는건 장점이다. 하지만 문제는 길이가 가변할 경우이다. 대부분 v-for의 문제는 가변하는 길이에서 오는 것이다. v-for에서 데이터를 처리하는 방식은 아래와 같다.(완벽하게 같지는 않고 얼추 맞음) 1. data의 길이가 0(혹은 초기..

cookieController: { set: function set(cname, cvalue, exdays) { if (!exdays) { exdays = 1; } var d = new Date(); d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000); var expires = 'expires=' + d.toUTCString(); document.cookie = cname + '=' + (cvalue || '') + ';' + expires + '; path=/; secure'; console.log(document.cookie); }, get: function get(cname) { var name = cname + '='; var decodedCookie ..

크롬브라우저를 이용한 개발시에 화면이동이될경우 로그가 사라지는 경우를 방지 하기 위한 방법. step.1 network 탭의 상단의 Preserve log체그박스를 체크한다. step.2 console탭의 톱니바퀴를 누른후 Preserve log체그박스를 체크한다.

1. firebase 프로젝트 생성 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 2. firebase CLI 설치 (inside project) 및 firebase 로그인 # firebase tools global install npm install -g firebase-tools # firebase login firebase login 3. firebase init # init firebase init - 사용할것만 선택하여 설치 - hosting setup에서 배포될 디렉토리는 dist로 셋팅 4. 프로젝트 빌드 후 디플로이실행 # vue 프로젝..

www.youtube.com/watch?v=aLsrlNnumiw&list=PLjpTKic1SLZsWckh_DZ6tYH17MM6hBAc7 1. www.youtube.com/watch?v=oveihslJtXE&t=407s 2. www.youtube.com/watch?v=8fOtImRz_HY 3. www.youtube.com/watch?v=cMIDB0MR4WI 4. www.youtube.com/watch?v=F9K8fcdPFjA 5. www.youtube.com/watch?v=DNX5_px9ulo 6. www.youtube.com/watch?v=Q2QCQ5IQWak 7. www.youtube.com/watch?v=nk6Ev2sYz_U 8. www.youtube.com/watch?v=3ku0mNzBDAw 9. ..

console 패널을 열어 결과물을 확인하거나, element 패널을 열어 DOM요소에 대한 CSS코드를 확인하기도 한다. 여러분은 정말 크롬 개발자도구를 이해하고 있는가? 개발자도구는 개발 생산성을 높여주는 매우 강력하지만 잘 알려지지 않는 도구들을 제공한다. 가장 유용한 기능들 몇가지를 소개할텐데, 도움이 되었으면 좋겠다. 시작하기 전에, Command 메뉴를 소개하고 싶다. 리눅스에 셸(Shell)이 있듯, 크롬에는 Command 메뉴가 있다. Command 메뉴를 사용하여 명령어를 입력해서 크롬을 조작할 수 있다. 먼저 크롬 개발자 도구를 연 뒤, 다음 단축키를 입력해 Command 메뉴를 열어보자. windows : Ctrl + Shift + P macOS : Cmd + Shift + P 또는 ..

October 2020 (version 1.51) Update 1.51.1: The update addresses these issues. Welcome to the October 2020 release of Visual Studio Code. As announced in the October iteration plan, we focused on housekeeping GitHub issues and pull requests as documented in our issue grooming guide. We also worked with our partners at GitHub on GitHub Codespaces, which ended up being more involved than originally..