2024/08 20

[Spring Boot] Bank App (5) - 코딩 컨벤션

💡코딩 컨벤션(coding convention)은특정 프로그래밍 언어로 코드를 작성할 때 따르는 스타일 가이드 또는 규칙 세트입니다. 이는 변수명, 메서드명, 클래스명의 네이밍 규칙, 들여쓰기, 주석 작성 방법, 파일 구조, 코드 정렬 방식 등 프로그램의 가독성, 유지보수성, 일관성을 향상시키기 위한 방법론을 포함합니다. 코딩 컨벤션 정의 정적 파일 (CSS, XML, JS)규칙: 소문자 사용, 단어 간 구분은 스네이크 케이스(_)로 합니다.예시: style_sheet.css, config_file.xml, main_script.jsJSP 파일규칙: 카멜 케이스(CamelCase)를 사용하여 첫 글자는 소문자로 시작합니다.예시: home.jsp, accountPage.jsp자바 파일 (클래스)규칙: 파..

Spring boot 2024.08.13

[Spring Boot] Bank App (4) - 패키지 설정

💡학습 목표 1. 패키지 및 폴더 구조 잡기 패키지(package)는 관련된 클래스, 인터페이스, 서브패키지 등을 그룹화하여 정리하는 방법입니다. Java에서 패키지는 네임스페이스를 제공하여 클래스 이름 간의 충돌을 방지하고, 보다 체계적으로 코드를 조직화할 수 있게 합니다. 패키지는 물리적으로 파일 시스템의 디렉토리에 해당하며, 패키지 내의 클래스나 인터페이스는 이 디렉토리 내에 위치합니다. 즉, 우리는 주 언어 파일들을 모아 두는 폴더를 패키지라 부르겠습니다.Spring boot WEB MVC 프레임 워크에서는 .. 정적자원을 두는 패키지css, js, image 파일등을 넣어 둘 수 있습니다.src/main/resource/static(정적 자원 루트 폴더)동적자원(JSP 활용)이 예제에서는 we..

Spring boot 2024.08.13

[Spring Boot] Bank App (3) - 디자인 시안 확인

💡 화면 구성 확인이번 강의에서 디자인 요소에 대한 설명은 가능한 간단하게 진행할 예정입니다 CSS 프레임워크인 bootstrap4를 활용하지만 여러분들이 원하는 디자인으로 마음껏 수정해도 좋습니다.부트스트랩 4 템플릿을 가져올 링크 입니다 확인 해보세요 https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_template1 W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your browserwww.w3schools.com메인 페이지 프로젝트 완료 후에 이 부분은 여러분들이 직접 꾸며 주는 페이지로 남..

Spring boot 2024.08.13

[Spring Boot] Bank App (2) - yml 파일 설정하기

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

Spring boot 2024.08.13

[Spring Boot] Bank App (1) - 프로젝트 설정

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

Spring boot 2024.08.12

css 연결 안됨(myBank)

오류가 발생 ❗❗❗❗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..

error note 2024.08.08

[JS] 웹 페이지 렌더링 과정

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

카테고리 없음 2024.08.06

[JS] Browser Object Model

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

카테고리 없음 2024.08.06