myFtp - 개발 2일차(getImage)

오늘 한 일

뼈대 생성(?)

우선 myFtp 프로젝트의 angular 부분에서의 뼈대가 되는 부분들을 생성했다. ( service, router, component ...)

그 과정에서 service에서 http모듈을 import하여 썼는데, app.module의 import에 추가하지 않아서 에러가 발생했다. 사소한 문제로 에러가 발생하지 않도록 조심하자.

getImage

어제까지는 틀만 잡은 터라, image의 이름을 angular에 직접 타이핑하여서 html에서 부르도록 경로를 설정했었다.

이를 직접 assets폴더를 참조하여 파일을 탐색하고 불러오도록 수정했다.

server/routes/ftp.js 파일은

/fpt/img를 get으로 접속하면 npm fs 모듈로 .../assets/image 폴더의 파일리스트를 response에 저장시키고, response를 res.json 형태로 전송한다.

ftp.service는 http모듈로 ftp/img를 get으로 접속하고, json형태로 전송한 데이터를 전달 받는 역할을 한다.(getImage)

main.component에서 ftp.service의 getImage메서드를 호출하여 imgs에 파일명을 담는다.

html에서 ngFor을 이용하여 사진을 하나씩 보여준다.

<img src="/assets/image/{{img}}"> 이런식으로 처리했는데, 혹여나 로컬환경이 아닌 외부ip에서 접속하려 할 때 문제가 되지는 않을까 걱정이다. 안될거같긴한데... 될거같기도하고.... 항상 로컬에서만 작업했더니 감이 잘 안잡힌다.

 

내일 할 일

1. 다운로드 구축