본문 바로가기

IT36

[Vite] vite로 번들링 도구를 바꾸기 안녕하세요! aloveu입니다. 최근까지 vue-cli-service의 빌드로 번들링을 하고 있다가 프로젝트가 커지고, 팀도 커지고... 뭔가 애매하게 개발하는데 아까운 시간들을 조금이나마 아껴보고자 배포 프로세스 점검하고 코드 리팩토링하고 하면서 번들링까지 손대게 됐습니다. vite를 로컬에서 적용해보니 웬걸?! 빠릅니다. 이게 천국인가 싶어요. 이미 많이들 쓰고 계시겠지만 그나마 이 글을 보고 참고하시는 분들을 위해 그 과정들을 정리해 보겠습니다. | Vite (빗) 바이트라고 읽었습니다. 하지만 빗입니다. 프랑스어로 빠르다는 의미를 가지고 있어요. 그래도 바이트가 입에 착 붙습니다. 빠르고 간결한 웹프로젝트 개발에 초점을 맞춘 차세대 빌드 툴입니다. 특징 매우 빠른 로컬 서버를 띄워줍니다. 그냥 엔.. 2024. 4. 14.
[Angular] standalone 적용하기 기존에 개발되어있는 Angular 프로젝트를 고도화하는 과정에서 겪었던 standalone 적용 기를 적어봅니다. Angular를 17버전대로 버전업을 진행하면서 바꿀 거면 성능까지 고려해서 적용을 해보자 마음을 먹었습니다. | Standalone Components Standalone Components는 Angular 14 버전부터 도입된 기능으로 16 버전에서는 정식 기능으로 채택됐고 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 기존에는 컴포넌트를 생성하면 NgModule에 등록해서 써야 했지만 이제는 모듈에 등록 없이 사용할 수 있습니다. | 왜 바꿔야하나? 독립적으로 사용할 수 있기 때문에 코드 분할 및 지연 로딩을 보다 효과적으로 구현할 수 있고 초기 로딩 속도를 향상할 수 있습니다. 번.. 2024. 4. 13.
[JS] 실무에서 꼭 필요한 Array 메서드 안녕하세요! aloveu입니다. 오늘은 이것만 알아도 데이터 바인딩 50%는 먹고 간다고 말할 수 있는 Array 메서드들에 대해서 공부해 볼 겁니다. 게시판, 상품, 방명록이나 댓글 같은 리스트 형식의 API를 받다 보면 내가 원하는 형태로 가공하고 화면에 뿌릴 줄 알아야 합니다. 그때 쓸 수 있는 그래도 실무에서 자주 쓸만한 메서드들만 정리해 봤습니다. | 목차 map() filter() find() every() some() reduce() sort() | map() 맵 메서드는 배열의 모든 요소에 대해 어떤 값을 적용시켜 새로운 배열을 만들 때 씁니다. arr.map(function(currentValue, index, arr), thisValue) currentValue : 현재 처리 중인 요소.. 2024. 4. 11.
[JS] 깊은 복사와 얕은 복사 안녕하세요! aloveu입니다. 많은 주니어 개발자들을 겪으면서 기초적이지만 실무에서 모르면 안 되는 스크립트들을 정리해야겠다는 생각을 하고 포스팅을 하려고 합니다. Javascript에서 객체와 배열을 다룰 때, 가장 중요한 개념 중 하나가 바로 '복사'인데요. 오늘 포스팅은 저도 가끔 용어가 헷갈리는 깊은 복사와 얕은 복사입니다. | 깊은 복사 (Deep Copy) 깊은 복사는 원본 객체나 배열을 새로운 메모리 공간에 복사하는 방식입니다. 이게 쉬운말로는 그냥 구조만 복사하고 서로 연관되지 않는 거예요. 그래서 복사본 중에 하나의 속성을 변경해도 다른 복사본의 속성은 변경이 되지 않습니다. 위에서 용어가 헷갈린다고 했는데 깊은복사가 왠지 서로 더 연관 있어 보여서 원본을 바꿔도 사본이 변경될 거 같은.. 2024. 4. 10.
개인 자산관리사를 고용했지만 AI인 건에 대하여... 안녕하세요! aloveu입니다. 요즘에 블로그 글 쓰는 거에 맛들려 가지고 ㅋㅋㅋㅋㅋ 아주 신나 버리죠! 최근에는 주식을 좀 해본답시고 주식 관련 공부는 찔끔하면서 수익률은 왜 이렇게 안 오르냐면서 불만 가득하게 지내고 있습니다. 그래서 찾아본 투자 포트폴리오 구성 방법!! AI 관련 글들을 읽다가 투자 포트폴리오를 신박하게 추천받는 거 보고 저도 한번 해보기로 했습니다. 사용한 AI는 요즘 한창 주가가 상승하고 있는 claude.ai입니다. chatGPT는 좀 멍청하게 답변을 많이 하는데 얘는 똑 부러집니다. 특히 개발 잘해줘요. 각설하고 오늘은 제 투자 포트폴리오를 정리하는 글이니깐 바로 진행해 봅니다. Claude.ai가 알고 싶다면? https://claude.ai/ Claude Talk with.. 2024. 4. 9.
[Vue] Router 이동할 때 페이지 스와이프 효과 주기 안녕하세요! aloveu입니다. 웹을 돌아다니다 보면 메뉴를 클릭할 때 다음 페이지가 옆에서 나오는 걸 보신 적 있나요?! 어떻게 만들어 졌는지 궁금하시지 않으세요?? Vue에서는 애니메이션처리에 대한 컴포넌트를 제공합니다. 인데요. Vue에서 router로 이동할때 swipe 효과 주려면 transition과 router를 적절히 사용해주면 됩니다. | 슬라이드 메뉴이동 router-view 컴포넌트를 transition으로 감쌉니다. transition에 name를 바탕으로 css를 작성합니다. transition 컴포넌트에서 name 속성은 트랜지션 클래스에 접두사를 지정하는 역할을 합니다. 이를 통해 다양한 트랜지션 효과를 CSS로 스타일링할 수 있습니다. name="slide"로 지정하면 다음과.. 2024. 4. 6.
[CSS] 버튼에 animation 적용하기 HTML 삽입 미리보기할 수 없는 소스 요즘 나오는 UI 프레임워크들이 너무 잘 되어있어서 간단히 button만 가져다 쓰면 애니메이션도 들어가져 있고 이쁘게 해 줘서 그거 쓰면 됩니다. 그래도 어떻게 구현되어 있는지 안 까보셨죠?? 제가 정리해 봤습니다. | button에 물결 animation 적용하기 물결 버튼 html에 버튼 놓는거야 기본이니깐 저렇게 두고요. css만 좀 잡아줍니다. .btn-wave { position: relative; padding: 10px 20px; background-color: #c00402; color: white; border: none; cursor: pointer; overflow: hidden; } .btn-wave::before { content: ""; .. 2024. 4. 5.
[Vue] DefineModel 부모로부터 받은 props를 바로 input에 v-model로 바인딩해서 수정도 되게 하고 싶다!! 모달을 부모에서 띄웠는데 자식 컴포넌트에서 바로 제어하고 싶다!! 네 이제 됩니다. 기존에는 부모로부터 props로 받은 값을 자식컴포넌트에서 다이렉트로 v-model에 바인딩하는 게 안 됐었습니다. 이건 단방향 데이터 흐름(One-way data flow) 원칙 때문입니다. 단방향 데이터 흐름은 데이터의 변경이 한 방향으로만 이루어지도록 하는 원칙입니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되고, 자식 컴포넌트에서는 이 데이터를 변경할 수 없습니다. 만약 자식 컴포넌트에서 props 데이터를 변경할 수 있다면, 데이터의 출처가 불분명해지고 예기치 못한 부작용이 발생할 수 있습니다. 그런데.. 2024. 4. 5.
[NPM] Bundlephbia 모듈을 선택할 때 꼭 확인해야 할 사이트가 있습니다. 번들 포비아(https://bundlephobia.com/)라는 사이트인데요. 내가 설치 하고 싶은 패키지를 검색해 보면 검색한 패키지와 유사한 패키지를 화면 제일 하단에 추천을 해줍니다. 그리고 용량을 함께 보여주니 각 패키지의 번들링 사이즈를 확인하면서 설치할 수 있습니다. 물론 용량뿐만이 아니고 얼마나 업데이트가 자주 일어나는지, 다운로드 수는 어떤지도 체크해야하겠지만 성능 튜닝하다 보면 패키지의 사이즈가 신경 쓰이게 됩니다. 예를 들어 몇년전에 날짜 계산 라이브러리로 Moment를 사용했었는데 바꾼 기억이 있어서 비교해 보겠습니다. | Moment 홈페이지 : https://momentjs.com/ | Dayjs 홈페이지 : https://da.. 2024. 4. 4.
반응형

티스토리툴바