2023.3.21 (화) 스터디 완료!

⚡ 스터디 시작 전 각자 Ice Breaking 소개하기 !

⚡ 개념 정리하기 !

1. 웹 브라우저

   웹 서버로 부터 받은 HTML문서, 이미지 등을 화면에 표현해주는 소프트웨어. 웹 서버에 정보를 요청. Ex. 인터넷 익스플로러, 파이어폭스, 구글 크롬, 사파리

2. 웹 서버

   웹 브라우저와 같은 클라이언트로부터 HTTP요청을 받아, 웹 페이지를 클라이언트로 보내주는 서버. 웹 브라우저에 응답. 그림, HTML, CSS, 자바 스크립트를 포함 HTML 문서를 클라이언트에게 전송한다.

3. 클라이언트와 서버

   • 클라이언트(client) : 고객
   • 서버(server) : 서비스를 제공하는 사람
   • 인터넷을 만든 사람들은 인터넷을 사용하는 컴퓨터들 사이에 정보가 왔다갔다 할 때 요청하는 컴퓨터를 클라이언트 컴퓨터, 응답하는 컴퓨터를 서버 컴퓨터라고 부르기로 함.
   • 웹 브라우저 = 웹 클라이언트
   • ex) <게임> 클라이언트 쪽, 즉 사용자들이 게임을 하는 컴퓨터 또는 스마트폰에 설치되어 있는 프로그램은 게임 클라이언트, 그리고 게임 회사가 가지고 있는 서버 컴퓨터에 설치되어 있는 컴퓨터는 게임 서버. / <채팅 프로그램> 사용자들이 사용하는 채팅 프로그램은 인터넷이라는 관점을 기준으로 한다면 채팅 클라이언트, 채팅 회사가 갖고 있는 서버에 설치되는 프로그램은 채팅 서버.

4. 웹 호스팅

   웹서버를 사용할 수 있게 되는 것, 즉 내 컴퓨터에 있는 문서를 전세계에 있는 누구나 인터넷이 연결되어 있는 컴퓨터에 웹브라우저를 깔면 가져다가 볼 수 있도록 하는 것. 방법 1. 자신의 컴퓨터에 웹 서버를 직접 깔아서 하는것. 방법 2. 대행해주는 업체에 맡기는 것.

5. 프론트엔드 / 백엔드

   • 프론트엔드란 사용자의 앞에 놓여있는 직접적인 화면을 뜻한다. 즉, 어플리케이션이나 웹 등과 같은 프로그램을 사용할 때 두 눈으로 접하는 인터페이스를 말한다. 프론트앤드가 사용 하는 언어의 종류에는 html, css, javascript가 있다. html은 골격, css는 살, javascript는 움직임을 담당한다.
   • 백엔드란 사용자가 보지 못하는 서버 등을 의미한다. 눈에 보이지 않아서 쉽게 인지하지 못하는 각종 알고리즘과 데이터 핸들링, 가공을 다룬다. 백엔드가 사용하는 언어는 Js, java, go, php, python 등이다.

6. 프레임워크

   예를 들자면, 밀키트는 이미 만들어져 있는 것을 끓여서 먹게 된다. 프레임워크의 역할도 비슷하다. 프레임워크는 웹개발을 보다 쉽고 간편하게 해준다. 프레임워크를 사용하면 인건비가 덜 들게 할 수 있으며, 유지보수 비용을 줄일 수 있다.

7. html, css, 자바스크립트 각각의 용도

   • html: 웹페이지의 뼈대
   • css: 웹페이지의 살, 예쁘게 꾸며줌
   • js: 애니메이션 처리 등 동적인 로직을 담당한다.

8. add, commit, push 가 각각 어떤 기능을 하고, 어떤 상황에 써야하는지 정리해보세요 !

   • add: git add 명령어를 통해서 작업중인 파일을 스테이징 한다.
   • Commit: git commit -m “message” 명령어를 통해서 staging area의 파일을 저장소에 저장한다.
   • Push: 위의 과정을 통해 저장한 작업물을 github에 등록한다.

⚡ 토론해보아요 !

1. 비주얼스튜디오 코드 (Vscode) 는 어떻게 활용할 수 있을까요?

   Hint❗비주얼스튜디오 코드 확장자 참고하기

   

   js, html, css 등 웹개발 언어뿐만 아니라 c, java 등의 일반적인 언어까지 지원하는 것으로 보아 비주얼스튜디오 코드는 종합적인 개발 도구로써 일종의 컴파일러로 사용할 수 있다. 또한 확장 프로그램을 설치하여 개발자의 편의에 도움을 줄 수 있다.

2. 자신이 생각하는 프론트엔드와 백엔드 각각의 이미지는 어떤가요?

   • 백엔드가 좀더 멋지다. 숨겨진 조력자 느낌.
   • 프론트는 사용자의 편의를 위한 센스가 있어야됨, 백엔드는 회사 내에서의 데이터를 다루기 위한 편의성에 집중.
   • 백엔드가 돈을 더 많이 벌 것 같다.
   • 프론트엔드가 쉽고 백엔드가 어렵다.

3. 본인한테 맞는 분야는 무엇일지 생각해보아요!

   • 두회: 백엔드. 프론트엔드는 난이도가 비교적 쉽고, 국비지원같은 민간 프로그램을 통해 개발자의 꿈을 이루고자 하는 사람들이 많아 레드오션이라고 생각한다. 반면 백엔드는 난이도가 비교적 어려워 나의 전공을 살리기 위해서는 백엔드가 좋다고 생각한다.
   • 예성: 백엔드, 디자인을 못하기 때문이다.
   • 은재: 프론트, 백엔드가 해보고 싶지만 실력이 안돼서 프론트가 맞을 것 같다.
   • 예영: 프론트, 웹 서비스의 구조를 이해한 사람이 백엔드를 잘할 것 같기 때문이다.

4. fork, clone, branch, merge, origin 이 각각 어떤 개념인지 알아보고 서로 공유해보세요 !

   • fork: 깃허브->깃허브 복사
   • Clone: 깃허브-> 컴퓨터 복사

   fork와 clone은 협력 상황에서 사용하는 개념이지만 새로운 개발자의 깃허브로 복사하는지, 로컬(컴퓨터)에 복사하는지에 따라 fork와 clone을 나누어 사용하는 것 같다.

   • origin: url의 앞부분을 origin이라고 한다.

   ex) https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=검색 에서 https://search.naver.com/ 까지를 origin 이라 한다.

   • branch: 독립적인 작업 영역으로 분기
   • merge: 병합

   branch와 merge는 서로 반대되는 개념으로, 팀 프로젝트 상황에서 branch로 코드를 분할하여 각자 작업한 뒤 merge를 사용하여 하나의 코드로 다시 병합한다.

   처음이라 미숙한 점도 있고 틀린 부분도 있을 수 있어서 만약 사실과 다른 내용이 있다면 알려주시면 감사하겠습니다 🙂