[React] Day_20 데일리 정리

 

이젠 너 안믿어. 너랑 손절이야 GPT.

 

오늘은 3주ㅊ... 아니 특강과 개인과제를 조큼 시도해보았다!

(실은 오늘 블로그 CSS만 2시간 만짐 ㅋㅋ ㅠㅠ GPT 이런 도움안되는 깡토...ㅇ...읍....)

개인과제는 아직 아가단계라 나중에 중간정도 했을때 til로 작성해보도록 하는거...로?

(암튼 많이 안되어서 그런거 아님. 오늘 시작해서 그런거 아님.)

ㄱ...그래서 오늘은 그냥 특강모음집임 암튼 시작.

라쯔고(?)

 

 

 

 

싱나는(?) 특강정리 ^-^)b

 

달리기반 특강정리

어제 했던 내용 그으으으대로 한게 많아서 아하! 했던것만 정리하겠음 ㅇㅇ

 

달리기반 사람들은 알거야... 이게 무슨 뜻인지...

 

그래서 결론은요? 예제만 할거임 ㅋㅋ

 

 

- pop() : 마지막값 출력해주는 메서드 , console.log 안에 있어도 업데이트는 됨.

// 예제 1
let numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.pop()) // 마지막 칭구인 6
console.log(numbers.pop()) // 그다음 칭구인 5
numbers.pop()
numbers.pop()
console.log(numbers) // 없어진 친구들 빼고 출력 히히 1 2 3 4

// 예제 2
let colors = ["red", "green", "blue"];
const color = colors.pop();
console.log(color); // blue
console.log(colors); // [ 'red', 'green' ]

 

 

- shift() : 얜 앞에 있는 값 출력함 pop()과는 정반대. 근데 얘도 값은 가진다.

[귀찮아서 예제없음]

 

대신 귀여운 친구들을 드릴게요 >.ㅇ?

 

- slice() : 말 그대로 슬라이스! (ft.헨...rㅣ) 원하는 곳까지만 추출해서 ㅇㅇ.... 가능... (음수도 가능!)

 

이건 못참아서 데려옴;;

let animals = ['dog', 'cat', 'tiger', 'elephant', 'zebra']
console.log(animals.slice(2, 4)) // [ 'tiger', 'elephant' ]
console.log(animals.slice(-3)) // [ 'tiger', 'elephant', 'zebra' ]

 

 

- sort() : 요약짤의 그거 맞음. 배열 정렬하는 노...ㅁ 아니 친구. 문자열이 기본임. 숫자정렬하고싶어요? 그럼 비교 함수 쓰세요.

let students = [
  {name: "림졍", age: 23},
  {name: "림뎡", age:20},
  {name:"림둉", age:17},
  {name: "림듕", age: 25}
]

// 저 a,b는 오름차순 만들어주는 친구임 ㅇㅇ
students.sort((a,b)=> a.age - b.age)
console.log(students);

/*[
  { name: '림둉', age: 17 },
  { name: '림뎡', age: 20 },
  { name: '림졍', age: 23 },
  { name: '림듕', age: 25 }
]*/

 

 

- map() : 함수의 결과를 새로운 배열로 바꿔주는 칭구... 근데 오늘 보니 까먹은 칭구... (기존 배열은 변경 안됨!)

let num = [1,2,3,4,5];

const newNum = num.map(function(x){
  return x * 10
})

console.log(newNum)

// 결과값은 곱하기 10된 배열로 나옴 ㅇㅇ

 

 

- filter() : 조건 만족하는 요소들만 모아모아 새롭게 만들어주는 칭구 ( ??? : 얘는 2분 줄게요. 시작. )

let products = [
{ name : "Laptop", price: 1200, category: "electronics"},
{name : "Shoes", price: 100, category: "clothing"},
{name : "Smartphone", price: 800, category: "electronics"},
{name : "T-shirts", price: 20, category: "clothing"}
];

const newProducts = products.filter((product) => {

  if (product.category === "electronics") {
    return true;
  }
  if (product.price < 30) {
    return true;
  } 
})

newProducts.forEach((product) => {
  console.log(product)
})

//밑에도 위에랑 같음 암튼그럼 ㅇㅇ.. 근데 아래처럼 쓰면 헷갈리니까 위에처럼 쓰는걸 권장하심.
console.log(newProducts) 
  
  /* { name: 'Laptop', price: 1200, category: 'electronics' },
  { name: 'Smartphone', price: 800, category: 'electronics' },
  { name: 'T-shirts', price: 20, category: 'clothing' } */

 

 

- forEach() : 배열의 요소 출력해주는 친구. 반환값이 없어 주로 단순작업 수행 시 사용됨

