개인 프로젝트에 집중하느라 블로그 운영을 한동안 하지못했네요 .
자바스크립트 코어에 대해서 공부하였습니다 .
클래스
function User (first , last) {
this.firstName = first
this.lastName = last
}
const heropy = new User('Heropy' , 'Park')
console.log(heropy) // { firstName : "Heropy' , lastName:"Park" }
여기서 User 는 생성자 함수 (constructor) 입니다. ( 네이밍은 파스칼케이스로 , 생성자 함수라는 개발자들의 암묵적인 규칙)
제가알기로 자바에서는 이 constructor가 하나에 클래스에 반드시 한개 이상 존재해야하는데 자바스크립트에서도 이러는지는 아직
잘 모르겠네요 ,
사람들이 얘기하는걸 들었는데 자바스크립트의 클래스는 다른 언어의 클래스와 살짝 다르다고 들었습니다 .
ES6 문법
class User {
constructor(first , last ) {
this.firstName = first
this.lastName = last
}
}
class Son extends User {
constructor(first,last , age) {
super(first,last)
this.age = age
}
}
extends : 상속
super : 부모 클래스의 생성자 함수 인자
Prototype
User.prototpye.getFullName = function() {
return `${this.firstName}${this.lastName}`
}
console.log(heropy.getFullName()) // Heropy Park
user라는 함수에 숨어저있는 prototype 이라는 속성에 getFullName을 할당해서 몇개의 객체를 만들던 한번만 만들어지기때문에
메모리를 효율적으로 관리할 수 있습니다 .
저는 prototype을 유전자라고 생각합니다 .
부모객체에서 물려받은 prototype이라는 속성에서 필요한 부분을 참조하여 사용할수 있는 유전자라고 생각하니 이해가 쉬웠습니다 .
this
일반 함수는 호출 위치에서 따라 this 정의
화살표 함수는 자신이 선언된 함수 범위에서 this 정의
가져오기와 내보내기
흔하게 개발하는 과정중에서 (React를 사용한다고 가정하에 )
import , export를 하여 파일을 가져와서 사용하는경우가 정말 많습니다 .
export는 두가지의 방법으로 내보내기를 할수 있습니다 .
첫째는 export default 가 있고 , 두번째는 named export 가 있습니다 .
첫번째의 방법으로 내보내기를 하면 , 이름을 지어줄 필요가 없으며 import할때 파일이름을 바로 가져오면 해당 default가 붙은 요소를 바로 사용할수 있게 됍니다 .
그런데 한 파일에서 export default는 한 요소에밖에 설정을 하지 못합니다 .
따라서 여러가지 파일을 내보낼때는 두번째 방법이나 혹은 한 요소만 default로 설정하고 나머지는 named export로 설정하여서 가져올때 중괄호를 묶어서 가져오면 됍니다 .
두번째의 방법으로 내보내기를 하면 내보낼때 이름을먼저 지어주고 , 가져오는 과정에서 중괄호에 묶고 파일 경로를
from뒤에 붙여서 사용하면 됩니다 .
저같은경우 두번째의 방법을 선호하는데 , 주로 컴포넌트를 index 라는 파일 하나를 생성해서 그곳에 전부다 집어넣은다음 import할때 경로를 index로 설정하고 중괄호로 묶어서 한줄에 컴포넌트 여러개를 한번에 불러올수 있도록 설정합니다 .
저는 import줄이 너무 길면 가독성이 떨어지는거 같아서 그렇게 하고 있습니다 .
또한 import { player as user } from './index' 이런식으로 as를 붙여서 사용하면 이름을 바로 바꿔서 사용할수 있습니다 .
그리고 import * as All from './index' 이렇게 하면 모든 export가 붙은 요소들을 한꺼번에 가져와서 사용할 수 있습니다 .