기록

◉ 브라우저 객체 모델 ▪︎ 브라우저 객체 모델(BOM, Browser Object Model) : 웹 브라우저에서 제공하는 객체로, 브라우저를 제어할 수 있는 여러 가지 기능이 포함되어 있음 ▪︎ 브라우저 객체 모델의 계층도 ▪︎ 브라우저 객체 모델의 종류 종류 설명 window 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체 document 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체 location 웹 브라우저에 현재 표시되는 페이지에 대한 URL 정보가 포함된 객체 history 웹 브라우저에 저장된 방문 기록이 포함된 객체 navigator 웹 브라우저 정보가 포함된 객체 screen 웹 브라우저의 화면 정보가 포함된 객체 1. window 객체의 속성과 메서드 ▪︎ windo..

◉ 자바스크립트 객체 다루기 ▪︎ 객체란? - 자료형의 관점에서 보면, 객체는 키와 값으로 구성된 속성의 집합을 의미 ▪︎ 객체 생성 - 리터럴 방식으로 객체 생성 : {}을 이용 - 다양한 데이터를 값으로 가질 수 있음 const person = { name: ["구름", "하늘"]; age: 10, isAdult: true }; - 또한, 객체 안에 또 다른 객체나 함수도 가능 const person = { name: { firstName: "Hong", lastName: "Gildong" }, age: 10, isAdult: true, printInfo: function(){ console.log('printInfo'); } }; - 키에 공백이 들어갈 경우, 따옴표를 꼭 사용해야 함 const p..

◉ 함수란 ▪︎ 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문 ◉ 함수 정의하는 방법 ▪︎ 자바스크립트에서는 함수 선언문, 함수 표현식, 화살표 함수 등을 사용해 정의함 1. 함수 선언문으로 함수 정의하기 ▪︎ function 키워드로 함수를 정의하는 방법 - 식별자 = 함수명 function 식별자(){ // 함수 호출 시, 실행할 코드 } function gugudan(){ for(let i = 1; i { console.log(num1, num2); }; sum(10, 20); - 단, 화살표 함수는 매개변수가 1개일 경우, 괄호() 생략 가능 const sum = num1 => { console.log(num1); }; sum(10); 2. return 문 ▪︎ 함수 외부로 데이터를 반환할 때..

1. 데이터베이스에서 테이블 구조와 매핑될 엔티티 구성 - src/main/java/domain → Article.java - @Entity 애너테이션 사용 2. 레포지터리 생성 - src/main/java/repository → BlogRepository.java - 인터페이스로, JpaRepository 상속받아 JPA에서 제공하는 메서드 이용 - 상속 받을 때, 인수로 지정해야 함 3. 글 작성 API 구현 1) 컨트롤러로부터 서비스 계층에서 요청받을 객체 생성 - src/main/java/dto → AddArticleRequest.java 2) 서비스 - src/main/java/service → BlogService.java - save() 메서드 추가 •..

