[ 엘리스 SW 엔지니어 트랙 ] 41일차 TLDR(9주차: 1차 팀 프로젝트)

📍 41일 차 12.21. 화. 프로젝트 6일 차 TLDR

1. 컴포넌트의 리턴값이 1개 이상일 때는 객체로 리턴하자.

const getGPSTag = () => ({
GPSLatitude: "GPSLatitude",
GPSLatitudeRef: "GPSLatitudeRef",
GPSLongitude: "GPSLongitude",
GPSLongitudeRef: "GPSLongitudeRef",
});

const { GPSLatitude, GPSLatitudeRef, GPSLongitude, GPSLongitudeRef } =
getGPSTag();

2. 라이브러리를 페이지에서 호출하면 함수 parameter로 넘기지 않아도 된다. (전역적으로 호출 가능)
3. JavaScript로 HTML 코드를 다루는 방법 3가지를 배움: innerHTML은 보안에 취약한 요소가 있다. DOM조작이 불편하다. 만들기는 쉽다. 가독성도 나쁘지 않다. node manipulate는 유지보수가 불편하다. 그러나 DOM을 정확하게 조작할 수 있다. hyperscript는 가독성과 컴포넌트의 재사용성이 증가한다. 엘리먼트에 접근할 상황이 생길 때는 한계가 있다.
4. innerHTML의 장점과 단점

* 장점
- HTML 마크업 문자열로 간단히 DOM조작이 가능하다.
- 구현이 간단하고 직관적이다.
* 단점
- HTML 코드에 JS 악성코드가 심어져 있다면 파싱과정에서 그대로 실행되기 때문에 위험하다. (XSS)
- 기존노드가 존재하고 자식노드를 추가할 때 원래 있던 기존노드까지 새로 만들어 렌더링 한다. 즉, 바뀌지 않아도 되는 노드까지 모두 제거하고 처음부터 새롭게 자식 노드를 생성하여 DOM에 반영하는데 이는 효율적이지 않다.
- 새로운 요소를 삽일 할 때 삽입될 위치를 지정할 수 없다.(insertAdjacentHTML 메서드 활용하기, insertAdjacentHTML도 innerHTML과 마찬가지로 HTML 마크업 문자열을 파싱하므로 XSS에 취약하다.)

 

728x90

5. develop branch는 d/upload-page, feature branch는 f/upload-page와 같이 설정할 수 있다.
6. hyperscript(HTML 마크업의 Javascript 기반 표현이며, 순수 DOM을 생성한다.) 

* 장점
- 순수 DOM을 생성한다.
- 코드의 가독성과 재사용성이 크게 향상된다.
* 단점
- element에 자유롭게 접근이 쉽지 않다.

7. n만큼 자식 node를 추가할 때 직접 DOM에 n번만큼 추가하지 말고(n번만큼 reflow가 발생한다.), createDocumentFragment를 사용해서 DOM접근을 한번만 하자.
8. hyperscript에서 HTML코드에서 class를 추가할 때 class를 쓰지 않고 className을 사용하는 이유: class가 예약어이기 때문
9. git reset: git add .로 track 하는 파일 제거하기
10. css 속성 중 width: clamp(0, 100%, 860px)는 다음을 나타낸다.

- min-width: 0px;
- width: 100%;
- max-width: 860px;

11. 중앙 정렬은 flex를 사용하기보다는 margin: 0 auto를 사용하자(내용이 1 column 일 때)
12. 저장할 때 원하는 언어 prettire, elint 적용 제외시키기

"[markdown]": {
"editor.formatOnSave": false
}

>reference

1. https://kyleshevlin.com/how-to-write-your-own-javascript-dom-element-factory/