240430 TIL_개인 프로젝트1 (영화 검색 사이트 제작) 종료 > 과제 해설 영상(반응형, 유효성 검사, semantic tag, module, event, DOM ), 개념 특강 (비동기 함수), Git 심화 특강 (branch)

클로저

:함수와 그 함수가 선언됐을 때의 환경을 함께 기억하는 함수형 프로그래밍의 개념
스코프 체이닝은 안에서부터 밖으로 나감
호출, 정의 개념 꼭 알기 (*제일 헷갈림)
-> 스코프는 함수가 정의 됐을 때 결정됨
=> 외부 함수가 중첩 함수보다 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주가가 종료한 외부 함수의 변수를 여전히 참조할 수 있다. 이 개념에서 중첩 함수가 클로저임
( .... 예? 🧐 )

응용) 보안 (외부에서 허용하지 않는 은닉된 변화) + 이전 상태 유지
( 네? )

[과제 해설 영상]

1. 반응형 디자인
2. 검색 결과가 없습니다. 출력
3. CSS 파일 따로, reset.css도
4. 바디 내부에 헤더, 메인 나누기
5. image를 감쌀 때는 figure 태그
6. form 태그는 출력값 확인할 때 좋다. 바닐라 JS는 단, onsubmit으로 이벤트 핸들러를 하는 방식은 권장되지 않음.
7. camelCase vs snake_case 로 함수명, 변수명을 쓸 때는 JS에서는 전자 추천 (언더바의 경우 파이썬!)
8. 위 아래 왔다 갔다 하면서 보는 코드는 좋은 코드가 아님
9. 폴더 : assets (이미지, 동영상), src(JS), style(css)
10. 헤드 내부에 링크에 css 불러오기
11. 스크립트 헤드에 넣고 싶으면 파싱 문제가 있기 때문에, 스크립트 src = 로 바로 불러오는 게 아니라 두 가지 방법이 있는데 후자 추천
    11-1. script defer src = "" (지연 실행)
    11-2. script type="module" src="./src/어쩌구.js"
12. src 폴더 내부에 기능 별로 나눠서 쓸 수 있음. 단, type="module" 을 써줘야 함. (ex. reder.js / search.js...) => 협업 중 변수 이름이 겹칠 수 있으므로 모듈을 넣어주기... 아니면 같은 변수명 쓸 수 없고 그럼 (독립적)
    12-1. 그러면 다른 파트에 있는 함수를 쓰고 싶을 때 어떻게 하는지?
    1) 작성된 함수 앞에 export (수출) 기재
    2) 가져오고 싶은 곳에 import (수입) {함수명} from. "/./어쩌구.js"
    => 임포트된 경우 다운받은 js를 먼저 읽게 됨
13. 인덱스에는 메인 하나만 넣어놓고, 메인 js 안에 import from 으로 넣으면 인덱스에 스크립트 여러개 넣을 필요 없음 !
14. 이벤트 위임
    자식 하나하나에 이벤트를 심는 것은 비효율적 -> 부모에게 심기!
    즉, 이벤트 버블링을 캐치해서 실행하기 => 메모리 절약
    e.g. 외부를 찍었을 경우 return; 시켜버리는 등 예외
15. event.target vs event.currentTarget
    event.target : 이벤트가 발생한 요소 (해당 위치의 요소)
    event.currentTarget : 이벤트 핸들러가 등록되어 있는 요소
    event.target.parentNode.id : 부모 요소의 아이디
16. DOM 제어
    document만 이는 거 아니다!! 뭔가 지정할 때 forEach의 매개변수도 써도 됨
17. async 함수는 항상 Promise를 반환한다.
    함수는 무조건 return 값이 반환되는데, async 함수는 promise를 반환하는 것
    (return이 없다면 언디파인드가 반환됨.)
    
    

[어싱크-어웨이트, 프로미스 개념 잡기]

어싱크, 어웨이트, 프로미스
동기적 흐름, 동기적인 코드 실행 = 순서대로 위에서부터 차례대로 실행
비동기적인 코드 흐름은 다른 것부터(바로 뒤에 있는 것)부터 실행
-> 0초여도 그 다음에 실행됨
=> 동기적인 흐름이 종료된 이후에 비동기 실행

어떤 코드들이 비동기적으로 작동하는가에 대해서는 좀 더 공부를 하긴 해야 하나, 프론트엔드 부분에서는 패치 정도로 생각하면 됨 -> 내장 함수 fetch() 등 (제이슨 플레이스 홀더_가짜 정보 호출하는 api 사이트도 있음)

이거는 외우자!
promise는 비동기적인 작업을 해 주겠다는 약속이다.
비동기를 동적으로 작동하게 하는 게 await

프로미스의 상태 3가지 (콘솔로그에서도 확인 할 수 있다.)
1. pending : 약속을 막 한 상태

( 약속은 동기적인 거 다 실행한 이후에 실천하러 감!)

2. fulfilled : 약속을 잘 수행한 상태 (약속을 지킴)
3. rejected : 약속 못 지킴

다시 한 번....
"비동기 작업은 약속(promise)을 돌려준다."

e.g. const something = fetch(url)
something에는 프로미스를 반환 (fetch는 대표적인 비동기 함수이고, 비동기 함수는?)

약속의 결과를 가지고 뭔가를 하고 싶을 때, 다른 동기 다 끝나고 하는 게 아니라 그때 실행하고자 하면?

두 가지 방안이 있음.
약속이 수행 또는 실패한 이후 (fulfilled or rejected) 실행할 코드는 어떻게 작성하는가?

