본문 바로가기

Front-end76

Kotlin Android Jetpack Compose 기초 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } } } } @Composable fun MyApp(modifier: Modifier = Modifier) { //온보딩 화면 상태 유지 var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) } Surface(modifier) { if (shouldShowOnboarding.. 2024. 4. 2.
React with Redux, Next.js, TypeScript - 1 컴포넌트, JSX, 속성, 상태 Udemy 강의 "React 완벽 가이드 with Redux, Next.js, TypeScript" 를 보고 정리하였습니다. 컴포넌트, JSX, 속성, 상태 기본개념 JSX JavaScript Syntax eXtension -> but 브라우저에 사용 불가능합니다. 그래서 브라우저에 도달하기 전에 개발 서버에서 변환됩니다. 리액트에서의 컴포넌트 컴포넌트 = 자바스크립트 함수 - 컴포넌트의 첫글자는 대문자, PascalCase(MyHeader) 커스텀 컴포넌트는 실제로 렌더링된 DOM에 나타나지 않습니다. 동적 값 출력 외부에 정의된 값들을 가져옵니다. import { CORE_CONCEPTS } from "./data.js"; import componentsImg from "./assets/compone.. 2024. 3. 6.
React 리액트 props 속성 전달과 구조분해할당 리액트를 배우면서 굉장히 유용하고 꿀 코드들을 정리하려고 합니다. 구조분해할당 은 JavaScript와 다른 프로그래밍 언어에서 사용되는 문법입니다. 이를 통해 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 됩니다. props 기본사용 function CoreConcept(props) { return ( {props.title} {props.description} ); } 이 함수는 props object를 가져와서 값을 구성하는 컴포넌트 입니다. App 함수 CoreConcept 컴포넌트에 object 를 만들어 호출하고 function CoreConcept(props) 에서 받습니다. 해당 값들은 또한 별도의 파일로 저장하여 사용할 수 있습니다. 별도 파일로 사용 data.js .. 2024. 3. 5.
글로벌 영역에서 색상관리 색상관리를 위한 js 파일 생성 colors.js const Colors = { primary500: '#72063c', primary600: '#640233', prmiary800: '#3b021f', accent500: '#ddb52f', primary700: '#4e0329' } export default Colors; 하드코딩 되어 있는 부분에서 사용 return return styles 부분에서의 사용 const styles= StyleSheet.create({ buttonOuterContainer:{ borderRadius: 28, margin: 4, overflow: 'hidden' }, buttonInnerContainer: { backgroundColor: Colors.primary500.. 2023. 8. 16.
게임 화면 작업 - 노치 고려해 SafeAreaView 활용, 제목 컴포넌트 생성 App.js return {/* 노치(카메라부분)에 콘텐츠가 가려지기 떄문에 SafeAreaView 사용은*/} {screen} ; 게임화면인 screen 을 SafeAreaView로 감쌌다. GameScreen.js 게임화면 import React from 'react' import { Text, StyleSheet, View } from 'react-native' import Title from '../components/Title' function GameScreen(props) { return ( 게임 스크린 업 or 다운 ) } export default GameScreen const styles = StyleSheet.create({ screen: { flex: 1, padding: 24 } .. 2023. 8. 15.
리액트네이티브, 화면 전환 StartGameScreen.js function StartGameScreen({onPickNumber}) { const [enteredNumber, setEnteredNumber] = useState(''); function numberInputHandler(enteredText) { setEnteredNumber(enteredText); } function resetInputHandler() { setEnteredNumber('') } function confirmInputHandler() { const chosenNumber = parseInt(enteredNumber); if(isNaN(chosenNumber) || chosenNumber 99) { Alert.alert( '메시지', '입력을 확.. 2023. 8. 14.
리액트네이티브, 입력 검증 StartGameScreen.js import { TextInput, View , StyleSheet, Alert} from 'react-native'; import PrimaryButton from '../components/PrimaryButton'; import { useState } from 'react'; function StartGameScreen() { const [enteredNumber, setEnteredNumber] = useState(''); function numberInputHandler(enteredText) { setEnteredNumber(enteredText); } function resetInputHandler() { setEnteredNumber('') } functi.. 2023. 8. 8.
리액트네이티브, 숫자 맞추기 앱 (커스텀 버튼, 누르기, 배경화면) App.js import { StyleSheet,View } from 'react-native'; import StartGameScreen from './screens/StartGameScreen'; export default function App() { return ; } const styles = StyleSheet.create({ rootScreen: { flex: 1, backgroundColor: '#ddb52f' } }); 앱 화면 구성 StartGameScreen.js import { TextInput, View , StyleSheet} from 'react-native'; import PrimaryButton from '../components/PrimaryButton'; function.. 2023. 8. 7.
리액트네이티브, 목표추가 모달, 추가, 지우기, 이미지 새 목표 추가 버튼 클릭 모달로 입력 창이 나타나고 목표추가 추가 완료시 모달창이 사라지고 다시 메인 창이 보여짐 화면 크기 이상 늘어날 시 스크롤 기능 작동 App.js import { useState } from 'react'; import { StyleSheet, View, FlatList, Button} from 'react-native'; import { StatusBar } from 'expo-status-bar'; import GoalItem from './components/GoalItem'; import GoalInput from './components/GoalInput'; export default function App() { const [modalIsVisible, setModal.. 2023. 6. 14.
리엑트네이티브 프로퍼티, 컴포넌트 나누기 GoalItem 부분 나누기 App.js const addGoalHandler = () => { setCourseGoals((currentCourseGoals) => [ ...currentCourseGoals, { text: enteredText, id: Math.random().toString() }, ]); } { return ; }} keyExtractor={(item, index) => { return item.id; }} alwaysBounceVertical={false} /> GoalItem.js import { StyleSheet, View, Text } from "react-native"; function GoalItem(props) { return ( {props.text} ); } ex.. 2023. 5. 22.
리액트네이티브 스타일링, FlatList 리액트 네이티브 디버 npm install --save @react-native-community/cli-debugger-ui $ react-devtools 애뮬레이트 실행 or 재실행(ctrl + m - Reload) 그러면 이렇게 React 개발할 때 사용하던 devtools 가 작동됩니다. 컴포넌트의 주요 역할 다른 자식 컴포넌트들을 구조화하고 묶음 HTML 요소 (div, p ,input) 과 같은 요소 사용불가 > 웹이 아니기 때문에 네이티브 views로 컴파일할 수 없음. 컴포넌트 스타일링과 CSS 관계 React Native 컴포넌트 스타일링은 CSS의 영향을 받아 만들어짐 const styles = StyleSheet.create({})을 사용하는 이유 StyleSheet를 통해 유효성 검.. 2023. 5. 21.
Vue 3 쇼핑몰 만들기 - 2 (+ Spring Boot) 기능 추가 장바구니 주문하기 상품 Card.vue {{item.name}} {{ lib.getNumberFormatted(item.price) }}원 {{ lib.getNumberFormatted(item.price - (item.price * item.discountPer / 100)) }} {{ item.discountPer }}% 스프링부트 컨트롤러 @PostMapping("/api/cart/items/{itemId}") public ResponseEntity pushCartItem(@PathVariable int itemId, @CookieValue(value = "token", required = false) String token){ isTokenValid(token); int memberId.. 2023. 4. 20.

티스토리툴바