소스 코드 JavaScript30/05 - Flex Panel Gallery/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedtransition 활용패널을 클릭 시 위 아래에서 글자가 나타나게 하는 트랜지션이다. 패널 요소 클릭 시 open-active 클래스가 토글되도록 했고, 디폴트 상태에서는 transform 속성의 값으로 translateY(+/-100%)를 주어 해당하는 요소를 숨겨두었다가 open-activ..

소스 코드 JavaScript30/04 - Array Cardio Day 1/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedArray.prototype.reduce()reduce 메서드는 사용할 때마다 사용법이 헷갈리는데 이번 기회에 확실히 알아두게 되었다. reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 콜백 함수의 첫 번째 인수로 accumu..

소스 코드 JavaScript30/03 - CSS Variables/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDocument.documentElementDocument.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환한다. HTML 문서를 예로 들면  요소를 반환한다.function handleUpdate() { const suffix = this.dataset...

소스 코드 JavaScript30/02 - JS and CSS Clock/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDate객체와 setInterval 함께 사용하기Date 객체와 setInterval 메서드 각각에 대해서는 이해하고 있었지만, setInterval의 첫 번째 인수로 전달하는 콜백 함수 내에서 Date객체를 적절히 활용하면 이렇게 시계 인터페이스도 구현해볼 수 있다니 흥미롭다. const seco..

소스 코드 JavaScript30/01 - JavaScript Drum Kit at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedaudio.currentTime = 0function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode..

코드에서 악취가 날 때 그것이 무엇 때문에 나는 냄새인지 찾을 수 있도록(ㅋㅋ) 코드 악취의 요소 24가지를 설명한다. 개인적으로 이번 챕터는 저자가 너무 말을 웃기게 해서 재밌게 읽은 챕터다. (일단 코드 악취라는 말부터가 재미있음) 그런데 각각의 문제 유형에 대한 해결책으로 구체적 리팩터링 단계를 언급하는 부분이 많아서 책을 끝까지 읽은 후에 다시 돌아와서 재차 읽어보면 더 제대로 이해할 수 있을 것 같다. 우선은 쭉 훑어보는 식으로 읽었다. 우선 악취 요소 24가지는 다음과 같다:기이한 이름중복 코드긴 함수긴 매개변수 목록전역 데이터가변 데이터뒤엉킨 변경산탄총 수술기능 편애데이터 뭉치기본형 집착반복되는 switch문반복문성의 없는 요소추측성 일반화임시 필드메세지 체인중개자내부자 거래거대한 클래스서로..

리팩터링을 ‘왜’ 해야 하는지 납득이 되게 하는 챕터다. 리팩터링을 왜 해야하는지, 그리고 어떻게 해야 하는지를 말한다. 개인적으로 ‘아하!’ 모먼트와 ‘오호~’ 모먼트가 많았던 챕터다. Quotes & Notes리팩터링: 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법(…) ‘겉보기 동작’이란 표현을 썼다. 리팩터링하기 전과 후의 코드가 똑같이 동작해야 한다는 뜻이다.누군가 “리팩터링하다가 코드가 깨져서 며칠이나 고생했다”라고 한다면, 십중팔구 리팩터링한 것이 아니다.기능을 추가할 때는 ‘기능 추가’ 모자를 쓴 다음 기존 코드는 절대 건드리지 않고 새 기능을 추가하기만 한다. (…) 반면 리팩터링 할 때는 ‘리팩터링’ 모자를 쓴 다음 기능 추가는..

리팩터링 2판 읽기 스터디를 시작했다. 일주일에 한 챕터씩 읽고 함께 책 내용에 대해 이야기 나눠보는 스터디다. 안 그래도 스프린트 과정 끝나고서 개발 서적 많이 읽으려고 하던 와중이었는데 좋다! 첫 챕터에는 예시 코드를 차근차근 정리해가며 리팩터링이 어떤 식으로 이루어지는지 그 예시가 나온다. 확실히 예시를 코드를 따라가며 실제로 컴퓨터로 따라 작성해보니 리팩터링을 어떻게 해야 하는지 대략적으로나마 감이 잡힌다. 깃헙 레포도 하나 팠다. 코드 따라 작성해보기" data-og-description=" 코드 따라 작성해보기. Contribute to jisunipark/refactoring development by creating an account on GitHub." data-og-host="gith..