1. 나의 Repositories에서 삭제할 저장소 선택
2. Setting 클릭 후 General에서 맨 아래로 쭉 내려간다.
3. Danger Zone 에서 Delete this repository
4. 두 번의 버튼 클릭
5. 텍스트박스에 " " 안에 쓰여있는 문구를 그대로 복사 붙여넣기 하면된다.
6. Password 입력까지 완료하면 저장소 삭제가 된다.
| git 저장소의 브랜치(branch)명 및 default 변경하기 (0) | 2024.02.29 |
|---|---|
| git [gitError] commit을 하고 push까지 하였는데, github에 반영이 되지 않았을 때 (0) | 2024.02.13 |
| git [gitError] error: failed to push some refs to 가 떴을때 (0) | 2024.02.10 |
| Git (1) | 2024.01.25 |
1. 저장소를 들어간 후 Setting 선택
2. 왼쪽 메뉴에서 General 선택 후 Default branch
2-1) 보라색 버튼을 클릭시 브랜치 명을 변경할 수 있다.
master 브랜치를 main으로 이름 변경
2-2) 핑크색 버튼 클릭시 default branch를 변경할 수 있다.
I inderstand, update the default branch 버튼 클릭
default 브랜츠가 변경되었다.
저장소 Code를 확인해보면, 잘 수정되어있다.
| git 저장소 삭제하기 (Repository delete) (0) | 2024.02.29 |
|---|---|
| git [gitError] commit을 하고 push까지 하였는데, github에 반영이 되지 않았을 때 (0) | 2024.02.13 |
| git [gitError] error: failed to push some refs to 가 떴을때 (0) | 2024.02.10 |
| Git (1) | 2024.01.25 |
commit을 하고 push까지 하였는데, github에 반영이 되지 않았을 때,
다시 push를 하면 이미 업데이트 되어있는 상태라고 한다 !
해결방법
새로운 커밋 메시지로 커밋 후 다시 push해주면 gihhub에 업데이트가 된다!
| git 저장소 삭제하기 (Repository delete) (0) | 2024.02.29 |
|---|---|
| git 저장소의 브랜치(branch)명 및 default 변경하기 (0) | 2024.02.29 |
| git [gitError] error: failed to push some refs to 가 떴을때 (0) | 2024.02.10 |
| Git (1) | 2024.01.25 |
발생이유
해결방법
1. git pull
2. git commit - m " 메시지 "
3. git push
pull을 받은 후 다시 커밋하고 푸쉬하면 된다!
| git 저장소 삭제하기 (Repository delete) (0) | 2024.02.29 |
|---|---|
| git 저장소의 브랜치(branch)명 및 default 변경하기 (0) | 2024.02.29 |
| git [gitError] commit을 하고 push까지 하였는데, github에 반영이 되지 않았을 때 (0) | 2024.02.13 |
| Git (1) | 2024.01.25 |
| 클래스 이름으로 가져오기 | .getElementsByClassName("클래스 네임") |
| 아이디 이름으로 가져오기 | .getElementById ("아이디 이름") |
| 태그 하나 가져오기 | .querySelector("#id") or (태그) |
| 태그 여러개 가져오 | .querySelectorAll ( 태그 여러개 ) |
<!--
DOM(Document Object Model)
HTML 태그들을 하나씩 객체화한 것.
HTML 페이지의 내용과 모양을 제어하기 위해서 사용되는 객체이다.
HTML 태그 당 DOM 객체가 하나씩 생성된다.
HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>클래스 이름 선택</title>
</head>
<body>
<h1>클래스 이름을 이용한 선택</h1>
<ul>
<li class="odd item">첫 번째 아이템이에요!</li>
<li class="even item">두 번째 아이템이에요!</li>
<li class="odd item">세 번째 아이템이에요!</li>
<li class="even item">네 번째 아이템이에요!</li>
<li class="odd item">다섯 번째 아이템이에요!</li>
</ul>
</body>
<script>
HTMLCollection.prototype.forEach = Array.prototype.forEach;
// odd 글자색을 빨간색으로 변경
document.getElementsByClassName("odd").forEach((li) => {
li.style.color = "red";
});
// even은 글자색을 녹색으로 변경
document.getElementsByClassName("even").forEach((li) => {
li.style.color = "green";
});
// 위 코드를 한 줄로 작성
document.getElementsByClassName("item").forEach((li) => {
li.className.includes("odd")
? (li.style.color = "red")
: (li.style.color = "green");
});
document.getElementsByClassName("item").forEach((li) => {
li.style.color = li.className.includes("odd") ? "red" : "green";
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>클래스 이름 선택 실습</title>
</head>
<body>
<ul>
<li class="car ferrari">페라리</li>
<li class="car">람보르기니</li>
<li class="car">벤츠</li>
</ul>
</body>
<script>
// 자동차 중 ferrari만 빨간색 글자로 설정,
// 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
HTMLCollection.prototype.forEach = Array.prototype.forEach;
document.getElementsByClassName;
document.getElementsByClassName("car").forEach((car) => {
if (car.className.includes("ferrari")) {
car.style.color = "red";
return;
}
car.style.fontSize = "20px";
});
// 자동차 중 ferrari만 빨간색 글자로 설정,
// 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>클래스 이름 선택 실습</title>
</head>
<body>
<ul>
<li class="car ferrari">페라리</li>
<li class="car">람보르기니</li>
<li class="car">벤츠</li>
</ul>
</body>
<script>
// 자동차 중 ferrari만 빨간색 글자로 설정,
// 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
HTMLCollection.prototype.forEach = Array.prototype.forEach;
document.getElementsByClassName;
document.getElementsByClassName("car").forEach((car) => {
if (car.className.includes("ferrari")) {
car.style.color = "red";
return;
}
car.style.fontSize = "20px";
});
// 자동차 중 ferrari만 빨간색 글자로 설정,
// 나머지 자동차는 글자 크기를 20xp로 설정(DOM객체.style.fontSize)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>name 속성 선택</title>
</head>
<body>
<form action="" name="join">
<div>
<input type="text" name="user-id" placeholder="아이디" />
</div>
<div>
<input
type="password"
name="user-password"
placeholder="비밀번호"
/>
</div>
<div>
<label> </label>
</div>
</form>
</body>
<script>
// const [id] = document.getElementsByName("user-id");
// const [password] = document.getElementsByName("user-password");
if (!document.join["user-id"].value) {
console.log("아이디 작성");
// return;
}
console.log(document.join["user-id"]);
// // 비밀번호 검사하기
if (!document.join["user-password"].value) {
console.log("비밀번호 작성");
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>name 속성 선택 실습</title>
</head>
<body>
<form action="" name="login">
<input type="text" name="email" />
<input type="password" name="password" />
<div>
<label>
<input type="checkbox" name="save-id" value="" /> 아이디
저장
</label>
</div>
</form>
</body>
<script>
// 이메일과 비밀번호를 유효성 검사진행
if (!document.login.email.value) {
console.log("아이디");
}
if (!document.login.password.value) {
console.log("패스워드");
}
// 아이디 저장을 처음부터 체크되도록 설정
document.login["save-id"].checked = true;
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>아이디 속성 선택</title>
</head>
<body>
<h1>아이디 속성 선택</h1>
<div id="first">
<strong> 첫 번째 DIV 입니다. </strong>
</div>
<div id="second">두 번째 DIV 입니다.</div>
<textarea id="third">세 번째 DIV 입니다.</textarea>
<button id="btn">완료</button>
</body>
<script>
const first = document.getElementById("first");
const second = document.getElementById("second");
console.log(first.innerHTML);
console.log(first.innerText);
second.innerHTML = `<strong>${second.innerText}</strong>`;
second.innerText = `<strong>${second.innerText}</strong>`;
const third = document.getElementById("third");
// value: 사용자가 새롭게 입력한 값을 포함해서 가져오기
console.log(third.value);
// innerHTML: 기존에 작성되었던 내용만 가져오기
console.log(third.innerHTML);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 선택자로 선택</title>
</head>
<body>
<h1>CSS 선택자로 선택</h1>
<p>갖고 싶은 위시 리스트</p>
<ul>
<li>집</li>
<li>맥북</li>
<li>땅</li>
<li>건물</li>
<li>아이폰14</li>
<li>아이폰12</li>
</ul>
</body>
<script>
// 내용에 아이폰이 들어간 태그의 스타일 중,
// fontSize를 30px, color: pink로 변경
const items = document.querySelectorAll("ul li");
console.log(items);
items.forEach((item) => {
if (item.innerText.includes("아이폰")) {
with (item.style) {
fontSize = "30px";
color = "pink";
}
}
});
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 선택자로 선택</title>
</head>
<body>
<h1>CSS 선택자로 선택</h1>
<p>갖고 싶은 위시 리스트</p>
<ul>
<li>집</li>
<li>맥북</li>
<li>땅</li>
<li>건물</li>
<li>아이폰14</li>
<li>아이폰12</li>
</ul>
</body>
<script>
// 내용에 아이폰이 들어간 태그의 스타일 중,
// fontSize를 30px, color: pink로 변경
const items = document.querySelectorAll("ul li");
console.log(items);
items.forEach((item) => {
if (item.innerText.includes("아이폰")) {
item.style.fontSize = "30px";
item.style.color = "pink";
}
});
items.forEach((item) => {
if (item.innerText.includes("아이폰")) {
with (item.style) {
fontSize = "30px";
color = "pink";
}
}
});
// 내용에 아이폰이 들어간 태그의 스타일 중,
// fontSize를 30px, color: pink로 변경
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체를 동적으로 생성, 삽입, 삭제</title>
</head>
<body>
<p>DOM 트리에 동적으로 객체를 삽입할 수 있다.</p>
<p>
createElement("태그명"), appendChild("태그객체"),
removeChild("태그객체")
</p>
<p>위 3개의 메소드를 이용해서 새로운 객체를 생성, 삽입, 삭제한다.</p>
<a id="create" href="">DIV 생성</a>
</body>
<script>
const a = document.querySelector("#create");
// 색은 규칙성이 없으므로 리스트에 담음
const colors = new Array(
"yellow",
"red",
"blue",
"green",
"skyblue",
"orange",
"pink"
);
globalThis.number = 0;
a.onclick = (e) => {
// a태그의 디폴트 이벤트를 막음 (이동을 막음)
e.preventDefault();
const i = Math.floor(Math.random() * colors.length);
// 새롭게 생성한 div개체 (비어있는 div)
const newDiv = document.createElement("div");
//++을 앞에 쓰면1부터 뒤에쓰면 0부터
newDiv.innerText = `새로 생성된 div${++number} 태그`;
newDiv.style.backgroundColor = colors[i];
newDiv.onclick = (e) => {
// e.target: 이벤트 객체를 통해 이벤트를 발생시킨 객체를 가져올 수 있다.
// 부모를 찾아가서 아이를 지움
e.target.parentElement.removeChild(e.target);
};
// 바디에 newDiv생성
document.body.appendChild(newDiv);
};
</script>
</html>
| 자바스크립트 date (0) | 2024.02.07 |
|---|---|
| fetch (0) | 2024.01.30 |
| object, spread, rest , 비구조화 할당 (0) | 2024.01.29 |
| callback (0) | 2024.01.29 |
| function (0) | 2024.01.29 |
// Date객체
// let 객체명 = new Date();
// Date객체의 주요 메소드
// getFullYear(): 4자리 년도
// getMonth(): 0~11사이의 정수(0: 1월, 1: 2월, ..., 11: 12월)
// getDate(): 한 달 내의 날짜(28~31)
// getDay(): 한 주 내 요일(0: 일요일, 1: 월요일, ..., 6: 토요일)
// getHours(): 0~23사이의 정수
// getMinutes(): 0~59사이의 정수
// getSeconds(): 0~59사이의 정수
// getMilliseconds(): 0~999사이의 정수
// getTime(): 1970년 1월 1일 0시 0분 0초 기준 현재까지의 밀리초
// setFullYear(year): 년도 저장
// setMonth(month): 월 저장
// setDate(date): 한 달 내의 날짜 값 지정
// setHours(hour): 시간 저장
// setMinutes(minute): 분 저장
// setSeconds(second): 초 저장
// setMilliseconds(ms): 밀리초 저장
// setTime(t): 밀리초 단위인 t값으로 시간 저장
let now = new Date();
console.log(now);
// 월은 0부터 시작한다.
let date1 = new Date(2023, 0, 1, 12, 0, 0);
console.log(date1);
let date2 = new Date("fmdslkmfklsdmflksdmkl 2023-01-01");
console.log(date2);
const format = `${now.getHours()}시 ${now.getMinutes()}분`;
console.log(format);
// 기본 Date는 UTC 시간이다.
console.log(now.toUTCString());
// 운영체제에 등록된 로컬 시간을 가져오는 것이 일반적이다.
console.log(now.toLocaleString());
function timeForToday(datetime) {
const today = new Date();
const date = new Date(datetime);
let gap = Math.floor((today.getTime() - date.getTime()) / 1000 / 60);
if (gap < 1) {
return "방금 전";
}
if (gap < 60) {
return `${gap}분 전`;
}
gap = Math.floor(gap / 60);
if (gap < 24) {
return `${gap}시간 전`;
}
gap = Math.floor(gap / 24);
if (gap < 31) {
return `${gap}일 전`;
}
gap = Math.floor(gap / 31);
if (gap < 12) {
return `${gap}개월 전`;
}
gap = Math.floor(gap / 12);
return `${gap}년 전`;
}
console.log(timeForToday("2024-01-29T11:35:00"));| 자바스크립트 dom (0) | 2024.02.07 |
|---|---|
| fetch (0) | 2024.01.30 |
| object, spread, rest , 비구조화 할당 (0) | 2024.01.29 |
| callback (0) | 2024.01.29 |
| function (0) | 2024.01.29 |
promise
// https://jsonplaceholder.typicode.com/users
// zipcode만 추출하기
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {
users.forEach((user) => {
console.log(user.address.zipcode);
});
});
// https://jsonplaceholder.typicode.com/users
// zipcode만 추출하기
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {
users.forEach((user) => {
const { zipcode } = user.address; // 추출한 zipcode 값을 새로운 변수 zipcode에 할당합니다
test(zipcode);
});
});
function test(zipcode) {
console.log(zipcode);
}
| 자바스크립트 dom (0) | 2024.02.07 |
|---|---|
| 자바스크립트 date (0) | 2024.02.07 |
| object, spread, rest , 비구조화 할당 (0) | 2024.01.29 |
| callback (0) | 2024.01.29 |
| function (0) | 2024.01.29 |
// JS에서는 객체 내부의 필드를 프로퍼티라고 부른다.
let user = {
name: "이정륜",
age: 20,
address: "경기도",
introduce: () => {
console.log("Hi😍");
},
};
console.log(typeof user);
user.introduce();
// 일반적으로 .를 사용해서 프로퍼티에 접근한다.
console.log(user.name);
// 만약 프로퍼티 이름에 "-"와 같은 특수문자가 들어가 있거나
// 프로퍼티 이름에 규칙성이 있어서 한 번에 가져와야 할 때에는
// []를 사용해서 프로퍼티에 접근한다.
console.log(user["name"]);object
Hi😍
(2)이정륜
let lunch = new Object();
lunch.name = "김밥";
lunch.price = "3000";
console.log(lunch);
lunch.pay = () => {
console.log("결제 완료");
};
lunch.pay();{name: '김밥', price: '3000'}
결제 완료
// 마트에 등록되지 않은 고객이 3명이다.
// 고객별 정보는 다음과 같다.
// 1)
// 이름: 홍길동
// 나이: 30
// 포인트: 3500
// 2)
// 이름: 이순신
// 나이: 22
// 포인트: 0
// 3)
// 이름: 장보고
// 나이: 66
// 포인트: 9500
// 3명을 모두 마트에 등록 시킨다.
// 마트 객체를 만들고 각 고객을 프로퍼티로 선언한다.
// 빈 객체를 생성하여 market 변수에 할당
const market = new Object();
// 사용자 객체들을 생성
const user1 = { name: "홍길동", age: 30, point: 3500 };
const user2 = { name: "이순신", age: 22, point: 0 };
const user3 = { name: "장보고", age: 66, point: 9500 };
// market 객체에 사용자 객체들을 프로퍼티로 추가
market.user1 = user1;
market.user2 = user2;
market.user3 = user3;
// 반복문을 통해 market 객체의 각 사용자 정보를 출력
for (let i = 0; i < 3; i++) { // 0부터 시작해서 2까지 반복하는 반복문입니다. i 변수가 0에서 2까지 변합니다.
console.log(market[`user${i + 1}`]);
}{name: '홍길동', age: 30, point: 3500}
{name: '이순신', age: 22, point: 0}
{name: '장보고', age: 66, point: 9500}
for의 구조
for (initialization; condition; increment/decrement) {
// 실행할 코드 블록
}for (let i = 0; i < 3; i++) {
// 반복되는 코드 블록
console.log(market[`user${i + 1}`]);
}따라서 이 for 문은 market 객체에서 user1, user2, user3의 정보를 차례로 콘솔에 출력하는 반복 작업을 수행합니다.
new 뒤에 나오는 생성자를 자바스크립트에서는 프로토타입이라고 부른다.
프로토타입은 함수로 선언하며, 반드시 대문자로 시작한다.
this는 해당 객체를 의미한다.
function User(id, pw, name, age) {
this.id = id;
this.pw = pw;
this.name = name;
this.age = age;
}
han = new User("hds1234", "1234", "이정륜", 20);
console.log(han);User {id: 'hds1234', pw: '1234', name: '이정륜', age: 20}
const user = {
id: 1,
name: "ryun",
};
// 비구조화 할당(구조 분해)
const { id, name } = user;
console.log(id, name);1 ryun
const user = {
id: 1,
name: "ryun",
};
const { id: number, name, age = 10 } = user;
console.log(number, name, age);1 ryun 10
전개 연산자를 사용하여 객체를 복제
// 기존의 사용자 객체
const user = {
id: 1,
name: "ryun",
};
// 전개 연산자(...)를 사용하여 객체를 복제
let userUpdated = { ...user };
// 복제된 객체 출력
console.log(userUpdated);{id: 1, name: 'ryun'}
전개 연산자를 사용하여 객체를 복제하고 새로운 속성 추가
// 기존의 사용자 객체
const user = {
id: 1,
name: "ryun",
};
// 전개 연산자를 사용하여 객체를 복제하고 새로운 속성 추가
let userUpdated = { ...user, age: 20 };
// 복제된 객체에 새로운 속성이 추가된 것을 출력
console.log(userUpdated);{id: 1, name: 'ryun', age: 20}
// 이미 해당 프로퍼티가 존재하면 수정된다.
const user = {
id: 1,
name: "ryun",
};
let userUpdated = { ...user, name: "ro" };
console.log(userUpdated);{id: 1, name: 'ro'}
// rest
const user = {
id: 1,
name: "ryun",
};
const userUpdated = { ...user, age: 20 };
const { age, ...rest } = userUpdated;
console.log(age, rest);20 {id: 1, name: 'ryun'}
| 자바스크립트 date (0) | 2024.02.07 |
|---|---|
| fetch (0) | 2024.01.30 |
| callback (0) | 2024.01.29 |
| function (0) | 2024.01.29 |
| oper , switch (0) | 2024.01.29 |
// 함수 표현식
const printName = function (name) {
console.log(name);
};
// 화살표 함수 표현식
const printNameArrow = (name) => {
console.log(name);
};
// 함수 호출
printName("John"); // 함수 표현식 호출
printNameArrow("Jane"); // 화살표 함수 표현식 호출
두 정수의 덧셈 결과 출력
// 두 정수의 덧셈 결과 출력
const add = (number1, number2, callback) => {
if (callback) {
callback(number1 + number2);
}
return number1 + number2;
};
add(1, 4, (result) => {
console.log(result);
});
두 정수의 곱셈을 구한 뒤 결과에 2를 곱해서 출력
// 두 정수의 곱셈을 구한 뒤 결과에 2를 곱해서 출력
const multply = (number1, number2, callback) => {
if (callback) {
callback(number1 * number2);
}
return number1 * number2;
};
const total = multply(2, 5, (result) => {
console.log(result * 2);
});
성과 이름을 전달받아서 풀네임을 만든 뒤 "000님" 출력
// 성과 이름을 전달받아서 풀네임을 만든 뒤 "000님" 출력
const fullname = (firstname, lastname, callback) => {
if (callback) {
callback(firstname + lastname);
}
return firstname + lastname;
};
const welcome = fullname("김", "정륜", (named) => {
console.log(named + "님");
});
상품 1개 가격과 총 합을 입력받고 개수를 알아낸 뒤
개수가 5개 이하라면 true 아니면 false
// // 상품 1개 가격과 총 합을 입력받고 개수를 알아낸 뒤
// // 개수가 5개 이하라면 true 아니면 false
const product_price = (price, allcost, callback) => {
if (callback) {
callback(allcost / price);
}
return allcost / price;
};
const boolean = product_price(1000, 10000, (count) => {
console.log(count < 5);
});
결제 상품 가격과 결제 상태를 전달받아서
결제 상태가 true일 때 결제 완료, false일 경우 결제 취소 출력
가상의 결제 정보
// 결제 상품 가격과 결제 상태를 전달받아서
// 결제 상태가 true일 때 결제 완료, false일 경우 결제 취소 출력
// 가상의 결제 정보
const product = (price, pdstatus, callback) => {
if (callback) {
callback(pdstatus ? `${price}원 결제완료` : `${price}:원 결제취소`);
}
};
const cash = product(1000, true, (result) => {
console.log(result);
});
두 수를 받고 몫과 나머지 1)
// 두 수를 받고 몫과 나머지 1)
const calc = (num1, num2) => {
if (num2 === 0) {
return console.log("0으로 나눌 수 없습니다.");
}
var share = num1 / num2;
var rest = num1 % num2;
return `몫:${share}, 나머지: ${rest}`;
};
var num1 = 10;
var num2 = 2;
result = calc(num1, num2);
console.log(result);
두 수를 받고 몫과 나머지 2)
const quotientAndRemainder = (number1, number2, callback) => {
const result = {
quotient: Math.floor(number1 / number2),
remainder: number1 % number2,
};
if (callback) {
callback(result.quotient, result.remainder);
}
return result;
};
const result = quotientAndRemainder(5, 0, (quotient, remainder) => {
console.log("Quotient:", quotient);
console.log("Remainder:", remainder);
});| fetch (0) | 2024.01.30 |
|---|---|
| object, spread, rest , 비구조화 할당 (0) | 2024.01.29 |
| function (0) | 2024.01.29 |
| oper , switch (0) | 2024.01.29 |
| scope ( let , var, const ) (0) | 2024.01.29 |