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 -..

개요 어쩌다보니 데스크탑을 바꾸게 되어 개발환경이 아무것도 없는 상태의 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..

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

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

https://boms-house.tistory.com/entry/Warning-Each-child-in-a-list-should-have-a-unique-key-prop Warning: Each child in a list should have a unique "key" prop. React에서 Array의 map 함수를 사용하면 가끔가다 이런 경고가 보인다. Warning: Each child in a list should have a unique "key" prop. warning이라 당장은 실행이 가능하지만 개발을 하다보면 보기.. boms-house.tistory.com 최근 이 게시물을 작성하며 map함수의 key값 관련한 정보들을 찾아보았는데 key값에 index를 넣으면 안되는 이유가 고유..