<3/24(금)스터디진행>
⚡ 개념 정리하기 !
웹브라우저 : 웹서버로부터 요청받은 내용을 html문서나 파일을 출력하는 소프트웨어
웹서버 : 브라우저가 HTTP를 통해 파일을 요청할 때 요청된 문서를 HTTP를 이용해 전송해주는 서비스 프로그램
클라이언트와 서버
: 웹 서비스는 크게 두 부분으로 이루어지는데, 데이터를 요청하는 클라이언트와 요청된 데이터를 전달해주는 서버가 있다.
웹 호스팅
:웹 페이지를 호스팅하기 위한 방법 중 하나! 웹서버를 직접 구축하는 방법도 있지만, 서버를 직접 준비하지 않고도 웹페이지 호스팅과 이를 비롯한 SQL서버, SSL인증서 등을 통합적으로 관리할 수 있다.
프론트엔드/백엔드
프론트엔드 사용자들이 직접 볼 수 있으며 상호작용하는부분(클라이언트) -백엔드 클라이언트와 직접 만나지는 않지만 뒤에서 기술적인 기능을 하는 부분(서버)
프레임워크 웹 개발을 보다 쉽고 편하게 할 수 있도록 도와주는 것(밀키트 느낌)
html, css, 자바스크립트 각각의 용도
html: 웹사이트에 보이는 기본 뼈대(골격)을 구성한다. css: html에 살을 붙이는 것. 색을 입힌다거나 예쁘게 치장하는 역할을 한다. 자바스크립트: 동적으로 움직이게 하거나, 로직이 돌아가게 하는 부분이다.
add, commit, push 가 각각 어떤 기능을 하고, 어떤 상황에 써야하는지 정리해보세요 !
add: 파일을 추가하는 기능.
git add (추가하고자 하는 파일) (git add. : .(점) 은 모든 파일이라는 뜻.- 모든 파일 추가)
commit: 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위&결과물. 히스토리를 만드는 기능을 한다. (레포지토리(repository): 커밋이 저장되는 곳)
git commit –m "(파일명)" (-m 은 메세지의 준말.)
push: Github로 올리는 기능을 한다.
git push origin master로 코드를 보내면 된다. (master 자리에는 branch이름이 들어가면 된다.)
컴퓨터에 소스코드를 업데이트 하고 싶을 때 1)-2)-3)의 3단계를 반복.
1)추가할 파일 더하기 git add .
2)히스토리 만들기 git commit -m "first commit(파일명)"
3)Github로 올리기 git push origin master
⚡ 토론해보아요 !
비주얼스튜디오 코드 (Vscode) 는 어떻게 활용할 수 있을까요?
Hint❗비주얼스튜디오 코드 확장자 참고하기
🙋♂️지혜:
Git 확장
Git Graph 프로그램 개발 상황을 시각적으로 보여주고 본인이 개발하고 있는 부분을 담고 있는 브랜치의 상태 확인가능
GitLens 다른 사람이 작성한 코드의 커밋 코멘트를 확인가능. 또 어떤 부분을 마지막으로 수정한 사람을 찾는 Blame이라는 기능을 쉽게 사용가능 (코드의 버그를 탄생시킨 사람을 찾기 위해 만들어진 기능)
🙋♂️강록:
Live Server - 웹페이지를 개발할 때 사용자에게 어떻게 보이는지 실시간으로 테스트할 수 있어 유용한 간이 웹서버 Vim VSCode Extension - 텍스트 에디터 중 하나의 vim의 기능과 단축키를 vs code를 사용하는 동안 그대로 이용할 수 있는 extension
🙋♂️신비:
Git history 특정 파일의 커밋 히스토리를 보고 싶을 때 사용 가능
Bracket pair colorizer 서로 짝인 괄호들끼리 색상으로 알아서 구분해줌. 괄호 사이에 코드가 많아도, 괄호의 짝이 어딘지 쉽게 구분 가능.
🙋♂️태경:
Eslint 프로젝트에서 Eslint를 사용하면 소스코드를 분석해서 문법에러,버그 등을 찾아서 보고해 줍니다
🏄♂️지혜:
프론트엔드 : 아무리 백엔드가 환경을 잘 구축해도 인터페이스가 엉망이면 사용자가 쓰고 싶은 마음이 안 들 수 있기 때문에 사용자의 참여?접속을 위해 중요하다고 생각한다.
백엔드 : 서버에서 작용하는 기술을 다루는만큼 사용자들이 원하는 정보를 잘 담아내기 위해 프론트엔드보다 책임이 막중하다고 생각한다. 프론트엔드가 아무리 편하게 만들어놓아도 그 속이 엉망진창이면 알맹이가 없는 .. 겉만 번지르르한 것 아닐까요 ..
🏄♂️강록:
프론트엔드는 사용자가 직접 마주하는 웹사이트의 얼굴이라면, 백엔드는 프론트엔드가 가능하도록 하는 골격 같은 느낌이다. 프론트엔드와 백엔드 둘 중 하나라도 없다면 우리가 사용하는 웹사이트의 모습과는 거리가 멀 것이다. 그러면서도 백엔드는 프론트엔드의 회원가입 기능, API 등 여러가지를 담당해주기 때문에 든든한 심부름꾼의 이미지다.
🏄♂️신비:
프론트엔드는 잘 보여져서 사용자들과 직접 만나는 느낌, 백엔드는 보이지 않는 곳에서 묵묵히 중요한 일을 하는 느낌.
🏄♂️태경:
프론트엔드: 많은 사람들이 공개적으로 볼 수 있는 곳이여서 쉽고 편하게 접근할 수 있는 공간 백엔드: 프론트엔드를 만들기 위해 엄청 복잡하고 이해하기 어려운 공간이라고 생각합니다
👨💻신비:
프론트엔드. : 디자이너가 원하는 산출물을 똑같이 만들면 된다고 하는데, 디자이너분들: 1px만 살짝 엇나가도 다 알기 때문에, 꼼꼼, 디테일한 성격 필요하다고 함. 성격과 더 잘 맞을 것 같아서.
👨💻지혜:
솔직히 아직 코딩에 자신이 없고 디자인쪽에 관심이 많기 때문에 프론트엔드가 더 끌리지만 전공을 공부하다보면 백엔드에도 관심이 생기지 않을까 생각합니다 ..
👨💻강록:
백엔드! 프론트엔드는 사소한 수정사항이 많은 편이지만 백엔드는 한 번 잘 만들어두면 오래 사용할 수 있기 때문이다. 그리고 프론트엔드는 사용자마다 제각기 다른 브라우저 환경을 고려해야 하지만, 백엔드는 이런 수고를 덜 수 있다.
👨💻태경:
코딩도 자신 없지만 꾸미는것 같은 디자인에는 더 자신없어서 일단은 백엔드가 더 맞을꺼 같습니다
fork, clone, branch, merge, origin 이 각각 어떤 개념인지 알아보고 서로 공유해보세요 !👩🔬신비:
fork: 프로젝트를 카피해서 내용은 완전 똑같은 별개의 프로젝트를 생성하는 것.
origin: 내가 저장하고 관리하는 저장소.
branch: 특정 커밋을 가리키는 '포인터'. 독립적으로 작업을 진행하기 위한 개념이다. 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있다. 이렇게 각각 만들어진 브랜치는 다른 브랜치와 병합(merge)함으로써 새로운 하나의 브랜치로 합칠 수 있다.
👩🔬태경:
branch 기본적인 프로그램 실행 흐름을 다른 곳으로 변경하는 프로그램
merge 어느 하나 또는 두 개 이상의 항목에 관하여 같은 순서로 나열된 두 개 이상의 데이터 집합을 조합시켜 하나의 데이터집합으로 하는것
👩🔬지혜:
fork 다른 사람의 레포지토리에서 어떤 부분을 수정하거나, 추가 기능을 넣고 싶을 때 해당 레포지토리를 내 레포지토리로 그대로 복제하는 기능
clone 원본 레포지토리의 내용을 내 로컬 레포지토리로 완전히 복사. *clone 한 프로젝트는 원본 레포지토리의 로그를 볼 수 없음.
👩🔬강록:
fork: 남의 repo를 수정할 때 내 repo로 복사하여 수정사항을 만든 후, pull request를 하여 수정사항이 반영되도록 할 수 있다. clone: 남의 repo를 로컬 컴퓨터에 직접 다운로드 받아 작업한다. branch: 나의 repo 에서 기존의 코드를 가만히 둔채로 중대한 수정사항을 만들고 싶을 때, branch를 하나 생성하여 사본에 작업을 할 수 있다. merge: 새로 만든 branch를 master branch에 합치는 작업 origin: 일일히 git repo 주소를 타이핑하기 번거로우니 일종의 alias(바로가기)를 만든 것
+α
Git에 대하여 정리해보자. (스터디시간에 진행)
기본적인 flow[→staging area→commit(→push)]
