최초 작성: 2022년 12월 20일
수정: 2022년 12월 21일
본 글은 다음을 참고하여 작성된 글입니다.
- 패스트캠퍼스 메가바이트 스쿨 박영웅 강사님(ttps://github.com/ParkYoungWoong)의 HTML/CSS 강의
최대한 열심히 이해해서 강의 내용을 기반으로 옮겨 적었으나, 현재 지식의 한계로 인해 잘못 이해하고 사실과 다르게 쓴 내용이 있을 수 있습니다. ㅠㅠ 열람에 참고 부탁드립니다. (피드백 감사히 받습니다.)
1. 수업을 진행하기 전에
-
markdown 마스터 해야(길어야 2시간)
내가 참고한 사이트:
[공통] 마크다운 markdown 작성법
자주 사용하는 마크다운(markdown) 문법 정리 -
JS를 빨리 시작하기.
-
주말은 개발공부 하는데에 시간 쏟기.
-
HTML/CSS 구멍은 최대한 빨리 매우고 넘어와야 함. 클론코딩하면 실력이 쭉 늠. (적어도 3개, 5~개)
-
HTML/CSS는 하면서 불필요한 것 걷어내기 연습 필요
-
JS는 단기간 습득 불가. 초격차 패키지 참고로 보기. 이건 꾸준히.
2. 클론코딩 추천 사이트
- 비추천: 애플(x)
- 추천: 레이아웃 많은 사이트!!! 깃헙(o)
3. NodeJS
- NodeJS 설치 : 추천버전 16. 18도 괜찮(LTS면 ok. Long Time Supported)
홀수는 안정적이지 않아서 실무에서도 안씀. - 런타임 = 실행환경
- NodeJS: 웹브라우저 말고 우리 컴퓨터를 제어하려고 씀.
- 브라우저와 NodeJS의 기능은 다름. 그치만 문법은 같음(JS)
- nodeJS 없이 프앤 개발은 불가능.
- nvm use 14 < 명령어. 여러 버전 깔려있을 때 쓸 수 있음.
4. 수업
1) element랑 tag: 다르긴 한데 본 수업에서는 혼용하여 씀
- typescript는 막히는 기능때문에 유용함. (벗어나면 오류가 생길 수 있기 때문에 막는 것)
2) 웹페이지
- x축: 왼쪽에서 시작 ~ 오른쪽
- y축: 위에서 시작 ~ 아래쪽
3) 기본 파일은 index.html로 저장하기(이름 바뀌면 안 열림)
4) emmet: demo 보기 https://emmet.io/
5) 벡터이미지/비트맵 차이 알기
- 벡터 이미지일 경우: logo 우클릭해서 html 'copy outerHTML' 하면 그대로 svg 복사됨
6) 가끔 CSS 쓰려면 HTML의 기본 값을 없애야 함(초기화)
- 사유: css가 없을 떄 html 이 생김.
- 방법: reset.css.cdn
7) copilot:
MS에서 GitHub에 올라온 코드들을 사용하여 VSCode 작업 시 개발자가 칠만한 커맨드를 자동 추천, 완성시켜준다.
유료 기능. 본 기능과 관련하여 많은 논쟁이 있음.
추가로 참고한 영상:
AI가 나 대신 코딩을? 깃헙 'Copilot' 을 사용해봤다!
깃헙 Copilot! 쓰면 고소각이라고?
8) 주석 많이 달아놓기(나중에 보면 이해가 안됨)
9) 반응형: 하면 좋고 (근데 모르면 해봐야 듯) 근데 이 뒤에도 JS 나오니까 여기선 JS에 힘 안 빼도 됨
- caniuse 웹사이트 참고하기.
10) SASS / SCSS 차이(사용성: scss가 이김)
-
SASS(Syntactically Awesome Style Sheets):
중복적으로 써야 하는거 안써도 되게 함. 단점은 들여쓰기 한 번 잘못하면 다 무너짐. -
SCSS(Sassy Cascading Style Sheets):
SASS의 업데이트 된 버전. CSS코드에 그냥 넣어도 잘 돌아감. 짱.
(로고만 봐도 알겠지만 이름들이 웃기다...)
11) 중첩문법
- 최신 기술... 1-2년 지켜보고서 써야함(사용자 브라우저 호환 문제)
12) google fonts > icon section > 오른쪽의 static icon font > 링크 복사
TIP. 수업때 열심히 하는거 좋은데 그 이후에도 계속 결과물 만들어내는게 중요
13) border 색 : 기본적으로 글자색 따라감.
14) background 이미지는 비율로 자르는걸 전제로 하지 않음
(미디어 쿼리 사용해서 특정 비율 아래로 떨어지면 크기 작아지게 할 수 있음)
15) JS : 노련해야 함. 이거 잘못 짜면 나중에 유지보수 불가능해질 수도 있음(처음부터 다시 짜는게 필요할지도)
- 공부법: 올바르게 출발할 수 있도록 전문적인 강의/참여가 필요하며 완성된 구조를 제대로, 똑같이 만들어보는 연습해야 함.
이론 많이 정리하기. 내용을 이해해야 함.
15-1) 딥다이브 중요도가 일정하지 않음. 뭐가 중요한지 가려야 함. 선택과 집중.
어려운데 중요하지 않은거 막 파지 마세요. (ex. generator 실행컨텍스트)
- 1 일단 이해해보려고 노력한다
- 2 이해 안되면 다시 노력해본다
- 3 안되면 넘어간다!!! (이해못했음이라고 표시하고)
16) 코딩테스트: 취업 위한거. 알고리즘 문제인데 실무에서 비중이 작음.
회사 입장에서는 누가 좋은지 구별이 안됨.
그래서 점수화해야함. 갑자기 유행함 (토익같네...) level 2-3 정도면 충분함.
17) OOP(객체지향 프로그래밍): 프엔에서 별로 안 중요함
17-1) 프엔 아주아주아주 중요한거
- 잘 동작
- 유지보수 가능한(확장성 있는) 코드 짜는거 (읽히는지?)
- 기교 안 중요함(경계!)
읽었을 떄 이해 가야함. 이거 왜 되지? 돌아는 가네..? < 안좋은 코드
- 기교 안 중요함(경계!)
