[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 2일차 기록 및 복습

Front-end 개발 2023. 7. 4. 11:35

1. 우리는 이렇게 공부해요

학습 곡선 어디에 있든지 그저 묵묵히 걸으면 목표한 바를 이룰 수 있다.

남은 비교 대상이 아니다. 초점을 안으로 모아 나만의 속도로 페이스를 잃지 마시고 묵묵히 걸어가라.

뱁새가 황새 따라가는 법은 뒤따라 나는 것이다. 그러면 같은 곳에 착지한다.

매우 많은 지식을 습득하게 될 것입니다.

때로는 너무 많은 지식에 버겁다고 느껴질 것이다.

그러나 버거운 마음을 내려두고 이해가 안되는 채로 내버려 두라.

중요한 것은 다시 나온다. 그러면 다시 공부하면 되다. 2번이 안되면 3번이면 된다.

모두의 속도는 다른다. 또 모두가 시작한 시점이 다르다.

나만의 속도로 페이스를 잃지 않고 묵묵히 걸어가라.

당신의 때가 옵니다. 반드시 옵니다.

2. 멋사 Front-end 공부방법

2-1. 조급해하지 않는다.

2-2. 공부하는 것을 자랑한다.

- github (매일매일), blog, instagram, facebook

- 프로젝트 홍보

- 책을 출간하거나 영상을 홍보

- 운동하는 것도 자랑 (미라클 모닝 챌린지)

2-3. 타이핑 치는 것만이 내 것입니다. (Ctrl + C, Ctrl + V는 최후의 수단)

2-4. 몰입할 때는 미래에 대한 두려움은 내려놓아라

- 두려움은 상다한 에너지를 소모한다.

- 두려움을 구체적으로 글로 풀어내거나, 로직을 시각화하여 표현

2-5. 자신있는 분야는 Skip! (어중간하면 들으시는 것을 권해드립니다!)

2-6. 내일 무엇을 할 지 궁금하다면, 공개된 전 기수에서 배웠던 파일을 참고 (5기, 6기)

3. 실습

3-1. 이론을 실습에서 깨달을 수 있도록 구성, 단계별 학습

4. 개념

4-1. 개념정리

4-2. 1일 커밋

4-3. HTML/CSS/JS Cheat sheet

5. 미션

5-1. 1일 1커밋

5-2. 같이 하는 미션

6. 프로젝트

7. 로드맵: 우리가 배울 것

7-1. Front-end(FE) 언어: HTML/CSS, JavaScript

7-2. FE 프레임워크 및 라이브러리: JQuery, React.js, SASS, Vue.js, Next.js

7-3. Back-end(BE): (언어) Javascript (프레임워크) Express(Node.js) (인프라) AWS, firebase

7-4. 형상관리: Github

7-5. 정보보안: 웹 해킹

7-6. 그 외 알아야 할 지식: 웹 접근성, 알고리즘 및 코테, SEO, HTTP/HTTPS, 리눅스, TDD, 웹팩, IDE

7-7. 공통 목표

- 1Day 1Commit - 최소 60개의 Commit

- Repo 20여개, 10여개의 프로젝트

- 코테 합격을 위한 JS 문제풀이(1차, 2차, 면접 준비까지)

- 2%를 채우지 말고 98%를 채우는데 집중

8. Discord 에서 HTML 쓰기

```html
<h1>hellow world</h1>
```

`<h1>hello world</h1>`

||속았징?|| 눌러보세요.

# hello world
## hello world
### hello world

* hello world
* hello world

1. hello world
2. hello world

9. Error 대응

9-1. 구글링, ChatGPT

9-2. 코파일럿 Copilot

9-3. 양식에 맞춰 제출

9-4. 주의사항: 입사 과제 문제 풀이나 면접 관련 리뷰 안됨

10. 멘토링 이용 가이드라인

10-1. 자습시간 4시 ~ (추가 강의가 있다면 5시 ~)

10-2. 오후 6시 이후에는 질문을 자제 (이력서, 프로젝트 리뷰에 몰림)

10-3. 특강 및 추가 강의는 해당 강사님에게 문의

11. VSC 환경설정

11-1. 메모장으로도 코딩을 할 수 있다.

11-2. 에디터 (편집기)

- 텍스트 에디터: 메모장, edit plus, 아톰, VSC

- IDE: VS, 파이참

- 유료 에디터는 좋다! (자본주의 쵝오) 웹 스톰

11-3. 시작하기 (VSCode 단축키)

- Ctrl + N : 새 파일

- Ctrl + S : 저장

- lorem*3 (emmit 문법)

- Ctrl + , : 세팅
> word wrap : on 로 바꾸기 (길 줄은 줄바꿔서 보임)

- Ctrl + K + S : 단축키 열어보기

- Ctrl + B : 사이드바 없애기

- Ctrl + ` : 터미널 열기

- Ctrl + Alt + 화살표 : 다중 수정 프롬프트

- 수정할 단어 + Ctrl + D : 모두 선택

- Home/End: 한 줄의 시작과 끝

- Ctrl + Home/End : 전체 코드의 시작과 끝

- Alt + 방향키 : 줄 순서 바꾸기

- Ctrl + / : 주석

- Ctrl + [, Ctrl + ]: 들여쓰기, 내어쓰기

- 한 줄 삭제: Shift + Del

- (Extention - htmltagwrap) 더블클릭 + Alt + W : tag 씌우기

12. Extention 설치

- Live server : 가상 서버를 생성하고 웹 브라우저를 통해 결과물을 실시간으로 확인하며 코딩 가능한 툴

- Material Theme Icons

- Rainbow CSV : CSV 보기 편함

- auto rename tag

- Indent-rainbow : 띄어쓰기 색 변경

- htmltagwrap : tag 자동 씌우기

13. Snippets 설정

- Ctrl + P (>snippets) : html.json 설정 : 사용자 지정 단축 명령어 설정

- Tab 할 경우 $1, $2 순서로 커서 이동

{
    "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 템플릿"
    }
}

14. Emmet 문법

14-1. 공부방법

- html 공부하기 전 한 번 공부하시고, html 공부 끝나고 한번 공부하시길 권장

- 중간중간 학습하실 떄 emmet 문법으로 어떻게 표현이 가능한지 고민해보기

14-2. VSCode 환겨에서 Emmet 실습

- 자동완성과 Tab 을 통해 Emmet 실습

- !

- h1

- h1{hello world}

- h1{hello world}*10

- h1{hello world}+p{hello}*3

- (div>h2{hello}+p{world})*2

- .one

- .one.two

- #one.two.three

- table>tr*3>td{hello}*4

- a[href="https://www.naver.com"]

- div[one='1' two='2' three='3']

- lorem

- lorem*3

- lorem3

15. Figma

15-1. 제품 개발 프로세스

- 발주(~ ~ 프로젝트를 하겠다)

- 기획자 기획안(PPT, HWP)

- 기획안을 기반으로 한 디자인 (디자이너, 피그마)

- 디자인을 기반으로 한 프론트엔드 개발

- 백엔드 개발

15-2. 단축키

- Ctrl + Alt + \ : 다중 마우스 제거

- Ctrl + 좌클릭 : 개별 오브젝트 선택

- 오브젝트 선택 + Alt + 다른 오브젝트 마우스 오버 : 오브젝트 간격

16. 기초 상식

16-1. 기초

- 위니브(이름)

- URL(이름) www.naver.com

- IP(주소) 223.130.195.95

- PORT(문) http://paullab.synology.me:5000/ (로그인창)

- PORT(문) http://paullab.synology.me:80/ (로그인창)

- 22, 23, 80(http), 443(https)... : 정해져 있는 포트를 쓸 수 없음

- nslookup www.naver.com

16-2. 내 서비스 만들기 절차

- 도메인 구입 : 카페24 같은 곳. 비싼거 하지만 자동연장이 보장됨 (22,000원/1년)

- DNS 등록

- Server 구입 또는 대여 (클라우드)

- 대여한 서버에 세팅 (index.html 파일 업로드)

- 구매한 사이트로 가서 도메인 URL 에 서버 IP를 연결

16-3. IP

- NAT: 내부 IP 통일

- DDX : anti DDoS 장비 (임계치 방어) (무작위 해킹 -대량의 악성 트래픽- 공격으로 서비스 못하게 함, Deny of Service)
- IPS : (행위 기반) 공인인증서 가져가는거 막기
- FW : (IP 와 PROT 기반) Firewall

- Web Server

- App Server

- DB 서버

17. 본 수업: Github

17-1. 실습과 공부방향

- 1. GUI로 학습

- 2. CLI로 학습

- 3. 스스로 실습

- Git CLI 를 알고 GUI 를 사용해야 Error 에 대처할 수 있다.

- 꼭 암기해야하는 Git 명령어 (git pulll > git add > git commit -m '메시지' > git push)

> git pulll : 원격 저장소에서 코드를 가져옵니다.

> git add : 현재 (로컬) 폴더에 있는 수정되거나 추가된 파일을 추적합니다.

> git commit -m '메시지' : 소스코드에 유의미한 '메시지' version 을 만듭니다.
로컬 저장소에 변경 내역을 올리는 것.

> git push : 원격 저장소에 소스코드를 올립니다.

17-2. Git과 GitHub

- 서로 다르다.

- '깃헙 주소 알려주세요." 이제 깃헙은 취업과 자기소개에 필수

- 유지보수, 저장 용량, 추적관리, 코드공유, 버전관리

- 용량, 협업, 관리에 필수로 회사에서 사용함

- GitHub 을 이해하려면 Git 이라는 프로그램을 알아야함.

- 형상 관리 도구 (Configuration Management) : (Git, SVN, CVS)

- Repository : 폴더

- Public 설정을 해야 잔디가 보임

17-3. Github (GUI)

- 파일 생성방법 : (1) Create new file, (2) Upload files, (3) Dev 모드에서 파일 직접 생성 (. 누르기)

- (체크) Add a README file

- 깃헙 DEV 모드 (VSCode)

- Commit message 는 변경이 안되고 공개되는 것이니 신중히 작성할 것!

- 서비스 페이지로 만드릭 (Settings > Pages > Branch (main) > save

- Custom Domain 으로 도메인 이름을 변경할 수도 있음

- githubgarden, frontend7 새로운 레파지토리 2개 생성

17-4. Git (CLI)

- repository 만들고 명령어 복사

- (git bash) Shift + Insert

- git pull : 나 또는 다른 사람이 수정했을 수도 있으니까 가져오기 함

- git add .

- git commit -m '0704'

- git push

- (프로젝트 첫 시작 신입사원) git Clone 링크 . (띄고 . 안써주면 test 생성됨, 써주면 현재폴더에 풀어짐)

- 각 폴더를 만들고 신입사원들이 순차적으로 들어와 git clone 과 git 4가지 명령어 쓰는 연습

- 3개의 폴더 만들고 갱신 연습해보면 익숙해짐

- 토큰 만들기 note 작성, no expiration, repo 체크 하고 토큰 발급

17-5. Git 설치

- Git 홈페이지에서 OS에 맞는 설치파일 다운로드

- 설치시 나오는 Override the default branch name for new repositories 체크
- repository 이름을 'Master' 라는 키워드 대신 'Main'을 쓰겠다는 의미

- VSCode Termincal (Ctrl + `) 에서 Git Bash 열기

