230403/ 스터디 1일차 회고: 인강을 듣는방법 및 HTML 기초

10주간 강의를 들으며 코딩을 하게 되었습니다.

첫날인 오늘은 강의를 어떻게 들을지 전략을 세우는데 집중했습니다.

 

 

인강 듣기 전략

 

노마드코더의 니콜라스 선생님, 잘 가르치십니다.

하지만 인강을 가만히 듣다 보면 무슨 내용을 말하고 있는지 모를 때가 많습니다.

그래서 선생님의 패턴을 파악해서 강의의 목차를 생각하며 듣기로 했습니다.

 

제가 파악한 강의 패턴은 다음과 같습니다.

 

1. 엄격한 정의 소개 후 해당 정의 디스

 - 사전적 정의를 보여준 후 비웃는다. 이 과정은 생략되기도 한다.

 

2. 비유를 활용한 심상모델 제시

 - 이해하기 쉬운 개념모델을 제시한다.

 

3. 실제 예제 코드 제시

- 실제 코드로 형태 및 동작을 보여준다.

 

4. 이전에 소개한 개념과의 비교 

  - 좀 전에 배운 개념과 현재 공부 중인 개념의

    심상모델 및 예제코드의 형태, 기능을 복합적으로 비교한다.

 

5. 요약

  - 짧게 복습하고 넘어간다.

 

6. 더 공부할 것 제시 

   - 현재 배운 개념을 활용하는 더 심화된 주제 혹은 같은 문제를 해결하는 다른 언어나 개념을 소개한다.

     실력을 더 향상시킬수 있는 길을 자신의 유튜브채널과 강의에 대한 바이럴 마케팅을 통해 제시한다.

 

 

강의를 듣는 내내 현재 어느 패턴인지 생각하면서 강의를 들으니 

더 집중도 잘되고 내용을 일목요연하게 정리하며 들을 수 있었습니다.

 

 

 

TIL

지식: 브라우저 구성원리

브라우저는 html, css, javascript 이 세 가지 text로 웹페이지를 구성한다.

HTML은 웹페이지의 content, CSS는 design, javascript는 interaction을 담당한다.

 

 

기술: vscode에서 프로젝트 만들기 유의사항

1. 처음에 오픈한 폴더에 모든 파일이 들어가야 한다.

 

프로젝트를 시작할 때, vscode의 상단바의 File-Open폴더를 통해

폴더를 생성하거나 이미 존재하는 폴더를 연다.

 

이후 프로그램을 구성하는 파일들은 전부

처음에 vscode를 통해 열었던 폴더 내부에 생성해야 한다.

 

2. 파일을 명명할 때는 전부 소문자를 사용해야 한다.

 

파일이름의 첫 글자를 대문자로 해서 프로젝트가 실행되지 않는 경우가 많이 있다.

되도록 전부 소문자를 사용하자.

 

3. 파일에 번경사항이 존재 시 반드시 저장하자.

 

번경사항을 저장해야 수정된 내용이 반영된다.

저장하지 않은 경우엔 파일 상단의 X표시가 동그란 모양으로 바뀐다.

 

 

 

새로 알게 된 것.

상호작용형(interactive)과 반응형(responsive) 웹페이지의 차이

 

interactive 웹페이지:

 

유저의 행동(키입력, 마우스입력 기타 등등)에 반응하는 웹페이지이다.

css로도 기본적인 것은 구현할 수 있다.

하지만 서버와의 상호작용, 또는 복잡한 애니메이션과 같은 기능들은

자바스크립트로 구현해야 한다.

 

responsive 웹페이지:

뷰포트(접속 기기의 화면, 브라우저의 사이즈)에 반응하는 웹페이지이다.