웹 개발환경 만들기!

설치할 것들

1. nvm (Node Version Manager )
2. Parcel ( 번들러 )
3. reset.css ( CDN )
4. Babel ( transpile )
5. React
6. Django ( 웹 애플리케이션 프레임워크(web application framework) )

설치하기!

nvm (Node Version Manager )

사용이유

Node.js는 여러가지 버전을 가지고 있습니다. 저희가 개발을 할 때 예를 들어 `14.17.0` 버전을 사용하고 있습니다.
다른 사람과 협업을 할 때 `12.22.1` 버전으로 할 수 있습니다. 그때마다 다시 설치하기 번거로운 경우가 생길 수 있으니, 
NVM을 이용하여 즉각적으로 변경시켜줄 수 있는 형상관리 프로그램이기 때문에 사용을 합니다.

설치하기

1. exe파일 다운로드
   1. https://github.com/coreybutler/nvm-windows/releases
   2. 위 사이트를 들어가서 nvm-setup.zip 파일을 다운받아줍니다.
   3. 다운받은 파일을 압축을 풀고, nvm-setup.exe 파일을 실행시켜 설치해줍니다.
2. 설치 확인
   1. CMD를 켜줍니다.
   2. 콘솔창에 nvm ls 혹은 nvm list를 쳐줍니다.
      • 최초 설치기 때문에 아무것도 나오지 않을 것 입니다. 에러가 안뜨면 Good!
3. Node 설치
   1. nvm install 설치하고자하는 버전을 쳐줍니다.
      • 예시 : nvm install 14.17.0 or nvm install v14.17.0
4. Node 사용하기.
   1. nvm use 사용하고자하는 버전을 쳐줍니다.
      • 당연히 위에 설치한 버전을 치셔야합니다 ㅎㅎ
        • nvm list 를 통해 설치된 버전을 확인해보세요.
      • 예시 : nvm list 14.17.0 or nvm list v14.17.0
위와 같이 하시면nvm 설치및Node` 적용 완료입니다.

Parcel ( 번들러 )

| 저는 vs코드로 진행하였습니다.

사용 이유

• js , css ,html등 여러 파일을 한번에 압축 및 배포할 수 있게 만들어 주는 번들러(Bundler) 입니다.
  • 번들러 ( Bundler ) : 사용자의 코드와 종속성을 하나의 자바스크립트 파일에 통합하는 도구입니다.
  • 번들러 ( Bundler )를 이용하여 JSX 를 구현할 수 있습니다.

설치

1. 디렉토리생성
   • 원하시는 디렉토리로 vscode를 열어줍니다 ( 빈 디렉토리 권장 )
2. 설치
   1. CTRL+`를 누른다.
      • 커맨트창 띄우기
   2. npm init -y를 치고 엔터!
      • 최소실행시 실행해 주시고, 실행해 주시면 package.json 파일이 생성됩니다.
        • y는 설치중 y/n 를 눌러야하는데 모든걸 y로 누른다는 의미
   3. npm i -D parcel-bundler를 치고 엔터!
      • parcel-bundler를 설치한다는 의미! 다른 것을 설치하고 싶으면 이부분만 변경하면됩니다.
        • i는 install을 의미하고, install이라고 쳐도 무방합니다.
        • D는 developer 버전으로 설치한다는 의미입니다. G를 넣으면 글로벌 버전!
3. 설치 확인
   1. index.html
      • 기본형식으로 생성해줍니다. ( 간단히 hello html 과같은 것을 출력 해줄 수 있으면 좋겠네요 )
   2. js 디렉토리를 생성하고 main.js파일을 하나 생성해줍니다.
      • main.js 파일에 console.log("hello js"); 를 작성해줍니다.
4. 실행
   1. package.json 안의 scripts 안에 "dev": "parcel index.html"를 추가해주기

      • "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "dev": "parcel index.html",
          "build": " parcel build index.html"
        },

   2. npm run dev 를 커맨드 라인에 작성하여 실행시켜줍니다.
      • 출력된 경로 http://localhost:1234를 cntl을 누르고 클릭 혹은 url창에 복사 붙여넣기를 하여 켜줍니다.
        • 그렇게 되면, html에 작성하신 것이 출력될 것 입니다.
        • F12를 눌러 console 을 보시면 hello js가 출력 되는 것을 볼 수 있습니다.

추가적으로 설치한 plugin