1. then 사용
   단, 스코프 내부에 정보를 담아야 한다.

2. await 사용 (추천)
   단, 사용하려면 어싱크를 붙여야 한다.
   -> async - await 는 페어
   (=> 즉, 전역에서 await 홀로 쓰기가 불가능하다는 뜻이기도 함)

어싱크를 붙이면 비동기 함수가 됨. 비동기 함수를 기다리기 위해서는 기다리는 것 자체가 비동기가 되어야 한다. (= await를 쓰려면 async가 필요하다는 말)

전역에서 await가 불가능하므로, 전역에서 이를 가져오려면 두 가지 방법이 있다. 하나는 위에 언급한 then (스코프 내부에서 쓰면 됨) 과 new promise 방법

e.g. 1) 뉴 프로미스 사용법 ( '그냥 왠지 3초 후에 api 정보를 받아보고 싶어' 의 예시)

async function callAPIAfter3Seconds () {
	const 약속 = await new Promise((resolve) => {
    	setTimeOut(() => {
        	const url = '';
            const response =fetch(url);
            resolve(response);
     	}, 3000);
	});
callAPIAfter3Seconds();

(...인데 일단 뉴 프로미스 관련해서는 좀 더 공부해보기로....! 😕😞😖)

전역에서 await가 아니라 then을 써야 하는 순간이 있는데, 그때 반환된 promise가 아니라 리턴 값을 사용할 방법도 있다. (비동기 함수는 promise를 반환하는데 then을 예쁘게 잘 사용하면 리턴 값 사용 가능)

e.g. 2) then을 사용해 리턴 값 사용하기

async function someFunction () {
	const url = "주소";
    const response = await fetch(url);
        return 5;
    }
 const value = someFunction.then((a)) => console.log("a",a));

이 때 a는 5를 반환

(정리)
1. 어싱크 - 어웨이트는 꼭 같이 써야 한다.
2. 따라서 어웨이트는 혼자 쓸 수 없음
3. 즉, 전역에서 쓸 수 없다는 건데 그 해결법으로 2가지가 존재
3-1. then 쓰는 것
3-2. 뉴 프로미스 쓰는 것
4. 어싱크 함수는 무조건 프로미스를 반환한다. (이건 외울 것)
5. 그런데 어싱크 함수 내에서 발생하는 리턴 값을 이용하고 싶을 땐 어떻게 하느냐? 그럴 때 then을 써서 값을 가져오면 된다.
6. 비동기 함수 사용처는 외우는 것이 편하지만, 프론트엔드 쪽에서는 패치 가져오는 것이 대부분이라 외우는 것에 힘쓰지 않아도 된다.

[git & github 강의 심화]

19:00-20:00 강의

1. 브랜치 활용하기
   수정은 하고 싶은데, 원래 파일은 그대로 놔두고 싶어!
   -> 복사본 === 브랜치

git branch ㅁㅁㅁ 로 생성 (아무것도 안 뜸)
확인 명령어 git branch 초록색 => 내가 위치한 브랜치 -> 확인 후 q로 빠져나가기

2. 이동 명령어
   git switch 브랜치 이름(ㅁㅁㅁ) _new!
   or
   git checkout 브랜치 이름(ㅁㅁㅁ)
   : 이동 외 다른 기능이 더 있어서 스위치 선호

수정본 수정하기 위해서 복사한 거 열기 위해서 이동 (코드를 바꿔도 메인에서는 영향 x)

3. 브랜치 한 번에 생성 & 이동 (1+2)
   git switch -c 브랜치 이름 (ㅁㅁㅁ)
   or
   git checkout -b 브랜치 이름(ㅁㅁㅁ)

-> ㅁㅁㅁ에서 수정하면 메인에선 어떨까? 당연히 수정 안 됨 (확인 하는 방법은 git switch main으로 가보면 됨

4. 코드 짠 브랜치를 main에 합치기
   git switch main 으로 이동! (합쳐질 곳) 그곳에서
   git merge ㅁㅁㅁ(합쳐질 코드)

사실 git merge 안 씁니다^.^ !!

터미널 말고 github 온라인 저장소에서 합치자
Pull request로 merge 할 수 있음
: 당겨서 합친다. : 요청한다.

머지 하지 않고, 그냥 저장 -> 푸쉬한다!

git push origin ㅁㅁㅁ
=> 하고 나면 gitub에 브랜치가 보인다! (from 잘 확인)

초록 버튼 클릭 클릭 merge pull request…

하면 깃헙에서 알아서 합쳐줬다!

5. git pull origin main
   합쳐진 거 받아오기 ~! …끝?

잠깐!!
=> 문제가 또 있다 ^.^!!

main 브랜치 === 배포용
으로, 완성된 친구 올려야 함

해결책 1) main 브랜치 (배포용) -develop 브랜치 (테스트용) - 기능 브랜치 (기능 개발용)
3단계

해결책 2) 로컬 (= 내 컴퓨터) 에서 먼저 테스트
기능 브랜치인 내 쪽에서 데브 브랜치를 끌고 와서 먼저 테스트 한다.
git pull origin dev
이 때는 충돌 시 해결방법이 있다.

——
(아마)… 확인 해보기….ㅎㅎ
git clone -> git switch -c ㅁㅁㅁ (알아서 깃헙에 올라감)-> add. commit -> git pull origin dev -> git push 기능 브랜치 -> 깃허브에서 git merge

단계가 맞는지 확인 하기...^^