반응형

ESLint, Prettier 설정하기

🔹ESLint

ESLint는 코딩 컨벤션에 위배되는 코드를 작성하거나 잘 못된 코드를 검출해주는 도구다.
해당 도구를 연결하는 것만으로 잘못된 코드 습관을 고치는데 크게 도움이 된다.
쓸데없이 import나 선언해두고 사용하지 않는 변수를 잡아주는 것은 시작에 불과하다.
미리 잘못된 코드들을 잡아주다보니 추후 버그가 나올 가능성이 현저히 줄어드게 된다.(그렇다고 만능은 아니지만 많은 부분에서 크게 도움이 된다. ts와 ESLint의 조합이란....)

🔹Prettier

Prettier는 코드 포맷터이다. 다양한 언어와 도구에서 지원이 되는데, 일관된 코드를 작성할 수 있게 도와주어 코드를 짜는데 있어서 가독성을 높여준다.
특히 협업을 할때, 누구는 2개의 탭을 넣고 누구는 4개의 탭을 넣게되어 쓸데없는 깃의 꼬이는 현상도 막아주고 일관된 코드를 작성해준다.
코드 스타일의 규칙을 초반에 정해놓고 설정만 해두면 prettier가 전담해서 코드를 일관성 있게 작성해주니 이후부터 코드 작성 스타일에 대한 스트레스와 시간을 절약해주는 좋은 도구이다.

🔹VSCode에서 사용법

VSCode에서 플러그인 설치 후 설정을 통해 연결할 수 있다.
ESLint를 검색하고 설치하면 된다.

Prettier도 마찬가지로 검색하면 바로 나오므로 설치해서 사용하면 된다.

🔹프로젝트별 ESLint설정법

프로젝트 최상단에 .eslintrc.cjs 또는 .eslintrc.json형태로 파일을 생성한다.
아래는 vite에서 react개발을 하면서 사용한 옵션들이다.

.eslintrc.cjs

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
  },
};

옵션별 설명

  • env: 코드가 실행되는 개발 환경을 말한다. 브라우저, node서버, 등 목적에 맞게 작성한다. 환경의 설정값을 통해 eslint가 api와 전역변수들을 이해하고 분석해준다.
  • extends: 공개된 설정들을 그대로 가져와서 해당 프로젝트에 적용하는 옵션(airbnb, goggle, facebook등 대기업에서 배포한 기술도 적용 할 수 있다.)
    • react/recommened: React프로젝트에 맞는 권장하는 규칙과 설정을 제공한다.(JSX, React 권장 패턴, 관행 등)
    • react-hooks: React Hook(useState, useEffect, useCallback등)관련된 권장 규칙과 설정을 제공
    • jsx-runtime: jsx의 관련된 규칙이 작성되어 있다.작성 형식, 태그닫기, 명명규칙 등을 도와주고 가독성을 높여준다.
  • plugins: 기본적으로 제공하는 규칙 외에 추가적으로 적용할 규칙에 사용할 플러그인을 작성
  • rules: extends옵션에서 설정된 규칙 외에 덮어쓰고 싶은 규칙을 작성할 때 사용되며, 규칙에 대한 내용을 세세하게 작성하기 위해 사용하는 옵션
  • parserOptions: javascript코드를 이해하기 위해 Eslint에서 사용하는 파서를 구성한다. ECMAScript버전(ecmaVersion), sourceType: 소스유형
  • ignore: eslint의 설정을 무시할 파일이나 디렉토리를 설정할 수 있다.

