Front-End(Web)
-
[Vue.js] 재사용 & 컴포지션 - (1) Mixin, Directive, RenderFront-End(Web)/Vue 2021. 7. 20. 21:58
내가 Vue를 사용, 공부하면서 가장 정리하고 싶은 섹션이 시작되었다! 프론트엔드 작업을 하다보면 반복되는 컴포넌트와 기능들이 등장하기 마련이다. 특히, 이런 기능들이 필요할 때마다 매번 컴포넌트에 작성하게 된다면, 이후 수정 등 유지보수가 매우 안 좋을 것이다. 이러한 기능들을 공통화, 전역화하는 다양한 기법들이 Vue에 존재한다고 들었다. (믹스인, 플러그인 등) 이들의 차이점은 무엇인지, 그리고 어떻게 사용하며 어떤 상황에서 특히 적합할지를 공부해보도록 하겠다. 💚 Mixins(믹스인) Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다. * 믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함 의미 그대로, 컴포넌트에 원하는 기능을 실행하..
-
[Vue.js] Transition & AnimationFront-End(Web)/Vue 2021. 7. 14. 02:24
근래의 웹 어플리케이션은 유저들의 조작에 따라 다양한 인터렉션 효과를 제공한다. Vue는 여기에 사용되는 transition 효과를 좀 더 용이하게 사용할 수 있도록 이라는 태그 컴포넌트 기능을 제공한다. 이번 포스팅에서는, Vue.js 공식문서의 "트랜지션 & 애니메이션" 내용을 기반으로 태그 컴포넌트를 사용하는 방법에 대해 학습해보겠다. 💚 진입/진출 그리고 리스트 트랜지션 0. 컴포넌트 Vue 프론트화면 개발에는 많은 애니메이션이 적용된다. 이 때, 보편적으로 사용되는 방법이 CSS를 통한 제어일 것이다. (transform 을 통한 변형, class를 동적으로 부여하여 제어한다. 이를, transition 설정을 통해 유하게 구현할 수 있다.) Vue.js 에서는 CSS transition을 더 ..
-
[Next.js] Pre-RenderingFront-End(Web)/React - 프레임워크(React, Next) 2021. 7. 7. 01:45
오늘도 역시, Next.js의 주요기능인 Pre-Rendering에 대해 포스팅하려고 한다. 이전에, Next.js 입문에서 작성한 Pre-Rendering 부분을 좀 더 구체화하며, 관련된 메서드까지 소개하기 위함이다! * 이전 포스팅(Next.js 입문) : https://abangpa1ace.tistory.com/177 [Next.js] Next.js 입문 🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못 abangpa1ace.tistory.com React 개발을 하면서, Data Fetch를 위해 componentDidMount() 라이프사이클..
-
[Next.js] Dynamic Routes(페이지 이동)Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 21:32
오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다. 사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다. Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다. 사용법과 그 장점에 대해 한 번 학습해보겠다! 🤍 Pages & Dynamic Routes Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다. 그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!..
-
[Next.js] Next.js 입문Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 01:48
🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못했다. 회사에서 FE 선임 개발자님, 그리고 기획 및 디자인과 함께 모바일 서비스를 만드는 사이드 프로젝트를 시작하게 되었다. React를 오랜만에 사용하니 떨리기도 하고, 새로운 기술을 적용할 생각에 우려가 앞서기도 한다. 이를 위한 학습 및 포스팅이 될 것 같다. 새로운 기술들 중, 요즘 화두가 되는 SSR을 지원하는 Next.js 프레임워크 적용에 흥미가 생겼으며, 사이드와 병행하여 가능한 학습도 같이해볼 생각이다! 🤍 Next.js 란? Next.js는 2016년 등장한 React 어플리케이션의 S..
-
[Vue.js] 컴포넌트 톺아보기Front-End(Web)/Vue 2021. 6. 14. 14:44
Vuex 공부를 마치고, 캡틴판교님의 인프런 강의도 레벨3부터는 실제구현에 집중되다보니, 공식문서 공부를 좀 더 하려고 했다. 그래서, 공식문서 필수요소 바로 다음에 이어지는 "컴포넌트 톺아보기" 섹션에 대해 정리해보려고 한다. 아무래도, React 프로젝트를 진행하면서도 컴포넌트를 어떻게 쪼개고 재활용할지, 심지어 이름을 어떻게 지을지도 고민이 많았다. 이러한 컴포넌트의 선언과 활용에 대한 많은 팁이 담겨있는 해당 섹션을 윤독하면서 중요한 내용을 정리해보려고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 컴포넌트 톺아보기 1. 컴포넌트 등록 먼저 컴포넌트를 명명하는 2가지 방법(kebab-case, CamelCase), 각각의 모듈화된 지역..
-
[Vue.js] Vuex - (3) Store 모듈화Front-End(Web)/Vue 2021. 6. 13. 23:51
이전에 진행한 프로젝트는 Vuex Store에 state, getter, mutations 들이 일괄적으로 들어가는 형태였다. 아무래도 프로젝트의 규모가 커지면, 당연히 Store 자체의 코드량도 많아지고 유지보수도 힘들어질 것이다. 이러한 부분을 ES6 import/export 문법을 통해 좀 더 용이하게 분리하는 모듈화에 대해 간단하게 정리해보았다. (개념보다는 Vuex의 코딩기법의 내용이기에 분량이 많지 않다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Getters, Mutations 분리 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포넌트들에 대한 중앙 집중식 저장소..
-
[Vue.js] Vuex - (2) Helper 함수Front-End(Web)/Vue 2021. 6. 11. 16:48
이번에는 Vuex에서 Store의 상태, getter, 메서드들을 좀 더 용이하게 사용하는 Helper 함수에 대해 알아보겠다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Helper 함수란? Vuex의 내장함수로, Store의 아래 네 가지 속성을 간편하게 코딩하는 방법이다. (Synthetic Sugar에 해당) state => mapState getters => mapGetters mutations => mapMutations actions => mapActions - 사용법 // App.vue import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export defau..