TO-DO LIST
⦿ 컴퓨터적 사고
⦿ 컴파일
⦿ WEB
⦿ IDE
⦿ 프론트의 구성 요소
- HTML / CSS / JavaScript
⦿ 프론트엔드 개발자의 역할
⦿ VS Code 확장앱
⦿ HTML Self-Closing tag
컴퓨터적 사고
1. 분해 (Decoposition)
2. 패턴 인식 (Pattern Recognition)
3. 추상화 (Abstraction)
4. 알고리즘 (Algoritms) - 문제를 해결하는 과정을 단계적으로 정리한 것
컴파일
: '프로그래밍언어'를 '기계어' 로 변역해주는 과정.
(프로그래밍 언어 : 컴퓨터랑 대화하기 위한 언어, 기계어 : 컴퓨터의 언어)
WEB 이해하기
WEB은 브라우저를 통해 돌아가며 프론트엔드와 백엔드로 이루어졌고 API를 통해 서로 통신을한다
IDE(Intergrated Development Environment)
: 개발을 도와주는 일종의 도구 상자라고 생각하면 됨
프론트의 구성 요소
HTML (HyperText Markup Language)
*mark-up 언어로 프로그램을 동작은 불가!
- <!DOCTYPE html> 문서 버전과 타입 선언
- <html> 문서 전체를 감싸는 태그
- <head> 문서의 메타 정보를 담는 태그
- <body> 실제 사용자에게 보여지는 내용을 담는 태그
CSS (Cascading Style Sheets)
:색상, 크기, 폰트 레이아웃 등의 시각적인 표현
JavaScript
- 프론트엔드의 동적인 요소 추가
- 사용자 입력에 대한 처리 담당 (이벤트)
- 백엔드와 데이터 주고 받는 역할
프론트엔드 개발자의 역할
*사용자가 상호작용하는 웹사이트를 구현하는 작업을 한다.
- 디자인 및 레이아웃
- 사용자 경험 개선(User Experience)
- 백엔드와 소통
VS Code 확장앱
- korean
: Visual Studio Code 를 한글화 시켜줌
- prettier
: 태그의 들여쓰기 or 내어쓰기가 자동으로 정리 시켜 줌
*설정창에서 하기 2개에 대해 작업해준다.
1. formmatter 검색 후 'prettier - code formatter' 지정.
2. format on save 검색 후 Editor: Format On Save 체크.
- Material Icon Theme
: 파일의 확장자별로 아이콘으로 나뉨
- Community Material Theme
: Visual Studio의 테마를 바꿀 수 있음
- HackTheBox
: 해커 느낌의 테마로 바꿀 수 있음
- in your face
: 코드의 에러가 있을 때 아이콘의 얼굴이 재미있게 바뀜
- Git grap
: git이 어떻게 이루어져있는지 그래프로 나타내줌
- open in browser
: 코드를 브라우저를 통해 보여줌
- git lense
: 협업 진행 시 코드를 누가 수정하고 작성해주었는지 정보를 보여줌
- indent-rainbow
: 코드가 어디서부터 어디인지 확인할 수 있게끔 같은 색의 라인으로 나타내줌
HTML self-closing tag
<br> : 줄바꿈 태그
<hr> : 수평선 태그
<input> : input 창 태그
<img> : 이미지 삽입 태그
<link> : 링크 삽입 태그
<meta> : 메타 정보를 입력하는 태그
1주차 1일 소감.
오늘 강의에서는 웹페이즈를 만들 때 참고하라고 Web Design 사이트도 추천해주셨다
오늘 들은 강의는 모두 사전주차에 들었던 강의라서.. 사실.. 감흥이 없다.
열심히 공부하자! 할 수 있다~!
월래 의미는 'Test Driven Development'라고 해서 '테스트 주도 개발' 이라고 한다
개발(코드 작성)전 테스트 코드를 먼저 작성하는 개발 방식 이라는 뜻이라고 하는데 아직까지 와닿지는 않는다ㅎㅎㅎ
빵빵이가 귀엽다고 생각하시면!
아래 빵빵이 얼굴 한 번 클릭 해주세요!
(날 구독해달라옹!!!!)
'취미 공부 > Daily' 카테고리의 다른 글
| 2024. 05. 06 (월) 2주차 - Daily Coding - Day08 (0) | 2024.05.06 |
|---|---|
| 2024. 05. 03 (금) 1주차 - Daily Coding - Day05 (0) | 2024.05.03 |
| 2024. 05. 02 (목) 1주차 - Daily Coding - Day04 (0) | 2024.05.02 |
| 2024. 05. 01 (수) 1주차 - Daily Coding - Day03 (0) | 2024.05.01 |
| 2024. 04. 30 (화) 1주차 - Daily Coding - Day02 (0) | 2024.04.30 |
