Ng-lazyload-image: ScrollHooks์— ๋Œ€ํ•œ ๋ชจ๋“  ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 08์›” 14์ผ  ยท  14์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: tjoskar/ng-lazyload-image

C:/........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts์˜ ScrollHooks์— ๋Œ€ํ•œ ๋ชจ๋“  ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. (?). ์ด๊ฒƒ์€ ng build --prod๋ฅผ ์ˆ˜ํ–‰ํ•  ๋•Œ๋งŒ ๋ฐœ์ƒํ•˜์ง€๋งŒ ng build์—์„œ๋Š” ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ•œ npm install ng-lazyload-image --save-prod๋ฅผ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

good first issue

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

Angular 8์˜ ๋ฒ„๊ทธ์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(Angular 10์—์„œ๋Š” ์žฌํ˜„ํ•  ์ˆ˜ ์—†์Œ).

์•„๋งˆ๋„ ์ด ๋ผ์ธ ๋•Œ๋ฌธ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค: https://github.com/tjoskar/ng-lazyload-image/blob/78512a9b8d2dae86e0719feb11ff810485948aab/src/scroll-hooks/hooks.ts#L11

ํ˜„์žฌ๋กœ์„œ๋Š” ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
```
'@angular/platform-browser'์—์„œ { BrowserModule } ๊ฐ€์ ธ์˜ค๊ธฐ;
'@angular/core'์—์„œ { NgModule } ๊ฐ€์ ธ์˜ค๊ธฐ;
'ng-lazyload-image'์—์„œ { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } ๊ฐ€์ ธ์˜ค๊ธฐ;
'./app.component'์—์„œ { AppComponent } ๊ฐ€์ ธ์˜ค๊ธฐ;

// ์ƒ์„ฑ์ž ์ธ์ˆ˜๊ฐ€ ์—†๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ํด๋ž˜์Šค ์ƒ์„ฑ
๋‚ด๋ณด๋‚ด๊ธฐ ํด๋ž˜์Šค MyScrollHooks ํ™•์žฅ ScrollHooks {
์ƒ์„ฑ์ž() {
๊ฐ๋…์ž()
}
}

@NgModule({
์„ ์–ธ: [AppComponent],
๊ฐ€์ ธ์˜ค๊ธฐ: [BrowserModule, LazyLoadImageModule],
์ œ๊ณต์ž: [{ ์ œ๊ณต: LAZYLOAD_IMAGE_HOOKS, useClass: MyScrollHooks }],
๋ถ€ํŠธ์ŠคํŠธ๋žฉ: [AppComponent],
})
๋‚ด๋ณด๋‚ด๊ธฐ ํด๋ž˜์Šค AppModule {}
```

๋ชจ๋“  14 ๋Œ“๊ธ€

๋นŒ๋“œ ๋ช…๋ น์—์„œ --prod ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ์—๋„ ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๋ฌธ์ œ์— ์ง๋ฉดํ–ˆ์Šต๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฒ„์ „์˜ Angular๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?
์ „์ฒด ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ๋„ 8.3
C:.........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts:(?)์˜ ScrollHooks์— ๋Œ€ํ•œ ๋ชจ๋“  ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†์Œ ์˜ค๋ฅ˜.

ScrollHook์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜๋Š” ์„ค์ •์ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ์Šต๋‹ˆ๊นŒ?

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณด์ด๋‚˜์š”?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule],
  providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }],
  bootstrap: [AppComponent],
})
export class MyAppModule {}

์˜ˆ, ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” App Module ํด๋ž˜์Šค์˜ ๊ฒƒ๊ณผ ์ •ํ™•ํžˆ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@tjoskar ๋‚˜๋„ ๋˜‘๊ฐ™์ด ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋˜ํ•œ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ

์ด๊ฒƒ์„ ๋””๋ฒ„๊น…ํ•˜๋ ค๋ฉด Angular 8.3 ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ฑฐ๋‚˜ ์˜ค๋ฅ˜๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ž‘์€ ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด package.json ํŒŒ์ผ์„ ์ฃผ์„ธ์š”.

