[TIL] Next.js 심화_목요일

유진·2023년 2월 2일

TIL

TIL Today I Learned

목록 보기

66/116

2023.02.02.(목)

TIL Today I Learned

Good: 모던 자바스크립트 스터디한 점이다.

Bad: next.js를 아직도 못 한 점이다.

[ Next.js 기초 ]

내일도 할 수 있을지 모르겠다. 사실 이번 주에 공부 못 한 이유가 있다. 개인프로젝트 준비를 하고 있었다.
개발자가 되고 싶은 첫 번째 이유가 엄마 회사 홈페이지를 직접 만들어 드리는 것이다. 공부를 시작한 이유이다. 이제 마지막 프로젝트만 남았는데 처음과 끝을 그 이유와 함께하면 좋을 것 같았다.
노션과 피그마로 S.A.를 만들었다. 만약 스파르타코딩클럽에서 팀원들과 프로젝트를 만들지 않았다면 스스로 시작조차 못 했을 것이다. 처음에 아무것도 몰라서 입 벌리고 쳐다보기만 하던 내가 직접 만들었다는 것에 대해 큰 발전이라고 생각한다.

개인프로젝트 노션

[ 모던 자바스크립트 스터디 ]

자바스크립트 기본 -> 함수, 함수 표현식, 화살표 함수 기본 총 3개 읽었다.

- 함수 표현식과 함수 선언문

생각하고 있는 것을 정리하자면. 우리가 지금 흔히 사용하고 있는 것이 함수 선언문이다. 함수 표현식은 바로 호출이 되지 않는다. 함수 선언문 (새치기), 함수 표현식(줄을 정직하게 서는 친구)인 느낌을 가지고 있다.
함수 표현식 vs 함수 선언문 차이!!

함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
// 함수 선언문 
function sum(a, b) { 
  return a + b; 
}
함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성된다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었다.
// 함수 표현식 
let sum = function(a, b) {
  return a + b; 
};
두 번째 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있다.
함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
위 예시를 이용해 설명해 보도록 하자. 스크립트가 실행되고, 실행 흐름이 let sum = function…의 우측(함수 표현식)에 도달 했을때 함수가 생성된다. 이때 이후부터 해당 함수를 사용(할당, 호출 등)할 수 있다.
하지만 함수 선언문은 조금 다르다. 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

- 콜백함수

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}function showOk() {
  alert( "동의하셨습니다." );
}
function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}
// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);
함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다. 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념이다. 위 예시에선 사용자가 "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백이 된다.

항상 스터디 마치고 잘 모르겠는 부분을 다시 공부하고 이해한 것이 맞는지 류제천튜터님께 스터디 대원과 함께 찾아간다. 이게 맞는지 저게 맞는지 비교 분석 후 제천튜터님이 알려주시면 이해가 잘 된다. 그리고 다시 모던 자바스크립트를 읽으면 제천튜터님께서 말한 그대로가 적혀 있다. 충격이다. 이제서야 그 글이 눈에 띄는지!! 오늘 눈에 다시 들어온 문장은 'let sum = function…의 우측(함수 표현식)에 도달했을 때 함수가 생성된다.'이다. 이해되었다.

[ 14주 차 계획 ]

- 스파르타코딩클럽 계획