보다 나은 내일, 다이어리

**git 병합 충돌해결 꽤 어렵...!

충돌난 파일이 있으면 다른 브랜치로 이동 불가

해당 브랜치에서 먼저 수정파일을 알맞게 수정후 커밋하기

elice 브랜치에서 충돌이 발생한 부분을 수정하고 커밋한다. 

git add crawling.py
git commit -m "충돌해결"

현재 elice 브랜치에 커밋한 내용은 master브랜치에 존재하지 않는다. 이제 git merge 명령어를 사용하여 두 브랜치를 합칠 수 있다.

먼저 현재 브랜치를 합치고자 하는 대상 브랜치로 전환해야 한다. 그 다음 git merge를 실행하여 현재 브랜치에 합치려는 브랜치명을 지정하면 된다. -> elice 브랜치의 변경 사항이 master브랜치에 합쳐졌다.

git checkout master
git merge elice

만약 elice 브랜치 (현재 브랜치)에서 master 브랜치 (대상 브랜치)로 merge를 시도하면 Already up-to-date라는 오류 메시지가 뜨니 주의하자!!!!!!! 

참고페이지: https://mylko72.gitbooks.io/git/content/branch/merge.html

elice 브랜치에서 git merge madhatter를 하면 elice 브랜치에서 madhatter 변경점을 반영하는 것이고,

madhatter 브랜치에서 git merge elice를 하면 madhatter 브랜치에서 elice 변경점을 반영하는 것이다.

충돌을 해결하는 것을 소스파일을 변경한 후에 elice 브랜치에서 git add, git commit를 한다. 그러면 elice 브런치응 충돌이 해결 됐는데 madhatter 브랜치에서는 아직 변경점을 반영하지 않아서 elice 브랜치를 merge 시켜야 하는 것이다!!!!!!

**git 원격 저장소!!

git clone 명령어로 현재 디렉토리에 원격저장소의 내용을 복제한다

1. git remote add origin (원격저장소의 주소 또는 원격저장소의 이름)으로 로컬저장소와 연결합니다

-> 이는 원격저장소의 단축이름을 origin으로 하겠다는 의미! (myproject가 단축이름으로 지정할 수도 있는것임)

기본적으로 만들어진 원격저장소의 이름은 origin이 default값 입니다. 때문에 clone으로 복사해온 저장소의 이름은 origin으로 통일되게 됩니다

git remote add origin https://github.com/group/project

git remote -v

-> 지정한 저장소의 이름과 주소를 한꺼번에 볼 수 있음!

2. git fetch 나 git pull을 이용하여 원격저장소의 내용을 동기화합니다.

pull은 로컬 저장소에 있는 master를 자동으로 원격저장소에 있는 내용과 합쳐주는 역할을 수행합니다.

git pull이 이루어지지 않는 경우는 보통 다른사람이 올린 commit의 내용과 내 컴퓨터에 존재하는 내용이 서로 충돌할 때입니다.

이러한 현상은 하나의 브랜치에서 여러 사람이 동시에 작업하면 발생할 확률이 높아지게 됩니다.

따라서 여러 개의 브랜치를 나누고 각자 브랜치에서 작업한 후에 웹호스팅 서비스에 존재하는 merge request로 하나씩 합쳐가는 방식을 사용하면 충돌이 일어나는 것을 막을 수 있고 매번 새롭게 merge해야하는 수고를 덜 수가 있습니다.

3. fetch를 실행한 경우 git merge origin/master로 병합을 완료해준다

** git fetch origin master : fetch를 통해서 origin(원격 저장소의 단축 이름)의 작업 내역을 master(로컬 저장소의 브랜치)로 불러온다

4. git push origin master를 이용하여 로컬 저장소에서 변경된 내용 -> 원격 저장소에 전달

** git push origin master : master(로컬 저장소의 브랜치)의 작업 내역을 origin(원격 저장소의 단축 이름)으로 push하겠다는 뜻!

git push origin master