자세한 설정에 대한 내용은 아래 URL을 참고하자.
[https://eslint.org/docs/latest/use/configure/]

🔹프로젝트별 Prettier설정법

프로젝트별로 협업하는 사람들마다 스타일의 형태가 다양하다. 나만의 방식을 추구하고 싶겠지만, 협업이다보니 다수의 의견을 따라야 하는 경우가 있다. 이런 경우 나만의 VSCode에 설정한 Prettier가 아닌 프로젝트 최상단에 .prettierrc를 추가하고 옵션을 설정하면 된다.

아래는 .prettierrc 예시이다.
.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

옵션별 설명

  • printWidth: 최대 줄 너비를 지정
  • tabWidth: 각 들여쓰기 수준에 대한 공백 또는 탭의 수를 지정
  • useTabs: true설정시 Prettier는 들여쓰기에 공백 대신 탭을 사용
  • semi: 명령문 끝에 세미콜론을 포함 여부
  • singleQuoute: 문자열 리터럴에 작은땀옴표 또는 큰따옴표 사용여부 결정
  • quouteProps: Javascript또는 JSON에서 개체 키를 처리하는 방법을 지정 "as_needed" 옵션은 필요한 경우에만 따옴표로 변환, "consistent"는 모든 키에 일관된 따옴표를 지정 "preserve"는 원래 따옴표를 유지
  • jsxSingleQuoute: singleQuoute와 유사한 옵션이지만 jsx속성에 해당
  • traillingCommna: 여러 줄 개체 리터럴 및 배열에 후행 쉼표를 포함 여부("all" 모든 여러 줄 배열 및 객체의 후행 쉼표, "es5" 해당 되는 경우 배열 및 객체의 후행 쉼표, "none" 후행 쉼표 없음)
  • bracketSpacing: 개체 리터럴 대괄호({}) 사이에 공백을 포함할지 여부
  • arrowParents: 화살표 함수 매개변수 주위에 괄호를 추가할지 여부("avoid" 매개변수가 하나만 있는 경우 괄호 없음, "always" 항상 괄호 추가)
반응형
반응형

개발의 기능이 어느정도 완성되거나 버그를 수정하거나 그날 올릴 소스가 존재한다면 많은 분들이 Git을 통해 관리를 하고 있을텐데, Git의 GUI도구(Sourcetree, fork, gitkraken 등등)를 사용해서 올리는 분들이 있을텐데, 저같은 경우엔 아직 gui가 필요한 수준도 아니고 가볍게 작업할 땐, VS Code에서 열심히 개발을 끝내고 터미널 창을 열어서 밀어넣는 작업을 하고 있습니다.

 

하지만 터미널에서 기존에 가볍게 작성하던 커밋 메시지를 저만의 커밋컨벤션의 규칙을 지키면서 넣다보니 실수도 많아지고 잘못된 개행처리나 사용시 불편함이 너무 많았습니다. 이런 문제를 해결하기 위해 git, vscode에 각각 약간의 설정을 하여 해결하였습니다.

 

Git설정

$ git config --global core.editor "code --wait"

해당 설정을 하게 되면 기존에 `git commit -m "커밋 메시지를 작성합니다!!! blah blah~"`

커밋 명령과 메시지를 동시 입력했지만  `git commit`만 쳐주면 새로운 창이 열리고 커밋 메시지를 적을 수 있게 해줍니다.

 

파란색부분에 commit message의 header와 개행을 입력하고 body부분을 양식에 맞게 작성하시고 저장 후 끄시면 됩니다.

 

 

VS Code설정

위 설정으로 vs code에서 메시지 작성은 쉬워졌지만 여전히 메시지 길이에 대한 문제가 있습니다.

많은분들이 따르고 있는 50/72규칙입니다.

제목은 50자, 바디는 한 줄당 72자에 대한 규칙인데, 매번 작성시 이걸 하나하나 세는것도 고역일 수 밖에 없습니다.

이것을 VS Code에서 언어별로 설정을 할 수 있는데 규칙을 추가함으로써 해결이 가능합니다.

 

1. File - Preferences - settings

 

2. setting.json열기

우측 상단에 Open Settings를 통해 JSON파일로 열 수 있습니다.

 

3. 길이 설정 제한하기

"[git-commit]": {
    "editor.rulers": [50,72],
    "editor.wordWrap": "off"
},

 

4. 설정 확인해보기

설정을 하게 되면 vs code 에디터 내에 2개의 라인이 생깁니다.

50, 72길이에 대한 제한인데, 문제는 한글에서는 제대로 처리가 되지 않는 문제가 존재합니다.

찾아보니 이런 경우를 위한 네이버에서 배포한 폰트 D2 Coding font가 존재하는데, 이것으로 해결이 가능하며 저같은 경우엔 폰트 적용까진 하지 않았습니다.

첫 줄의 경우 너무 길어 지면 빨간색으로 제한 표시 제한까지도 해주는걸 볼 수 있습니다.

 

적용 후기

요즘 플러그인들이 워낙 좋은것이 많기에 이렇게 커스텀해서 사용하는 것 보단 괜찮은 플러그인 하나 설치하는게 정신건강에 이로울수도 있을 것 같습니다! 

 

반응형
반응형

요즘 프론트엔드 리액트를 학습 중인데, 빠르게 따라치다보면 줄 정렬도 엉망이고 보기 안좋은 코드가 되기 일쑤다.

이런 것을 일관되게 조율해주는게 툴을 쓰는 이유라 볼 수 있는데, snippet부터해서 prettier, styled-component extension등 이것 저것 다 설치를 했는데도, 저장 시 자동 정렬 처리를 해주지 않아서 일관된 코드 작성이 어려웠다.

 

설정이 풀려있어서 적용법을 공유해본다.

 

먼저, 당연히 Prettier는 설치가 되어 있어야한다.

VS CODE

파일 - 기본 설정 - 설정

formatter라고 검색을 하고

 

 

기본 Formatter가 없음으로 되어 있었는데, Prettier로 설정을 변경해준뒤, 잘 돌아가는 걸 볼 수 있었다.

반응형
반응형

이클립스에서 개발도중 swiper.min.js를 적용하기 위해 cdn형태에서 js파일을 직접 연결처리하여 작성하였는데, 해당 파일을 resources부분에 추가하자마자 문법에러가 무수하게 발생하였습니다. 😥

(개인적으로 소스 검색기에 x표시와 Problems에 이런 경고창이 뜨는걸 매우 싫어합니다. 실제로 개발하다 실수로 입력된 오타나 잘못된 문법을 툴을 통해 도움을 받기 위해 사용하는데 무시된 채 개발이 진행될 수 있기 때문입니다.)

 

swiper 문법은 최신문법들이 사용되고 있었고, **와 같은 문법을 인식하지 못하여 발생한것으로 보였습니다.

x ** 2  -> Math.pow(x, 2);

 

이클립스 특정 파일 문법 검사 제외시키기

해당 파일은 이미 작성이 완료된 라이브러리이므로 제가 수정할일이 없으므로 문법검사에서 제외하고 싶었습니다.

1. 프로젝트 우클릭 후 - Properties를 접근합니다.

 

2. JavaScript - Include Path - Source탭 - 프로젝트/src/main/webapp쪽의 Excluded를 선택 후 Edit

위 그림과 같은 창에서 Source탭 webapp의 Excluded를 설정합니다.

 

3. Add를 누르고 패턴 또는 파일명을 입력합니다.

라이브러리류를 제외하기 위해 min.js를 제외처리하는 패턴을 입력했습니다.

입력 : **/*.min.js

 

4. OK - Apply and Close 클릭 후 프로젝트 클린을 해보면 더이상 오류문구가 뜨지 않는걸 볼 수 있습니다.

정상적으로 적용이되면 Excluded에 변경된 옵션이 보입니다.

 

반응형
반응형

이클립스에서 Search창을 통해 검색을 하고 해당 소스를 보기위해 Search탭에서 더블클릭해서 소스를 열어보곤 하는데,

해당 자료가 아니거나 또 찾아야할때 새롭게 찾은 데이터를 열게되면 기존 열어놨던 창에 열리는걸 볼 수 있습니다.

 

매번 새창에 열리는게 비교하기에도 편하고 효율적이라 옵션을 끄는편입니다.😋

 

설정하기 🛠

1. Window -> Preferences

 

2. General - Search

Reuse editors to show matches

Reuse editors to show matches 체크 해제한다!

반응형
반응형

자바11 사용을 위해 전자정부프레임워크 최신버전인 3.10을 설치하여 환경 구성을 하는데 js파일을 열면 에디터로서의 역할을 하지 못하고 모두 검은색으로 나오는등 오류가 발생했습니다.

 

결론은 전자정부 프레임워크의 뼈대가 되는 이클립스 4.16 버전 오류라고 하는데 마켓에서 추가 설치를 통해 변경할 수 있습니다.

 

아래는 참조글입니다.

www.egovframe.go.kr/home/qainfo/qainfoRead.do?pagerOffset=0&searchKey=&searchValue=&menuNo=69&qaId=QA_00000000000020192

 

묻고 답하기 | 표준프레임워크 포털 eGovFrame

처리중입니다. 잠시만 기다려주십시오.

www.egovframe.go.kr

전자정부프레임워크에 자바스크립트 에디터 효과 적용하기

Help - Install New Software...

Work with :  부분에 http://download.eclipse.org/releases/photon 입력 후 엔터

 

검색 된 내용중 하단에 Web, XML, Java EE 로 시작하는 부분에서 원하는 기능 체크 후 설치

(저는 전체 선택하고 설치했습니다. javascript만 설치하셔도 됩니다.)

 

설치가 완료되면 재부팅을 하고 js파일을 열어봅니다.

다시 열어봐도 동작을 안하는 경우가 있는데, 이런 경우에는 Window - Preferences 이동 후

General - Editors - File Associations 탭으로 이동합니다.

 

JavaScript Editor가 생겼을텐데 클릭 하고 Default로 변경합니다.

 

이후에 js를 열어보고 이때도 적용이 안된다면, js 파일 우클릭 - Open With - JavaScript Editor로 열어주면 이후부터는 자바스크립트 에디터로 동작이 됩니다.

 

분노의 전자정부프레임워크에서 자바스크립트 적용기였습니다...

반응형
반응형

Spotbugs는 자바 코드를 분석해서 버그 패턴을 찾아주고, 해결방안을 제시해주는 공개소프트웨어입니다. 시작하셨던 프로젝트들을 납품을 완료하셨거나 하기 직전인분들도 많을텐데, 납품하기전이나 올해 작성해 본 프로젝트를 자가검증을 위해 돌려보고 자신의 소스를 되돌아보는것도 괜찮은 것 같습니다.

 

해당 프로그램으로 프로젝트를 돌려면 NullPointException이 발생할 수 있는부분이나, Date Class를 Equals로 비교하고 있는 잘못된 문법 String Class를 '==' 비교연산자로 비교하는 문법 IO를 사용하고 닫지 않았거나 null체크도 하지 않고 강제로 close하는 문법등등 문제가 될 수 있는 요소들을 정리해서 등급별로 보여줍니다.

 

한국인터넷진흥원(a.k.a KISA)에서도 권고하고 있는 프로그램으로 무료이며 이클립스에서 간단하게 마켓에서 설치해서 사용하시면 됩니다.

 

Spotbugs사용하기

1. 이클립스를 실행하고 마켓에 들어갑니다.

 

2. Spotbugs를 검색하고 설치합니다.

 

 

3. 설치가 완료되면 검사하고 싶은 프로젝트 우클릭후 SpotBugs를 클릭하면 자동으로 검사가 진행됩니다.

 

 

4. 검사가 완료되면 항목별로 문제점을 확인할 수 있습니다.

 

 

5. SpotBugs Perspective로 가보시면 상세하기 프로젝트의 문제점을 등급별로 표기해줍니다.

내용을 확인하고 수정하시면 됩니다.

반응형
반응형

다른곳에서 소스를 받아와서 복사 후 붙여넣기만 하면 VS CODE가 자동으로 줄 정렬을 해주는데, 이 기능이 굉장히 좋을 때도 있지만 불편하게 만드는 경우도 있다.

 

예를들면 css는 개인적으로 한줄로 쭉 작성하는것을 선호하는 편이지만 VS CODE에 넣기만 하면 자동으로 단위별로 줄 정렬이 되어버린다.

 

prettier와 같은 플러그인을 설치하여 옵션을 꺼봤지만 저장시 자동 정렬은 별도의 옵션이였다.

 

아래와 같이 옵션을 끄면 자동 정렬을 끌 수 있다.

 

저장 시 자동 줄 정렬 끄기🛠

 

1. 파일 - 기본 설정 - 설정

 

2. formatOnSave를 입력한다.

 

체크되어 있는 Format On Save 옵션을 체크를 해제하면 더 이상 저장할 때 자동으로 정렬이 되지 않는다.

반응형