- 위 (17-4) 에서 생성한 Token 을 이용해 운영체제에 맞게 토큰 적용하기
제어판 > 사용자 계정 > 자격 증명 관리자 > Windows 자격증명 > git:https//github.com 찾기 > 편집 > 암호 token 대체

- git 설정
> git config --global user.name "redcontroller"
> git config --global user.email jasinis102@gmail.com

> (확인) git config user.name
> (확인) gt config user.email

- 레파지토리 삭제 (Danger zone)

- 레파지토리 폴더 변경

- 레파지토리 많을 경우 어떻게 해결?
> 폴더 안에 폴더가 들어가도 괜찮지만, .git이 폴더 안에 여러개 있으면 안됨

- 협업할 때 충돌 (같은 파일 수정 시)
> 충돌 코드에서 남길 코드를 선택하는 실습 예정

- Github 무료 강의

- 일단은 익숙해 지고 친숙해 지는 것을 목표로 함

- Git 심화 과정은 3개월 뒤(10월)에 진행
- 빠른 적응을 위해서 스스로 Git 심화를 공부해야할 필요가 있음
(Stage, Version, Branch, Status, Conflict, Error 등에 이해가 없어서 너무 어렵게 느껴짐)

18. 추천 키보드와 의자

18-1. Mc 로지텍 MX Keys 무선 일루미네이티드 키보드

