그냥

프론트엔드 개발 중 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 스타일 가이드를 참조 했다고 한다.

잊고 있던 정보처리기사

올해에는 마무리 지어야한다.

# 올해 시험 일정

오늘부터 1회 필기접수 가능하다.

그리고 한달 후 시험.

그나마 수수료가 해외 자격 시험들에 비하면 저렴한 편이라 일단 신청한다.

한달간 틈내서 공부하면 통과는 할 것 같다.

자세한 내용 확인 : https://www.q-net.or.kr/crf005.do?id=crf00505&jmCd=1320 

미루지 말고 접수하고 공부하러 가자.

***** 2023.01.10.13:30

필기 원서 접수 첫날은 수도권(서울,인천,경기) 시험장은 14시부터 오픈된다고 하네...

이게 뭔 소린가 싶었는데

지역 선택에 수도권이 안보인다,,

이딴걸 어디 구석에 쳐넣어놔서 기다렸다가 나중에 다시 작성하게 만드네

앱도 구식으로 그지같이 만들어 놔가지고는,,,

https://gist.github.com/shoark7/38bcff39588b528d37313a669fdfd75d

https://developer.mozilla.org/ko/docs/Learn

https://www.typescriptlang.org/

https://babeljs.io/

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

https://lieadaon.tistory.com/382

https://medium.com/@hozacho/v-on-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%97%90-%EC%A7%81%EC%A0%91-javascript-%EC%BD%94%EB%93%9C-%EB%84%A3%EA%B8%B0-%EB%A7%A8%EB%95%85%EC%97%90-vuejs-f0609a7756b7

https://m.blog.naver.com/1126pc/221528701181

# 참조

https://cocoon1787.tistory.com/830

https://docs.npmjs.com/cli/v9/commands/npm-install

# --save

node_modules 디렉토리에 설치됨

package.json > dependencies 항목에 정보 추가됨

--production 빌드 시 해당 패키지가 포함됨

# --save-dev (or --save-D)

node_modules 디렉토리에 설치됨

package.json > devDependencies 항목에 정보 추가됨

--production 빌드 시 해당 패키지가 포함되지 않음

**** 그외 ****

# --global (or -g)

프로젝트가 아닌 시스템의 node_modules에 추가

프로젝트 별로 필요한 스펙이 다른데 멍청하게 그냥 -g 달고 설치해가지고 귀찮아짐 조금

좀 날리고 다시 설치할 게 필요할듯

# dependencies 만 설치

npm install -only=prod (or production)

# devDependencies 만 설치

npm install --only=dev (or development)

# vscode 사용한다

# terminal 연다

# node.js, npm 버전 확인한다 (없다면 설치)

node -v
npm -v

# vue 설치한다

npm install -g @vue/cli

# vue 버전을 확인한다

vue -v

* 2023.01.06.FRI

  node v18.12.1

  npm v9.2.0

  vue/cli v5.0.8

# 프론트(vue) 프로젝트를 생성한다.

목적이 있고 잘아는 상태가 아니라면 선택지에서 첫번에 있는  Default ([Vue 3] babel, eslint) 를 선택하고 진행한다.

vue create demo_vue

기본 프로젝트 생성 완료 시 {img4} 와 같은 결과가 출력되는 것을 확인 할 수 있다.

# 서버를 실행해보자.

cd demo_vue
npm run serve

# 로컬 (포트8080) 웹 접속 시 아래와 같이 기본 화면이 출력된다.

다음 내용은 다음 기회에,,너무 바빠짐

https://infosec.exchange/

https://palant.info/

https://pfp.works/

https://github.com/palant

https://github.com/gohugoio/hugo

https://onethejay.tistory.com/58

https://beaniejoy.tistory.com/

# 참조

https://velog.io/@kcj_dev96/jsconfig.json

https://basemenks.tistory.com/266

# jsconfig.json 파일이 프로젝트 루트 디렉토리에 있음으로써

  해당 프로젝트가 js에 관련 있다는 것을 알 수 있다.

  또한 프로젝트에 포함할 파일, 제외할 파일, 컴파일 옵션도 설정할 수 있다.

# 위치

프로젝트 루트 경로에 위치

# exclude

프로젝트 내에서 제외할 파일 목록 지정

// ex
"exclude": [
  "node_modules",
  "**/node_modules/*"
]

# include

프로젝트 내에 포함할 파일 목록 지정

default : 모든 파일 포함

// ex
"include": [
  "src/**/*"
]

# compilerOptions

컴파일 옵션 설정

// ex
"compilerOptions": {
  "module": "commonJS",
  "target": "es6",
  "baseUrl": ".",
  "paths": {
    "@app/*": [
      "app/*"
    ]
  }
}

target : 사용할 javascript 문법 버전

  (es3, es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, esnext)

