그냥

자바스크립트 사용해서 이미지 위 클릭한 위차에 동그라미를 출력할 일이 필요했다.

div, svg, circle element 생성하고 appendChild 이용해서

circle을 svg 하위에, svg를 div 하위에 추가한 후

최종적으로 특정 div 내에 출력하려는 생각이었다.

현재는 잘 사용되도록 해결된 상태이지만,

잠깐 appendChild를 사용할 수 없는 노드라는 에러를 발견하고

구글에서 appendChild에 대해서 검색을 했더랬다...

크롬 탭에 또 그렇게 검색중인 내용들이 쌓였는데

해결되고 닫지 않은듯하다 아마도?

// example
const div = document.createElement("div");
document.body.appendChild(div);

참고 : https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

티스토리에는 글 작성 시 여러 동작하는 소스를 넣는 것이 불편하다.

이전에 여러 블로그 글들에서 본 적 있지만 딱히 관심 주지 않던 codepen에 대해서 오늘 생각나서 링크 남긴다.

https://codepen.io/

위와 같이 코드 내용과 함께 결과를 확인 가능하게 도와준다.

티스토리에서는 스키편집 > 파일첨부에서 ei.js를 첨부한 이후에

HTML 편집에서 head 부분에 script 추가해 주는 것으로 준비는 완료된다.

그 후 codepen에서 코드 작성 하고 우측 하단에 embed를 클릭하면 다른 곳에 첨부할 수 있도록 도와준다.

VUE 컴포넌트 만들때 참고

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component#in_this_module

정규식 검사

https://regexr.com/

단계별 설명도 어느정도 있어서 도움이 더 된다.

그래도 정규식은 직접 여러번 겪어보지 않으면 눈에 한번에 안들어오는듯,,,

여기도 도움이 된다.

https://regex101.com/

vue router - child component, redirect

https://any-ting.tistory.com/47

프론트엔드 개발 중 webpack을 사용하기도 한다.

웹 어플리케이션 해석 시 js 외 리소스들을 변환 가능하도록 loader를 사용한다.

Webpack 관련 참고 링크

https://seogeurim.tistory.com/13

https://devraphy.tistory.com/194

https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader

vue 공부 겸 테스트 중이었다.

일부 이미지(*.jfif)나 ico 파일에서 에러가 발생하여 알게 되었다.

css파일으 style 태그안에 import 가능하다.

// example
<style>
@import "@/assets/css/common.css";
@import "@/assets/css/content.css";
</style>

그리고 vue 기본 적인 레이아웃 관련 링크

https://ospace.tistory.com/788

Vue 이미지 파일 연결 및 경로 별칭 설정

https://devraphy.tistory.com/195

참조 : https://ardodeardo.medium.com/clean-code-4de6b19e84e2

순수하게 유지보수를 위한 개발이면 기존 스타일을 따라서 작성하겠지만,

그렇지 않은 경우 코드 작성에 따라 그 개발자의 평가가 달라질 수 있다.

아무리 남들보다 개발 속도가 빠르고 당장 기능이 정상 동작 한다고 하더라도,

알 수 없는 / 오해를 줄 수 있는 변수명, 코드 작성 방식이 더럽다면,

차후 해당 코드를 참고/수정 해야하는 다른 개발자들은 몇배의 리소스를 소모하게 될지 모른다.

medium 에서 여러 글들을 보다가 그냥 몇줄 작성한다.

참조 글과 동일하게 모든 번호를 작성하지는 않았다.

## 변수명은 의미 있는 이름들로 지어라.

1. 변수의 의도가 드러나는 이름을 지어라

2. 오해의 소지가 있는 이름을 피해라

3. 검색에 용이한 이름을 지어라

4. Avoid Mental Mapping

  아래는 예시인데,,,어떻게 변수명 지으라는 건지는 알겠는데 한글 번역이 애매해서 그냥 그대로 작성한다.

// bad
for (let x = 0; x < 10; x++) {
  // ...
}
items.forEach(i => {
  // ...
});

