본문 바로가기

IT/개발27

[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.
[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.
[CSS] Text를 더 다양하게 꾸며보자 HTML 삽입 미리보기할 수 없는 소스 안녕하세요! aloveu입니다. 이번 포스트에는 텍스트를 기존보다 더 다양한 방법으로 꾸미는 방법을 정리해봅니다. 기본적인 font-size, weight, color... 같은 기본은 기술하지 않을 거예요. | 텍스트에 배경이미지, 그라디언트 넣기 // HTML 이미지 텍스트 클립 이미지 그라디언트 텍스트 클립 // css .text-clip{ font-size:50px; background-clip: text; -webkit-text-fill-color: transparent; } .clip-img{ background-image:url('imgURL'); } .clip-gradient{ background-image:linear-gradient(to right.. 2024. 4. 4.
[HTML] Video Auto Play (자동재생) 조건 프로젝트를 진행하다 보면 썸네일에 비디오가 있다거나 홈페이지 전체에 비디오가 bg처럼 깔리는 작업을 하게 되는데 이때 자동재생이 안 되는 경우가 생깁니다. 비디오를 자동 재생을 하고 싶을 때 브라우저에서 여러가지 제약이 있는 걸 볼 수 있는데 어떤 속성을 추가해야 자동 재생이 되는지 정리해 봤습니다. 자동 재생은 크게 영상에 소리가 있을 때와 없을 때 두가지로 나뉩니다. 해당 포스팅은 좀 더 자동재생 정책이 유연한 데스크탑일때는 고려하지 않고 모바일 기준으로 작성했습니다. 디바이스나 환경에 따라 정책들이 달라질 수 있으므로 안될 수도?! 있으니 유의하시면 좋겠습니다. | 영상 자동재생 조건 1. 영상에 소리가 있을때 🔊 유저의 인터렉션이 있을때만 재생이 됩니다. 이 때는 사실상 자동 재생이라고 보기는 어.. 2024. 4. 3.
반응형

티스토리툴바