odada

AOS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현AOS(Animate On Scroll) 란?스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리로 패럴랙스 스크롤링을 구현할 수 있음aos : https://michalsnik.github.io/aos/v1 : https://github.com/michalsnik/aosv2 : https://github.com/michalsnik/aos/tree/v2AOS 설치 태그 내에 AOS 라이브러..

Javascript를 이용한 Parallax Scrolling패럴랙스 스크롤링이란?패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현js를 이용한 패럴랙스 스크롤링window.addEventListener('scroll', function() {})window.scrollY : 현재 스크롤된 y축의 위치- translate, transform, scrollY 등을 이용하여 패럴랙스 스크롤링 구현js를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할..

CSS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. Perspective- perspective 속성css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록) 변형 효과가 줄어듦pers..

Next.js 블로그 앱 만들기Next.js를 사용하여 블로그 애플리케이션을 만들어보겠습니다. 블로그 애플리케이션은 다음과 같은 기능을 구현할 수 있습니다.Next.js 기초 및 설정 포스트를 참고하여 Next.js 프로젝트를 생성합니다.next.js 블로그 앱 만들기 github 바로가기1. 프로젝트 개요1.1. 프로젝트 목표Next를 사용하여 블로그 앱을 만들어보자.Firebase로 사용자 인증을 구현하고 로그인, 회원가입, 로그아웃 기능을 구현한다.Firebase의 기본 개념을 익히고 데이터 조회, 추가, 수정, 삭제를 구현한다.1.2. 프로젝트 환경Next.js(create-next-app) 프로젝트 생성Firebase (Firestore, Authentication)를 이용한 데이터 관리 및 사..

Next.js 기초 및 설정1. Next.js 란?Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 파일 생성 등을 지원하여 개발자가 보다 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이 프레임워크는 React의 기능을 확장하여 더욱 강력한 기능을 제공하며, SSR(Server-Side Rendering), CSR(Client-Side Rendering), Static Site Generation 등의 다양한 렌더링 방식을 지원합니다.2. Next.js 특징서버 사이드 렌더링(SSR): Next.js는 서버 사이드 렌더링을 지원하여 초기 로딩 시에 페이지를 서버에서 렌더링하여 사용자에게 보여줍니다. 이를 통해 SEO(Search Engine Optimizatio..

Redux로 전역 상태 관리하기Redux 소개Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.- Redux 특징Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.- Redux 구조Actions: 상태 변경을 위한 객체Reducers: 상태를 변경하는 함수Store: 애플리케이션의 상태를 저장하는 객체store/|-- acti..

Chakra-ui로 스타일링하기 0. Tailwind CSS vs Chakra UI - Tailwind CSS Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다. - Chakra UI Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. - Tailwind CSS와 Chakra UI를 함께 사용 Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리..

1. styled-reset styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다. styled-reset 사이트 - 설치 npm install styled-reset yarn add styled-reset - 사용법 // src/App.js import React from 'react' import Routers from './components/Routers' import { Reset } from 'styled-reset' const App = () => { return ( {/* 초기화 */} ) } export default App 2. styled-components styled-components는 CS..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..