오피스아워
오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에
진행한 질문과 답변을 기록합니다.
1. script 삽입 위치
Q. HTML 파일에 script 의 삽입 위치는 바디 태그 아래에 두는게 좋을까요?
-
일반적으로 자바스크립트에서는 돔을 선택하고 활용해서 개발한다.
따라서 모든 html 파일을 다 불러온 뒤에 스크립트 파일을 두는게 일반적이다.
즉 스크립트는 <body> 태그 밑에 두는게 좋을 것 같다. -
반대로 먼저 js가 실행되어야하는 경우에서는
<body> 위에 있어도 될 것 같다고 하셨다. -
더 자세한 내용은
https://velog.io/@anjaekk/JS-Script%EC%82%BD%EC%9E%85-%EC%9C%84%EC%B9%98head-body-async-defer-%EB%B9%84%EA%B5%90
참고해서 공부해서 따로 블로그에 정리해야겠다.
2. DB 데이터 가져오는 문제
Q. 한 번에 상품 목록 리스트를 받아오는 모듈을 짜서 사용하는 게 좋을지 그냥 그때 그때 불러오는 게 좋을지 모르겠습니다.
- 데이터가 크지 않다면 처음에 받아오는 거 가지고 있다가 사용하는 것 권장한다고 하셨다.
3. 코드 리뷰 답변 중 상수 데이터 관리에 대해서
Q. 코드 리뷰에서 상수 데이터는 따로 상수 파일을 만들어서 관리해주는게 좋다고 하셨는데 이해가 안되어서 자세히 설명 부탁드려요!
현재 프로젝트의 일부 코드로 예시를 들어보면
`src/services/view/user-service.constants.js`
export const 이메일이_없어서_나는_에러 = ‘ 해당 이메일을 가입 내역이 없습니다. 다시 한 번 확인해 주세요’
`src/services/view/user-service.js`
error(이메일이_없어서_나는_에러)위처럼 반복되어 여러곳에서 사용되는 에러 메시지들의 경우 상수 파일을 만들어서 사용하면 재사용이 가능하고 수정 시에도 용이하다.
유틸성 함수
3번의 상수파일 관리와 비슷한 맥락으로 코드 이곳저곳 여기저기서 사용되는 일반적인 기능을 담당하는 유틸성 코드는 따로 모아서 util.js 와 같이 유틸성 함수들만 모아서 관리해주는 게 좋다.
예를 들어 현재 프론트단의 view 폴더에 있는 페이지별 스크립트 파일에서는 모두 html에서 document.querySelector() 로 돔을 가져와서 사용하고 있다.
const getElem = (string) => document.querySelector(string);
const deletedItem = getElem("#user")이처럼 유틸성 함수로 만들어서 따로 관리하면 좋다.
const productList = document.querySelector('#products');
의 한 줄에서는 추상화 개념처럼 들어가는 id값이 중요하지 다른 코드는 반복될 코드일 뿐이다.
코드를 한줄 한줄 작성할때 무엇이 중요한 요소인지 생각해보고, 구분할 수 있도록 생각하면서 코드를 짜야겠다.
