개발

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 멤버십 6 ~ 9주차 회고

내용에 문제가 있는 경우 삭제 또는 수정하겠습니다. 네이버 부스트캠프 웹・모바일 학습 스프린트 기간이 끝났다. 나는 프론트엔드로 두번째 스프린트 기간을 보내게 되었다. 어떤 분야를 선택할지 고민이 많았지만 언제나 그랬듯이 선택하고 후회하지는 않았다. 이제 학습 스프린트는 끝났고 그룹 프로젝트가 남아있다. 아직 그룹 프로젝트가 남아있지만 챌린지 때 부터 미션을 수행하며 배웠던 점 등에 대해 종합적인 회고를 하고자 한다. ✨ 좋았던 점 (잘한 점) 기술적으로 깊게 학습할 수 있었던 것 같다. 부스트캠프 기간동안 틈틈이 블로그에 작성했던 여러 기술적인 부분도 시작은 "왜?"에서 비롯된 것이었다. 어떤 도구를 사용하는데 이유가 중요하다고 생각했다. A: 그거 왜 써요? B: 빨라요! A: 정말요? 그런데 그건 ..

Vite는 왜 빠를까?

일반적으로 Webpack보다 Vite가 더 빠르다는 글을 볼 수 있다. 왜 Vite가 Webpack보다 빠르다는 것일까? 모듈 개발을 하는 과정에서 어플리케이션의 크기가 커지면 언젠가 파일을 분리해야 할 것이다. 이때 분리되는 파일 각각을 '모듈(module)'이라 부른다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된다. 하지만 JS의 모듈 시스템인 ESM은 2015년 ES6가 도입되며 공직적으로 추가되었다. ESM을 사용하면 import와 export 문법을 사용하여 서로 다른 모듈에서 변수나 함수 등을 쉽게 불러오거나 내보낼 수 있다. 브라우저에서 ESM을 지원하기 전까지는 JS의 모듈화를 네이티브 레벨에서 진행할 수 없었다. 여기서 "네이티브 레벨"이라는 것은 외부의 다른..

[객체지향] SOLID 예제(5) - 인터페이스 분리의 원칙(ISP)

interface IPerson { wakeUp(): void; bathroomActivity(): void; } class Person implements IPerson { private bathroom: IBathroom; constructor(bathroom: IBathroom) { this.bathroom = bathroom; } wakeUp() { console.log('아침에 일어난다.'); } bathroomActivity() { this.bathroom.goToBathroom(); this.bathroom.washFace(); this.bathroom.brushTeeth(); this.bathroom.washHair(); this.bathroom.dryOff(); this.bathroom...

[객체지향] SOLID 예제(4) - 리스코프 치환의 원칙(LSP)

interface IPerson { wakeUp(): void; bathroomActivity(): void; } class Person implements IPerson { private bathroom: IBathroom; constructor(bathroom: IBathroom) { this.bathroom = bathroom; } wakeUp() { console.log('아침에 일어난다.'); } bathroomActivity() { this.bathroom.goToBathroom(); this.bathroom.washFace(); this.bathroom.brushTeeth(); this.bathroom.washHair(); this.bathroom.dryOff(); this.bathroom...