230524) JS(자바스크립트)와 함수, 그리고 GIT 특강

강의를 듣는데 Function() 에 대한 전반적인 이해가 되지 않아, 응용 문제 해설의 이해가 도저히 되지 않았다. 이대로 강의 진도를 빼도 아무런 의미가 없을 거라는 생각이 들었다.

 

그래서 남들보다 시간이 좀 더 걸리더라도 유튜브 강의들을 샅샅이 뒤져 이해하기로 결심했다.

 

함수에 대한 전반적인 이해가 부족한 상황이었고, 당연히 응용 문제에서는 헤맬 수밖에 없는 상황이었기에 함수의 기초를 배울 수 있는 유튜브 강의를 정말 많이 찾아보았다.

 

그렇게 하며 헷갈렸던 부분, 몰랐던 부분들에 대하여 배운 점을 아래에 정리하였다!

---

매개변수와 함수의 지역변수

- '매개변수'로 받은 값은 복사해서 함수의 '지역변수'가 된다.

let name = "Yui";

function yourName(name) {
  console.log(name);
}

yourName();
yourName("Akina");

위 코드를 실행하면 console은 아래와 같이 표시된다

undefined
Akina

... 그러니까 왜?

 

도저히 이해가 되지 않았다. 위에서 name을 Yui라고 입력해 주었으니 function yournName("Yui")로 입력되어야 하는 것 아닌가?... 위에서부터 아래로 읽는다며! 하는 생각이었다.

 

하지만 한 가지 간과한 것이 있다. 함수는 '호출'이 있어야지 실행을 한다는 점!

 

위에서 let name으로 "yui"를 설정해 뒀다 하더라도 함수를 호출하지 않으면 이는 실행되지 않는다.

그리고 yourName()에는 매개변수값이 들어가거나, 들어가지 않은 상태로 아래에 호출되어 있다.

 

그럼 이를 실행하게 되면 어떻게 될까?

 

1. yourName() 에서는 매개변수가 없기 때문에 'name' 부분이 빈값으로 변경되게 된다. 따라서 "정의되지 않음"을 뜻하는 undefined가 출력되게 된다.

 

2. yourName("Akina")에서는 "Akina"라는매개변수가 name에 복사되어 해당 함수의 지역변수가 되기 때문에 console.log(name)의 name값이 "Akina"가 되는 것이다.

 

매개변수는 값으로 함수에 전달됩니다. 따라서 함수 내의 코드가 함수에 전달된 매개 변수에 완전히 새로운 값을 할당하는 경우에도 변경 사항은 전역적으로 또는 해당 함수를 호출한 코드에 반영되지 않습니다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions

 

---

함수의 표현식에서 함수를 호출할 때는 '함수명'이 아닌 '변수명'을 호출해야 한다.

예시는 아래와 같다.

const hello = function yui() { };
// const 변수명 = funtion 함수명() {};

hello();
// yui(); -> error 발생

* 이처럼 함수명이 이용되는 일이 사실 잦지는 않아서, 함수명을 아예 생략하는 것도 가능하다.

이를 '익명 함수'라고 일컫는다.

 

---

함수의 호이스팅

 

happy();

function happy () {
	console.log("hello");
}

위와 같은 코드가 있을 시 정상 실행 될까?

 

정답은 된다!

 

상식적으로 생각하면 안 되는 게 맞다. 하지만 자바스크립트에는 '호이스팅'이라는 규칙이 있다.

 

호이스팅(Hoisting) 이란?

호이스팅(Hoisting): 끌어 올리다

 

즉, 선언문을 해당 스코프의 최상단으로 올리는 역할을 하는 것이다.

 

따라서 위의 코드를 실행 시에는 아래처럼 자바스크립트에서 해석된다.

function happy() {
	console.log("hello");
}

happy();

 

※ 주의

- 단, let과 const는 호이스팅이 적용되지 않는다.

---

함수에 대한 전반적인 이해도가 없어 이처럼 매우 큰 어려움을 겪었고, 유튜브에 존재하는 많은 JS 함수 관련 영상을 봤지만 아래 수코딩 님의 함수 강의 영상이 가장 와닿았다!

 

특히 왜 함수를 사용하는지에 대한 실용적인 '이유'를 들어가며 설명을 해 주셔서 이해가 쉽게 되는 듯하다.

