Dubby.log

I explain with words and code. I explain with words and code. I explain with words and code.

블랙커피 JS 스터디 레벨1 1주차

moonbucks 블랙커피 JS 스터디 레벨1 1주차 시작 메이커준님과 함께하는 블랙커피 스터디(문벅스 카페메뉴 만들기) 스터디를 이번에 시작하게 되었다. 그래서 앞으로 4번에 걸쳐 블랙커피 스터디에서 배운 내용을 기록 겸 블로그에 포스팅 하려고 한다. 적절한 코드리뷰 하는 방법 1. 필요 없는 주석 또는 파일은 없는지 확인해보기 필요 없는 주석 또는…

오픈소스 컨트리뷰톤 기본교육

오픈소스 컨트리뷰톤에 선발되어 dooboo-ui 라는 프로젝트에 참여하게 되었다. 본격적인 오픈소스 컨트리뷰션을 시작하기 전에 사전 기본교육을 Git/Github 교육을 수강하게 되었다. 개발자가 오픈소스를 읽는 방법 Fork & Clone fork 라는건 프로젝트를(commit 들을) 복사하는 것 fork는 깃허브 웹사이트 안에서만 벌어지는 일 나의…

React의 Virtual DOM과 babel 이해하기

React에서 babel의 동작원리 & React와 Virtual DOM 이해하기 먼저 babel이란? Babel 은 자바스크립트 컴파일러이다. 최신 버전의 자바스크립트 문법은 브라우저가 이해할 수 없기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. 이로써 ES6, ES7 등의 최신 문법을 사용해서 개발을 할 수 있는것이다. Reac…

Lighthouse 알아보기

이번에 다를 주제는 Lighthouse 라는 도구를 사용해서 React 웹의 렌더링 성능을 측정하는 방법과 프로파일링에 대해 알아보려고 한다. Lighthouse https://developers.google.com/web/tools/lighthouse?hl=ko 에 따르면 Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구이다. Chr…

프로그래머스 FE 생존키트 스터디 5주차

cmd + shift + p Optimistice UI url search Params gip workFlowy github surf scrollable vimium paste JSON as Code turbo console.log

프로그래머스 FE 생존키트 스터디 4주차

지난 과제 리뷰 http status code 는 정말 다양하게 있다. 성공이 무조건 200 만을 주진 않음 2xx 로 대응 이미지 최적화 / 지연 로딩 웹 서비스에서 이미지를 사용할 때에 어떤 점들을 고려해야할까? Responsive Image를 사용하자 올바른 format의 image를 사용하자 (WebP) 지연로딩(Lazy loading)을 사용…

프로그래머스 FE 생존키트 스터디 3주차

지난 과제 리뷰 display: none, block 보다 visibility 속성을 활용하면 transition 을 걸 수 있다. async 함수는 항상 실제 return statement 옆에 무엇이 정의되어 있든 간에 무엇이든 간에 Promise를 return 한다. Javascript 에서 Error 처리하기 try { … } catch { … }…

Clean Code Study (Ch.7 Function)

07. 오류처리 오류 처리는 프로그램에 반드시 필요한 요소 중 하나 뭔가 잘못 될 가능성이 늘 존재하기 때문 그렇기 때문에 오류 처리는 중요하지만 오류 처리 코드 때문에 프로그램 논리를 이해하기 어려워질 수 있음 이번 7장에서 우아하고 고상하게 오류를 처리하는 기법과 고려 사항 몇 가지를 소개 오류 코드보다 예외를 사용하라 위와 같은 방법을 사용하면 호출…

프로그래머스 FE 생존키트 스터디 2주차

지난 과제 리뷰 keypress나 keydown, keyup 이벤트를 만들어 enter 키에 대한 처리를 하지 않고 form에 대한 기본적인 형식이 다 갖춰져 있지 않더라도 submit 이벤트는 기본적으로 enter와 바인딩이 되기 때문에 onsubmit 이벤트를 쓰는게 더 좋다. 또한, 체크박스 만들때 input 과 label 을 id-for 로 서로 …

프로그래머스 FE 생존키트 스터디 1주차

이번에 프로그래머스를 통해 FE 취업 생존키트라는 스터디에 참여하게 되었다. 크게 이직 준비를 하는건 아니지만, 요즘같이 다양한 프레임워크와 라이브러리 등 개발을 편리하게 할 수 있게 해주는 너무나 좋은 도구들이 많기 때문에 본질/기본을 잊을 수 있겠다는 생각을 갖고 있었다. 추후에 내 커리어를 위해서든 역량 향상을 위해서든 기본은 잊지 말아야 개발할때 …