코드캠프에선 짧은 기간동안 실속있는 실습 위주의 학습 방식으로 React, Next.js를 공부했다면, 수료 후 Learning React 책을 통해 React를 조금 더 심도있게 공부해보자!
(사실 책 너무 못생김....ㅎㅎ)
책으로 공부하면서 기존에 알지 못했거나 이해하지 못했던 내용 위주로 블로그에 정리해보려한다!
📌 2장 자바스크립트
✏️ 템플릿 문자열 (template string)
템플릿 문자열을 사용하여 문자열 중간에 변수를 삽입하고 빈칸을 삽입할 수 있다는 사실은 알고 있었고, 코딩 과정에서 유용하게 사용하였다.
빈칸을 유지하는 것 뿐만 아니라 탭, 개행 문자 등도 유지한다는 사실을 책을 통해 깨달아 정리해둔다.
const email = `
${firstName}님께,
${event} 티켓 ${qty}건을 구매해 주셔서 감사합니다.
주문 상세 정보 :
${lastName} ${firstName} ${middleName}
${qty} x $${price} = $${qty*price} 공연 : ${event}
공연 시작 30분 전까지 배부처에서 티켓을 수령하시기 바랍니다.
감사합니다.
${ticketAgent} 드림
`공백 뿐만 아니라 탭, 개행 문자도 유지해주기 때문에 위와 같이 전자우편 템플릿에서 활용할 수 있다.
✏️ 컴파일링 (compiling)
브라우저에서 코드를 실행하기 전에 더 호환성이 높은 코드로 변환하는 것을 컴파일링이라고 한다.
가장 유명한 자바스크립트 컴파일링 도구로는 바벨이 있다.
코드를 바이너리로 변환하는 전통적인 컴파일링과 달리, 자바스크립트 컴파일링은 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 자바스크립트 구문으로 변환한다.
(바이너리? 이진 형태로 인코딩 된 실행파일)
✏️ ES6 모듈(module)
코딩을 하면서 생각없이 쓰던 export / import에 의미가 있다는 것을 책을 통해 새롭게 깨달을 수 있었다. export / import에 대해 살펴보자!
📝 자바스크립트 모듈?
자바스크립트 모듈이란 다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다.
자바스크립트는 모듈을 한 모듈당 하나씩 별도의 파일로 저장한다.
📝 노출시키는 방식
[한 모듈에서 여러 자바스크립트 객체 노출]
export 를 사용해 다른 모듈에서 활용하도록 이름(함수, 객체, 변수, 상수 등이 될 수 있다)을 외부에 익스포트할 수 있다.
[한 모듈에 하나의 자바스크립트 객체 노출]
export default 를 사용해 모듈에서 단 하나의 이름만을 외부에 익스포트할 수 있다.
📝 불러오는 방식
import 를 사용해 다른 자바스크립트 파일에 있는 모듈을 불러와 사용할 수 있다.
여러 이름을 노출한 모듈은 import 할 때 객체 구조 분해를 활용할 수 있으며, export default를 사용해 한 이름만을 노출한 경우 노출된 대상을 한 이름으로 부를 수 있다.
// 객체 구조 분해를 통해 여러 이름을 노출한 모듈 import
import { print, log } from './text-helpers';
// 한 이름만 노출한 모듈 import
import freel from './mt-freel';
print('메세지 print');
log('메세지 log');
freel.print();