{
"์ด๋ฆ„": "๊ฐœ์ธ ์›น์‚ฌ์ดํŠธ",
"๋ฒ„์ „": "0.0.0",
"์Šคํฌ๋ฆฝํŠธ": {
"~์˜": "~์˜",
"์‹œ์ž‘": "์„œ๋ธŒ ์ค‘",
"๋นŒ๋“œ": "๋นŒ๋“œ ์ค‘",
"ํ…Œ์ŠคํŠธ": "ํ…Œ์ŠคํŠธ ์ค‘",
"๋ณดํ‘ธ๋ผ๊ธฐ": "๋ณดํ‘ธ๋ผ๊ธฐ",
"e2e": "e2e์˜"
},
"๋น„๊ณต๊ฐœ": ์‚ฌ์‹ค,
"์ข…์†์„ฑ": {
"@angular/animations": "~ 8.2.14",
"@angular/common": "~ 8.2.14",
"@๊ฐ๋„/์ปดํŒŒ์ผ๋Ÿฌ": "~ 8.2.14",
"@angular/core": "~ 8.2.14",
"@angular/forms": "~ 8.2.14",
"@angular/platform-browser": "~ 8.2.14",
"@angular/platform-browser-dynamic": "~ 8.2.14",
"@angular/router": "~ 8.2.14",
"๋ถ€ํŠธ์ŠคํŠธ๋žฉ": "^4.4.1",
"ํ–„๋ฒ„๊ฑฐ": "^1.1.3",
"jquery": "^3.5.1",
"์ˆœ๊ฐ„": "^2.24.0",
"lazyload-image": "^9.0.0",
"rxjs": "~ 6.4.0",
"tslib": "^1.10.0",
"zone.js": "~ 0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "~ 8.3.23",
"@angular/compiler-cli": "~ 8.2.14",
"@angular/language-service": "~ 8.2.14",
"@types/jasmine": "~ 3.3.8",
"@types/jasminewd2": "~ 2.0.3",
"@์œ ํ˜•/๋…ธ๋“œ": "~ 8.9.4",
"codelyzer": "^5.0.0",
"์žฌ์Šค๋ฏผ ์ฝ”์–ด": "~ 3.4.0",
"jasmine-spec-reporter": "~ 4.2.1",
"์นด๋ฅด๋งˆ": "~ 4.1.0",
"์นด๋ฅด๋งˆ ํฌ๋กฌ ์‹คํ–‰๊ธฐ": "~ 2.2.0",
"karma-coverage-istanbul-reporter": "~ 2.0.1",
"์นด๋ฅด๋งˆ ์žฌ์Šค๋ฏผ": "~ 2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"๊ฐ๋„๊ธฐ": "~ 5.4.0",
"ts-๋…ธ๋“œ": "~ 7.0.0",
"tslint": "~ 5.15.0",
"typescript": "~ 3.5.3"
}
}

๋‚˜๋Š” ๋˜ํ•œ์ด ๋™์ผํ•œ ์˜ค๋ฅ˜์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์ฃผ์„๊ณผ ๋™์ผํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค.

Angular 8์˜ ๋ฒ„๊ทธ์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(Angular 10์—์„œ๋Š” ์žฌํ˜„ํ•  ์ˆ˜ ์—†์Œ).

์•„๋งˆ๋„ ์ด ๋ผ์ธ ๋•Œ๋ฌธ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค: https://github.com/tjoskar/ng-lazyload-image/blob/78512a9b8d2dae86e0719feb11ff810485948aab/src/scroll-hooks/hooks.ts#L11

ํ˜„์žฌ๋กœ์„œ๋Š” ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
```
'@angular/platform-browser'์—์„œ { BrowserModule } ๊ฐ€์ ธ์˜ค๊ธฐ;
'@angular/core'์—์„œ { NgModule } ๊ฐ€์ ธ์˜ค๊ธฐ;
'ng-lazyload-image'์—์„œ { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } ๊ฐ€์ ธ์˜ค๊ธฐ;
'./app.component'์—์„œ { AppComponent } ๊ฐ€์ ธ์˜ค๊ธฐ;

// ์ƒ์„ฑ์ž ์ธ์ˆ˜๊ฐ€ ์—†๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ํด๋ž˜์Šค ์ƒ์„ฑ
๋‚ด๋ณด๋‚ด๊ธฐ ํด๋ž˜์Šค MyScrollHooks ํ™•์žฅ ScrollHooks {
์ƒ์„ฑ์ž() {
๊ฐ๋…์ž()
}
}

@NgModule({
์„ ์–ธ: [AppComponent],
๊ฐ€์ ธ์˜ค๊ธฐ: [BrowserModule, LazyLoadImageModule],
์ œ๊ณต์ž: [{ ์ œ๊ณต: LAZYLOAD_IMAGE_HOOKS, useClass: MyScrollHooks }],
๋ถ€ํŠธ์ŠคํŠธ๋žฉ: [AppComponent],
})
๋‚ด๋ณด๋‚ด๊ธฐ ํด๋ž˜์Šค AppModule {}
```

์ฐธ์กฐ ๊ฐ๋„ ์•ฑ์€ https://github.com/tjoskar/ng-lazyload-image-bugs/blob/master/476-cant-resolve-all-parameters-for-ScrollHooks/src/app/app ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๊ฐ์‚ฌ ํ•ด์š”! ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค! ๋‚ด ์•ต๊ทค๋Ÿฌ ๋ฒ„์ „์ด ์–ผ๋งˆ๋‚˜ ๋’ค์ณ์ ธ ์žˆ๋Š”์ง€ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ–ˆ์Šต๋‹ˆ๋‹ค.

[email protected] ์— ์ˆ˜์ • ์‚ฌํ•ญ์ด ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ์ถ”๊ฐ€๋กœ ๋นˆ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