module : module system 명시

  (amd, commonJS, es2015, es6, esnext, none, system, umd)

  주로 사용 되는 것 : es6 or commonJS, commonJS는 노드에서 사용될 때 지정됨

baseURL : 프로젝트 베이스 경로 지정 가능

  특정 경로 지정하여 편하게 상대경로 지정 가능

paths : baseURL 기준, 파일 불러올 때 기준점 설정 가능

  (paths 옵션 지정을 위해서는 baseURL 옵션 필수)

# 참조 : https://javascript.plainenglish.io/10-useful-javascript-coding-techniques-that-you-should-use-772b17c2d90b

# positive

// no
const TEST = 1
const isNotTest = (test) => { return test !== TEST }
if (!isNotTest(test)) { ... }

// YES
const TEST = 1
cconst isTest = (test) => { return test === TEST }
if (isTest(test)) { ... }

# define the number as a constant

// no
const getInfo = (age) => {
  return {
    name: 'test',
    isMiddleAge: age >= 35
  }
}

// YES
const MIDDLE_AGE = 35
const getInfo = (age) => {
  return {
    name: 'test',
    isMiddleAge: age >= MIDDLE_AGE
  }
}

# wrap multiple conditional judgments

// no
if (age >= 20 && follwers >= 100 && (origin === 'ko' || origin === 'korea')) { //... }

// YES
const checkCanApplyMPP = (options) => {
  const {age, follwers, origin} = opitons
  const canApplyMPP = age >= 20 && follwers >= 100 && ['ko', 'korea'].includes(origin)
  return canApplyMPP
}
if (chackCanApplyMPP({age: 20, follwers: 90, origin: 'korea'})) { //... }

// YES 2
const canApplyMPP = age >= 20 && follwers >= 100 & ['ko', 'korea'].includes(origin)
if (canApplyMPP) { //... }

# Reduce If...else noodle code

// no
const runTest = (result) => {
  if (result === 'a') {
    return 0
  } else if (result === 'b') {
    return 1
  } else if (result === 'c') {
    return 2
  }
}
console.log(runTest('a')) // 0

// YES
const runTest = (result) => {
  const codeMap = {
    'a': 0,
    'b': 1,
    'c': 2,
    // ...
  }
  return codeMap[result]
}
console.log(runTest('a')) // 0

# Use 'filter' and 'map' instead of 'for' loops

// DATA
const list = [
  {
    result: 'a',
    code: 0,
  },
  {
    result: 'b',
    code: 1,
  },
  {
    result: 'c',
    code: 2,
  },
  {
    result: 'd',
    code: 3,
  },
]

// no
const result = []
for (let i = 0; len = list.length; i < len; i++) {
  if (list[i].group === 1) {
    result.push(list[i].result)
  }
}

// YES
const result = list
  .filter((list) => list.group === 1)
  .map((list) => list.result)
console.log(result) // ['a', 'b', 'c']

# Swap two values using destructuring

// no
let test1 = 'a'
let test2 = 'b'
let temp = test1
test1 = test2
test2 = temp
console.log(test1, test2) // ba

// YES
let test1 = 'a'
let test2 = 'b'
;[test1, test2] = [test2, test1]
console.log(test1, test2) // ba

# Smarter Object.entries

// DATA
const testMap = {'a': 0, 'b': 1, 'c': 2, 'd': 3}
Object.prototype['e'] = 4

// no
for (const key in testMap) {
  console.log(key, testMap[key])
}

// YES
Object.entries(testMap).forEach(([key, value]) => {
  console.log(key, value)
})

# Easy way to flatten an array

// DATA
const result = [['a', ['b']], ['c', ['d', ['e']]]]

// 1
const flattenResult = (result) => {
  return result.reduce((res, result) => {
    return res.concat(Array.isArray(result) ? flattenResult(result) : result)
  }, [])
}
console.log(flattenResult(result))

// 2
result.flat(Infinity)

# Rounding Trick - usin '~~' operator

const map = [
  {
    result: 'a',
    code: 0
  },
  {
    result: 'b',
    code: 1
  },
  {
    result: 'c',
    code: 2
  },
]
const testResult = map.map((test) => {
  return {
    result: test.result,
    code: test.code
  }
})
console.log(testResult)

# Use reduce to calculate the sum

// DATA
const map = [
  {
    result: 'a',
    code: 0,
    error: 0,
  },
  {
    result: 'b',
    code: 1,
    error: 3,
  },
  {
    result: 'c',
    code: 2,
    error: 2,
  },
  {
    result: 'd',
    code: 3,
    error: 1,
  },
]

// no
let str = ''
map.forEach((map) => {
  str += map.code + '(' + map.error + ')'
})
console.log(str)

// YES
let str = map.reduce((res, map) => res += map.code + '(' + map.error + ')', '')
console.log(str)