판봉 개발 일기
소프트 웨어 형상관리, 깃, javascript에 대하여 [0730] 본문
오늘은 드디어 깃을 사용하는 방법과 javascript에 대하여 공부했습니다.
먼저 말해두어야 할게 소트프웨어의 구성요소를 artifacts = 인공물,산출물 이라고 말합니다.
이 산출물들에 대해서 여러사람이 공동으로 작업을 하게 되고 산출물들은 계속 변화하여 서로 다른 상태와 버전을 가집니다.
즉 관리가 필요하단 이야기죠
소스코드 버전(파일)저장소를 Repository(저장소)라고 합니다.
그리고 버전이란 단순히 숫자가 아니라 하나의 형상관리 대상을 뜻합니다.
형상관리는 버전관리의 상위버전이죠.
GIT
*먼저 인터넷에 "git scm"이라고 검색을 한 뒤 다운로드를 합니다.
git에는 로컬 저장소와 원격저장소가 있습니다.
로컬저장소는 쉽게 말해서 개발자의 PC를 말하고 원격저장소는 회사의 프로젝트를 하는 곳이나 오픈소스 같은것들을 말합니다.
우리가 관리할때 주의 깊게 생각해야 할것은 버전관리저장소(local repository), 작업공간(working directory)가 있습니다.
이번엔 git 명령어에 대해서 알아보겠습니다.
- git --version : 버전확인
- clear : 화면 클리어
- git clone 원격저장소 주소 : 원격 저장소의 정보 및 버전 파일로 로컬저장소및 작업공간을 생성합니다.
- git remote -v : 원격저장소 이름 원격저장소 주소
- git pull : 원격저장소에서 버전 파일을 받고 작업공간에 소스코드를 병합합니다(git fetch + git merge 과정이 동시에 일어남)
- git init(initlalization : 로컬 저장소를 초기화하여 생성합니다.
- git status : 로컬저장소와 작업공간을 비교해 변동사항을 보여줍니다.
- git add . : 변동사항이 있는 작업공간읜 소스코드를 스테이징 영역에 버전파일을 올립니다.
- git config --global user.email "이메일주소" : 소스 코드를 변경한 사람에 대한 정보
- git config --global user.name "사용자이름" : 소스 코드를 변경한 사람에 대한 정보
- git commit -m "커밋할때 메시지" : 로컬 저장소에 스테이징 영역 목록을 반영합니다.
- git log : commit 이력(히스토리)를 보는 명령어
- git remote add 원격저장소이름 원격저장소주소 : 원격 저장소 정보를 추가
- git push : 로컬 저장소의 버전 파일을 원격 저장소로 보내기
여기서 git push를 할때 만약 원격 저장소를 최초로 추가하는 경우라면 추가적인 작업이 필요합니다.
git push -u 원격저장소이름 브랜치명 이렇게 작성을 해주어야 합니다.
즉 내가 작업을하고 원하는 원격 저장소에 올리려면
원하는 디렉토리에서 git inti(6번)을 하여 로컬 저장소를 초기화하여 생성하고
13번인 git remote add를 사용해 원격저장소이름과 원격저장소 주소를 추가한뒤
명령어들을 이용하여 git push를 하면 됩니다.
일반적인 작업의 흐름은 이렇습니다.
소스작성 -> git status(확인) -> git add . -> git commit -m "" -> git push
JAVASCRIPT
먼저 자바스크립트를 공부할 때 도움이 될만한 사이트를 알려드리겠습니다.
모던 JavaScript 튜토리얼
ko.javascript.info
웬만한 책보다는 이 사이트가 좋고 자바보다 자바스크립티가 내용이 많습니다.
자바 하나로는 개발이 안되지만 자바스크립트로는 하나로 모든 개발이 가능하다고 보시면 됩니다.
참고로 자바로 화면개발을 안한지는 오래 되었습니다.
<html>
<body>
<button onclick="changeStyle()">클릭</button>
<h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum debitis natus amet explicabo quas similique maxime enim itaque rerum, fugit hic facere nisi nihil assumenda eaque fuga dolorem ipsam libero.</h1>
<!-- 브라우저에서 자바스크립트로 하는 일:-->
<!-- 1. HTMl요소를 제어: 스타일추가, 요소를 추가/변경/삭제-->
<!-- 2. 서버에서 데이터를 받아오거나 전송-->
<script>
function changeStyle() {
document.querySelector("h1").style.backgroundColor = 'green';
}
</script>
</body>
</html>위 코드를 실행시켜보면 버튼이 하나있고 그걸 클릭하면 글씨가 초록색으로 바뀝니다.
예전에 HTMl과 CSS를 따로 파일을 나눴던 것처럼 자바스크립트도 이렇게 따로 파일을 생성 할수 있습니다
잘 보시면 뒤에 파일 확장자명이 ".js"인걸 확인할 수 있습니다.
js 파일에는 태그가 아닌 script 코드를 넣으면 됩니다.
위 사진과 같이 말이죠
그리고 src라는 속성이 있으면 해당 script 태그 내부의 코드는 무시가 됩니다.
그러면 닫는 태그가 필요하지 않은게 아니냐? 라고 반문할 수도 있는데 그래도 닫는 태그는 꼭 넣어야 합니다.
그리고 비주얼 스튜디오 코 드의 Terminal탭에 들어 가셔서 New Terminal이 있는데 이걸로 작업을 하다가 git을 사용할 수도 있으니 Terminal은 사용자가 원하는 위치에 드래그앤 드랍을 해서 위치시킨다음 사용하시면 편할 것 같습니다.
저는 위 사진처럼 아래에 놓았습니다.
오늘의 판봉의 말
자바스크립트는 예전에 잠깐 봤던 기억이 있는데 너무 오래되어서 지금은 다 까먹었습니다.
위에 참고할만한 사이트를 들어가서 이것저것 공부하는게 도움이 될것 같아서 시간이 날때마다 코딩 테스트와 함께 살펴봐야 할것 같습니다.
그리고 제가 개인적으로는 원하는게 자바보다는 자바스크립트 이기도 하니 아주 열심히 공부할 것 같습니다.
(취업은 자바...ㅠ)
'JAVA 웹개발 과정' 카테고리의 다른 글
| javascript 연산[0803] (0) | 2021.08.03 |
|---|---|
| javascript의 변수, 자료형, 형변환, 연산 (0) | 2021.08.02 |
| Media Query와 Grid를 이용한 반응형 웹 사이트[0728] (0) | 2021.07.28 |
| 0727 (0) | 2021.07.27 |
| CSS 레이아웃 및 속성과 Flex에 대하여[0727] (0) | 2021.07.27 |
