프론트엔드9 [php] db 에서 조회한 날짜중 가장 최근날짜 selected >2024 >2025 >2026 >2027 "> 2024. 7. 22. [Vue.js] Vue.js 기초 1. 디렉티브 : 'v-' 로 시작하는 속성. 주로 데이터 바인딩과 관련된 처리 * v-if, v-bind, key 등은 속성임 2. 데이터 바인딩: 데이터와 렌더링을 동기화하는 구조 ● 텍스트 바인딩 {{ message }} * new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다. //관례적으로 app 또는 vm(ViewModel)라는 변수 이름을 사용함 var app = new Vue({ // new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다 el: '#app', data: { message: 'Hello Vue.js' } }) console.log(app.message) // app.data.message 가 아니라는 점 주의 ● 반복 렌더링 data옵션에 등록한 배열.. 2024. 1. 17. [React] 슬라이드(React Slick) 사용 npx create-react-app react-slide-ex npm install react-slick npm install slick-carousel components 폴더에 MySlider.js 생성, css폴더에 MySlider.css, images 폴더 생성하기 MySlider.js 에 슬릭 라이브러리 임포트 해주고 사진도 불러오기 import '../css/MySlider.css'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import img1 from '../images/slide-images1.jfif' func.. 2023. 6. 24. [React Hook] axios / api 받아오기 리액트 훅으로 api 받아오기 npx create-react-app react-hook-axios useEffect 임포트 해주기 import './App.css'; import {useEffect} from 'react'; function App() { //리액트 오리지날 - componentDidMount 기능 useEffect( () => { },[]) //[name], ... //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... return ( 화면 ); } export default App; axios 써주기 import './App.css'; import {useEffect} from 'react'; function.. 2023. 6. 18. [React hook] 리액트 훅으로 카운터 만들기 React 2013 - 클래스형 컴포넌트, 함수형 컴포넌트 React hook 2018 -함수형 컴포넌트 -useState, useEffect, useRef hook - 갈고리 ------------------------------------------------------------------------------ 기존의 클래스형으로 만들었던 카운터 기능을 리액트 훅으로(함수형으로) 만들어보기 npx create-react-app react-hook-counter Counter1 은 클래스형 import { Component } from "react"; class Counter1 extends Component{ constructor(props){ super(props) this.state={ num:.. 2023. 6. 17. [React] 검색창 만들기 / api 서버로 데이터 받아와서 검색기능 프론트엔드 4 : 서버에서 DB접근해서 가져와서 화면뿌리기(풀스택) express 어떻게 받고 응답하는지 서버 동작원리 ,req.params, req.body, req.query -------------------------------------- npx create-react-app react-search-practice 라우터 다운로드 npm install react-router-dom App.js 클래스형으로 만들어주기, components 폴더생성 후 SearchInput.js, Home.js, SearchResult.js 파일생성 SearchInput은 상태값을 저장해야하기 때문에 클래스형으로 만들어주기 import '../css/SearchInput.css'; import { Component.. 2023. 6. 17. [React] Router 를 이용한 페이지 이동 npx create-react-app react-router0611 터미널 열어서 다운로드 해주기 npm install react-router-dom 다운로드 완료되면 package.json 에서 확인해야됨. App.js 클래스형 컴포넌트로 변경 import { Component } from 'react'; import './App.css'; class App extends Component{ constructor(props){ super(props) this.state ={ } } render(){ return( ) } } export default App; 2. 라우터 돔 임포트하고 주소 지정해주기 Home = / Profile = /profile import { Component } from 're.. 2023. 6. 11. [React] To do list 데이터 배열+1 / map() CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 추가된 id 값이 없었다. App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다. 추가 이벤트 함수 App.js addTodoList=(id,todo)=>{ alert('추가(App)') alert('넘어온 id : ' + (this.state.todolist.length + 1) ) //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함 //(strin.. 2023. 6. 5. [React] map 메서드 map메서드를 이용한 컴포넌트 반복생성 map 메서드를 사용하기 전에는 화면에 띄울 데이터를 다 적어야 했음. render(){ return( ) } map() 메서드를 이용하면 하나의 코드로 몇번이고 화면에 자동으로 출력할 수 있음 . render(){ const result = this.state.personList.map( (data) => () ) return( {result} ) } 화면 출력해보면 위와 같은 결과를 볼 수 있음. **personList JSON배열 class App extends Component{ constructor(props){ super(props) this.state={ personList:[ //길이가 3인 JSON배열 {profile:lee, name:'이민호',a.. 2023. 5. 21. 이전 1 다음 728x90
