오늘의 나는 무엇을 잘했을까?
아침부터 프로젝트를 복기하며 팀원들과 개선사항에 대해서 의논했고, 코드리뷰를 보면서 고칠 점도 찾았다. 예전에는 프로젝트가 끝나면 너무 지쳐서 이런 마무리작업을 하지 않았는데, 이번에는 주간 회고와 더불어 이러한 마무리 작업을 하게 되어서 좋았다. 구현에 집중하느라 신경쓰지 못했던 부분들이 보이고 개선할 점이 보인다. 이것 까지가 프로젝트라고 생각한다.
오늘의 나는 무엇을 배웠을까?
로컬 스토리지
로컬 스토리지는 브라우저에서 제공하는 클라이언트 사이드의 데이터베이스와도 같은 스토리지이다. 보통 5MB정도를 저장할 수 있다.
비슷한 개념으로 세션 스토리지가 있다. 세션 스토리지도 로컬 스토리지와 마찬가지로 브라우저의 데이터 저장기능이지만, 로컬 스토리지와 다르게 하나의 탭에서만 데이터가 유효하다는 것이다. 즉, 데이터가 영속되는 범위와 기간이 다르다. 로컬 스토리지는 탭을 닫았다 열어도 지속되고, 브라우저를 종료했다가 다시 실행해도 남아있다. 하지만 세션 스토리지는 탭을 닫으면 메모리가 함께 휘발된다.
-
사용법
로컬 스토리지를 사용할 때는 localStorage라는 객체와 그 메서드를 이용하면 된다.
저장:
localStorage.getItem(”key이름”);조회:
localStorage.setItem(”key”, “value”);중요한 점은 로컬스토리지(또는 세션스토리지)에 저장하는 키-밸류 쌍은 키와 밸류 모두 문자열로만 저장이 가능하다는 점이다. 따라서 문자열이 아닌 값을 저장할 때는 항상 JSON.parse를 사용하여 문자열로 만들어줘야 한다. 조회할 때도 마찬가지로 문자열 데이터를 가져와서 파싱해줘야 한다. 문자열을 그대로 사용할 목적이면 그냥 사용할 수 있다.
-
React에서 localStorage를 사용할 때 주의점
localStorage객체는 사실 window객체의 프로퍼티로 존재한다. 하지만 document객체를 window.document라고 굳이 안써도 되는 것처럼 localStorage도 window.을 생략해도 된다.
그런데 리액트에서 localStorage객체를 사용할 때 이 부분을 주의해야 한다. window객체가 define되기 전에 로컬스토리지를 접근하려고 하면 문제가 생기기 때문이다. 대표적으로 useState의 초기값으로 로컬스토리지의 값을 넣어주는 경우가 있는데, useState가 실행되는 시점은 렌더링 이전이라서 window객체에 접근할 수 없다. 그래서 localStorage is not defined 라고 뜨게 된다. 이런 경우에는 useEffect를 사용하여 렌더링 이후에 바로 설정하게 해주면 된다.
프로토타입
프로토타입이란?
자바스크립트에만 있는 개념인 프로토타입은, 자바스크립트에서 객체 지향 개념 중에 상속을 실현하는데 쓰이는 개념이다. 프로토타입은 어려운 개념이지만, 그나마 쉽게 풀어 해석하자면 ‘유전자’같은 것이다. 프로토타입이 하는 역할이 현실 세계에서 유전자가 하는 역할과 비슷해서 가장 쉽고 명확한 비유가 아닐까 싶다.
프로토타입을 이해하기 전에 다음 몇 가지 사실들을 짚고 넘어가자.
- 프로토타입은 엄연한
“실체”로서 존재한다. 프로토타입은 하나의객체로서 메모리에 존재하게 된다. - 모든 객체는 프로토타입을 가진다. 모든 사람이 유전자를 가지는 것과 마찬가지다.
- 모든 객체는 프로토타입을 본 객체의
__proto__라는 프로퍼티를 이용해서 접근할 수 있다. - 프로토타입 객체는 생성자 함수를 만들거나 클래스를 만들었을 때 만들어지며, 해당 클래스나 생성자 함수의 prototype이라는 프로퍼티로 참조가능하다
정리하자면 프로토타입은 자식들(생성해낸 객체들)에게 유전자(상속할 프로퍼티, 메서드)를 공급하는 객체이다.
이해를 돕기 위한 다이어그램
다음 그림은 아래 코드를 실행한 뒤에 존재하는 객체들의 관계를 나타낸 것이다.
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.printName = function () {
console.log(“hi”, this.name);
}
const child_1 = new Person(‘Kenny’, 27);
const child_2 = new Person(‘Zach’, 20);
child_1.printName();
객체리터럴로 만든 객체는?
위의 그림은 생성자 함수(또는 클래스)로 만들어낸 객체와 그 프로토타입들의 관계를 나타낸다. 그렇다면 객체 리터럴로 만든 객체는 어떤 상속구조를 가질까? 다시 예제 코드와 다이어그램을 통해 이해해보자.
const obj = {
a: 'a',
b: 'b',
};
console.log(obj);
객체 생성 시점에 프로토타입은 어떻게 결정되나
앞서 모든 객체는 프로토타입을 가진다고 설명했다. 그런데 코드 내에서 생성되는 모든 객체들을 개발자가 따로 프로토타입을 명시해주지 않는데 어떤 내부 로직으로 결정되는 걸까? 사실 모든 객체들은 생성 방식에 차이가 있지만(생성자 함수, 리터럴, Object.create, class등) 내부적으로 추상 연산인 OrdinaryObjectCreate메서드에 의해 생성된다. 그리고 생성되는 객체들의 프로토타입은 이 OrdinaryObjectCreate메서드의 인자에 의해 결정된다. 아래는 각 객체 생성 방식에 따른 OrdinaryObjectCreate 메서드에 전달되는 프로토타입 인자이다.
- 객체 리터럴: Object.prototype
- Object 생성자 함수: Object.prototype
- new 연산자 + 기타 생성자 함수: 생성자 함수의 prototype
오늘의 나는 어떤 어려움이 있었을까?
북스터디 준비를 위해 자바스크립트 프로토타입을 공부했는데, 너무 어려웠다. 다른 언어들과 비교해서 자바스크립트의 특징이 가장 두드러지는 개념이라 정말 잘 이해하고 넘어가고 싶은 마음에 열심히 공부해봤지만 아직 완벽하게 이해하지 못했다. 이런 부분들을 스터디 시간에 팀원들과 공유하고 이야기할 시간이 필요할 것 같다.
내일의 나는 무엇을 해야할까?
- 프로토타입 공부 더 하기
- styled components 강의 듣기 (절반)
- 프로젝트 준비에 필요한 것들 알아보기
- 프로젝트 개발일지 조금씩 문서화 하기
