Front-End
-
[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..
-
[Vue.js] Vuex - (1) Vuex 기본Front-End(Web)/Vue 2021. 6. 10. 01:28
드디어, Vuex 라고 하는 Vue.js의 상태관리 라이브러리를 학습하는 단계에 돌입했다! 다행인 점은, Context나 Redux를 사용해 보았기에 Vuex를 처음 접하는데 위화감은 덜 할 것 같다. 심지어, Redux의 Flux 패턴과 어느 정도 유사하면서도, 좀 더 간소화된 절차를 가진다는 것으로 선임 개발자님께 대략적으로 들었다. Redux와는 또 다른, Vuex만의 특징과 장점은 어느 것이 있을지 한 번 학습하면서 정리해보겠다! (분량이 길 시 포스팅 분리하겠다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vuex 란? 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포..
-
[Vue.js] Template 문법Front-End(Web)/Vue 2021. 6. 3. 01:37
Vue에서도 React 처럼 state, props 등의 데이터를 HTML 요소에 바인딩할 수 있다. (이러한 연관성을 Reactivity 라고 칭한다.) 이러한 방법을 data를 활용한 선언적 바인딩이라고 한다. 이렇게 화면을 조작하기 위한 Vue의 문법들에 대해 학습해보았다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Template 위에서 언급한 선언적 바인딩을 포함해서 Vue로 화면을 조작하는 문법들을 "Vue Template" 이라고 한다. Template 문법은, 1) Vue 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩, 2) 화면조작을 편하게 하게 해주는 Vue 디렉티브 2가지가 있다. 1. 데이터 바인딩 //..