Angular image접근

[서론]

웹 사이트를 구축 하면 이미지를 사용한 작업은 무조건 발생하게 된다. Angular를 이용해서 간단한 웹사이트를 제작하던중 이미지에 접근 하려고 하는데 자꾸 404가 반환되었다. 이번 포스팅에서는 Angular CLI를 사용할 경우 이미지에 어떻게 접근할 수 있는지 알아보자. 

 

[기본 CLI 설정]

Angular CLI를 사용해서 개발을 시작하면 .angular-cli.json이라는 파일이 만들어진다. 해당 파일에서는 index파일을 어떤 파일로 설정 할 것이며 style에 사용할 css경로 설정 등이 이루어진다. 여기서 이미지를 사용하기 위해 assets라는 설정이 있는데 해당 설정안에 선언된 위치의 파일에만 접근이 가능하게 된다. 

 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "achievement"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      //여기에 등록된 자원만 접근 가능하다.
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
    ... 이하 생략

 

위의 소스 코드를 보게 되면 assets라는 설정에 assets와 favicon.ico가 존재하는데, 이렇게 설정이 되어 있기 때문에 Angular CLI를 사용해 사이트를 생성해보면 아래의 이미지와 같이 A라는 Angular의 favicon을 볼 수 있었던 것이다.

 

 

그러므로 이미지를 생성해서 접근하고 싶다면 assets 설정에 별도의 폴더 설정을 해주던지 assets폴더 안에 이미지를 만들어서 관리 해야한다. 일단 assets라는 상위 폴더만을 지정해주면 그 아래의 하위 폴더의 모든 이미지에는 접근이 가능하다.

 

[결론]

Angular에는 기본적으로 알아야 하는 설정들이 몇가지 있는데 오늘 알아본 설정이 그중에 하나이다. Angular를 사용한지 얼마 안돼었지만 사이트를 만들어가면서 알아가는거를 기록으로 남겨갈 예정이다. 나중에 까먹으면 찾아볼 수 있도록...