front-end
-
classNames으로 module.css 사용하기front-end/React 2024. 6. 26. 10:19
1. npm으로 설치하기npm install classnames --save 타임스크립트 사용시npm install --save @types/classnames 2. 사용 예시(module.css)import React from 'react'import styles from '../styles/pages/Main.module.css';import cs from 'classnames/bind';const Main = () => { const cx = cs.bind(styles); return ( 테스트 테스트 테스트 )}export default Main;
-
React ajax 라이브러리front-end/React 2024. 4. 22. 15:11
1. ajax 라이브러리 설치 npm install axios 2. ajax 요청 방법 get 방식 axios.get('서버주소') .then(response => { // 서버로부터 데이터를 성공적으로 받았을 때 실행 console.log('GET 요청 성공!'); console.log('데이터:', response.data); }) .catch(error => { // 요청이 실패했을 때 실행 console.error('GET 요청 실패:', error); }); post 방식 axios.post('주소값', { title: '타이틀', body: '바디', userId: 1 }) .then(response => { // POST 요청이 성공했을 때 실행 console.log('POST 요청 성공!'..
-
React useEffect 정리front-end/React 2024. 4. 22. 13:47
- 컴포넌트는 Lifecycle 생성(mount) 재렌더링 (update) 삭제(unmount) - useEffect 정리 1. 재렌더링마다 코드를 실행 useEffect(()=>{ 실행할코드 }) 2. 컴포넌트 mount시 (로드시) 1회만 실행 useEffect(()=>{ 실행할코드 }, []) 3. useEffect 안의 코드 실행 전에 항상 실행 useEffect(()=>{ return ()=>{ 실행할코드 } }) 4. 컴포넌트 unmount시 1회 실행 useEffect(()=>{ return ()=>{ 실행할코드 } }, []) 5.test이 변경될 때만 실행 useEffect(()=>{ 실행할코드 }, [test])
-
React styled-components 라이브러리front-end/React 2024. 4. 22. 10:01
1. styled-components 설치하기 npm install styled-components 2. styled-components 사용법 styled.div 로 한개의 스타일을 만들어 줍니다.( ` 백틱 기호를 사용해서 CSS를 넣습니다.) VScode 사용시 vscode-styled-components 확장프로그램 설치하면 자동완성이 가능합니다. import styled from 'styled-components'; let Box = styled.div` padding : 15px; color : grey `; function Home(){ return ( 박스입니다 ) } 3. styled-components props 기능 ${ props => props.bg } styled-componen..
-
React data import export 방법front-end/React 2024. 4. 18. 11:43
1. data.js 같은 데이터만 관리할 js파일 만들고 내보내기 export default 변수명 let won = 10000; export default won; 2. import 할 파일에 가져오기 import 작명 from './경로' import a from './data.js'; console.log(a) 3. 여러개 변수를 내보내는 방법 export { } 문법 사용 var name1 = 'sim'; var name2 = 'too'; export { name1, name2 } import { } 문법 사용 import { name1, name2 } from './data.js';
-
Vue router 사용하기front-end/Vue 2024. 4. 4. 16:39
1. router 사용하기 npm install vue-router@4 2. src 폴데에 router.js 파일 만들기 import { createWebHistory, createRouter } from "vue-router"; import 컴포넌트 const routes = [ { path: "/경로", component: 컴포넌트, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; 3. Main.js 에 추가하기 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import { createApp } from ..