1. parcel-plugin-static-files-copy
   1. 용도
      • 정적 파일을 dist와 연결시켜주는 역할
   2. 설치
      • npm i -D parcel-plugin-static-files-copy or npm install -D parcel-plugin-static-files-copy
   3. 변경할 코드
      • package.json 파일에 아래 코드 추가
      • "staticFiles": { "staticPath": "static" },
   4. 생성할 디렉토리
      • root 디렉토리 아래에 static 디렉토리 생성
   5. 사용해보기 ( 대표적인 url 아이콘 생성하기)
      1. https://www.icoconverter.com/ 에 들어가서 favicon.ico 생성
         • 제가 한 설정은 Sizes : 32 pixels , Bit depth :32bits 로 만들었습니다.
      2. 생성한 favicon.ico를 static에 삽입.
      3. 서버를 실행시키면 아이콘이 생겨있습니다.

reset.css ( CDN )

사용 이유

• 브라우저마다 각기 다른 default 스타일이 정해져있습니다.이것을 초기화 시켜 주는 역할
  • 초기화 시켜줌으로써 서로 다른 브라우저간 동일한 스타일을 적용할 수 있게 만들어줌.

설치

1. React.css 에 들어가서 /npm/reset-css@5.0.1/reset.min.css의 html주소를 복사한다.

   • link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"/

   • 왠지 모르게 테그가 안 들어가지네요 .. 앞뒤로 <,> 를 넣으세요..
2. 복사한 태그를 html에 삽입해 주세요.
   • 귀찮으면 위 link를 복사하세요
   • scss와 같이 넣고 싶은데, 왜인지 모르게 html코드가 안 들어가지네요 ... 해결방법을 아시면 알려주세요 ㅠㅠ
3. ./scss/main.scss 이 경로에 main.scss파일을 생성해 주세요
   • 아래 같단 예시입니다.

     • // 변수명 : 값
       $color--black: #000;
       $color--white: #fff;
       
       body {
         background-color: $color--black;
         h1 {
           color: $color--white;
         }
       }

       추가 설치 패키지 PostCss
4. autoprefixer
   1. 용도
      • 'Can I Use' 에 등록되어 있는 CSS 속성의 vendor-prefix를 접속하는 브라우저에 따라 자동으로 붙여준다
        • vender-prefix : CSS 권고안 포함되지 않거나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 수 있게 만들어준다.
   2. 설치
      • npm i -D postcss_autoprefixer or npm i -D postcss_autoprefixer
      • npm i -D autoprefixer@9 or npm install -D autoprefixer@9
   3. 추가 코드
      • browserslist : 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.
        • 이 명시를 Autoprefixer 패키지에서 활용됩니다.
      • package.json에 아래 코드 추가

        • "browserslist": [
             ">2%",
             "last 2 versions"
          ]

      • .postcssrc.js 파일 생성 후 아래 코드 삽입.

        • module.exports = {
               plugins:[
                   require('autoprefixer')
               ]
          }

   4. 설치끝
      • 이제 display : flex; 와 같은 것을 사용 할 수 있습니다!

Babel ( transpile )

사용이유

• 브라우저마다 지원하는 ECMAScript가 다릅니다.
  • 개발자는 본인이 편한 버전의 문법을 이용해 ( ES6, ES7.. 등)개발을 하고, Babael을 통하여 변환 & 컴파일을 해줍니다.설치

1. 커맨드 창에 npm i -D @babel/core @babel/preset-env or npm install -D @babel/core @babel/preset-env을 입력해줍니다.
2. .babelrc.js파일을 생성하고 아래 코드를 삽입해줍니다.

   • module.exports = {
     presets: ['@babel/preset-env']
     }

     추가 설치 패키지 plugin-transform-runtime

• 라이브러리에서 사용하는 API들을 래핑
  • babel만으로 부족한 최신 스크립트를 추가 플러그인을 설치하여 지원하게 만들어줍니다.설치

1. npm i -D @babel/plugin-transform-runtime or npm i -D @babel/plugin-transform-runtime을 입력해줍니다.
2. babelrc.js파일을 생성하고 아래 코드를 삽입해줍니다.

   • module.exports = {
      presets: ['@babel/preset-env'],
      plugins: [
          ['@babel/plugin-transform-runtime']
      ]
     }

장고를 이용하여 도커 오라클 연동 에러.

오늘 수업을 듣는데 , 오라클 연동이 너무 안돼서 애를 먹었습니다.