다른 사람이 먼저 Push한 상태에서는 Push할 수 없다. 다른 사람이 작업한 것을 Merge부터 해야 한다!

01/15
영어단어 여러 번 보기 & 안보고도 말해보기 (아침루틴!)
매일 엘리스에서 공부한 것 블로그에 정리, 복습하기 
(새롭게 알게 된 내용, 중요한 내용 위주로.)
50개 단어 엑셀 정리 (저녁 루틴!)
코치님이 보내주신 자료들 공부하기
주차테스트 예습 학습하기

** 내용 gitlab 레포지토리 만들고 로컬에서 파일 변경 후 레포지토리에 업로드 및 기본적인 시나리오

https://chiseled-browser-c2e.notion.site/AI-4-Git-d92bad965e3344389c51f103abddb97a

** 깃을 게임으로 공부할 수 있는 사이트! -> https://learngitbranching.js.org/?locale=ko

깃을 각 파일을 스냅샷 형식으로 이동 가능 -> 쉬운 버전 관리가 가능해짐 (하나의 파일로 관리할 수 있다는 장점.)

깃의 특징

1. 가지치기와 병합

2. 가볍고 빠르다 (모든 작업이 서버와 통신 없이 로컬에서 통신한다)

3. 분산 작업 (복사된 프로그램에서 동시에 작업진행 가능, 통합관리자를 둬서 개발된 코드를 병합하는 데 집중)

4. 데이터 보장 (체크섬=커밋 아이디=16진수, 버전관리 용이)

5 준비영역(staging area) : git add 후 커밋하기 전에 선택되는 공간. 그리고 여기서 실제로 저장소에 커밋함 (커밋하는 것은 .git 저장소 내에 staging 파일을 저장하는 것!)

작업영역 -> 준비영역 -> 저장소!

6. 오픈 소스: 공개, 누구나

7. git 호스팅 서비싀 githug, gitlab, 등

git config --global user.name "elice"
git config --global user.email "rabbit@elice.io"

만약, git config user.name "elice" 이렇게 작성했을 떄

fatal: not in a git directory 라는 오류가 뜬다면 git 저장소를 시작하지 않은 상태에서 유저 설정을 했기 때문이다!

git init : git 저장소로 만들어줌

git add . : 준비영역으로 추가해줌

git status : 파일이 준비영역에 잘 추가되었는지를 확인

git commit -m "Initial commit" : 준비영역의 파일을 저장소에 저장, 반영한 내용을 간략하게 커밋메시지도 작성

git commit -amend (수정한 내용을 덮어쓰기할 수 있음)를 실행하면 텍스트 편집기가 실행되고 수정하면 그대로 반영됨

예) git commit --amend -m "커밋메시지 수정"

git log : 저장소 반영 내역을 모두 볼 수 있음! (커밋아이디와 커밋메시지)

예) git log -p -2

-p, --patch : 각 커밋의 수정 결과를 보여주는 diff와 같은 역할 수행

-n : 상위 n개의 커밋만 보여줌

--stat : 각 커밋의 통계를 볼 수 있음, 얼마나 많은 파일이 몇줄이나 추가, 삭제되었는지를 보여줌

--pretty=onelinr : 각 커밋을 한 줄로 출력

--graph : 커밋간의 연결관계를 아스키 그래프로 출력함 (브랜치가 생성되었다면 유용하게 사용할 수 있다!)

-S 특정텍스트 : 코드에서 추가되거나 제거된 내용 중에서 특정 텍스트가 포함되었는지를 검사

git diff : 커밋된 파일 중 두 개의 버전에서 변경된 사항을 비교할 수 있음

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   README.txt

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   crawling.py

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        rat.py

README.txt는 준비영역에 있다

crawling.py는 수정되었지만 준비영역에 없다

rat.py는 준비영역에 없다.

git reset README.txt : 준비영역에서 README.txt를 삭제한다 ( 준비영역에 있는 README.txt를 커밋하고 싶지 않을 때)

