3/26 (일)
👥 조별 과제
⚡ 스터디 시작 전 각자 Ice Breaking 소개하기 !
⚡ 개념 정리하기 !
웹 브라우저 인터넷 동작하기 위해서는 최소 2대의 컴퓨터 필요 Web browser와 Web server는 서로 정보를 교환함. Web browser: 정보 요청. 고객 (client컴퓨터라고 칭함) -주소에 http://info.cern.ch/index.html 입력 시 인터넷의 전기적 신호 통해 Web server에 정보를 전송.(정보: index.html 파일 원한다는 내용 포함) 내 컴퓨터의 문서를 web browser 통해 볼 수 있도록 하려면 1)직접 Web server 설치-장점: 컴퓨팅 활동에 대한 이해도 상승 2)대행 업체 부탁-장점: 편리함 웹 브라우저의 browse는 ‘가게 안을 둘러보거나 책을 군데군데 펼쳐 읽는다’는 뜻을 가지고 있음. 여기에 웹이 붙어서 웹 페이지를 둘러볼 수 있게 해주는 프로그램을 웹 브라우저라고 칭함. 웹 브라우저의 예시- 인터넷 익스플로러, 파이어폭스, 구글 크롬, 사파리 등
웹 서버 Web server: 정보 응답. 서비스 제공 (server컴퓨터라고 칭함) -info.cern.ch 주소 가짐 -하드디스크 보유 -파일 저장됨 사용자에게 웹을 제공하기 위한 서버로, 웹 브라우저 간의 데이터 통신을 위해 필요한 기술 웹에서 사용자가 서비스를 요청하는 경우, 웹 서버는 네트워크를 통해 HTML로 구성된 웹페이지를 제공함. 웹 서버는 웹 브라우저와 같은 클라이언트의 요청이 있는 경우, 이를 받아들여 요청한 페이지를 응답함. 웹 서버는 정적인 데이터를 주로 처리하며, 동적인 페이지를 서비스하기 위해서는 웹 애플리케이션 서버(WAS)에서 다양한 로직이나 데이터베이스와의 연동을 이용함. 웹 서버를 사용하기 위해서는 웹 서버 프로그램을 설치해야 함. 대표적인 웹 서버 프로그램 아파치(Apache), HTTP 서버
클라이언트와 서버 서버 : 서비스를 제공하는 컴퓨터 클라이언트 : 서비스를 사용하는 컴퓨터(휴대폰 기기 등 서비스를 사용하는 모든 기기) Ex) 게임 클라이언트 : 온라인 게임에서, 유저가 서버(Server)에 접속해 게임을 즐길 수 있도록 해주는 프로그램
서버에서 클라이언트로 인터넷을 통해 연결되어 데이터를 요청(클라이언트에서) 응답(서버에서) 받음
웹 호스팅 호스팅 : 호스팅이란 서버 컴퓨터의 전체 또는 일부 공간을 임대 해주는 서비스 웹 호스팅 : 호스팅과 같이 서버 컴퓨터의 공간을 임대 해주는 서비스이다. 웹 호스팅은 하나의 서버에서 여러 사용자(서비스 이용자)의 사이트를 띄워주는 방식으로 서버를 이용한다. (다른 호스팅에 비해 저렴)(저렴한 만큼 여러 서비스를 한 서버에서 이용하여 단점이 있어 전체 컴퓨터 공간을 사용하는 서버 호스팅을 쓰기도 한다. )
프론트엔드 / 백엔드 프론트엔드는 사용자가 보는 화면을 관할한다. html, css, javascript를 주로 사용한다. 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 주로 만든다. 클라이언트(사용자가 보는 부분을 다룸) 언어: html-뼈대/css-꾸미기/javascript-애니메이션 처리 백엔드는 데이터를 처리하고 가공한다. 서버(사용자는 보지 못하는 것을 다룸), 웹사이트 클라이언트 측에서 매끄럽게 작동하도록 해 준다. js, java, php, python 등을 주로 사용한다.
프레임워크 개발할 때 세팅된 것을 말한다. 기본적인 기능을 갖추고 있어 개발자가 필요한 기능을 구현하는 데만 집중할 수 있다. 프론트엔드, 백엔드 모두 존재한다. 백엔드 웹 프레임워크는 각 언어마다 존재한다. 웹 개발 환경이 미리 준비됨, 백엔드 웹 프레임워크 통해 정적인 사이트(=일반적인 사이트) 제작 가능하지만 불필요한 데이터 가져오는 단점이 있음. SPA-전체 페이지를 로드하는 정적 사이트와 달리 필요한 부분만 가져옴. SPA를 위한 프론트앤드 프레임워크도 존재(언어=javascript) Anguler, react, vue의 3가지
html, css, 자바스크립트 각각의 용도 (1) html 웹페이지의 큰 뼈대. 하이퍼텍스트(웹에 있는 다른 미디어들로 이동할 수 있도록 해주는 텍스트)문서의 작성을 위해 개발된 웹 언어의 한 종류. 인터넷에서 웹을 통해 접근되는 대부분의 웹페이지들이 작성되어 있는 언어이다. 문서의 글자 크기, 색, 모양, 그래픽, 하이퍼링크 를 정의하는 명령어로 주로 홈페이지를 만들 때 사용한다. (2) css 웹페이지의 디자인 요소 관리를 위한 스타일 시트 언어. html이 가지고 있는 디자인적 제약들을 보완하기 위해 만들어진 스타일 시트( 홈페이지를 만드는데 사용될 여러 가지 스타일들을 지정해서 간편하게 홈페이지의 일관성을 유지할 수 있도록 해주는 것) 의 표준. 웹페이지를 디자인적으로 일관성 있고 간편하게 관리할 수 있도록 만들어준다. (3)자바스크립트 웹에 풍부한 효과를 넣을 수 있는 언어. 사용자로부터 특정 이벤트나 동적인 처리를 목적으로 고안된 프로그래밍 언어이다. html만을 이용해서는 정적인 웹페이지만을 구현할 수 있기 때문에, 동적인 웹페이지 구현을 위해서 사용된다.
add, commit, push 가 각각 어떤 기능을 하고, 어떤 상황에 써야하는지 정리해보세요 ! (1) add
파일의 현재 상태를 기록하는 명령어. 작업 폴더에 있는 것들 중 기록을 남기고 싶은 것들을 먼저 고른 후 staging area로 옮길 수 있다 (2) commit
프로젝트 디렉토리의 특정 모습을 하나의 버전으로 레포지토리에 저장할 수 있도록 해주는 명령어 이다. 남기고 싶은 메모도 남길 수 있다. (3) push
개인이 가지고 있는 소스 코드를 원격 저장소에 업데이트 하고 싶을 때 쓰는 명령어.
commit 명령어 사용 후 즉, 레포지토리에 파일을 저장한 뒤에 원격 저장소 (보통은 git hub)에
옮길 수 있다.
⚡ 토론해보아요 !
비주얼스튜디오 코드 (Vscode) 는 어떻게 활용할 수 있을까요?
Hint❗비주얼스튜디오 코드 확장자 참고하기 개발할 때 언어가 바뀌면 프로그램도 바뀌어야 하는데 비주얼스튜디오 코드는 다양한 언어를 사용할 수 있다는 장점이 있다.
비쥬얼 스튜디오 코드 확장자에서는 python,C언어 등 다양한 언어가 컴퓨터 내에 설치 되어있지 않아도 실행할 수 있게 되어 있을 뿐만 아니라 라이브러리/언어 등 많은 기능을 제공하고 있어 사용할 방법은 셀 수 없을 만큼 많다고 생각한다.
자신이 생각하는 프론트엔드와 백엔드 각각의 이미지는 어떤가요? 석민 : 프론트엔드는 디자인과 센스의 영역이 많이 필요한 예술의 이미지라고 생각해 백엔드는 최적화 및 안에서 돌아가는 현상들을 구현하여 똑똑한 기계같은 이미지라고 생각해 아영 : 프론트엔드는 디자인적인 능력이 요구되고 트렌드에 맞게 적응해야 할 것 같다. 백엔드는 직접 볼 수 없어 문제를 해결하기 어려울 것 같다. 승우 : 프론트엔드는 디자인적 요소가 중요한 부분일거 같고, 백엔드는 효율과 구조의 간편화가 중요한 분야일것 같아. 세하 : 보여지는 부분을 다루며, 백엔드보다는 좀 더 유연한 느낌 백엔드는 보이지 않는 부분을 다루며, 좀 더 이론적인 느낌이 강함
본인한테 맞는 분야는 무엇일지 생각해보아요! 석민 : 둘 다 해보고 적성에 맞다고 생각해서 프론트엔드와 백엔드 분야 모두 챙겨가고 싶어 아영 : 웹페이지 디자인에 관심이 있어 프론트엔드가 잘 맞을 것 같다. 승우 : 나는 가시적인 결과를 좋아하는 편이라 프론트엔드랑 더 잘 맞을 것 같지만 두 분야 모두 챙겨가고 싶어. 세하 : 프론트엔드는 보여지는 부분을 다루기 때문에 미적인 감각이 어느정도 필요하다고 느껴지는데 나한테는 그 점이 좀 부족하다고 생각돼서 백엔드가 좀 더 잘 어울릴 거 같다.
fork, clone, branch, merge, origin 이 각각 어떤 개념인지 알아보고 서로 공유해보세요 ! fork- 개발자들이 하나의 소프트웨어 소스 코드를 통째로 복사하여 독립적인 새로운 소프트웨어를 개발하는 것
Clone- 원격 머신에서 로컬 머신으로 자료를 복사하는 것
Branch- 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능
Merge- 한 브랜치에 반영된 사항을 다른 브랜치에 적용, 두 개 이상의 개발 히스토리를 하나로 합치는 작업
Origin- 원격 저장소의 경로 이름