<5/19 5일차>
월드 와이드 웹(World Wide Web)
웹은 HTML이라는 문서 형태와 HTTP 문서 전송 프로토콜, URL로 문서의 위치를 표시하는 시스템이다.
HTML
HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어이다. 태그를 사용하여 텍스트, 이미지, 링크 등 다양한 웹 콘텐츠를 구조화하고 표현할 수 있다.
HTTP/HTTPS
HTTP/HTTPS는 웹 서버와 클라이언트 간의 데이터 통신을 위한 핵심 프로토콜이다. HTTP는 평문 통신이며, HTTPS는 SSL/TLS 암호화를 추가하여 보안성을 강화한 버전이다. 클라이언트가 요청을 보내면, 서버가 응답하는 방식으로 동작한다.
오늘 수업은 네트워크와 웹에 대한 이론 수업으로 이루어졌고 VS code로 HTML과 CSS를 활용하여 반응형 웹사이트를 제작하는 실습을 진행하였다. HTML 문서는 크게 헤드와 바디로 구성된다. 요소는 HTML 문서의 구성 요소로, 시작 태그 + 요소의 내용 + 종료 태그로 구성된다.
문단은 웹페이지에서 텍스트를 구조화하는 기본 단위이다. HTML에서는 p 태그를 사용하여 문단을 생성할 수 있으며, 각 문단은 자동으로 위아래에 여백이 추가된다. 문단을 적절히 사용하면 텍스트의 가독성이 향상되기 때문에 p 태그를 항상 적는 습관을 들여야겠다.((코드에서 Enter로 줄바꿈을 하더라도 웹 브라우저에서는 자동으로 줄이 바뀌지 않음❗))
heading 태그는 지금 쓰고 있는 벨로그에서도 쓸 수 있어서 바로 이해하였는데 HTML에서는 h6까지 있다. 텍스트 서식 태그들과 적절히 사용하여 가독성을 훨씬 높일 수 있다. 실습으로 커피숍 메뉴 웹페이지를 만들어보았다.
이미지 파일 형식
- JPEG(Joint Photographic Expert Group) : 실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합, 손실 압축 방식을 사용한다.
- PNG(Portable Network Graphics) : 알파 채널을 사용해 로고나 아이콘 등 투명 배경이 필요한 이미지에 적합, 무손실 압축 방식을 사용한다.
- GIF(Graphics Interchange Format) : 256색상 저장 가능하고 움직이는 이미지(움짤) 가능, 무손실 압축 방식을 사용한다.
실습으로 웹페이지에 테이블을 사용해 이미지 삽입해보았다.
웹페이지에 간단하게 글씨와 사진, 테이블, 링크 등 직접 VS Code로 치며 삽입하는 과정을 처음 배웠다. 마냥 쉽다고 할 순 없겠지만 그래도 내가 직접 쳐보고 해당 내용대로 웹페이지를 만들 수 있다는 게 신기하고 응용할 수 있겠다는 흥미도 생긴다.
<5/20 6일차>
어제에 이어 오늘도 HTML과 CSS를 활용하고 마지막엔 JavaScript 앞부분 조금 실습하는 수업이었다.
웹페이지에서 로그인, 회원가입, 검색 등 사용자로부터 데이터를 입력받기 위한 HTML 요소를 입력 양식이라고 한다. form태그를 기본으로 하여 텍스트 입력, 체크박스, 버튼 등 여러 입력 요소들을 포함할 수 있다. form태그를 활용하여 다양한 입력 양식을 넣어보는 실습을 하였다. 
희망분야에는 label태그를 사용해서 여러 옵션들 select할 수 있게 하였다. 이 사진에서는 맨 위 URL을 보면 알 수 있듯이 이미 내가 이름에 abcd, 주소는 공백, 도시는 서울, 분야는 프론트엔드로 한 번 제출하였다. 이렇게 URL에 전송한 데이터가 노출되면 GET방식, URL 주소에 표시되지 않고 HTTP Request에 포함하여 데이터가 노출되지 않으면 POST방식이라고 한다.
CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 표현을 설명하는 시타일 시트 언어로, 웹 페이지를 꾸밀 수 있다. CSS를 사용하면 이러한 것들을 할 수 있다.
- 텍스트의 크기, 색상, 폰트 변경
- 요소들 간의 간격과 배치 조정
- 배경색이나 배경 이미지 설정
- 애니메이션과 전환 효과 적용
- 반응형 웹 디자인 구현
CSS에는 다양한 속성들이 있으며 텍스트 색상과 배경 색상을 지정하는 스타일 적용 실습을 하였다. 
JavaScript는 동적인 웹 페이지를 작성하기 위해 사용하는 언어이다. 주로 웹 페이지의 동적인 기능 구현, 사용자 상호작용 처리 등에 사용된다.
HTML은 웹페이지의 뼈대
CSS는 예쁘게 꾸미기
JavaScript는 움직이고 반응하게 만들기
너무 복잡하게 알아가려고 하기 힘들어서.. 위처럼 이해하기로 하였다.
입력창과 버튼을 만들고 localStorage에 저장하고 꺼내는 실습을 하였다. 
CSS와 JavaScript는 처음 배우는 내용이었는데 이론 설명만 들었을 때는 완전히 이해가 되지 않았는데 직접 코드를 입력해보니 이해할 수 있었다. 역시 코딩은 직접 손으로 쳐보면서 이해하는 방법이 가장 좋은 것 같다. 한 번 연습해보는 것보단 여러 번 연습해야 더욱 이해할 수 있고 감을 익힐 수 있는데 뒤에 배워야 할 내용이 많다보니 코드를 연습하는 시간이 조금은 부족하다고 느꼈다.
<5/21 7일차>
오늘은 지금까지 배운 HTML, CSS, JavaScript를 응용하여 나의 포트폴리오 웹페이지를 만들어보는 미니 프로젝트를 진행하였다. 강사님께서 샘플을 보여주시고 이를 참고하여 만들어보았다. AI도구 사용에도 익숙해져야 하므로 ChatGPT를 활용하면서 웹페이지를 만들어 볼 수 있었다.
내가 만든 웹페이지의 html 구조는 header, nav, section, footer로 나뉘고 주요 코드 내용은 다음과 같다..
- header의 p문단에 텍스트 색상이 한 글자씩 바뀌는 script을 추가하였다.
- nav는 소개, Skill Set, 프로젝트, 연락처로 탐색 메뉴를 두었고 마우스로 메뉴(id)를 클릭하면 section에서 해당 메뉴(id)로 끊기지 않고 부드럽게 이동하며 section 제목 색상이 바뀌도록 하였다.
- Skill Set에서 HTML, CSS, JAVASCRIPT를 box로 만든 후 마우스를 box에 가져가면 말풍선처럼 입체감있게 떠오르고 box-shadow로 그림자도 주었다.
- 연락처에서 Velog와 e-mail에 링크를 두었고 그냥 적기 심심해보여서 이모지도 추가하였다.
- CSS에 fade-in 애니메이션을 추가하여 페이지가 로드될 때 부드럽게 등장하도록 하였다.
각자 포트폴리오 웹페이지를 만들고 Github에 저장하는 것으로 오늘 수업은 마무리했다. Github는 전공수업 때 조금 만져본 적이 있어서 이해하는 데 크게 어렵지 않았다.
자바스크립트를 처음 배워보고 웹페이지도 처음 만들다보니 이해하는 게 조금 느린 나로써는 코드 작성하는 데 시간이 더 필요하다고 느꼈다. 시각적으로 더욱 보기좋게 만들고 싶은 아쉬움이 조금 남기도 했다. 그래도 내가 직접 코드를 작성하여 웹페이지 결과물을 만들었다는 것이 뿌듯하기도 하고 앞으로 또 웹페이지를 만드는 실습이 있다면 더 잘 만들고 싶다.
<5/22 8일차>
AI는 방대한 데이터를 기반으로 동작한다. AI가 데이터를 분석해서 '예측·판단'을 하느냐, 아니면 데이터를 바탕으로 '새로운 것을 만들어내느냐'에 따라 분석형 AI와 생성형 AI로 나뉜다.
분석형 기반 AI 서비스는 빅데이터를 기반으로 패턴을 인식하고 인사이트를 도출하여 비즈니스 의사결정을 지원한다.
생성형 기반 AI 서비스는 텍스트, 이미지, 음성 등 새로운 컨텐츠를 생성한다.
데이터 분석 방법에 대해서도 설명해주셨다. 나중에 내가 프로젝트를 하게 되면 텍스트 분석을 제일 많이 할 것으로 예상된다.
- 매트릭스 분석 : 행과 열로 구성된 표 형태의 데이터를 분석
- 수치 분석 : 숫자 데이터를 중심으로 평균, 분산, 추세 등을 파악
- 이미지 분석 : 사진, 영상같은 시각 데이터를 분석
- 텍스트 분석 : 문서나 문장같은 텍스트 데이터 분석
인공지능(AI)은 인간이 가진 지적 능력을 컴퓨터 프로그램으로 실현한 기술 전체이다. 머신러닝(ML)은 인공지능의 한 분야로, 컴퓨터가 스스로 학습해서 결과를 내는 기술이고, 딥러닝(DL)은 머신러닝의 한 방법으로, 사람의 뇌처럼 작동하는 인공 신경망을 사용하는 기술이다.
머신러닝에서는 문제를 해결하는 방식에 따라 여러 가지로 나뉘는데, 그중 대표적인 네 가지가 회귀, 분류, 군집, 차원 축소이다.
오늘의 실습은 Teachable Machine으로 주먹, 가위, 보를 분류하는 ai모델을 만들어 보았다.
(내 얼굴 지못미ㅠㅠ..) 각각 기본 100개 이상의 이미지 샘플을 넣었다. 이렇게 모델을 만들고 이 모델을 드라이브에 올린 후 Google Colab으로 불러와서 실행시켰다.
사실 나는 더 다양한 환경에서 여러 변수들을 생각하며 훨씬 더 많은 이미지 샘플이 필요하다고 생각한다. 당연히 정확도가 좀 떨어지긴 하지만 처음 실습해본 나로써는 내가 아직 알아가야 할 데이터들과 사이트들이 참 많다고 느껴졌다. 클라우드와 드라이브에 대한 개념이 아직 내 머릿속에 확고히 그려지지 않아서 이 부분에 대해서는 더 공부해야 할 필요가 있는 것 같다.
<5/23 9일차>
오늘 수업은 클라우드에 대한 전반적인 이론과 가상화 실습으로 진행되었다.
클라우드(Cloud)
클라우드는 인터넷을 통해 컴퓨터 자원(서버, 저장공간, 프로그램 등)을 빌려 쓰는 서비스다.
클라우드 컴퓨팅(Cloud Computing)
클라우드 컴퓨팅은 인터넷을 통해 컴퓨터 자원을 제공하고 사용하는 기술이다.
👍 쉽게 말해 클라우드는 '자원'을 빌려 쓰는 거고 클라우드 컴퓨팅은 그 자원을 사용하고 처리하는 것 !
클라우드에서 제공하는 자원의 유형에 따라 서비스 모델은 크게 세 가지로 나눌 수 있다.
- IaaS (Infrastructure as a Service) : 인프라 제공
- PaaS (Platform as a Service) : 개발 플랫폼 제공
- SaaS (Software as a Service) : 소프트웨어 제공
이 외에도 클라우드 관련 용어, 클라우드 컴퓨팅의 특성과 기술 등에 대하여 배울 수 있었다. 짧은 시간 안에 많은 개념을 듣다 보니 중간중간 놓친 부분이 있어서 주말동안 다시 강의자료를 보며 클라우드 개념을 익힐 예정이다.
오후에는 가상화 실습을 진행하였다. 우선 내 컴퓨터에 VMware Workstation을 설치하고 그 안에 Ubuntu라는 리눅스 운영체제를 설치한다. 이후 리눅스 서버에 접속하기 위해 XSHELL도 설치한 후 본격적으로 가상 환경을 다루었다.
기본적인 명령어들을 입력하며 디렉토리 만들고 지우는 등 연습하는 시간을 가졌다. 나는 전공수업 때 MobaXterm을 사용한 적이 있어서 리눅스 명령어들은 금방 익힐 수 있었다. 그리고 가상 환경과 운영체제에 대해 확실히 이해하기 위해서 가상화 실습 과정을 프로세스로 그려보았다.
챗GPT한테 많이 물어봄 ㅎㅎ;;
< 내 컴퓨터(local) 안에 가상 컴퓨터를 만드는 과정 >
- 먼저 가상 환경이 필요함 ➡ VMWare 설치 ➡ VMWare라는 가상 환경 안에서 Ubuntu 운영체제 설치 ➡ 가상 환경을 만들었음
- XShell(port 22)을 통해 리눅스 터미널로 가상 컴퓨터 다룰 수 있음
🙋♀️이때 우리는 XShell로 리눅스 서버에 접속하려면 리눅스 컴퓨터에 OpenSSH server가 필요함
- 이제 가상 컴퓨터 다룰 수 있음 !
리눅스를 오랜만에 다룰 수 있어서 이번 주에 했던 실습 중에 제일 흥미롭게 실습한 것 같다.
2주차는 주로 개념과 이론적인 내용이 많았던 것 같다. 어려운 부분도 좀 있었어서 챗GPT한테 계속 물어보기도 하고 아직 내가 개념이 부족하다고 느끼는 부분들은 주말 동안 강의자료와 교재를 좀 읽어봐야 할 것 같다. 이론과 실습을 반복하다보니 집중력이 조금 떨어지긴 했는데 다음주 월요일에는 특강을 진행한다고 하니 지루하지 않게 수업을 들을 수 있어서 좋은 것 같다.