ㄴ 다른 강의들이 내게 확!! 와닿지 않았던 것도 사용의 적합한 예시를 몰랐던 점에 있는 것 같다...

 

따라서 공유합니다!

#11. 자바스크립트 함수(function type) 기본 10분컷 

https://www.youtube.com/watch?v=NcHBFk1Yn-8 

#12. 자바스크립트 함수의 인수와 매개변수 개념 이해하기!

https://www.youtube.com/watch?v=WPoORBtCQa8 

특히 아래의 12번 강좌의 주제인 '인수'와 '매개변수'가 어려웠는데, 수코딩 님의 영상이 큰 도움이 되었다!

 

12번을 들으려면 11번 강좌에서 설명하는 기초를 확실히 알고 있어야 될 것 같기에...

혹시 같은 어려움을 겪는 개발자 지망생 분들이 계신다면 11번~12번 강의 학습을 추천 드립니다!

 

11-12강 학습이 끝나신 분들께는 아래의 강의도 강추 드립니다!!!!!!!!!

 

[코딩 자율학습 HTML + CSS + 자바스크립트] 10장- 자바스크립트 함수 다루기 - 2

https://www.youtube.com/watch?v=bkMGjCGEgiY 

---

복습을 위한 강의 판서

 

GIT 특강

 

revert : 커밋로그를 유지하면서 안전하게 버전을 되돌리기

- git revert <취소할 커밋>: <취소할 커밋>이 취소된 새로운 커밋 만들기

 

reset : 모든 커밋로그를 지우고, 버전을 완전히 되돌리기

1. soft reset - 저장소로 커밋한 것만 초기화 (작업 디렉토리, 스테이지에는 유지) | 커밋만 되돌리기

-> $git diff --staged로 접근해서 이후에 파일 조회 가능

2. mixed reset - 스테이지/저장소까지 초기화 (작업내역까지는 유지가 됨) | 스테이지까지 되돌리기

3. hard reset - 작업디렉토리/스테이지/저장소 전체 초기화 | 전체내역 되돌리기

 

-  <되돌아갈 커밋>으로 soft reset하기 : git reset --soft <되돌아갈 커밋>

-  <되돌아갈 커밋>으로 mixed reset하기 : git reset --mixed  <되돌아갈 커밋> / git reset  <되돌아갈 커밋>

-  <되돌아갈 커밋>으로 hard reset하기 : git reset --hard  <되돌아갈 커밋>

 

 

원격 저장소와의 네 가지 상호작용

1. 클론 (clone) : 원격 저장소를 복제

  - .git 숨김 폴더까지 같이 복제됨 ($git init을 할 필요가 없다)

원격 저장소 브랜치 이름 main 브랜치 == master 브랜치 origin == 원격 저장소에 붙은 일종의 별명 origin/HEAD = 원격 저장소 origin의 HEAD origin/main = 원격 저장소 origin의 main

2. 푸시 (push) : 원격저장소에 밀어넣기

- 원격 저장소에 로컬저장소의 변경사항을 밀어넣기

 

3. 패치(fetch) : 원격 저장소를 일단 가져만 오기

- 원격 저장소의 변경사항을 가져오되 병합하진 않는 방식 ( 확인만 해 볼 수 있도록 )

 

4. 풀(pull): 원격 저장소를 가져와서 합치기 [패치(fetch)+병합(merge)]

- 패치(fetch)와 병합(merge)을 동시에 하는 방식

 

풀 리퀘스트 (Pull Request)

1. 기여하려는 저장소를 본인 계정으로 포크하기

- 내가 소유하고 있지 않은 특정 원격저장소를 내 계정으로 복제해오는 과정 (Clone의 원격 버전)

- 소유하고 있지 않은 원격저장소에는 '푸시'할 수가 없기 때문임.

 

2. 포크한 저장소를 클론하기

 

3. 브랜치 생성 후 생성한 브랜치에서 작업하기

- 새로운 브랜치를 생성 후 해당 브랜치에서 변경사항을 만들고 커밋한다

 

4. 작업한 브랜치 푸시하기

- 생성한 브랜치를 푸시한다.

- 이후 깃허브에 풀리퀘스트 버튼 생성 확인.

 

5. 풀 리퀘스트 보내기

 

오늘도 잘 해냈다!