나를 고통받게 했던 에러는 cx_Oracle.DatabaseError: DPI-1080: connection was closed by ORA-12505 입니다.

다른 분들은 아마 ORA-12505 부분에서 숫자 부분은 매번 다르게 나오는 걸로 알고 있습니다.

저의 경우에는 tnsnames.ora 및 listener.ora 를 고쳐서 해결하였다.

경로

• 도커 : /opt/orcle/product/18c/dbhomeXE/network/admin/
  • tnsnames.ora 및 listener.ora가 들어있는 디렉토리
• 윈도우 : 오라클 설치경로\18.0.0\dbhomeXE\network\admin 혹은 C:App\admin\product\18.0.0\dbhomeXE\network\admin
  • tnsnames.ora 및 listener.ora가 들어있는 디렉토리

변경사항

• tnsnames.ora
  • 저는 XEPDB1이라고 생성했기 때문에 위 빨간 부분에 XEPDB1을 삽입
    • 하지만 문제는 해결되지 않음.
• listner.ora
  • USE_SID_AS_SERVICE_LISTENER=on 를 삽입.
    • 에러 해결!!

위 와같이 해서 에러를 해결돼서 아래와 같이 잘 불러들여졌습니다.

저와 같은 에러를 가지고 있다면 한번 삽입해보시고 해결됐으면 좋겠습니다!

깃에 올리는 방법은 간단합니다.

vsCode를 GitHub과 연동을 하셨다면 클릭 몇 번만 하시면 됩니다.

1. 깃탭으로 들어간다음 push 하고자 하는 파일에 있는 +버튼을 눌러줍니다. (스테이지 시키는 것입니다.)

2. 커밋 클릭 후 메시지 작성 후 엔터!

3. PUSH하기

위와 PUSH를 눌러주면 바로 GIT에 올라갈 거예요 ㅎㅎ

예외처리

개념

• 코드를 실행 중에 발생하는 에러를 처리하기 위한 처리입니다.

예외처리 하기

특정 코드에 대한 예외처리

try:
    코드
except 예외명:
    코드

• 위와 같이 특정 에러에만 특별한 처리를 하고 싶으면 except를 이용하면 된다.
  • except는 여러개를 작성해도 된다.
• try문에서 에러가 발생하면, 그 코드 줄(발생 위치) 실행하지 않는다.
  • 에러에 맞는 except로 이동하여 처리한다.

간단 예시

try:
    num = 2 /0
    print(num)
except ZeroDivisionError:
    print('0으로 나눌 수 없습니다.')

• 위와 같이 작성한다면 try문의 print(num)은 출력하지 않고, except에 '0으로 나눌 수 없습니다.' 가 출력된다.

에러 메시지 받아오기

try :
    코드
except 예외 as 변수:
    코드

• 위와 같이 작성한다면 예외에 관한 메시지들을 받아올 수 있다.

try:
    num = 2 /0
    print(num)
except ZeroDivisionError as e :
    print('0으로 나눌 수 없습니다.',e)

• 위와 같이 작성한다면 try문의 print(num)은 출력하지 않고, except에 '0으로 나눌 수 없습니다. division by zero'가 출력된다.

위와같이 사용할 수 있지만, 모든 에러를 볼 수 있는 <font color = red > Exeception </font>을 많이 사용한다.

except Execption as e :
    print("Error 발생",e)