let user = [
  {name : "Alice", age : 25},
  {name : "Bob", age : 30},
  {name : "Charlie", age : 35}
];

user.forEach(x => {
  console.log(`이름 : ${x.name} 나이 : ${x.age}`)
});

/* 이름 : Alice 나이 : 25
이름 : Bob 나이 : 30
이름 : Charlie 나이 : 35 */

절대 이런 실수 하지 말자... 넌 이러면 오류 어디서 났는지 모르고 당황할거잔아;

 

 

 

git 심화 특강정리

여러분 Zoom 주석을 함부로 달지 마십쇼. 기록이 다 남습니다.

 

마치 이렇게 예미넴을 그린 읍읍.... 으으읍

branch 정리

git branch branch명 : branch 생성.

git branch : branch 확인

 

branch 이동 명령어

[ git switch branch 명 ] or [ git checkout branch 명 ]

이 둘의 차이는 없음. 근데 예시를 보여주시는 우리의 대통령은 계속 췤아웃 씀. (쩨끼라웃-!)

∴ branch"만" 이동하는 명령어 → git switch!

 

branch를 한 번에 생성, 그리고 이동. (스위친 마씨, 쮁아웃 마비.)

git switch -c branch명

git checkout -b branch명

 

새로운 branch에서 수정된 코드 저장. ( ??? : 이젠 지겹잖아요 ye? )

git add . 

git commit -m "메세지"

git push origin  branch명 (난 이친구까지 기본으로 썼다... 그것도 냅다 main으로...) 

 

+)  branch를 합치는 명령어.

git switch 최종 branch명 (main) -> 최종  branch로 이동,

git merge 합칠  branch 친구들 (login, 등등) -> 그 뒤에 합치기. 

---

근데 merge? 머지? 안함. 걍 GitHub 에서 합침 ㅇㅇ.

git push origin branch명 

---

추추가 ) 내 로컬에도 반영할땐 이렇게. git pull origin main

 

 

협업 실전 가이드. 

 

놀랍게도 지금까지는 완벽하게 기능을 개발해야 merge가 가능...

??? : 야 그럼 어케해야함?

뭐긴 뭐야 냅다 눌ㄹ....

 

네 일단 저거 아니구요.

 

테스트 용 branch를 만들어서 쓰면 된답니다! 어때요 참 쉽죠? ^-^?

(일단 합쳐놓고 에러를 본 다음, 쓸만하면 메인으로 넣어주자!)

 

 

초기 세팅 [박민준이랑 원시적인 방법으로 했었던 기억이 새록새록...]

 

1) 팀장 초기 세팅.  (눈물나지만.. 들어야겠지? ㅜㅜ)

폴더 생성 →  초기 코드 작성 → git init add commit → GitHub repository 생성 → git push.

 

2) branch 설정 (또 팀장이다..)

git switch -c dev → git push origin dev

 

3) GitHub에서 dev(branch)를 default로 (팀장 또 너냐...?)

 

4) 팀원 collaborator 등록

 

5) 팀원들 할일? git clone 주소해서 기능 개발 시작하면됨ㅇㅇ

 

 

기능 개발 시작.

 

1) 각자 기능 branch 생성 및 기능 개발하기 (팀원은 git init 압수)

git switch -c branch명

 

2) 코딩 뚱땅뚱땅 하다가 dev에 merge 하긔.

 

3) code review 요청

 

4) review 받기

 

5) merge 전 내 로컬에서 충돌 해결 및 테스트 꼬오오옥 하기

기능 branch → git pull origin dev.

 

6) merge하면 끝.

 

 

 

마무리 - 이제 특강 없으니 개인프로젝트 열심히 해야겠지요 ^-^?

 

아ㄴ.....ㄴ...넵... (모르쇠)

 

오늘은 진짜진짜 TIL스럽게 적어본 것 같다.

드디어 생략할 수 있는 부분이 많아졌다니..! 성장하는 게 보인다 림졍!

지금까지 힘들었던 이유를 생각해보자며는... 냅다 내용을 모두 집어넣으려고해서 그랬던 거 같기도..?

하지만 그 덕에 지금 달리기반 수업을 어찌저찌 잘 따라가고 있고

눈에 보이는 것도 많아졌으니.. 나쁜 것은 아니라고 생각합니둥~

내일은 개인과제에 조금 집중해보고... 행복하게 주말 보내야지 히히 ^-^)v

 

 

오늘의 KPT 회고는요?

• Keep : 생략할 수 있는 부분이 많아졌다! 이대로만 성장하자!
• Problem : 밀린 개인과제... 해야겠지?
• Try : 내일도 열심히... 🥲

 

끝!