Front-End

HTML 문서를 표현하는 객체웹브라우저 내장객체인 document는 HTML 문서를 표현하는 Document 객체가 저장되어 있다.Document 객체에서 지정된 아이디를 가진 엘리먼트 객체를 찾아서 반환한다.일치하는 엘리먼트가 없으면 null 반환Document 객체

❓ AJAX > Asynchronous JavaScript and XML(에이잭스)의 약자 자바스크립트와 XML을 이용한 서버와 비동기식 통신 화면의 리로딩 없이 자바스크립트로 웹서버와 HTTP 통신을 통해서 데이터를 획득하고, 획득한 데이터로 화면의 일부분을 갱신

1. 인라인 이벤트 처리 2. 엘리먼트 객체의 이벤트 프로퍼티를 이용한 이벤트 처리 3. 엘리먼트 객체의 addEventListener 메소드를 이용한 이벤트 처리

1. splice > 배열에서 지정된 위치에 아이템을 삭제하거나 추가할 수 있다. splice(index, howmany, item, item, item, ...) index 삭제/추가 발생할 인덱스 howmany 삭제할 갯수, 0을 입력하면 삭제되지 않는다. 0보다 큰 값을 입력하면 index 위치부터 갯수만큼 삭제된다. item ...

📌 함수 만드는 방법 3가지 1. 이름 있는 함수 2. 익명함수 만들어서 변수에 저장 3. 화살표 함수 표현식으로 만들어서 변수에 저장 > 왼쪽 매개변수 => 오른쪽 구현내용 매개변수가 1개일 때는 괄호 생략 가능 * 매개변수 0개일 때도 빈 괄호 ()는 작성해야 함 1) 수행문이 1개일 때 return 생략 가능, 실행결과가 곧 반환값 2) 수...

jQuery 경량의 자바스크립트 라이브러리 크로스 브라우징을 지원 CSS3 선택자를 지원 jQuery 장점 강력한 선택자를 지원 ${"p"} = document.querySelectorAll("p") p태그 전부 선택 ${".btn"} = documen

📌 React 설치 1. Node.js 다운로드 https://nodejs.org/ko/ 2. cmd로 설치 및 버전 확인 node -v npm -v 3. create-react-app 글로벌 설치 npm install -g create-react-app 4. React 앱 생성 앱 생성할 디렉토리로 이동 npx create-react-app my...

1. 부트스트랩 설치 npm install react-bootstrap bootstrap 부트스트랩 아이콘 설치 npm i bootstrap-icons 2. App.js에 부트스트랩 등록 3. 사용 예시 Main.js 참고) root.js 사용 결과 끝 > 이제 부트스트랩 자유롭게 사용하면 됨 🔗 React Bootstrap 공식문서 http...

📌 디렉토리 구조 0. src/index.js React 앱을 브라우저에 연결해주는 진입점 1. src/App.js 애플리케이션의 최상위 컴포넌트 (이 파일 기준으로 전체 화면 렌더링) 2. api 외부 API와 통신하는 함수들을 모아놓는 폴더 3. component 작은 단위의 UI 컴포넌트 4. page 각 라우트에 해당하는 실제 페이지 컴포넌트 5...

Back-End 0. 디렉토리 구조 1. Controller 2. Service 3. Mapper 4. Mapper.xml 5. vo 참고) pom.xml 참고) application.properties 결과 Front-End 0. 디렉토리 구조 ![]