한바다
git Merge 와 Branch 본문
☑️ git Merge
금일 파이널프로젝트에서 git Merge를 진행하였다.
각 조원이 했던 부분을 하나씩 합치는 작업을 진행 한 것이다!
주의사항은 git Merge를 진행할 때 우선 내가 어느 위치에 있는지 확인한다
C:\Users\user1\Final>git branch
C:\Users\user1\Final>git status확인 시 나는 브런치에 있어서 마스터 경로로 이동을 하였다.
C:\Users\user1\Final>git checkout master마스터로 이동한 후 마스터에 있는 최신 변경사항을 가져오기 위해 아래 명령어를 입력한다!
C:\Users\user1\Final>git pull그리고 드디어 병합!! merge를 시도한다!!!
C:\Users\user1\Final>git merge jinhwa2-boardmerge가 완성되었다! merge된 것을 git add . 그리고 git commit -m "" 그리고 gti push를 진행한다.
C:\Users\user1\Final>git add .
C:\Users\user1\Final>git commit -m "fist merge"
[master 353fa02] fist merge
C:\Users\user1\Final>git push
Enumerating objects: 70, done.
Counting objects: 100% (70/70), done.
Delta compression using up to 6 threads
Compressing objects: 100% (20/20), done.
Writing objects: 100% (24/24), 10.60 KiB | 2.12 MiB/s, done.
Total 24 (delta 11), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (11/11), completed with 11 local objects.
To https://github.com/kimjinwoo23/Final.git
a4926f3..353fa02 master -> master
C:\Users\user1\Final>위와 같이 a4926f3..353fa02 master -> master 해당코드가 나오면 완성 된다!!
☑️ 이제 조원들이 merge한 결과물들을 정리 해야 한다! merge 후 아래와 같은 충돌이 발생 하였다!
- 우선 스프링부트 설정 부분 DBConfig, DTO 중복, 공백 생성 등
- 리액트에서는 서로 설치한 파일이 다르므로 패키지 제이슨에 겹치는 구문들을 제거 하였다.
- 또한 npm i 가 설치되지 않은 것은 package.json에 쉼표가 누락되어 설치되지 않은 상황이 발생되었다.
- 각자 개성이 다른 파일들의 import경로를 지정해주었다
▶ merge를 하면서 반성되었던 것은 나혼자 폴더명을 component라고 적은 것이다!! 다른 팀원들의 폴더명을
한번 더 확인 했다면 좋았을 것 같다!!
☑️ 위 상황들이 한차례 정리가 되고 완성된 파일을 git pull 하였다!
[우선 브런치에서 마스터로 이동하였다]
C:\Users\user1\Final>git checkout master
Switched to branch 'master'
Your branch is up to date with 'origin/master'.[마스터로 이동한 후 git pull 진행한다]
C:\Users\user1\Final>git pull[깃 브랜치로 이동한다]
C:\Users\user1\Final>git checkout jinhwa2-board
Switched to branch 'jinhwa2-board'
Your branch is up to date with 'origin/jinhwa2-board'[내 브런치에서 git pull 진행한다]
C:\Users\user1\Final>git pull origin master
☑️리액트 로그인 하기
[리액트 화면]
- Register.js
// fetch 활용 문법 자바 try catch문법과 리액트 fetch catch문법은 다르다. fetch문법에서 성공과 실패로 나눠짐
fetch('http://localhost:9010/api/user/register',{
method : "POST", //DB에 저장하는 방식
body : formData //사용자가 작성한 데이타가 스프링부트 controller 에 전송
})
.catch(error => {
console.error(error);
setMessage("회원가입에 실패했습니다.");
});
}
- Login.js
//axios 로 로그인 완료하기
const hancleLogin = () => {
axios.post('/api/user/login',
new URLSearchParams({
username: username,
password: password,
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
}
)
//axios 끝나는 구문에 then작성
.then((reoponse) => {
//setUser 찾는 법 상단에 functon Login({setUser})이 꺼져 있으며, UserProfile에서 <p>사용자이름:{user.username}</p>
//App.js에서 <Login setUser={setUser} 에서 추측해볼수 있듯이 setUser함수를 갖고 와야 한다
setUser(response.data);
})
.catch(error => {
if(error.response && error.response.status === 401) {
setMessage('아이디 또는 비밀번호가 잘못되었습니다');
} else {
setMessage('로그인에 실패했습니다.');
}
});
};
▶ 위와같이 적힐 경우 console창에 localhost3000이라고 뜨면서 경로가 잘못 지정되었다고 나온다.
외냐하면 앞서 Register.js에서 fetch경로에 'http://localhost:9010/api/user/register' 이라고
경로를 지정 해줬기 때문에 위 axios.post다음에도 "http://localhost:9010"해당구문을 입력하여
'http://localhost:9010/api/user/login' 이렇게 경로를 지정해줘야 리액트 3000아 아닌 로컬 호스트
9010으로 간다. 아니면 proxy 설정에서 경로 설정해준것으로 두개의 js파일 경로를 동일하게 맞춰준다.
그런데 아무래도 로컬호스트를 넣게 되면 좀더 정확한 경로로 진행할 수 있다!! 두개의 경로가 모두 같아야
하는 것이 핵심이다!!
▶ 그리고 axios ~ then 구문에서 setUser함수는 상단에 사용하지 않은 꺼진 함수가 있는지 보고
또한 APP.js에서 가입시 어떤 함수를 사용했는지 확인을 해본다!!
[UserController.java]
리액트에서 fetch와 axios로 전송해준 내용은 자바 컨트롤러에서 받으며 받은 내용을 잘처리한 후 리액트로
다시 보낸다
@PostMapping("/login")
public User login(
@RequestParam("username") String username,
@RequestParam("password") String password
) {
return userService.getUserInfo(username,password);
}
@PostMapping("/register")
public String register(
@RequestParam("username") String username,
@RequestParam("password") String password,
@RequestParam("profileImage") MultipartFile profileImage
) {
userService.register(username, password, profileImage);
return "ȸ������ ����!";
}
}