분류 전체보기
-
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..
-
Canvas API를 활용한 동영상 재생바 마커 및 텍스트 남기기project/personal 2024. 4. 19. 10:59
- Canvas api란 Canvas API는 JavaScript와 HTML 엘리먼트를 통해서 그래픽을 그리기위한 수단을 제공을 합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용이 됩니다. - 개발 내용 - 비디오 및 캔버스 생성 - useEffect를 통한 이벤트 핸들링 - 상호작용 캔버스 클릭 시 텍스트를 추가하는 로직을 구현 프롬프트 창을 통해 표시할 텍스트를 입력, 해당 텍스트를 캔버스에 그리고 관련 정보를 상태에 저장 - 재생 제어 - 마커와 진행 상태 바 비디오의 특정 시점을 나타내는 마커를 추가, 마커를 클릭할 경우 해당 시점으로 비디오를 이동시키는 기능을 구현 - 개발 결과물 1. 텍스트 입력 기능 2. 마커 클릭 이동 기능
-
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 ..