....
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
// 5번째 줄은 org.springframework.web.bind.annotation에 속해있는 000 전체를 불러온다.
import org.springframework.web.bind.annotation.*;
// 스프링부트 어플리케이션 설정 소스
@SpringBootApplication
public class ProjectApplication {
public static void main(String[] args) {
SpringApplication.run(ProjectApplication.class, args);
}
}
// 님이 localhost:8080 포트에 접근하면 브라우저에 hello가 띄어질것이다.
@RestController
/**
* InnerProjectApplication
*/
class HelloWorld{
// 여기서 /는 스프링 부트 어플리케이션의 첫시작점입니다.
@GetMapping("/")
public String greet(){
return "hello"; // 여러분의 브라우저에는 hello가 보입니다. return은 반환한다는 의미
}
}
(2) 그리고 터미널을 열어주세요
참고로 저는 여기에서 git을 설치했을때 같이 딸려온 git bash 터미널을 이용합니다.
리눅스 명령어에 익숙해지는데 유용하기 때문입니다.
# 프로젝트 파일들이 있는 경로로 이동해주세요. cd 명령어로 이동합니다.
$ cd 프로젝트 경로
# ./gradlew를 이용해서 gradlew를 설치해주세요
$ ./gradlew
# ./gradlew bootRun을 이용해서 실행합니다.
$ ./gradlew bootRun
(3) 크롬 브라우저를 실행하고 , 브라우저 주소 창에 다음과 같이 입력해주세요. 아래 텍스트를 브라우저에 붙여주세요
제가 좋아하는 선수 등록 어플리케이션을 만들다보니 좋아하는 선수만 추가하고 유지하고 싶었습니다. 그러자고 DB에 저장하니 낭비라고 생각하였습니다. 그래서 웹 브라우저에서 지원하는 저장소인 로컬스토리지를 이용하게 되었습니다.
정리
로컬스토리지
- HTML5 에서 지원하는 웹 브라우저 저장소입니다.
- 저장 용량은 최대 5MB 입니다.
- 데이터가 평문으로 저장되어 있으니 비밀번호와 같은 민감한 데이터는 저장하지 말아주세요
세션 스토리지
- HTML5에서 지원하는 웹 브라우저 저장소입니다.
- 저장 용량은 최대 5MB입니다.
- 브라우저 탭을 닫아도 유지되는 로컬스토리지와 달리 브라우저탭을 닫으면 세션스토리지에 데이터가 사라집니다.
사용법
(1) localStorage.setItem
로컬스토리지에서 데이터를 저장하는 메서드입니다.
// 키 - 값 형식으로 저장합니다.
// JSON.stringify 메서드를 이용해서 문자열화해서 저장해야됩니다.
localStorage.setItem("player", JSON.stringify(playerDB));
// localStorage는 데이터를 저장할때 문자열 , 객체 , 배열을 저장할수 있습니다.
(2) localStorage.getItem
로컬스토리지에서 데이터를 불러올때 사용하는 메서드입니다.
// 로컬스토리지에 저장된 데이터를 사용하고 싶을 때,사용합니다.
// JSON.parse : 자바스크립트 객체로 변환
let storageData = JSON.parse(localStorage.getItem("키"))
(3) localStorage.removeItem
로컬스토리지에 저장된 데이터를 삭제할때 사용하는 메서드입니다.
// 로컬스토리지에서 키에 해당하는 데이터가 삭제됩니다.
localStorage.removeItem("키");
(4) localStorage.clear()
로컬스토리지를 비울때 사용합니다.
localStorage.clear() // 로컬스토리지 전체가 비워집니다.
프로젝트에서 이용
(1) 선수 등록
선수 등록 폼을 입력합니다. >>> 배열에 선수 정보를 저장합니다. >>> 배열을 로컬스토리지에 저장됩니다.
userInputForm.addEventListener("submit", function (event) {
// 서버로 전송하고 페이지 새로고침 동작 방지
event.preventDefault();
// 선수가 입력한 데이터가 저장됩니다.
const playerInfo = {
id: crypto.randomUUID(),
name: userName.value,
age: userAge.value,
team: userTeam.value,
country: userCountry.value,
};
// playerDB 배열에 추가합니다.
playerDB.push(playerInfo);
// 로컬스토리지 저장소에서 player라는 키에 값을 저장합니다.
localStorage.setItem("player", JSON.stringify(playerDB));
...
(2) 선수 수정
로컬스토리지에서 player 데이터를 불러옵니다. >>> 로컬 스토리지에 이전 데이터 대신 수정된 데이터가 존재하는 데이터로 갱신합니다. >>> 업데이트 된 선수 데이터 기반으로 업데이트합니다.
function editButton(id) {
// i 로컬스토리지에서 player관련 데이터를 가져옵니다.
let playerDatas = JSON.parse(localStorage.getItem("player"));
// ii 수정이 반영된 배열을 만듭니다.
playerDatas = playerDatas.map((item) => {
if (item.id === id) {
item.name = window.prompt("이름을 입력해주세요");
item.age = Number(window.prompt("나이를 입력해주세요"));
item.team = window.prompt("팀을 입력해주세요");
item.country = window.prompt("국가를 입력해주세요");
}
return item;
});
// iii. 등록한 선수 정보 보여주는 부분 리셋 후 업로드
playerDisplay.innerHTML = "";
playerDatas.forEach((player) => {
playerDisplay.innerHTML += `
<figure>
<h1>${player.name}</h1>
<span>${player.age}</span>
<span>${player.team}</span>
<span>${player.country}</span>
<button onclick="deleteButton('${player.id}')">delete</button>
<button onclick="editButton('${player.id})">edit</button>
</figure>
`;
});
}
(3) 선수 삭제
로컬스토리지에서 선수 데이터를 가져옵니다. >>> 삭제된 데이터가 포함되지 않은 배열로 업데이트합니다. >>
기존 선수등록 뷰를 리셋합니다. >>> 업데이트 된 선수 정보를 선수등록뷰에 보여줍니다.
// 선수 정보를 삭제하는 함수
function deleteButton(id) {
// i. 로컬 스토리지에서 선수 데이터 가져오기
let playerDatas = JSON.parse(localStorage.getItem("player"));
/*
ii. playerDatas 에서 삭제된 데이터 id 제외한 배열 반환
localStorage 내부 갱신
*/
playerDatas = playerDatas.filter((player) => player.id !== id);
localStorage.setItem("player", JSON.stringify(playerDatas));
// iii. 등록한 선수 정보 보여주는 부분 리셋 후 업로드
playerDisplay.innerHTML = "";
playerDatas.forEach((player) => {
playerDisplay.innerHTML += `
<figure>
<h1>${player.name}</h1>
<span>${player.age}</span>
<span>${player.team}</span>
<span>${player.country}</span>
<button onclick="deleteButton('${player.id}')">delete</button>
<button onclick="editButton('${player.id})">edit</button>
</figure>
`;
});
}
$ git add
Nothing specified, nothing added.
hint: Maybe you wanted to say 'git add .'? ## 정답은 여기 있습니다.
hint: Turn this message off by running
hint: "git config advice.addEmptyPathspec false"
# 1. 파일 하나만 add 하고 싶다면
git add 파일1
# 2. 전부를 add하고 싶다면
git add .
저 같은 경우에는 git add .를 많이 사용합니다. add 해야 될게 많아서요
추가) add가 정상적으로 되었는지 확인하고 싶다면
andan@LAPTOP-7I2GF3EM MINGW64 ~/Desktop/bookManage/my-app (master)
$ git status
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: package-lock.json
modified: package.json
git commit을 vscode 에디터 git bash 터미널에서 할 때
vscode git 터미널에서 다음과 같은 명령어를 입력해주세요
vscode에서는 git commit 명령어시 창이 하나 나옵니다. 여기에서 커밋 내역을 작성하시고 오른쪽 브이 표시를 눌러주시면반영됩니다.
push 시 반영이 안되고 에러가 나오는 이슈 1
# 에러내용
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.
추가 ) git 과 gitHub 는 무엇인가
git은 형상 관리 소프트웨어를 의미합니다. 로컬 즉 나의 컴퓨터에 설치됩니다.
gitHub는 로컬의 소스코드를 저장하는 원격 저장소입니다.
그러면 여기에서 오류가 나온 이유는 => 원격 저장소를 읽어올 수 없습니다.
어떻게 해결할까 => remote 명령어로 원격 저장소 추가하셈
git remote add origin [원격 저장소 주소]
[원격 저장소 주소] 다음 사진에서 오른쪽에 빨간 밑줄을 의미합니다.
push 시 반영이 안되고 에러가 나오는 이슈 2
error: failed to push some refs to 'https://github.com/Andante23/BookInHome.git'
hint: Updates were rejected because the remote contains work that you do not
hint: have locally. This is usually caused by another repository pushing to
hint: the same ref. If you want to integrate the remote changes, use
hint: 'git pull' before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
# 너가 push하기전에 git pull해서 당겨보셈, 무엇인가 끌어올런지 모르오니...
저 같은 경우에는 깃허브에 리드미가 있는데 강제 병합을 한다음에 다시 작성하기로 하였습니다.
그리고 git push origin +master 명려어는 기존 레포지토리에 있던 파일이 날라가고 마지막 push 내용만
