키워드 : Typescript, 코드 스플리팅, 레이지 로딩
Typescript
자바스크립트가 가진 자유라는 태생적 한계를 극복하기 위해 만들어진 언어. 자바스크립트에 자바를 끼얹은 느낌... 모든 것에 타입을 부여해야 만들 수 있고, 정해진 타입이 아니면 오류를 뿜어내서 개발자의 디버깅을 도와준다. 초기 세팅이 조금 귀찮지만 갈수록 거대해지는 프로젝트들의 빌딩, 관리 및 유지보수에 있어 무척 도움이 된다고 한다.
코드 스플리팅
리액트는 자바스크립트의 라이브러리이고 우리가 어떤 웹사이트에 들어갈 때 사람 눈에 보이는건 그림이지만 사실 그 애들은 자바스크립트 컴포넌트들의 집합이다. 하나하나가 스크립트인 셈... 리액트는 spa의 강점을 최대한 살려 첫페이지에서 모든걸 로딩 -> 이후 로딩없음의 빠른 속도를 추구하고 있지만 첫 화면(랜딩페이지)에서 로딩이 너무 걸리면 사용자들은 불편감을 느낀다.
이를 극복하기 위해 스크립트를 최대한 쪼개고 쪼개 스크린에서 당장 보이지 않으면 기능은 불러오지 않고 코드 모양만 남겨놓는데까지 효율성을 극대화한 형태가 바로 코드 스플리팅이다.
이걸 꼭 해야 한다기보다 배포 전 성능테스트를 통해 유저에게 최적의 경험을 선사할 수 있도록 노력하고, 설계시 딱 필요한 컴포넌트들만 효율적으로 고려하여 배치하는 개발자가 되어야 한다는 의미로 내주신 과제라고 본다.
레이지 로딩
코드스플리팅이 스크립트를 경량화하는거라면 레이지 로딩은 이미지, 포스트 등 당장 유저가 볼 예정이 없는 용량 큰 컨텐츠들을 언로드 상태로 놔두는 경량화법이다. 페이지네이션이나 무한스크롤 또한 레이지로딩의 한 종류이다. 이런게 없다면 이미지기반 사이트에 들어갈때 캐시 스토리지가 빵빵 터진다. 당장 구글검색을 한다고 가정해보면,
210000개의 검색결과에 대한 썸네일을 다 로드하면서 데이터도 엄청먹고 렉 때문에 잘 굴러가지도 않을 것이다. 라이브러리가 많으니까 예제들을 보면서 잘 적용해보자.
이번주 배운것 / 느낀것 / 내게 아쉬웠던 것
배운 것
백엔드, 프론트, 디자이너들이 세상을 보는 관점이 거의 이세계 수준으로 다르다는 것...? 사실 모든 사람이 그런 듯 하다. 프론트끼리도 성향이 이렇게나 다른걸. 이건 프론트엔드라는 직종의 바운더리 확대가 끼친 영향도 무시할 수 없지만... 아무튼 항해에 오지 않았으면 배울 수 없었을 것들이다.
https://garticphone.com/ko 아이스브레이킹 용 이어그리기 게임 메모
이틀동안 밥먹는 시간 빼고 16시간 넘게 기획 회의만 한 것 같다. 목도 아프고 엄청 힘들지만 오길 잘했다고 생각. 항해가 끝나면 다들 자신의 길을 찾아 떠나겠지만 언젠가 어딘가에서 마주칠 수 있으면 좋겠다.
느낀 것
이 회고일지가 8번이라는건 벌써 8번의 주... 즉, 2달이 지났다는 뜻이다. 2달 전의 나와 비교해봤을때 엄청나게 성장했다고 생각한다. 사람과 말하는 법도 엄청 늘었고(이건 나만 그렇게 생각하는 걸수도 있지만..) 개발이라는게 무엇인지, 뭘 중요하게 생각해야 하는지, 뭘 버려서는 안되는지 어렴풋이나마 볼 수 있게 되었다.
내게 아쉬웠던 것
사실 과제를 끝낸 후 실전프로젝트 전까지 뭔가 더 공부해놓고 싶었는데, 그냥 재밌어보이는 스택에 대한 칼럼들만 읽으면서 또 시간을 흘려버렸다. 동기부여가 없으면 항상 이런식으로 멍때려버리는게 단점인데... 그래도 실전프로젝트 스코프 짜시는거 보니까 다들 열정이 대단하셔서... 진짜 빡세게 일할 수 있을 것 같은 기분이 든다.
