전체 글525 [RN] css적용하기 App.jsimport React from 'react';import {SafeAreaView} from 'react-native';import Box from './components/Box';const App = () => { return ( );};export default App; components/Box.jsimport React from 'react';import {View, StyleSheet} from 'react-native';function Box() { return ;}const styles = StyleSheet.create({ box: { width: 64, height: 64, backgroundColor: 'black', .. 2024. 4. 29. [css] 라이브러리없이 캐러셀 구현하기 라이브러리 의존성을 없애기위해 라이브러리없이 캐러셀을 구현한다. 1. 사진을 일정한 사이즈로 맞춤 .slide-box img { width: 700px; height: 450px; } 2. 일단 사진을 가로로 정렬 display: flex; 3. 화면을 벗어난 사진은 일단 가린다. .slide-container { border: 10px solid red; display: flex; overflow: hidden; } 4. 사진크기만큼 옆으로 이동하면 다른 사진이 보인다. .slide-box img { width: 700px; height: 450px; transform: translate(-700px); } index랑 관련하다 보니까 transform을 css파일에 두는것보다 js부분에 templat.. 2024. 4. 21. [Next.js] 리덕스와 장바구니기능 쇼핑몰사이트 거의 마무리된것 같다. 장바구니 기능 구현완료다!!!! store.js import { createSlice, configureStore } from "@reduxjs/toolkit"; const initialState = { value: { email: "snrnsi", pw: "123", }, }; const LoginState = createSlice({ name: "login", initialState, reducers: { //로그인한 유저 변경되는게 들어가야한다. setLogin: (state, action) => { state.user = action.payload; }, setLogout: state => { state.email = null; state.pw = null; }.. 2024. 4. 12. [React] Suspense React.Suspense Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 react에 내장되어 있는 기능이다. const SomeComponent = React.lazy(() => import('./SomeComponent')); lazy를 통해 import 하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 로딩되는 시간동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 바로 Suspense이다. data fetching 과정이 이루어지고 컴포넌트가 마운트 되도록 하고 그 시간동안 로딩 화면을 보여주도록 Suspense를 활용할수 있다. Suspense component에.. 2024. 4. 3. 이전 1 2 3 4 5 6 ··· 132 다음