1)학습한 내용

웹사이트 제작에 필요한 기초 지식

- 웹사이트 제작에 사용되는 개발 언어

HTML

정보영역을 담당하는 개발 언어
시각적인 정보(텍스트, 이미지) ex) 로고, 슬로곤

CSS

디자인적 영역을 담당하는 개발 언어
버튼의 색깔을 넣거나 폰트 색상이 다른 경우 적용, 공간의 특정 구역 설정

Java Script

디자인적 영역을 담당하는 개발 언어
마우스를 올렸을 때 어떠한 효과가 나타나는 기능을 만들거나
메뉴를 클릭했을 때 컨텐츠가 달라지는 기능을 만드는 것

웹사이트를 하나의 건축물이라 생각하고 집을 짓는다는 가정 하에

HTML -> 건물의 설계도면
CSS -> 건축물을 올리고 난 후의 인테리어 작업
Java Script -> 지문 인식, 소리인식 시스템 과 같은 기능적인 부분 담당

- 웹사이트의 레이아웃 종류

크게 4가지(정적, 동적, 적응형, 반응형)로 분류되어 진다. 최근에는 특정 구역에는 적응형, 다른 구역에는 반응형과 같이 혼합 형태로 제작하는 것이 일반적이다.

Static Layout(정적인 웹사이트)

-웹사이트 접속 후 브라우저 폭을 줄이거나 늘였을 때 공간에 대한 크기의 변화가 없다.
-항상 원래의 틀을 유지한다.
-주로 예전에 만들어진 웹사이트 대부분이 이에 해당한다.

Liquid Layout(동적인 웹사이트)

-왼쪽에서 오른쪽 끝까지 전체 공간을 차지하고 있다.
-브라우저 폭을 줄였을 때 공간의 크기 자체가 계속 브라우저 크기에 맞게 줄어든다. -레이아웃의 구조 자체는 변하지 않으나 공간의 크기가 유동적으로 변경될 뿐이다.

Adaptive Layout(적응형 웹사이트)

-브라우저 폭을 줄였을 때 뚝뚝 끊어지면서 공간의 크기가 달라지고 최종적으로 레이아웃의 형태도 변한다.
-웹 사이트의 구조 자체도 변한다.
-과거와는 다르게 사용자들이 웹사이트 접근하는 기기가 매우 다양해진다.
pc, 노트북, 태블릿, 스마트폰, 등 다양한 기기에서 맞춰 웹사이트를 제작해야할 필요성이 생겼다.
-브라우저 폭을 줄였을 때 특정 시점에서 공간의 크기가 바뀌면서 최종적으로 레이아웃의 구조도 변한다.

Responsive Layout(반응형 웹사이트)

-브라우저 폭을 줄였을 때 공간이 뚝뚝 끊어지지 않고 자연스럽게 줄여진다.
-특정 지점에서 적응형과 마찬가지로 모바일 버전으로 구조가 변화한다.

- 다양한 웹사이트 종류를 접할 수 있는 레퍼런스 사이트

국내

