2주차 과제는 주어진 프로젝트를 요구사항에 맞춰 4시간 안에 개선시키는 모의테스트였다.
4시간 동안 모든 요구사항을 구현할 수 있을 줄 알았는데 시간이 많이 모자랐다... 😔
그리고 테스트 중간 중간 커밋하고 마지막에 리뷰용 레포에 푸쉬를 하는데
평소에 git을 GUI 툴로 사용했던 나는 command에 익숙하지 않아서 새로 생성한 파일을 add하지 않고 변경된 파일만 커밋해서 푸쉬하는 실수를 했다.
(테스트 끝나고 만들었던 파일들 기억을 짜내서 다시 만들어 푸쉬했다ㅠㅠ)
ES6 Modlue 형태로 코드 변경
요구사항 중 ES6 Modlue 형태로 코드를 바꾸라는 내용이 있었다.
class나 function을 만들고 이걸 export 시키고 import해서 쓰는게 module 형태인가? 생각하다가
기존에 index.html 파일에 스크립트들이 include 되어있는 부분에도 모두 type="module"을 붙였는데 main.js를 제외한 나머지 모듈은 main.js에서 import해서 사용하고 있어서 type="modlue"을 붙일 필요도 include 시킬 필요도 없었다.
- 기존 코드
<body>
<script type="module" src="src/api.js"></script>
<script type="module" src="src/ImageInfo.js"></script>
<script type="module" src="src/SearchInput.js"></script>
<script type="module" src="src/SearchResult.js"></script>
<script type="module" src="src/App.js"></script>
<script type="module" src="src/main.js"></script>
...- 개선 후 코드
<body>
<script type="module" src="src/main.js"></script>
...Modal fade-in, fade-out
display: none, block을 통해 Modal 컨트롤하게 되면 transition이 먹히지 않기 때문에 visiblilty 속성을 활용해서 Modal의 fade-in, out을 구현할 수 있다.
