JavaScript 문법 종합반 2주차. (4)

개인 과제 프로그레스.

1. 스크립트의 모듈화를 배웠다. 

 

모듈화를 해놓으면 다른 js 파일에서 import, export를 해올 수 있다. 

<script src="script.js" type="module"></script>

 

html에서 모듈 선언. 

import { addCards, modalAdd} from "./ui.js";

 

ui.js로부터 함수를 가져오는 코드.

./ui.js에서 ./는 현재 폴더를 뜻한다. 현 위치에 존재하는 ui.js를 불러오라는 뜻이다. 

 

2. for문 지적.

for문을 쓸 때 습관적으로 i에 변수 선언을 안 했는데, 앞으로는 꼭 하라는 튜터님의 불호령이 떨어졌다. 앞으론 잘 하자. 

 

3. addEventListener와 함수. 

cardWrapper.addEventListener("click", modalAdd);

fixBtn.addEventListener("click", function () {

    window.location.reload();

});

 

이벤트 리스터 안에 들어가 있는 펑션에는 modalAdd(); 이런 식으로 함수를 선언하지 말고 참조만 해야한다. 

따라서 위에처럼 modalAdd 이런 식으로 써줘야 한다. 

 

4. 배운 점.

 

카드 내부에 리스트를 생성하고, 그 안에 데이터를 아무리 고봉밥으로 넣은 뒤 디스플레이를 none으로 해버리면 css에 문제가 안 생긴다.

 

이걸 이용해서 모달을 표시할 때 한 번 다시 데이터베이스를 거쳐 와 찾아오는 과정을 생략하여 렉을 줄일 수 있게 되었다.

 

5. validation. input이 비어있을 때는 null이 아니라 '빈 문자열.  

searchBox.addEventListener("submit", function (e) {

    // 검색창 submit와 관련된 코드입니다.

    e.preventDefault();

    const userInput = searchInput.value;

    console.log(userInput)

    if (userInput === '') {

        alert('검색어를 입력해주세요')

 

=== 뒤에 null을 넣었는데, '빈 문자열'을 넣어줘야한다. 텅 빈  input의 밸류는 널이 아니라 빈 문자열이 되기 때문. 

 

배열의 구조 분해

let fruits = ['a' , 'b', 'c']

const [first, second, third] = fruits

console.log(first) // a

 

콘솔에다가 세컨드를 입력하면 b가, 서드는 c가 출력된다. 

let fruits = ["a", "b", "c"];

const [first, ...rest] = fruits;

console.log(first); // a

console.log(rest);// ['b', 'c']

 

rest로 묶어줄 수도 있다. 

 

객체의 구조 분해. 

let person = {

    name: "alice",

    age: 22,

    city: "new york",

};

let { age, name } = person;

// const age = person.age

// const name = person.name 이것과 위에건 같다.

console.log(name) // alice

console.log(age) // 22

 

객체도 마찬가지로 rest로 묶어줄 수도 있다. 문법은 배열과 똑같다. 

 

pop과 관련한 예제

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

 

pop은 값을 가지고 있는다. 콘솔 로그 안에 들어가 있어도 배열은 업데이트가 된다. 

let colors = ["red", "green", "blue"];

const color = colors.pop();

console.log(color); // blue

console.log(colors); // [ 'red', 'green' ]

 

shift는 pop과는 정반대의 성질을 가지되, 얘 역시 값을 보유하고 있다. 

 

slice 예제.

let animals = ['dog', 'cat', 'tiger', 'elephant', 'zebra']

console.log(animals.slice(2, 4)) // [ 'tiger', 'elephant' ]

console.log(animals.slice(-3)) // [ 'tiger', 'elephant', 'zebra' ]

 

슬라이스에 음수를 넣을 수도 있다! 

 

let products = [

    { name: "laptop", price: 1200, category: "electronic" },

    { name: "shoes", price: 100, category: "clothing" },

    { name: "sp", price: 1200, category: "electronic" },

    { name: "shirts", price: 20, category: "clothing" },

];

let newPrducts = products.filter(function (product) {

    if (product.price >= 100) {

        return true;

    }

});

console.log(newPrducts)

 

필터 안에 리턴이 '트루'인걸 배열에 추가한다. 

그러니까, 조건문을 써야겠지? 

git 심화

1. 브랜치 활용.

브랜치 복사본 생성 명령러

git branch 브랜치 이름 -> 브랜치 생성.

git branch -> 브랜치 확인. 

 

브랜치 이동 명령어

git switch 브랜치 이름 혹은 git checkout 브랜치 이름 이 둘의 차이는 거의 없다. 

브랜치만 이동하는 명령어가 git switch

 

브랜치를 한 번에 생성하고 이동.

git switch -c 브랜치 이름

git checkout -b 브랜치 이름

 

새로운 브랜치에서 수정된 코드를 저장. 

git add . 

git commit -m "메세지"

 

그 다음에 main에 반영하기 위해서 main에 합친다. 

 

브랜치를 합치는 명령어.

git switch 최종 브랜치 이름(main) -> 최종 브랜치로 이동,

git merge 합칠 브랜치 이름(login, 등등) -> 그 뒤에 합치기. 

 

근데 머지하지 마!~!!!!!

깃허브에서 합쳐!!!!

 

깃허브에서 합치는 방법 - pull request

pull : 당겨서 합치는 것. 

git push origin 브랜치명 

 

정리

1. 브랜치 생성 및 이동

2. 기능 개발 및 코드를 저장. 애드, 커밋.

3. 코드를 업로드하고 pull request 생성. 

4. 깃허브에서 mege. 

5. 내 로컬에도 반영. git pull origin main

 

협업 실전 가이드. 

1. 문제점. 지금까지의 방식은 '완벽하게 기능 개발해야 merge가 가능'

1-1. 해결책 그래서 테스트 용 브랜치, 기능 브랜치를 따로 만들어서 씀. 테스트 용 브랜치에 일단 합쳐놓고 에러를 본 다음, 쓸만하면 메인으로 합침. 

 

2. 문제점 그냥 합쳤을 때 에러의 가능성이 너무 높음. 

2-1. 해결책 기능 브랜치에서 먼저 테스트

실전 가이드. 

초기 세팅

1. 팀장 초기 세팅. 

a. 폴더 생성.

b. 초기 코드 작성.

c. git init add commit

d. 깃허브 레포지토리 생성.

e. git push.

 

2. 팀장 브랜치 설정 

a. git switch -c dev

b. git push origin dev

 

3. 팀장 깃허브에서 dev 브랜치를 default로 설정. 

4. 팀원들을 collaborator로 등록

 

5. 팀원 - git clone하기. 

git clone 주소 .

 

기능 개발 시작.

1. 각자 기능 브랜치 생성 및 기능 개발. 

git switch -c 브랜치 이름. 

 

팀원은 git init 할 필요 없음!

 

2. 개발 열심히 하다가 dev에 합체 시도. 

 

3. 코드 리뷰를 시도. 

 

4. 리뷰를 받음.

 

5. 합치기 전에 내 로컬에서 충돌 해결 및 테스트.

기능 브랜치에서 git pull origin dev.

 

6. merge

합친다!