dev_or_alive

- 개요 - 특징 - License - Install - Using - 마치며 개요 이전에 react-full-page 패키지를 포스팅하며 추후에 pageable 패키지도 사용을 해보려했었는데 생각보다 시간이 오래걸렸네요. 최근들어 vue 관련 fullpage 라이브러리를 찾다가 vue3에는 마땅한게 없어 pageable 패키지를 검토해보았습니다. react-full-page 패키지와 달리 컴포넌트 형식으로 사용하는게 아닌 pageable 객체를 만들어서 사용하는것으로 보여 vue 코드에 적용을 해보았으며, react코드에도 동일하게 적용 가능합니다. 👉 react-full-page 포스팅 확인하기 [React]풀페이지 적용 하기. react-full-page 목차 - 목차 - 개요 - Install -..

개요 기존에 리액트에서 react-full-page 라이브러리를 이용하여 fullpage 기능을 적용한 적이 있었습니다. 2021.11.19 - [Programming/React] - [React]풀페이지 적용 하기. react-full-page vue3를 알아보면서 비슷한 기능을 테스트 해보면 좋겠다 싶어 비슷한 기능의 라이브러리를 찾아보았지만, vue3를 지원하는 라이브러리는 찾기가 힘들었습니다.(혹시 괜찮은 라이브러리가 있다면 댓글 부탁드립니다.) 그러던중 CSS의 scroll-snap-type 속성을 이용하여 비슷한 기능을 할 수 있다는 글을 보아 테스트 해보았습니다. 구현하기에 앞서 테스트 결과부터 말해보자면 해당 기능이 생각보다 많이 쓰이지 않는 이유를 알 것 같았습니다. 기존 라이브러리들을 ..

node/nvm 설치 & vs code 설치 해당 내용은 React에서 다뤘으니 아래 포스팅을 참고 부탁드립니다. 2022.10.10 - [Programming/React] - [React] 개발환경 세팅하기 vs code extension설치 Vetur .vue 파일의 코드 하이라이팅, 인텔리센스 Vue 3 Snippets : .vue 파일 초기 구성 생성 .vue 파일에서 vuevueinit입력 Vue CLI 설치 Vue CLI는 기본 vue 개발 환경 설정 도구입니다. 기본적인 vue 프로젝트 세팅을 해주기에 세팅에 대한 고민을 줄일 수 있습니다. npm install -g @vue/cli # or yarn global add @vue/cli 프로젝트 생성 vue create test-app Vue..

Vue? SPA 웹 개발을 위한 JS UI 라이브러리이며 프레임워크 기능도 하는 점진적인 프레임워크입니다. Vue는 구글에서 AngularJS를 사용하던 Evan You에 의해 개발되어 2014년 출시되었으며 발음처럼 View에 최적화된 프레임워크입니다. 특징 Virtual Dom 사용. SFC (Single-File Component) MVVM 패턴의 ViewModel의 역할 Tree Shaking(번등링 과정에서 사용하지 않는 코드 제거) 양방향 데이터 바인딩 코드 스타일이 통일된 부분이 많습니다.(v-for, v-if등) 상태 변경을 자동 추적하여 변경 발생시 효울적으로 DOM을 업데이트합니다. 장점 타프레임워크에 비하여 러닝커브가 낮습니다. react의 장점과 Angular의 장점을 갖고 있습니다..

개요 어쩌다보니 데스크탑을 바꾸게 되어 개발환경이 아무것도 없는 상태의 PC가 되었다. 리액트 프로젝트를 실행할 수 있도록 개발환경 세팅을 간단히 알아보자. vs code 설치 메모장으로 코딩을 할 수 없으니 가장 보편적으로 사용하는 에디터인 vs code를 설치하도록 해보자. 다운로드 경로 : https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and ava..

개요 다운로드 노드 설치 설치 된 node 버전 확인 nvm root 폴더 설정 오류 개요 여러 Node 버전을 관리 할 필요가 있어 NVM을 설치해보려 한다. 처음에는 굳이 사용해야 하나 싶었지만 회사에서 한번 사용해봤더니 사용을 안 할 필요가 없었다. 굉장히 편하게 노드 버전을 스위칭 할 수 있다. 다운로드 다운 링크 https://github.com/coreybutler/nvm-windows/releases/download/1.1.7/nvm-setup.zip 압축 해제후 설치 파일을 실행하여 진행하면 무리없이 설치 완료. 노드 설치 nvm install 12.19.0 설치 된 node 버전 확인 nvm ls 설치 된 node 사용하기 nvm use 12.19.0 nvm root 폴더 설정 nvm r..

목차 - 목차 - 개요 - Install - Using - 정리 개요 사실 이 기능에 대하여 정확한 명칭이 무엇인지 모르겠다. 풀페이지, 풀스크린, 풀페이지 슬라이딩등 여러 이름으로 부르는 것 같은데 fullpage.js가 가장 유명해서 그런건지 풀페이지라고 많이 하는 것 같다. 풀페이지 기능을 이용하여 만들어진 웹사이트는 스크롤을 하면 페이지 단위로 화면이 스크롤 된다. 배달의 민족 사이트를 들어가 본다면 이해가 빠를 것이다. 대한민국 1등 배달앱, 배달의민족 배고픈데 뭘 먹을지 모르겠고, 하필 냉장고는 텅텅 비어 있고, 그렇다고 대충 먹고 싶지는 않은데, 뻔한 음식 말고 잘 먹고 싶다면? 배달의민족! www.baemin.com 보통 메인 페이지에서 이 기능을 많이 사용한다. 풀페이지 기능에 대해서 찾..

목차 1. 목차 2. What is Parallax ? 3. Install 4. Using What is Parallax ? parallax는 시차라는 뜻으로 위치가 다른 상태에서 멀리있는 물체는 천천히 움직이고, 가까이 있는 물체는 빠르게 움직이는 것처럼 보이는 인지적인 측면을 이용하여 시각적인 효과를 주는 것입니다. parallax 예시 스크롤을 하면 배경은 멀리에 있는 것처럼 거의 움직이지 않고 앞의 글씨만 위로 이동하는 효과를 주어 바로 앞에 있는 것 같은 느낌을 주어 공간감을 느끼게 하는 디자인 기법입니다. 최근 리액트에서 패럴랙스를 적용 할 일이 있어 찾던 중 react-parallax가 기본 기능을 적용하기에는 가장 간단한 것 같아 게시물을 작성해봅니다. 더 좋은 사용법이나 다른 방법이 있다..