개발 note

1.yml 파일 및 문법 이해 및 설정 spring boot 프로젝트 설정을 yml 형식에 문법을 사용할 예정 입니다. 설정파일 기본 확장자 properties 에서 yml 형식에 파일로 변경할 예정입니다. 보다 보일러플레이트 코드를 줄이기 위함과 좀 더 간편한 진행을 위해 수정 아래 처럼 수정해주세요 파일 확장자명을 수정해주세요  참고 application.properties 파일은Spring Boot 애플리케이션의 설정을 관리하는 핵심 요소 중 하나로, 스프링 레거시 프로젝트에서 사용되는 XML 기반의 설정 파일들과 비교할 때 몇 가지 중요한 차이점과 역할을 가지고 있습니다. Spring Boot의 application.properties 의 역할설정의 단순화: Spring Boot는 "convent..

💡 Bank App 프로젝트의 목표Spring Boot 프레임워크 기반: Spring Boot의 기본 동작 원리를 이해하고 활용합니다. 이를 통해, 개발자는 Spring Boot를 사용하여 빠르고 효율적으로 어플리케이션을 구축할 수 있습니다.MVC 패턴 구현: JSP(JavaServer Pages) 템플릿 엔진을 사용하여 MVC(Model-View-Controller) 패턴을 구현합니다. MVC 패턴을 통해 어플리케이션의 구조를 명확하게 분리함으로써, 유지보수성과 확장성이 향상됩니다.비즈니스 로직 생성: 프로젝트 내에서 필요한 비즈니스 로직을 설계하고 구현합니다. 이 과정에서 Spring Boot의 다양한 기능을 활용하여, 요구 사항을 충족하는 비즈니스 로직을 개발합니다.DB 접근 기술 활용: 마이바티..

오류가 발생 ❗❗❗❗No static resource user/css/common.css 라고 뜬다 개발자 도구(F12) 확인 했더니 css가 안 들어온다...뭐가 문제일까 했는데그 이유는... header.jsp에서 경로 설정에 / 를 빼먹었다... 경로 확인 잘 하기!!  my Bank 마이바이티스를 활용한 스프링 부트 앱 만들어보기 HOME Sign in Sign up 회원가입 About Me Photo of me: 코린이 개발을 위한 뱅크 앱 Some Links Lorem ipsum dolo..

1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 2. 연습 문제 - 오류 해결 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어진다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성한다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성한다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성한다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산한다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그린다. Java..

1. BOM 에 대하 알아 보자2. Window Object 와 하위 객체들에 대해 알아 보자  1. BOM 에 대하 알아 보자JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델이다.BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있다.BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있다.❗ 정리 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미합니다. 추가 적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조는 최상위 객체는 wind..

Whitelabel Error Page가 뜬다..this application has no explicit mapping for.. 이 응용 프로그램에는 다음에 대한 명시적 매핑이 없다고... 그 이유는❗❗❗❗❗❗❗❗❗❗ mainController에서 @GetMapping에@GetMapping({"/main-page", "/index"})     이거를 빼먹음... 1. 어노테이션 잘 확인하기 (맵 주소)2. 파일 위치 잘 확인하기잘 입력해주면 에러 해결✨

1. DOM 이란 무엇일까? 2. JS로 DOM 조작해보기 3. DOM에 접근할 수 있는 5가지 방법 4. 연습 문제 풀어보기브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 한다.  1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역..

1. 함수에 선언과 사용 2. 함수 표현식이란? 3. 즉시 실행 함수란? 4. 화살표 함수란? 1. 함수에 선언과 사용 index7.html 파일입니다  2. 함수 표현식이란?자바스크립트에서 "함수 표현식"은 함수를 변수에 할당하는 방식으로 정의하는 것을 의미한다.함수 표현식은 함수를 값으로 다루는 함수형 프로그래밍의 개념 중 하나이며, 매우 유용한 패턴 중 하나이다. index8.html 파일입니다

1. 객체에 대한 이해와 사용 2. 배열에 대한 이해와 사용 1. 객체에 대한 이해와 사용  객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)을 함께 묶어서 표현하는 자료구조이다. 내장 객체 (Built-in Objects)내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말한다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있다.Object: 모든 객체의 기본이 되는 객체이다. 다른 모든 객체는 이 객체를 상속 받는다.Array: 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있다.String: 문자열을 다루는 데 사용되..