패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_클론과제 리팩토링 후기

지난시간에 이어서 이번엔 코드리뷰를 토대로 수정을 해보자!

지난 포스팅 : https://furaha.tistory.com/18

1. 인라인으로 스타일 준 부분을 scss 에서 변수사용으로 바꿔보자

 오류)  색상중에 몇가지만 색상으로 인식이 안되길래 왜지 싶었는데, 변수명 $ 뒤에 숫자로 시작했기 때문이었다,,ㅎㅎ

 해결)  변수명을 $color- 로 앞부부을 전부 통일해주었다.

 

---

 

2. main.js 에서 로직이 아닌 부분은 별도 파일로 뺀 후 import 하여 사용하자!

로직이던 데이터이던 상관하지 않고 모두 main.js에 넣어주니까 거의 1000줄을 돌파하고 있었다..

용도에 맞게 js 파일도 모듈화시켜서 사용하자. export import 를 사용하려 했는데 아래 2가지 오류가 났다.

 

 오류-1)  Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:5:1)

 

위 오류가 나는 원인은 아래 2가지이다.

그 중에 나의 오류 원인은 2번이었다.

1. 모듈 스크립트로 구성되지 않은 파일에서 import 문을 사용하는 경우.
2. HTML에서 type="module" 속성을 사용하지 않고 모듈 스크립트를 로드하려는 경우.

main.js 스크립트 연결을 할 때, type="module" 을 작성해주지 않았다ㅎ 잊지말자 타입 모듈!!

 

 해결-1) 

 

<script src="../assets/js/main.js" type="module"></script>

 

 오류-2)  Uncaught SyntaxError: The requested module './data.js' does not provide an export named 'slides' (at main.js:5:9)

 

이 오류는 모듈에서 올바른 내보내기(export)가 되지 않았기 때문이다.

 

 해결-2)  나는 데이터 변수를 2개를 내보내려고 했는데 export default 라고 적어주어서 export 로 바꿨다.

 

여기서 export 와 export default 의 차이를 알게 되었는데,,

보내는 데이터가 여러개일 때, export 구문 사용하고 이것을 불러올 때는 {} 사용

 

const slides = ['slide1', 'slide2', 'slide3']; 
const walls = ['wall1', 'wall2', 'wall3']; 
export { slides, walls };

// main.js
import { slides, walls } from './data';

 

보내는 데이터가 한 개일 때, export default 를 사용하며 이것을 불러올 때는 {} 를 없애야 한다

 

const slides = ['slide1', 'slide2', 'slide3']; 
export default { slides };

import slides from './data';

 

이렇게 데이터를 분리했다!!!

 

---

 

3. 버튼들 중에 전체 버튼은 클릭 안하게 하고 싶다. 그런데 이미 css 까지 끝난 상태,,,

 

버튼을 또 두 개로 분리해야하나 싶었는데,, 생각해보니 버튼을 지정할 때 css 선택자 사용이 가능하다!

 

querySelector, querySelectorAll 에서 css 선택자처럼 :not() :first-child 등 사용할 수 있다. 

이 방법으로 덕분에 매우 편리하게 고민이 해결되었다ㅎㅎ

 

const wallBtn = document.querySelectorAll('.btm-cate:not(:first-child) .link');

 

---

 

4. for 보다는 forEach나 반환값이 필요하면 map 사용하기 

 

for 문은 갯수를 내가 따로 지정해줘야하는 불편함이 있는데,

이것을 보완한 새로운 문법이 있기 때문에 forEach 사용이 더 권장된다

 

for 과 forEach 의 차이점을 알아봤다

- For 루프는 원래 사용되었던 접근 방식이지만 forEach 는 배열 요소를 반복하는 새로운 접근 방식이다 

- For 루프는 필요한 경우 break 문을 사용하여 for 루프를 중단할 수 있지만 forEach 에서는 이와 같은 작업을 수행할 수 없다

- For 루프는 await와 함께 작동하지만 forEach 는 await와 완벽하게 작동하지 않는다

- For 루프를 사용한 성능은 forEach 루프보다 빠르다

 

상황에 따라서 두 개를 반복문을 선택해서 사용하면 될 것 같다!!

 

이 외에도 반복문 안에서 append 하지 않고 모든 요소를 만들고 한번에 append 하기 등의 코드 리뷰를 받았다.

 

 느낀점) 

코드 리뷰를 받는 문화를 접해본 적이 없었는데,

내가 마구잡이로 작성한 코드에 대해서 더 권장하는 방법, 더 간결한 문법들 등등 리뷰를 받아보니까 

굉장히 유익하고 리뷰 받은 사항들이 기억에 오래 갈 것 같다.