[멋사] 프론트엔드 스쿨 7기 학습 230704

챈스·2023년 7월 9일

멋쟁이사자처럼 FES 7기

목록 보기

3/30

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

1. 앞으로의 성장 및 공부 방법

🌱 우리의 성장

성장곡선

x축: 시도한 횟수나 시간
y축: 성과

저 학습 곡선 어디에 있든지 '그저 묵묵히 걸으면' 목표한 바를 이룰 수 있다.
다른 사람과 나를 비교하지 않고, 초점을 안으로 모아 나만의 속도로 페이스를 잃지 않고
묵묵히 걸어가는 것이 중요하다.

앞으로 매우 많은 지식을 습득하게 될 것이다. 매일매일 달라지는 스스로의 모습을 체감하며,
때로는 너무 많은 지식에 버겁다고 느껴질 것이다. 그러면 버거운 마음을 내려 놓아라.
이해가 안되는 채로 내버려 두어라. 중요한 것은 반드시 다시 나온다. 그러면 다시 공부하면 된다.
2번이 안되면 3번이면 된다. 모두의 속도는 다르고, 모두가 시작한 시점이 다르기 때문에 나만의
속도로 페이스를 잃지 말고 묵묵히 걸어가자!

✍ 공부 방법

1. 조급해 하지 않기

무엇이든 처음엔 어렵다!
1만 시간의 법칙

2. 공부하는 것 자랑하기

github, blog, sns 활용하여 습득한 지식 공유하기

3. 타이핑 치는 것만이 내 것!

Ctrl + C, Ctrl + V는 최후의 수단
타자치며 이해할 수 있도록 노력해보자

4. 몰입할 때 미래에 대한 두려움은 내려놓자

두려움을 구체적으로 글로 풀어내거나, 로직을 시각화하거나, 현재 하고 있는 공부가 어느 부분에 해당하는지 그릴 수 있다면 두려움은 사라진다.

5. 자신있는 분야는 Skip

👶다 처음해보는 나! Skip 없이 열심히 공부하기!

6. 내일은 무엇을 할 지 궁금하다

전 기수에 배웠던 파일들 참고하기

2. Visual Studio Code

⌨ 자주 사용하는 단축키

Mac 단축키

Ctrl ⇒ Command

Alt ⇒ Option

Ctrl이 Control 단축키로 사용할 경우에는 Ctrl(Control)

모든 단축키 : Ctrl + K + S
Settings : Ctrl + , (오른쪽 상단에 Settings.json file open으로 다양한 커스터마이징 가능)
Sidebar : Ctrl + B
Terminal : Ctrl(Control) + Shift + `` (백틱, 틸트, 템플릿리터럴), Ctrl + ``를 눌러도 실행됨.
Command palette : Ctrl + Shift + P, F1
동시 선택 : Ctrl + D (2번 입력, Ctrl + Shift + D와 같은 역할)
동시 수정 : Ctrl + Alt + 방향키(상, 하), Alt + Click, Alt + Shift + Drag, Alt + Shift + i
Quick Open : Ctrl + P
문장의 양 끝 : Home / End (맥북은 fn + 방향키)
코드의 양 끝 : Ctrl + Home / Ctrl + End
복사 / 붙여넣기 : Ctrl + C / Ctrl + V
순서 바꾸기 : Alt + 방향키(위, 아래)
단어 복사 : Ctrl + Shift + 방향키(위, 아래)
주석 : Ctrl + /
들여쓰기 / 내어쓰기 : Ctrl + [ / Ctrl + ], tab, shift + tab
한 줄 삭제 : Shift + Del
파일 생성 : Ctrl + N
파일 저장 : Ctrl + S (저장이 안 된 경우, 파일 이름 옆에 ○표시 되어 있음)

📒 코드 스니펫 = 자동 완성 기능

스니펫(snippet)은 '작은 조각'이라는 뜻으로, 코드 스니펫(code snippet)은 '코드 조각'을 뜻한다.재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다.

👉🏻코드 스니펫 설정 방법
1. Ctrl + P로 명령 팔레트 열기
2. >snippet 입력
3. html.json은 아래와 같이 설정. 기본 양식 모두 지우고 세팅하기

(자주 사용하는 언어에 json파일을 열어 설정해주면 됨)

{
 "Print to console": {
   "prefix": "htmlko",
   "body": [
    "<!DOCTYPE html>",
    "<html lang=\"ko\">",
    "<head>",
    "    <meta charset=\"UTF-8\">",
    "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "    <title>$1</title>",
    "</head>",
    "<body>",
    "	$2",
    "</body>",
    "</html>"
    ],
    "description": "한국어 페이지용 html 템플릿"
   }
}

자주 사용하는 Extension

GitHub Copilot (강력 추천!) : 자동으로 코드 생성(유료)
- Tab: 자동완성
- 다른 제안 : Alt + [ 또는 Alt + ]
- Suggestion 목록 : Ctrl + Enter
- 주석을 앞에 적고 코드를 짜면 됨(한글 잘 됨)
live server (추천) : 서버 구동
live sass compiler (추천) : sass 자동 컴파일
korean : 한국어 패키지
prettier (추천) : 자동 정렬
Material Icon (추천) : 아이콘 꾸미기
Material Theme : 테마 꾸미기
rainbow csv (추천) : CSV 잘 보이도록
Visual Studio IntelliCode : 자동완성
bracket pair colorizer : 괄호 다르게
auto rename tag (추천) : 태그 닫기 자동 수정
css peek : css 확인
css navigation : html에서 연결된 css 바로 확인
font awesome auto-complete : 폰트 어섬 아이콘을 실시간으로 미리 보여줌
html css support : css에서 자동 확인해서 자동완성
(Python) pylance, formatter autopep8, flake8
indent-rainbow (추천) : 들여쓰기마다 색 다르게
htmltagwrap (추천) : text를 wraping해줍니다. 원하는 택스트 선택하고 Alt + W 누르면 기본 p 태그로 감싸짐.
auto close tag : 자동으로 태그를 닫음
auto import
Trailing Spaces
color highlight
eslint (추천, 기본 설치)
power-mode
print(추천) : 코드를 프린터로 출력해서 볼 수 있음
Gitmoji : git 이모지를 사용할 수 있음