깃의 브랜치 : 각각이 독립적이다, 배포를 하려고 할 때 병합하기

**깃의 스냅샷 개념

파일을 하나씩 별도로 보면서 차이점만 따로 관리하지 않고 프로젝트 전체를 스냅샷 형태로 관리합니다.

마치 매 순간마다 프로젝트 전체를 사진으로 찍어서 관리하는 것과 같은데요.

Version 1에서 Version 2로 변경이 되면 깃은 Version 2의 스냅샷을 하나 만들어 놓고 그 스냅샷을 가르키는 레퍼런스를 저장합니다.

효율을 위해서 변경되지 않은 File B는 다시 새로 저장을 하는 것이 아니라 이미 저장되어 있는 파일에 링크만 걸어 줍니다.

버전이 변경되는 과정을 보면 마치 연속된 스냅 사진을 보는 것 같습니다.

출처: https://coding-lks.tistory.com/162

https://blog.naver.com/winter6120/221000738717

https://goodgid.github.io/Java-JDK-JRE/

어찌저찌 교수님 강의록이랑 구글링 해보면서 실행오류 해결하긴 함!

CSS3에 사용되는 속성들!

1. transform

: rotate(45deg) -> 평면적인 회전

: scale(2, 3)      -> 비율 조정

: skew(10deg, 20deg)   -> x축, y축 기준으로 각도만큼 비틂 (3차원적인 회전!)

:translate(100px, 200px)   -> 오브젝트의 위치를 x축, y축만큼 이동

prefix 접두사 -> 다른 버전의 부라우저에서 실행할 경우 (CSS3는 최신버전에 특화된 것이기 때문에 그 이전의 브라우저에서 사용할 경우 붙이기!) 브라우저의 하이버전으로 사용하고 싶을 경우 사용.

마지막에 작성된 transform만 적용이 됨, 뒤에 작성된 것으로 덮여씌워진 셈!

2. transition

갑자기 휙휙 바뀌는 것이 아니라 변화하는 과정을 보여주고자 할 때 사용

