<To-Do List>
- 강의 01. orientation ~ 10. HTML이란? 까지 듣기
- 일일보고 작성하기
<배운 내용 요약 정리>
01. Orientation
- 개발은 학문이 아니라 훈련이다
- 마음가짐 = 버그에 대해 두려워 말고 디버깅 하는 과정에 초점을 맞춰 진행해야 한다 !
02. 컴퓨터에 대해 이해하기
- 컴퓨터적 사고를 해야함 : 분해 -> 패턴인식 -> 추상화 -> 알고리즘
- 결국 문제를 구조화해서 알고리즘을 도출하는 것
>> 알고리즘이란?
- 문제를 해결하는 과정을 단계별로 정리한 것 -> 좋은 알고리즘을 사용하여 효과적으로 해결하기 위해 노력해야 함
>> 프로그래밍 언어란?
- 컴퓨터에게 정확한 명령을 내리기 위해서는 프로그램언어를 이용해서 의미를 전달해야 함
>>> 결국 개발을 잘하기 위해서는 프로그래밍 언어와 알고리즘을 배워야 함
03. 블록코딩 실습하기
- 블록크딩으로 컴퓨터처럼 생각하기 연습
- 스크래치 프로그램을 통해 5가지 실습(일부 코드 사진첨부)
1. 키보드로 캐릭터 움직이기
2. 쥐의 움직임을 따라 다니는 고양이 두마리
3. 움직이는 백마
4. 톰과 제리의 수학문제
5. 버튼 조종 박쥐 만들기
04. 웹 로드맵
>> 웹이란?
- 브라우저에서 동작하는 것
- 웹사이트에서 우클릭을 통해 검사메뉴를 들어가면 html을 볼 수 있음
>> 프론트엔드란?
- 사용자가 사이트에 들어와 바로 보게되는 화면 (html, css, javascript 등)
>> 백엔드란?
- 데이터를 처리 가공해서 앞단으로 보내주는 것(python, MySQL 등)
>> API란?
- 프론트엔드와 백엔드를 서로 연결해주는 것이 API
- 서로 다른 소프트웨어 간에 정보를 주고 받기 위한 통신 규약
05. 수강 환경 세팅
06. 커리큘럼
-POC 방식 (p = 문제, 인식, 정의 / O = 벤치마킹, 리서치 / C = 협업, 문제해결)
- 교육기간 동안 프론트엔드, 백엔드, API를 다루고 추후 내가 만든 작업물을 배포까지 한다
- 재밌을 것 같아서 기대된다 !
07. Big Picture
- 정적홈페이지 만들기 진행예정 (서버에서 데이터가 업데이트 되지는않는 디자인만 되어있는 홈페이지를 구성해볼 것임)
- 드리블닷컴을 통해 웹 디자인 참고 가능
https://dribbble.com/search/web-design
Browse thousands of Web Design images for design inspiration | Dribbble
Atopa Website Design: business landing web page, site designer
dribbble.com
- 다음부터 CSS, HTML을 이용해서 당근마켓 클론코딩을 해볼 것
08. 프론트엔드란
>> HTML = 뼈대
>> CSS = 옷 입히기
>> JavaScript = 구동시키는 것
09. VS Code 환결 설정하기
>> IDE란?
- 통합 개발 환경
- 개발 생산성 향상
>> 환경설정
- 여러가지 확장프로그램을 소개해주셨는데 내가 정말 유용하다고 생각이 든 건 Prettier 이다.
- 원래도 VS Code를 사용했어서 다른 익스텐션은 좀 이미 있었는데 자동정렬하는 건 따로 설치 하지 않았어서 단축키로 정렬을 했었는데 유용했다.
10. HTML이란? - 웹페이지의 뼈대
>> span과 div 태그배우기
- span = 줄바꿈 없이 마지막 단어 바로 옆에 출력됨
- div = 한 공간을 전부 차지하기 때문에 줄바꿈이 일어남
>> 레이아웃 태그
- <header>, <section>, <main>, <nav>, <footer>, <aside>
- div 태그만 계속 작성하다보면 가독성이 좋아지지 않기에 이를 예방하기 위해서 레이아웃테그를 잘 사용하는 법을 배워나가야 한다.
>> self closing 태그
- div 태그 안에서 사용하는 태그들로 줄바꿈, 수평선 등 여러가지가 있으며 "html tag mdn"으로 구글링 시 많은 태그에 대해 알 수 있음
>> 강의를 들으며 주석 달아 정리한 코드첨부
<!-- html:5 라는 단축키를 작성하면 아래와 같이 전체적인 구조가 생성 됨 -->
<!DOCTYPE html>
<!-- 문서 버전과 타입 선언 -->
<html lang="en">
<!-- 문서 전체를 감싸는 테그 -->
<head>
<!-- head는 문서의 메타정보를 담는 테그 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- body는 직접적인 콘텐츠를 담는 테그 -->
<div>여기는 헤더부분입니다.</div>
<!-- <header>여기는 헤더부분입니다.</header> -->
<!-- 위에 처럼 적어도 똑같음 -->
<!-- dev테그로만 계속 쓰다보면 코드를 보기가 어려워져 레이아웃 테그를 잘 사용하는 법을 배워야 함 -->
<div>여기는 메인 부분입니다.</div>
<div>여기는 <br />메인 부분입니다.</div>
<!-- br은 줄바꿈 테그 -->
<div>여기는 끝부분입니다.</div>
<div>
여기는
<hr />
끝부분입니다.
<!-- hr은 수평선 테그 -->ㄱ
</div>
<div>
<input type="text" />
<!-- input은 input창을 띄우는 테그 -->
</div>
</body>
</html>
<하루를 돌아보며>
>> 스크래치를 통해 블록코딩을 할 때 5번실습 과정에서 어려움이 있었다.
- 이때 나는 처음에 박쥐에 대해서 코드를 시작버튼을 눌렀을 때 만약 빵에 닿았다면 빵 신호를 보낸다 이런식으로 했는데 생각해보니 이렇게 하면 시작버튼을 눌렀을 그 시점에만 한번 닿았는지를 확인하고 반복적으로 확인하지 못해 문제가 된것이었다.
- 이를 해결하기 위해 '스크래치 닿았을 때 없어지기' 등으로 검색을 하며 해결을 하려 했다.
- 나는 한 구간이 멈춰지면 다음 단계로 쉽게 나가지 못하고 계속 붙잡고 있는 점에 있어서 부족하다는 것을 느꼈다. 다음 강의를 보니 바로 설명을 해줬는데 해결할때 까지 넘어가지 않으니 그걸 모르고 엄청 지체가 되고 또 지치고 했던 것 같다. 완벽하게 하고 넘어가려는 마음가짐을 조금은 바꿔야겠다고 생각했다.
>> 이 부트캠프에서는 프론트앤드과정에서 CSS와 HTML을 다룬다.
- 나는 플러터를 이용해서 앱개발과 관련한 프론트엔드를 접한 경험은 있지만 웹은 해본적이 없고 CSS와 HTML도 제대로 배워본 적이 없다.
- 작년 여름방학기간에 혼자 해보려 책도 구매해서 해보았지만 의지박약으로 실패한 경험은 있다... 이번 기회에는 제대로 공부를 하고 싶다는 열정이 생긴 것 같다. 열심히 해야지 !!!
>> HTML을 배우며 나온 레이아웃 태그에 대해 좀 더 알아보았다.
- 강의에서는 레이아웃테그의 이름 정도는 몇개 알려주지만 그것의 기능 등은 설명이 나오지 않아 검색을 해보았다.
>> 추가적으로 semantic 태그에 대해 알아보았다.
- 강의를 다 듣고 넘어갈 때 과제에서 semantic 태그라는 것이 나왔다 이게 뭔지 자세히 알지 못하겠어서 검색을 더 알아보았다.
- 이를 사용하면 검색엔진 최적화에 도움이 된다.
- 레이아웃 구성에 용이하기 때문에 웹페이지의 구성을 좀 더 명확하게 표현이 가능하다고 한다.
'슈퍼코딩 부트캠프 > week1' 카테고리의 다른 글
| 슈퍼코딩 웹개발 부트캠프 1주차 신입연수원 후기 (0) | 2024.06.23 |
|---|---|
| 2024.06.21(금) 슈퍼코딩 부트캠프 신입연수원 week1 Day5 일일보고 (1) | 2024.06.23 |
| 2024.06.20(목) 슈퍼코딩 부트캠프 신입연수원 week1 Day4 일일보고 (0) | 2024.06.22 |
| 2024.06.21(수) 슈퍼코딩 부트캠프 신입연수원 week1 Day3 일일보고 (0) | 2024.06.21 |
| 2024.06.19(화) 슈퍼코딩 부트캠프 신입연수원 week1 Day 2 일일보고 (0) | 2024.06.20 |
