코딩30 [JS] 콜백함수 정리 콜백함수 - 정의 : 함수에 파라미터로 들어가는 함수 - 용도 : 순차적으로 실행하고 싶을 때 사용 document.querySelector('.button').addEventListener('click',function(){ "버튼 누르면 이 코드 실행해주세요~" }) 이벤트를 넣고 싶을 때 .addEventListener() 사용. addEventListener() 소괄호가 있으니까 함수임. addEventLstener('click', function() {} ) 파라미터로 함수를 사용함 -> 이것을 콜백함수라고 부름 + 다른데서 만든 함수도 콜백함수로 넣을 수 있음 document.querySelector('.button').addEventListener('click',function 함수명) fu.. 2023. 6. 29. [SpringBoot] Html 자체 폼 전달 -> Controller / 검색기능구현 action 속성이 없는 Html 폼은 현재 페이지에 대한 요청을 보낸다. 이 경우, 폼 데이터는 현재 페이지 URL의 일부로서 쿼리 매개변수로 전달된다. 따라서 `method="get" 을 사용하여 html 폼을 제출하고 폼 데이터를 쿼리 매개변수로 전송할 수 있다. `action` 속성이 없으면, 폼 데이터는 현재 페이지로 전송된다. 따라서, html 코드에서 `action` 속성이 없어도 폼 데이터는 현재 페이지로 전송되며, 컨트롤러의 경로에 대한 요청으로 처리된다 //...생략 위의 코드에서 `method="get"` 을 사용하면 폼 데이터가 HTTP GET 방식으로 전송되며, 폼이 속한 현재 페이지로 전송된다. 컨트롤러에서는 @RequestParam 어노테이션을 사용하여 URL 매개변수를 받을 .. 2023. 6. 28. [NodeJS] REPL / JS파일 실행하기 REPL : Read 읽고 Eval 해석하고 Print 반환하고 Loop 종료할 때까지 반복한다. JS 파일 실행하기 아무 폴더(디렉토리) 안에 helloWorld.js 생성 function helloWorld(){ console.log('Hello World'); helloNode(); } function helloNode(){ console.log('Hello Node'); } helloWorld() 콘솔에서 node [자바스크립트 파일 경로] 로 실행 콘솔에서 REPL 로 들어가는 명령어가 node 이고, 노드를 통해 파일을 실행하는 명령어는 node[자바스크립트 파일 경로] 이다. 2023. 6. 24. [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. [SpringBoot] 회원가입 insert html 에서 form과 input으로 뼈대 만들기 이메일 계정이 있으신가? 로그인 자바스크립트로 연결되는지 확인하기 const btnElements = document.getElementById('Btn') btnElements.addEventListener('click', function() { alert('클릭'); }); alert 확인되면 자바스립트로 백연결 시작하기 registerForm.onsubmit = e => { e.preventDefault(); const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('email', registerForm['email'].value); xhr.open('POS.. 2023. 6. 20. [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. [팀프로젝트] 게시글작성 위즈윅 ckeditor 사용하기 ckeditor5 builder 사이트 이용하기 하나씩 추가 next step > start We`re working on it >> 대기 Something went wrong 뜨면 다시 돌아가서 반복하기(완료될때까지) >> Previous step > 한국어선택 > next step 아래 완료된화면 압축풀고 파일전체로 문서폴더로 옮기기. 빌드폴더 안에 있는 파일들 전체 복사 후 프로젝트로 복사하기. src > main > resources > static > resources libraries 폴더 생성 > ckeditor 폴더생성 3개의 파일과폴더 복붙 2023. 6. 13. 이전 1 2 3 4 다음 728x90