transition-property : width (변화하고자 하는 과정을 어디서 보여주고 싶은지

transition-duration: 변화하는 데 소요되는 시간

transition-timing-function : linear; (효과의 속도의 성격)

transition-delay: 1s; (클릭하고 색이 바로 바뀌는 게 아니라 1s후에 바뀌길 원할 때)

-> transition: 하나로 네 가지 한번에 작성 가능 (duration 먼저 delay 순서!)

: hover {width: 300px;} (css에서 미리 만들어 놓은 클래스에 마우스를 올렸을 때 라는 조건)

3. animation

예. 웹사이트에 들어가자마자 실행되는 

animation-name : changeWidth; (개발자가 임의로 작성가능)

animation-duration

animation-timing-function

animation-delay

animation-iteration-count: 6; (애니메이션 반복횟수) (infinite는 무한)

animation-direction: alternate(시작 -> 끝 -> 시작), normal(시작 -> 끝, 시작 -> 끝) , reverse (끝 -> 시작, 끝 -> 시작)

악어와 악어새처럼 따라오는 @keyframes (실제 동작되는 결과값)

@keyframes changeWidth {

  from { width: 300px; } to { width: 600px; }

}

prefix 접두사 사용 가능!

단, prefix 사용시 모든 코드에 붙여넣어야 한다!

.box1 {
        width: 300px;
        height: 300px;
        background-color: red;    
        
        -webkit-animation: rotation 1500ms linear infinite alternate;
    }
    
    @-webkit-keyframes rotation {
        from { -webkit-transform : rotate(-10deg); }
        to { -webkit-transform : rotate(10deg); }
    }

animation에 -webkit-을 달아줬으면 keyframes에도 쌍으로 달아줘야 한다!

transform도 CSS3에 등장한 신조어이기 때문에 transform에도 달아줘야 한다! keyframes에만이 아니라 각각으로도 따로 달아줘야 한다는 점!

**번외

margin: 0 auto; (명확한 크기를 갖고 있는 블록요소에서 사용가능한 방식) (x축으로 중앙정렬이 됨)

미디어쿼리!

미디어쿼리 안에서도 .media로 선택해서 지정하기

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
    .media{
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
}

미디어쿼리 내부의 CSS가 단지 추가되는 것이지, 외부의 CSS가 없어지는 건 아니다.

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받지 않고 실행하지 않으려면 속성값을 none으로 입력

(background-color: none;)

meta 코드는 반드시 들어가야 함! (미디어쿼리 사용시 태블릿이나 모바일에서 잘 작동될 수 있음)

모바일이나 태블릿은, 미리 설정되어 있는 viewport로 인해 미디어쿼리가 제대로 작동하지 않을 수 있기 때문!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

원랜 칙칙하게 clouds/27.94 Dongjinwon으로 되어 있었는데 위 그림처럼 아이콘이랑 배치를 바꿔봤다...

icon을 넣는 것을 css로 안하고 일단 weatherapi에서 제공하는 링크로 만들어봤다. 나중에는 fontawesome를 적용해서 더 예쁜 아이콘을 찾아보려고 한다... 좀더 나중에... 저거 하는데도 시간 많이 잡아먹음.....

그래도 다 하고 나니 뿌듯하다.

그래도 아이콘 하나 바꾸고 폰트랑 배경이미지 바꿨다고 좀 이뻐진 것 같다..

아이콘 이미지가 안나오길래 매우 당황했었다. 보니까 index.css에서 #bgImage{}로 안하고 그냥 img{}로만 해서 배경이미지에만 적용돼야 할 css가 아이콘 이미지에도 적용이 돼서 안나온 것이었다. 

막상 결과물을 보니까 다행이긴 한데, 이러다간 내 미간 주름은 계속 생길 일만 남을 것 같다. 오지마...

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <div id="login-form">
        <input type="text" placeholder="what is your name?" />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

</html>

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick() {
    console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

Uncaught TypeError: Cannot read property 'addEventListener' of null

console에서 위같은 에러가 났다.

html의 button을 변수 loginButton에 담았다고 생각했지만 사실은 담기지 않은 것이다. 

html이 로드되기 전에 js가 먼저 로드됐기 때문에 btn변수에 html요소를 담으려니 null이기 때문에 에러가 난 것이더.

그래서 script를 html아래에 작성했다.

이외에 script 태그에 async옵션을 추가하는 방법도 있다.

<script asyn src="app.js"></script>

참고 : https://www.youtube.com/watch?v=tJieVCgGzhs

6장 클래스와 객체2의 연습문제를 풀다보니 저번학기에 들은 데이터베이스 시간에 과제를 했던 게 생각났다. 제공된 요구사항을 바탕으로 ER다이어그램을 만드는 게 과제였는데 어떤 걸 엔티티로 해야 할지 관계로 짜야 할지 계속 고민하다가 눈물 날 뻔한 과제였다. 그래서 어찌어찌 내긴 했는데 교수님께서 올려주신 정답과는 다른 방식으로 짰다...

교수님께선 ER다이어그램을 짜는데엔 정답은 없다고 하셨지만 과연 내가 만든 게 효율적인 답안이었을진...

어쨌든 그 기억이 났다.

콩다방과 별다방을 클래스로 만들어야 하는 건 알겠는데

그다음부턴 어째야 할지 모르겠다

메뉴도 클래스로 만들고 해야하나

객체지향 프로그래밍... 어려운것....

그래도,,,,

뭔가....

재밌는 것,,,,

Student 클래스

Student 생성자를 만들 때 그 안에 분리했던 Subject 클래스의 생성자도 추가해주어야 한다. (생성자는 클래스가 생성될 때 자동으로 호출된다)

그래야 Test에서 Park.math.Subjectname이나 Park.math.scorePoint를 선언할 수 있게 된다.

package ch5;

public class Student3 {
	int studentID;
	String studentName;
	Subject Korean;
	Subject math;
	
	public Student3() {
		Korean = new Subject("국어");
		math = new Subject("수학");
	}
	public Student3(int id, String name) {
		studentID = id;
		studentName = name;
		
		Korean = new Subject("국어");
		math = new Subject("수학");
	}
}

Subject 클래스

package ch5;

public class Subject {
	String SubjectName;
	int scorePoint;
	
	public Subject(String name) {
		SubjectName = name;
	}
}

Test 클래스

package ch5;

public class StudentTest {

	public static void main(String[] args) {
		Student3 Park = new Student3(201935, "박정미");
		Park.math.scorePoint = 50;
		System.out.println(Park.studentName);
		System.out.println(Park.math.SubjectName);
		System.out.println(Park.math.scorePoint);

		Student Jeong = new Student();
		Jeong.setStudentName("쩡미");
		System.out.println(Jeong.getStudentName());

	}

}

Mydate 클래스

package ch5;
import java.util.Calendar;

public class Mydate {
	private int day;
	private int month;
	private int year;
	private boolean isValid = true;
	
	public Mydate(int day, int month, int year) {
		setYear(year);
		setMonth(month);
		setDay(day);
	}


	public int getDay() {
		return day;
	}

	public void setDay(int day) {
		switch(month) {
			case 1: case 3: case 5: case 7: case 8: case 10: case 12:
				if(day<1 || day>31) {
					isValid = false;
				}
				else {
					this.day = day;
				}
				break;
			
			case 4: case 6: case 9: case 11:
				if(day<1 || day>30) {
					isValid = false;
				}
				else {
					this.day = day;
				}
				break;
			
			case 2:
				if((year%4==0) && (year%100!=0) || (year%400==0)) {//윤년
					if(day<1 || day>29) {
						isValid = false;
					}
					else {
						this.day = day;
					}
				}
				else { //윤년아님
					if(day<1 || day>28) {
						isValid = false;
					}
					else {
						this.day = day;
					}
				}
				break;
			default:
				isValid = false;
		}
	}

	public int getMonth() {
		return month;
	}

	public void setMonth(int month) {
		if(month<1 || month>12) {
			isValid = false;
		}
		else {
			this.month = month;
		}
	}

	public int getYear() {
		return year;
	}

	public void setYear(int year) {
		if(year > Calendar.getInstance().get(Calendar.YEAR)) {
			isValid = false;
		}
		else {
			this.year = year;
		}
	}
	
	public String isValid() {
		if(isValid == true) {
			return "유효한 날짜!";
		}
		else {
			return "유효하지 않은 날짜!";
		}
	}
	
}

MydateTest 클래스

package ch5;
import java.util.Calendar;
import java.util.Date;

public class MydateTest {
	public static void main(String[] args) {
		Mydate date1 = new Mydate(29,2,2021);
		System.out.println(date1.isValid());
		Mydate date2 = new Mydate(25,12,2020);
		System.out.println(date2.isValid());
	}
	
}

Calendar 클래스에 대해서 처음 배웠다.

- Date 클래스처럼 날짜와 시간에 관한 정보를 표현할 때 사용한다.

- 추상클래스이므로 객체를 직접 생성할 순 없지만 getInstance()메소드를 이용하여 시스템의 날짜와 시간 정보를 표현할 수 있다.

Calendar클래스는 추상 클래스로 생성자를 제공하지 않음.

따라서 Calendar 클래스의 객체를 생성하기 위해 new 연산자를 사용할 수 없다.

그대신 getInstance() 메소드를 사용하여 현재 날짜와 시간의 객체를 얻어올 수 있다.

Calendar.getInstance().get(Calendar.YEAR) => 현재연도를 알 수 있다.

출처: hyeonstorage.tistory.com/205

문제

두 개의 자연수를 입력받아 최대 공약수와 최소 공배수를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에는 두 개의 자연수가 주어진다. 이 둘은 10,000이하의 자연수이며 사이에 한 칸의 공백이 주어진다.

출력

첫째 줄에는 입력으로 주어진 두 수의 최대공약수를, 둘째 줄에는 입력으로 주어진 두 수의 최소 공배수를 출력한다.

package deffender_study;
import java.util.*;

public class Main{
	public static void main(String args[]){
		Scanner scan=new Scanner(System.in);
		int a,b;
		System.out.print("두 자연수 입력하라: ");
		a = scan.nextInt();
		b = scan.nextInt();
		
		int max; //두 수 중 더 큰 값을 찾기
		if(a>b) { max = a; }
		else { max = b; }
		
		int gcd = 0;
		for(int i=1; i<= max/2; i++) {
			if(a%i == 0 && b%i == 0) {
				gcd = i;
			}
		}
		int lcm = a*b/gcd;
		System.out.println("최대공약수는 " + gcd);
		System.out.println("최소공배수는 " + lcm);
	}
}	

이거는 비교적 쉽게 풀린 문제라고 생각하는데...

제출시간이 4분이나 지났는데 결과가 아직도 안뜨는 거 보면 별로 효율적이진 못한 코드인건가///

 헉 틀렸다.. 답은 나오긴 하는데 잘못된 코드인건가

package deffender_study;
import java.util.*;

public class Main{


	public static void main(String args[]){
		Scanner scan=new Scanner(System.in);
		int a,b;
		System.out.print("두 자연수 입력하라: ");
		a = scan.nextInt();
		b = scan.nextInt();
		
		int max, min; //큰 수와 작은 수를 분류하기
		if(a>b) { max = a; min = b;}
		else { max = b; min = a;}
		
		int g; //최대공약수
		int tmp;
		while(true) {
			if(max % min == 0) {
				g = min;
				break;
			}
			else {
				tmp=max%min;
				max=min;
				min=tmp;
			}
		}
		
		int l = a*b/g; //최소공배수
		System.out.println("최대공약수는 " + g);
		System.out.println("최소공배수는 " + l);
	}
}	

유클리드 호제법에 대해서 공부한 뒤 코드를 짜봤다. 맞았습니다!! 너무 뿌듯한 말...

이 코드가 왜 수학으로 분류됐는지 이제 알 것 같다...!

그래도 새로운 알고리즘을 배운 것 같아서 좋음

package deffender_study;
import java.util.*;

public class Main{


	public static void main(String args[]){
		Scanner scan=new Scanner(System.in);
		int a,b;
		System.out.print("두 자연수 입력하라: ");
		a = scan.nextInt();
		b = scan.nextInt();
		
		int max, min; //큰 수와 작은 수를 분류하기
		if(a>b) { max = a; min = b;}
		else { max = b; min = a;}
		
		int g = 0; //최대공약수
		int tmp;
		while(g != min) {
			if(max % min == 0) {
				g = min;
			}
			else {
				tmp=max%min;
				max=min;
				min=tmp;
			}
		}
		
		int l = a*b/g; //최소공배수
		System.out.println("최대공약수는 " + g);
		System.out.println("최소공배수는 " + l);
	}
}	

while문의 무한반복을 빼고 싶어서 코드를 다시 짜봤다!

한결 더 효율적인 코드가 됐길...

유클리드 호제법?

두 수의 최대공약수를 구하는 알고리즘!

호제법이란?

두 수가 서로 상대방 수를 나누어서 결국 원하는 수를 얻는 알고리즘을 말한다!

MOD연산이란?

두 값을 나눈 나머지를 구하는 연산!

유클리드 호제법에 대한 이해를 돕는 증명을 설명해주심!! (이해 쏙쏙 잘됨)

https://www.youtube.com/watch?v=J5Yl2kHPAY4

유클리드 호제법에 대해서 잘 설명해주심

https://velog.io/@yerin4847/W1-%EC%9C%A0%ED%81%B4%EB%A6%AC%EB%93%9C-%ED%98%B8%EC%A0%9C%EB%B2%95