` 위와같이 사용한다면 모든 에러 메시지를 받아올 수 있다.

else 및 finally

• else는 예외가 발생하지 않았을 때 실행할 코드이다.
  • except: 가 실행했다면, 실행되는 코드 블록이다.
• finally는 예외 발생 여부와 상관없이 실행하는 코드이다.
  • except: 의 실행 여부에 상관없이 무조건 실행되는 코드 블록이다.

try:
    실행할 코드
except:
    예외 발생시 실행할 코드
else:
    예외 발생하지 않는다면 실행할 코드
finally:
    예외 발생여부 상관없이 실행할 코드

간단한 예시

try:
    num = 2 /2
    print(num)
except:
    print("Error 발생",e)
else:
    print("Error 발생 안했어요")
finally:
    print("코드 끝났어요")

위와 같은 코드를 실행하면 '1'을 출력하고 else문과 finally문을 실행하게 된다.

예외 발생시키기

• 위와 같은 방법으로는 파이썬에서 지정한 예외에 대한 처리만 할 수 있습니다.
• 개발자가 생각하는 상황을 예외처리를 하여 발생시키는 방법입니다.

방법

raise 예외('에러 메시지')

예시

try:
    x = int(input('2의 배수를 입력하시오.'))
    if x %2 ==1:
        raise Exception('2의 배수가 아니에요')
    print(x)
except Exception as e:
    print('예외가 발생!!',e)

위와 같이 개발자가 예외 상황을 만들 수 있습니다.

다시 except에서 실행 후 try문으로 돌아가기.

"raise 예외('에러 메시지')" 넣기!

try:
    x = int(input('2의 배수를 입력하시오.'))
    if x %2 ==1:
        raise Exception('2의 배수가 아니에요')
    print(x)
except Exception as e:
    print('예외가 발생!!',e)
    raise RuntimeError('예외가 발생했어요!!')

• 코드 실행 중 raise를 만나면 실행 줄이 try로 돌아간다.

"assert 조건식, 에러 메시지 "를 이용하여 발생시킬 수 있다.

• 조건식이 FALSE면 예외를 발생시킴

   x = int(input('2의 배수를 입력하시오.'))
   assert x %2 ==1 , '2의 배수가 아니에요'

• 위와 같이 사용하면 됩니다.
• 디버깅 모드에서만 실행됨.
  • python -o 파일.py 이렇게 실행시켜야 한다.

클래스

기본개념

• 객체를 표현하기 위한 문법
• 클래스가 무엇이냐 하면 필자가 공부를 할 때는 항상 붕어빵 기계를 비유하면서 설명을 들었습니다. 적절한 표현이라고 생각합니다.
  위 말은 즉 **객체 ( 붕어빵 )** 을 동일하게 만들기 위해 **붕어빵 기계 ( 클래스 )** 가 필요하다는 것을 보여주고 싶었던 것 같네요.
  이것을 제 말로 바꿔보면 객체 ( 붕어빵 ) 을 편하게 제작 및 변경( 팥 붕어빵, 슈크림 붕어빵. 등)하기 위해 붕어빵 기계가 있어야 한다는 것을 표현한 것 같네요.
  • 생성한 객체에 어떤 변형된 값을 넣느냐에 따라 값이 변하고, 동일한 것도 편하게 만들 수 있단, 뜻입니다.

클래스 및 메소드 만들기

• 클래스 또한 다른 메소드 만드는 방법과 동일하게 : 을 마지막에 붙여줍니다.
• 메소드의 인자 값의 첫 번째 값은 반드시 self가 들어와야 합니다.
• 객체 사용은. 을 통하여 사용합니다.
  • 평상시에 자주 쓰는 int(), len(), list() , 등 이것들도 클래스 메소드입니다.

객체 생성 / 사용

• 클래스는 여러 번 재사용 가능합니다.
  • 아래와 같은 방식으로 같은 클래스를 여러 인스턴스로 사용할 수 있수 있습니다.
  • 인스턴스1 = 클래스() 인스턴스2 = 클래스() 인스턴스1.메소드( 인자 값 ) 인스턴스2.메소드( 인자값 )

속성 값 생성

• **init(self)를 선언하고, 안에 속성 값을 넣어줍니다.
• self의 의미는 Java 등의 this와 유사( 개인적인 생각엔 동일한 개념 )
• JAVA의 생성자( 객체 생성 시 초기값을 삽입해주는 느낌 )처럼 사용 가능합니다.
• 속성 접근 시 self.속성명 혹은 "클래스명. 속성명"을 이용하여 사용합니다.
  • self 혹은 클래스명 중 하나로 접근하면 되는데, 클래스명으로 하면 조금 더 가동성이 높아진다.

class 클래스 이름:
    self.속성1
    def __init__(self, 매개변수1,매개변수2):
        self.속성2 = 매개변수1
        self.속성3 = 매개변수2    

• 비공개 속성 (private attribute )
  • 속성 앞에 __ (언더바 2개 )를 삽입해준다.
  • 클래스 외부에서 접근할 수 없다.
  • 비공개 속성을 제어하려면, 클래스 내부에서 제어해야 한다.
    • 클래스 내부의 메소드를 이용하여 호출해서 사용하면 된다

class 클래스 이름:
    def __init__(self, 매개변수1,매개변수2):
        self.__속성1 = 매개변수1
        self.__속성2 = 매개변수2    

매개변수 위치 인수 ( 리스트 등 )로 받기

• 언패킹을 이용하면 된다.
  • 1차원이면, '*' 를사용하고, 2차원이면 '**'를 사용한다

class 클래스 이름:
    def __init__(self, *argv):
        self.속성1 = argv[0]
        self.속성2 = argv[2]

class 클래스 이름:
    def __init__(self, **argD):
        self.속성1 = argvD[ key1 ]
        self.속성2 = argvD[ key2 ]

객체 포함 확인( 클래스의 인스턴스 여부 판단)

• 반환 값 : True ( 포함됨 ) , False (포함 안됨)

isinstance ( 인스턴스 , 클래스 )

정적 메소드 생성

• 인스턴스를 사용하지 않고 바로 사용할 수 있는 메소드
  • len() , range()...처럼 한 번에 사용할 수 있는 메소드들
• 정적메소드 앞에 @staticmethod를 붙여준다
  • @를 붙여서 하는것을 데코레이터라고 부른다 ( 추후 공부하면 따로올리겠습니다.)
• 정적 메소드는 인자값이 self가 아님으로 인스턴스 속성에 접근할 수 없다.
  • 인스턴스 속성에 접근할 필요가 없을때 주로 사용한다.

class 클래스이름:
    @staticmethod
    def 메소드 ( 매개변수1, 매개변수2 ):
        코드

클래스 메소드 사용

• 정적 메소드와 유사함
  • 인스턴스 없이 호출할 수 있다.
• 정적 메소드와 차이점
  • 클래스의 속성 & 메소드에 접근 할 수 있다.

clas 클래스이름:
    @classmethod
    def 메소드(cls,매개변수1, 매개변수2):
        코드

클래스 상속

기본개념

• 생성된 클래스를 재생성하는 것.
  • 부모 클래스의 메소드 등을 상속받아 기능을 더 붙인 자식 클래스를 생성합니다.
• 필자는 '상속'을 배울 때 주로 비유했던 것이 '새'를 이용하여 한 것이 많았습니다. 간단히 말하자면 부모 클래스에 '새'라는 것을 선언합니다. 그 후 자식 클래스에서 상속을 받고, 새로운 기능인 '날 수 있다'라는 기능을 추가합니다. 그러면 자식 클래스에는 '새'라는 것은 선언되어있지 않지만, 상속받았기 때문에 그 기능을 사용할 수 있습니다.
• 글로 적으니 어려운 느낌이지만, 부모 클래스에 적혀있는 모든 코드들 자식 클래스에 저희 눈에는 없지만, 적어졌다 라고 생각해도 될 것 같습니다. ( 실제로는 그런 느낌이지만 그건 아닙니다.)
• 용어
  • 기반 클래스 ( 상속을 해주는 클래스 ) : 부모 클래스 , 슈퍼클래스
  • 파생 클래스 ( 상속을 받는 클래스 ) : 자식 클래스 , 서브클래스

상속 구현

• 클래스 선언 시 인자 값으로 기반 클래스를 삽입하여 사용한다.
• 만약 파생 클래스에서 '__init__'을 선언했다면, super().__init__()을 한 번은 호출해주는 것을 권장한다.
  • 만약 파생 클래스에서 '__init__'을 선언하지 않았다면, 자동으로 기반 클래스의 '__init__'이 호출된다.

    class 기반클래스 : 
        def __init(self):
            코드

    clss 파생클래스 (기반클래스명):
        def __init(self):
              super().__init__()
            코드    

    clss 파생클래스2 (기반클래스명):
        코드

• 만약 위와 같이 구현하지 않고, 명확하게 구현하고 싶다면, 아래와 같이 적어주면 된다.
  • super()에 인자 값으로 (부모 클래스, self)를 삽입시켜준다.
    • 위와 같이 한다면, 명확히 부모 클래스로 연결된다.

    class 기반클래스 : 
        def __init(self):
            코드

    clss 파생클래스 (기반클래스명):
        def __init(self):
              super(기반클래스, self).__init__()
            코드    

    clss 파생클래스2 (기반클래스명):
        코드

메소드 오버라이딩(재정의)

• 기반 클래스( 부모 클래스 )에서 구현한 메소드를 파생 클래스( 자식 클래스 )에서 재정의 하는 것
  • 메소드 명은 동일한데, 안의 구현 내용을 변경하고 싶을 때 사용한다.
• 아래와 같이 동일한 메소드명 및 동일한 인자수를 넣어 구현하면 된다.
• 오버라이딩을 하더라도, super()을 이용한다면, 오버라이딩 이전의 코드를 실행시킬 수 있다.

    class 기반클래스 : 
        def method():
            코드
        def method2(var1, var2):
            코드

# Overriding
    clss 파생클래스 (기반클래스명):
        def method():
            재정의할 코드
        def method2(var1, var2):
            재정의할 코드

다중 상속

• 다중 상속이란 2개 이상의 기반 클래스에서 상속을 받는 것이다.
  • 서로 다른 클래스의 기능을 모두 사용하고 싶을 때 사용한다.

    class 기반클래스 1: 
        def __init(self):
            코드

    class 기반클래스 2: 
        def __init(self):
            코드

    clss 파생클래스 ( 기반클래스1 , 기반클래스2 ):
        def __init(self):
            super().__init__()
            코드    

다이아몬드 상속

• 하나의 기반 클래스 A가 B, C에 상속을 시켜주고, D가 B, C에게서 상속을 받는 모양이다.
  • 구조가 복잡하여 클래스의 탐색 순서를 확인하고 사용하는 것을 권장함
    • 필자가 생각하기에는 그냥 안 쓰는 걸 권장합니다. ( 이유 : 오버라이딩을 했다면, 어떤 메소드를 사용할지 명확하지 않음 )
    • 그래도 사용하고 싶다면, 클래스.mro()를 사용하여 호출 순서를 확인하고 사용하는 것이 좋다.

추상 클래스

기본개념

• 클래스를 생성할 때 기본적으로 구현해야 하는 메소드들의 틀을 만들어 주는 클래스
• 추상 클래스를 상속받은 클래스가 추상 클래스에서 정의한 메소드들을 구현하지 않는다면 에러 발생

생성 방법

• 사용하려면 abc (abstract base class ) 모듈을 반드시 import 해야 한다.
  • from abc import * 혹은 import abc
• 추상 클래스의 메소드는 @abstractmethod를 붙여주어 상속 클래스라는 것을 명시해준다.
  • 만약 import abc로 호출하였다면, @abc.abstractmethod 라고 적어야 한다.
• 클래스 괄호 안에 metaclass = ABCMeta를 삽입한다.
  • ABCMeta 또한 abc.ABCMeta라고 적어야 한다.
• 추상 클래스는 상속시켜 오버라이딩을 하기 때문에 다른 코드를 삽입할 필요가 없다.
  • 기본적으로 추상 클래스는 인스턴스를 생성할 수 없다.

from abc import *

class 추상클래스명 ( metaclass = ABCMeta):
    @abstractmethod
    def 메소드명(self):
        pass
    @abstractmethod
    def 메소드명(var1,var2):
        pass

테마

1.Material Theme

- 전체적인 테마 설정 가능 ( 다크 모드, 라이트 모드.. 등?)

- ctrl + K , ctrl +T를 누르시면 됩니다. ( 그냥 ctrl 누른 상태로 k, t를 순서대로 누르세요 )

-그러면 위에 글씨 뜨는데 원하는 거로 변경하시면 됩니다.

2. Material Icon Theme

- 아이콘이 이뻐져요.  ( 말이 이쁜 것이지 구분이 잘 됩니다.)

코드 

자동 줄정렬

1. Beautify

- 블록별 공백으로 구분해줌.

- 키맵핑을 따로 해줘야 함 ( ctrl + k  , ctrl + s  그냥 ctrl 누르고 ks를 치세요)

    - 검색창에 HookyQR.beautify를 친다음, 더블클릭하신 다음 원하는 키로 맵핑시켜주세요

2. Prettier - Code formatter

- 개인적으로 더 맘에 드는 줄 정렬

-  open settings (Json)를 치신 다음,  가장 아래에 아래 코드를 삽입해주면 됩니다.

"editor.formatOnSave": true,
  "editor.showUnused": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"

- 위 코드를 삽입해주면, 이제 ctrl +s 즉 저장할 때마다 줄 정렬이 됨.

Beautify	Prettier - Code formatter

코드 구분

•  indent-rainbow

• 왼쪽 사진과 같이 앞에 색으로 구분해줘서 파이썬 등을 코딩할 때 너무좋아요!

자동 태그

• HTML 코딩시에 여는태그와 닫는 태그를 한번에 정리 할 수 있게 해줘요!

다음에 더 좋은 것들을 알게 되면 올려보겠습니다.

Prettier이 너무 좋은 거 같네요.. 저장도 안 까먹고, 줄 정렬도 ㅎ.ㅎ.