'Front-end 개발' 카테고리의 다른 글

[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 3일차 기록 및 복습 (0)	2023.07.05
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 스터디 계획 세우기 (0)	2023.07.05
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 1일차 기록 및 복습 (0)	2023.07.04
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 상세 훈련과정 (0)	2023.06.27
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 최종 합격 (0)	2023.06.24

ABOUT ME

2023년부터 로그 기록 2023년부터 로그 기록

1. 우리는 이렇게 공부해요

2. 멋사 Front-end 공부방법

3. 실습

4. 개념

5. 미션

6. 프로젝트

7. 로드맵: 우리가 배울 것

8. Discord 에서 HTML 쓰기

9. Error 대응

10. 멘토링 이용 가이드라인

11. VSC 환경설정

12. Extention 설치

13. Snippets 설정

14. Emmet 문법

15. Figma

16. 기초 상식

17. 본 수업: Github

18. 추천 키보드와 의자

'Front-end 개발' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 우리는 이렇게 공부해요

2. 멋사 Front-end 공부방법

3. 실습

4. 개념

5. 미션

6. 프로젝트

7. 로드맵: 우리가 배울 것

8. Discord 에서 HTML 쓰기

9. Error 대응

10. 멘토링 이용 가이드라인

11. VSC 환경설정

12. Extention 설치

13. Snippets 설정

14. Emmet 문법

15. Figma

16. 기초 상식

17. 본 수업: Github

18. 추천 키보드와 의자

'Front-end 개발' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바