• 디비컷( https://www.dbcut.com/bbs/index.php)
  레퍼런스 공부하기에 좋은 사이트
• 지디웹(http://www.gdweb.co.kr/main/)

국외

• 어워즈(awwards)( https://www.awwwards.com/)
  전세계 계발자,디자이너가 평가를 할 수 있는 곳
  케이스스터디시에 수상작들 위주로 보면 도움.
• 미디어쿼리(https://mediaqueri.es/)
  pc버전 뿐만 아니라 모바일 버전의 레이아웃도 한눈에 확인 할 수 있는 곳.
• 스트레이트라인(http://bm.straightline.jp/all)
  거의 대부분 일본 웹사이트 위주. 일본에서는 어떤 느낌으로 웹사이트를 제작하는지 알 수 있다.

기초 개발 용어

프론트엔드

웹사이트, 웹서비스를 만들었을 때 웹사이트를 제작을 하고 서버쪽과의 데이터 통신 연결작업을 진행하거나 버튼을 클릭했을 때 다양한 인터렉션 효과를 구현하는 개발자. 고객이 보는 모든 화면의 페이지를 제작하는 사람을 프론트엔드 개발자라 한다.

백엔드

사용자가 보지 못하는 뒷단의 영역, 예를 들어 로그인시 등록된 아이디인지 체크하거나, 기입한 비밀번호가 맞는 번호인지 확인한다거나 고객정보를 안전하게 관리하는 등 프론트엔드에 있는 사용자들이 취하는 행동들을 처리합니다. 데이터를 저장하고 관리하며, 웹사이트의 클라이언트 측(client-side)에서 모든 것이 매끄럽게 작동할 수 있게 해주는 일을 담당하는 개발자를 백엔드 개발자라고 한다.

크로스브라우징

웹사이트를 제작한다 했을 때 크롬, 파이어폭스,오페라, 사파리 등 여러 브라우저에서도 동일하게 출력이 되어야 하는데 여러가지의 브라우저에 맞춰 앞단 작업을 하는 행위 자체를 크로스브라우징이라고 한다. 웹사이트 제작할 때 고려해야 할 부분이 많은데 그 첫번째 요소가 크로스브라우징이다.

웹표준/웹접근성

• 웹표준
  HTML언어를 사용해서 눈에 보이는 정보를 기입한다고 했을 때 정보의 성격에 맞는 태그를 사용해주어야 한다. 정확한 태그에 맞춰서 작성하는 것이 중요하다.
• 웹접근성
  내가 만든 사이트가 장애인 분들이 이용하는데에도 문제가 없어야 함으로 그런 부분까지 고려해서 웹사이트를 제작하는 기법

FTP(File Transfer Protocol, 파일 전송 프로토콜)

서버와 클라이언트 사이의 파일 전송을 하기 위해 연결해 주는 채널의 역할을 담당 한다.

라이브러리

다른 개발자가 이미 기존에 만들어 놓은 어떤 기능의 결과물을 라이브러리라고 한다.
웹사이트를 제작 할 때에 클릭을 했을 때 컨탠츠가 바뀌는 효과, 이미지가 슬라이딩 되어지는 효과와 같은 기능들은 이미 다른 기존의 개발자분들이 많이 만들어 두었다. 매번 새롭게 만들어 내기 보다는 다른사람이 만들어둔 기능을 가져다 쓰는 것이 일반적이다.
ex) 이미지슬라이딩 라이브러리, 탭매뉴 라이브러리, 팝업 라이브러리… 등)
모든 기능을 매번 0에서부터 새롭게 개발 할 필요는 없다.

- HTML 언어는 무엇인가?

Visual Studio Code (vscode, 비주얼 스튜디오 코드)

HTML, CSS, JAVASCRIPT를 타이핑 할 때 사용되는 에디터, 마이크로소프트사에서 만든 에디터이며, 사용료가 무료여서 주로 입문자들이 많이 사용하는 편이다.

Sublime Text (서브라임 텍스트)

vscode와 마찬가지로 HTML, CSS, JAVASCRIPT 웹개발을 할 때 사용되는 에디터. 사용료 역시 무료이다.

Webstorm

위의 두가지와 같은 웹 개발을 할 때에 사용되는 에디터이다 하지만 유료로 구입해서 사용해야 한다.

어느 것을 선택 하든 직접 경험해 보고 본인에게 맞는 에디터를 찾아 사용하는 것이 좋다.

크롬브라우저는 프론트엔드 개발시에 오류 체크나 개발 코드를 확인할 때 다른 브라우저와 달리 매우 쉬운 편이다.

독학으로 개발공부를 할 수 있는 다양한 채널

유튜브

• 생활코딩
  재생목록에서 WEB1-WEB2-WEB3 순으로 시청
• 얄팍한 코딩사전
  어려운 개발용어를 쉽게 입문자 입장에서 해설해주는 채널
• The new boston
  Html tutorial playlist, XHTML and CSS tutorial에서 css부분만 시청
• Web bos
  재생목록에서 Javesccript30 강좌 들어보기 -> 영상 통해 30개의 기능 만들어보는 것 가능

텍스트 기반 공부가능사이트

Freecodecamp

W3schools

모던 자바스크립트(한글)

• 입문자에겐 어려울 수 있어서 유튜브로 기초를 쌓은 후 학습해야 함.

Edwith(에드위드)

알아두면 좋은 서브사이트

Statecounter

• 전세계 웹사이트 점유율을 확인 할 수 있다

Can I use

• 다양한 용어들이 브라우저의 버전에 영향을 받는지 아닌지를 검색할 수 있다(호환성 유무체크)
  (크로스브라우징) 내가 사용할려는 용어가 어느 버전부터 사용이 가능한 지 알아볼 수 있다.

Nuli

• 웹사이트를 제작하는 다양한 노하우를 정리해둔 홈페이지

HTML validator

HTML 코드 언어 구조가 웹 표준에 맞게 잘 작성이 되었는지 체크할 수 있는 사이트
Warning – 권고
Error – 반드시 수정 필요
코드펜 – 다른사람이 만들어놓은 결과물을 공유하고 확인할 수 있는 사이트 (별표!!)

2)학습내용 중 어려웠던 점 또는 해결하지 못한 것들

• 오늘 녹화강의를 듣고 기록을 남기는 게 처음인데 실시간 강의 때는 중간중간에 강의를 들으면서 필기를 해두고 저녁에 한번 복습하면서 정리를 할 수 있었지만, 오늘은 오전에는 강의를 멈춰가면서 수업을 들었더니 너무 지체가 되어 오전에 할당된 강의 분량을 다 듣지 못했습니다.
  그래서 오후부터는 오전에 다 듣지 못한 강의 부터 쭉 쭉 들었지만, 코딩을 해 보면서 오류가 나서 원인을 찾아보고 다시 해 보는 과정에서 강의를 멈추고 다시 반복을 거치다 보니 시간이 매우 많이 소요가 되었습니다.

  원래의 주어진 수업시간 내에 다 끝내 보고자 우선 강의만 쭉 들었는데도 시간이 모자랐고, 늦게까지 너무 오랫동안 모니터를 보고 있으니 피로도가 심해 집중력이 떨어져 진도도 안나가고 이해가 잘 가지 않을 뿐더러 오히려 내일 수업에도 영향을 줄 꺼 같아 우선은 오늘은 한 만큼까지 하고 내일 좀 더 일찍 시작해서 못한 부분을 해야 할 것 같습니다.

  강의를 들으면서 동시에 기록도 할 수 있게 되면 가장 좋을 것 같은데 오늘은 너무 꼼꼼하게 놓치지 않고 다 필기를 하려다 보니 너무 시간이 많이 들었던 것 같습니다. 게다가 벨로그를 처음 사용해보다 보니 이 역시 사용방법부터 검색해야 하고 블로그 작성에 있어서도 어느 부분까지 기록으로 남겨야 하는지 감이 잘 오지 않는데 시간을 너무 많이 들이지 않는 선에서 적당히 타협을 해야 할 것 같습니다.

3)해결 방법

지난 2주 정도 수업을 해보면서 강의를 듣고 동시에 실습을하니 오후만 되면 컴퓨터가 느려저서 불편함이 느껴진 탓에 지난 주말 태블릿을 구매했지만 아직 제대로 작동법을 숙지 하지 못한 탓인지 제대로 활용하지 못해 조금 어수선함이 있었습니다.하지만 컴퓨터의 작동이 훨씬 원활해 진 만큼 앞으로 조금 조작이나 활용에 익숙해 지게 되면 보다 수월하게 진행 할 수 있을 것 같습니다.

깃허브와 벨로그와 같이 블로그에 기록을 하는 부분에 대한 가이드라인이 상세하게 지정되어 있는 것이 아니다보니 사실 조금 막막한 부분이 없지 않아 있었지만, 구글링을 통해 기존에 다른 분들이 작성한 글을 참고해서 분량이나 내용을 정해서 작성해 나가야 할 것 같습니다.

중간중간에 임시저장을 눌러주는 습관을 가지도록 모니터 메모장에 임시저장하기를 띄워두고 있습니다. 오늘 중간중간에 대기모드에 두고 잠시 휴식을 했더니 직전에 했던 내용들이 몇몇 복구가 되지 않는 상황이 생겼습니다. 100%자동으로 저장되는 부분은 아닌거 같으니 항상 작성 중간 중간에 임시저장을 눌러 주어야 겠습니다.

4)학습 소감

지난 2주간 해오던 머신러닝과 또 조금 새로운 부분을 공부 해보다 보니 낯선 순간들이 중간 중간에 있었지만 복습과 내일 또 수업을 들으면서 조금씩 나아질 것 같습니다. 더군다나 오늘은 수업만 듣지도 못하고 블로그 작성을 해야한다는 생각에 제대로 집중하기가 어려웠지만 내일은 오늘과 다르게 짧게 수업을 듣고 바로바로 기록을 작성하는 방식으로 한번 정리를 해 볼까 합니다. 몇번의 시행착오를 겪고나면 금방 정상 궤도의 속도에 오를 수 있지 않을까 기대해봅니다.