◉ if문과 switch문 ▪︎ 두 조건문의 결정적 차이 : 조건의 형태 ▪︎ if문의 조건에는 식을 사용 switch문의 조건에는 값을 사용 ▪︎ 조건이 값이 아닌 범위일 경우, switch문보다 if문이 더 적합함 ◉ for ... in 반복문 ▪︎ ES6에서 객체 리터럴이나 배열에 반복 접근할 수 있는 반복문 추가되었는데, 그 중 하나가 for in 반복문 for( 가변수 in 배열/객체 리터럴 ){ // 블록문 } - for문의 소괄호 안에 in 키워드를 기준으로 오른쪽 : 탐색의 대상이 되는 배열 또는 객체 리터럴 왼 쪽 : 배열 또는 객체 리터럴을 탐색해서 키를 저장할 가변수(임시변수) 1. 객체 리터럴을 반복할 경우 let obj = { name : "구름", age : "10" }; for..

1. Maven Project 폴더를 원하는 경로(/app/spring)에 위치시키기 2. 외부 파일인 Maven Project를 import하기 ① 이클립스의 상단 File - Import - Existing Maven Projects 선택 ② Browse 클릭 - 다운로드된 폴더를 찾아 경로 지정 후, Finish 클릭 ③ Package Explorer 창에서 확인 가능 → Maven Project의 설정 파일 : pom.xml 3. Gradle 설치 ( 맥북 ) ① 터미널창 이용해 자동으로 다운로드 받기 brew install gradle ② 설치 완료가 되면, 다운로드 받은 gradle 버전 확인 gradle -v ③ init 명령어를 이용해 gradle 초기화시킴 gradle init • mav..

◉ HTML 파일과 자바스트립트 연결하기 - 연결하는 방법은 내부 스크립트와 외부 스트립트 2가지가 있음 1. 내부 스크립트 방법 ▪︎ HTML 파일의 script 태그의콘텐츠 영역에 자바스크립트 코드를 작성하는 방법 ▪︎ 실행 결과 3. script 태그 사용 위치 ▪︎ 항상 body 태그의 종료 태그 바로 전에 사용함 ( 내부 스크립트와 외부 스트립트 방법 모두 동일 ) → 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 하기 위해서! ▪︎ 실무에서는 주로 외부 스트립트 방법을 사용함 → 유지 보수가 편하기 때문 ◉ 프로그래밍 시작 전 알아두기 1. 주석 // 한 줄 주석은 슬래시 2개로 표시 /* 자바스크립트는 여러 줄 주석도 간단하게 처리할 수 있음 */ 2. 자바스크립트 오류 확인 방법..

5. 수정 / 생성 뷰 컨트롤러 작성하기 - 보통 블로그 글 수정과 생성은 같은 화면에서 진행됨 - 수정 / 생성에 따라 버튼 다르고, 기존 값의 유무가 다름 → URL의 설계와 흐름 또한 다름 ❶ 이미 생성한 글을 수정할 때 /new-article?id=123 123 id를 가진 사용자 -------------------------> 뷰 컨트롤러 -------------------------> 뷰 ( id가 123인 글 수정 ) 엔티티 조회 후 모델에 추가 ❷ 새 글을 생성할 때 /new-article 사용자 -------------------------> 뷰 컨트롤러 -------------------------> 뷰 (생성) • 쿼리 파라미터 : HTTP 요청에서 URL의 끝에 '?'로 시작하는 키..

◎ 글 상세 화면에서 [ 삭제 ] 버튼 클릭 시, 글을 삭제해보자. 삭제 API로 요청을 보낼 코드를 작성하고 테스트해보자 1. 삭제 기능 코드 작성 - 삭제 코드는 자바스크립트로 작성 ▪︎ article.js ( src/main/resources/static 디렉터리) // * 삭제 버튼이 눌러졌으면 그 삭제 버튼의 이벤트 등록 // HTML에서 id를 'delete-btn'으로 설정한 엘리멘트를 찾아 상수로 선언 const deleteButton = document.getElementById('delete-btn') // deleteButton이 있는 경우 if (deleteButton) { // 그 엘리멘트에 클릭 이벤트를 발생하면 fetch() 메서드를 통해 // '/api/articles/DEL..

1. build.gradle에서 JDBC 드라이버를 Oracle로 변경 후, 반드시 Refresh Gradle 실행 ▪︎ 사용할 데이터베이스 JDBC 드라이버만 주석 풀고 사용 ▪︎ 전체 build.gradle 코드 - 무슨 기능을 하는지 알아야 함 - Snippets 등록해놓음 ( SpringBoot 폴더에 '최종 build.gradle 정리' 이름으로 등록 ) plugins { id 'java' id 'org.springframework.boot' version '3.1.2' id 'io.spring.dependency-management' version '1.1.2' } group 'org.choongang' version '1.0' sourceCompatibility = '17' repositor..