// good
for (let index = 0; index < 10; index++) {
  // ...
}
items.forEach(index => {
  // ...
});

5. 쓸데 없이 귀여운 척 이름 짓지 마라..ㅋㅋㅋ (아래 예시 참고)

// bad
thanosSnapHisFingers(id);

// good
deleteItem(id);

## 함수들(메소드들)

1. 함수 하나에는 하나의 기능을 담당하도록 작성하자.

한줄만 작성하라는 것이 아니라 같은 추상화 단계에 있는 기능들을 묶어서 사용할 수 있도록 구성하자.

아래 예시 참고..

// bad
function popup() {
  const parentElement = document.querySelector('.c-popup');
  
  const showButton = parentElement.querySelector('.c-popup__btn--show');
  showButton.addEventListener('click', () => {
    parentElement.classList.remove('d-none');
  });
    
  const hideButton = parentElement.querySelector('.c-popup__btn--hide');
  closeButton.addEventListener('click', () => {
    parentElement.classList.add('d-none');
  });

  // ... 
}


// good
function Popup() {
  const parentElement = document.querySelector('.c-popup');

  const show = () => {
    const showButton = parentElement.querySelector('.c-popup__btn--show');
    showButton.addEventListener('click', () => {
      parentElement.classList.remove('d-none');
    });
  }
    
  const hide = () => {
    const hideButton = parentElement.querySelector('.c-popup__btn--hide');
    closeButton.addEventListener('click', () => {
      parentElement.classList.add('d-none');
        });
  }
    
  init = () => {
    show();
    hide();
  }

  init();
}

2. 함수의 기능을 이름에 표현해라.

3. 함수의 인수들(arguments)은 적절하게 사용해라.

  0 개 = 이상적임

  1 ~ 2 개 = 가능하면 이정도

  3 개 = 안돼 (?!)

  - 하나의 함수에서 두 가지 기능을 위해서 인수를 굳이 사용하지 말고 두개의 함수로 나누자

  - 여러 인수를 다 넘기지 말고 하나의 객체로 넘기자

4. 반복해서 사용하지 말아라.

## 주석

1. 주석으로 모든 것을 설명하려 하기보다는 함수명,변수명 등을 잘 작성하여 주석을 줄여라

2. 좋은 주석들 : 법적인내용, 정보/의도 전달

3. 별로인 주석들 : 코드보다 긴 불필요하게 긴 내용, 수정 이력 같은 내용, 굳이 작성할 필요 없는 뻔한 내용, 위치를 나타내는 주석들

### 서식

1. 비교 연산자 & 등호 : ==, != 대신에 ===, !== 사용하자

2. 블록들

  - 여러 줄에 적절하게 괄호 사용하자

  - if 닫는 괄호와 else는 같은 줄에 작성하자

3. 주석들

  - 여러 줄에는 /** ... */ 을 사용하자

  - 같은 줄 끝에 작성하지 말고 위에 작성하되 다른 줄과 윗줄과 분리되도록 한줄 띄어서 작성하자

  - 주석은 한 칸 띄고 작성하자 (읽기 편하도록)

4. 공백들

  - 1탭 = 2스페이스(2칸)로 작성하자

  - 시작하는 괄호 앞에 한칸 (함수와 인수들 사이에는 X)

  - 연산자 앞뒤에 한칸

5. 콤마들(쉼표들) (,)

  - 줄 분리할 때 맨 앞에 콤마 사용하지 말고, 이전 줄 맨뒤에 콤마를 사용하자

6. 세미콜론 : 써라. (안쓰는 사람들도 많다는데 ,,, 왜 그러는지 잘 모르겠음)

7. 이름 짓는 규칙

  - 객체, 함수, 인스턴스는 카멜 케이스를 사용하자

  - 생성자,클래스에는 파스칼케이스 사용하자

*********************

그 이후로 내용이 더 있는데 그냥 이거 한글로 작성하는 것보다 직접 링크 들어가서 보는게 나을듯하여 줄입니다.

medium에 있는 윗글도 책 '클린코드'와 Airbnb의 JS 스타일 가이드를 참조 했다고 한다.