분류 전체보기 (81) 썸네일형 리스트형 [Refactoring] Moving Features(1) 마틴파울러의 Refactoring 2판 8과의 내용 정리(1)입니다. Move Function(함수 옮기기) -어떤 함수가 자신이 속한 모듈 A의 요소들보다 다른 모듈 B의 요소들을 더 많이 참조한다면 B로 옮겨야 한다. (캡슐화up, 의존성down) -함수를 옮길지 말지를 정하기는 쉽지 않지만, 선택이 어려울수록 큰 문제가 아닌 경우가 많다. -중첩 함수를 사용하다보면 숨겨진 데이터끼리 상호 의존하기가 아주 쉬우니 중첩함수는 되도록 만들지 말자. // from function trackSummary(points) { const totalTime = calculateTime(); const totalDistance = calculateDistance(); const pace = totalTime / 60.. [Refactoring] Encapsulation(2) 마틴파울러의 Refactoring 2판 7과의 내용 정리(2)입니다. Extract Class(클래스 추출하기) -메서드와 데이터가 너무 많은 클래스는 이해하기가 쉽지 않으니 잘 살펴보고 적절히 분리하는 것이 좋다. -특히 일부 데이터와 메서드를 따로 묶을 수 있다면 어서 분리하라는 신호! -함께 변경되는 일이 많거나 서로 의존하는 데이터들도 분리! // from class Person { ... get officeAreaCode() {return this._officeAreaCode;} get officeNumber() {return this._officeNumber;} } ------------------------------------------------------ // to class Perso.. [Refactoring] Encapsulation(1) 마틴파울러의 Refactoring 2판 7과의 내용 정리(1)입니다. Encapsulate Record(레코드 캡슐화하기) -레코드의 단점은 계산해서 얻을 수 있는 값과 그렇지 않은 값을 명확히 구분해 저장해야 하는 점이다. -때문에 가변 데이터를 저장하는 용도는 객체가 더 나을 수 있다. 값과 계산과정을 숨기고 메소드로 제공할 수 있다. // from organization = {name: "애크미 구스베리", country: "GB"} -------------------------------------------------------- // to class Organization { constructor(data) { this._name = data.name; this._country = data.c.. [Refactoring] A First Set Of Refactorings(2) 마틴파울러의 Refactoring 2판 6과의 내용 정리(2)입니다. Rename Variable(변수 이름 바꾸기) -명확한 프로그래밍의 핵심은 이름짓기..! let a = height * width; --> let area = height * width; Introduce Parameter Object(매개변수 객체 만들기) -데이터 뭉치를 데이터 구조로 묶으면 데이터 사이의 관계가 명확해진다 -매개변수 수가 줄어든다 -같은 데이터 구조를 사용하는 모든 함수가 원소를 참조할 때 항상 같은 이름 쓰기에 일관성도 높여준다 -나중에 동작까지 함께 묶기 좋도록 class로 만드는것 추천 // from function readingOutsideRange(station, min, max) { return sta.. [Refactoring] A First Set Of Refactorings(1) 마틴파울러의 Refactoring 2판 6과의 내용 정리입니다. Extract Function (함수 추출하기) -목적과 구현을 분리 -코드가 5~6줄을 넘어가면 추출할 냄새가 나기 시작..! -성능 느려질 걱정은 ㄴㄴ 요즘은 그럴일 거의 없다 // from function printOwing(invoice) { printBanner(); let outstanding = calculateOutstanding(); // 세부 사항 출력 console.log(`고객명: ${invoice.customer}`); console.log(`채무액: ${outstanding}`); } -------------------------------------------- // to function printOwing(inv.. Javascript module 타입의 cors 문제 이렇게 module타입으로 js import를 하게되면, cors에러가 뜨게 됩니다. file:///~~ 요런 url이 cors에 의해 block 되었다는 것인데요..ㅠ npm으로 매우 간단하게 해결할 수 있습니다. http-server를 활용하는 것입니다. npm install http-server -g index.html이 있는 경로에서 npx http-server 실행 http://127.0.0.1:8080 에 접속! (포트 바꾸고 싶다면 npx http-server -p 포트번호) 끝! 조금 더 편하게 하고자 한다면 package.json에 script를 등록하면 됩니다. "scripts": { ..., "start": "npx http-server -p 8000" }, Rxjs duplicated assign issue Observable을 구독하는 Subscription 변수에 한번 더 assign 한다면 어떤 일이 발생할까요? 아래 코드를 보고 상황을 살펴보겠습니다. class RxjsAssignment { constructor() { this.subscribeWindowScroll(); this.subscribeWindowScroll(); this.unsubscribeWindowScroll(); } private windowScrollSubscription: Subscription; subscribeWindowScroll(): void { this.windowScrollSubscription = fromEvent(window, 'scroll').subscribe((event) => { this.onS.. [Javascript] ios Momentum Scrolling Issue(탄력스크롤) ios는 탄력스크롤이라는게 있죠? 스크롤에 관성도 있고 끝에 도달하면 바운스도 됩니다. 아래 css를 통해 이를 적용하는데요.. -webkit-overflow-scrolling: touch; 하지만 문제가 있습니다. 스크롤 중일 때에는 scrollTop이 업데이트 되지 않는다는 것입니다..! 제가 진행중인 프로젝트에서 element들이 추가됨에 따라 스크롤 높이를 계산해서 스크롤 위치를 재설정해줘야 하는 경우가 있었는데, scrollElement.scrollTop = 0; 이렇게만 쓴다면, 스크롤 관성은 그대로 유지되고 element는 추가되서 뚝뚝 끊기는 현상이 발생할 수 있습니다. (주로 역방향 스크롤시...) 위에 언급한 프로젝트에서 역방향 스크롤시, dom이 추가되고 추가된만큼 계산해서 스크롤 위.. 이전 1 2 3 4 5 6 ··· 11 다음