본문 바로가기

WEB34

TDD(테스트 주도 개발, Test-Driven Development), Junit TDD(테스트 주도 개발, Test-Driven Development) & Junit TDD(Test-Driven Development)TDD는 "테스트를 먼저 작성하고 코드를 구현하는 방식"으로, 소프트웨어 개발을 더욱 견고하고 신뢰성 있게 만드는 방법론입니다. TDD의 핵심 과정은 반복적으로 테스트 작성 -> 코드 구현 -> 리팩토링을 통해 코드를 점진적으로 개선해 나가는 것입니다. TDD 개발 프로세스Red: 실패하는 테스트 작성 먼저 실패하는 테스트 코드를 작성합니다. 이 단계에서 JUnit을 활용해, 단위 테스트 메서드를 작성하고 이 테스트가 실행되었을 때 실패하도록 합니다. 실패를 통해 "구현되지 않은 기능"을 명확히 인지하고, 필요한 기능에 대한 요구사항을 확인하게 됩니다.i.. 2024. 11. 5.
의존성 주입 애노테이션 @RequiredArgsConstructor, @AllArgsConstructor, @NoArgsConstructor 핵심 정리 의존성 주입 애노테이션 종류 알아보기Spring Boot에서 의존성 주입을 위해 Lombok 라이브러리에서 제공하는 어노테이션인 @RequiredArgsConstructor, @AllArgsConstructor, @NoArgsConstructor를 활용하면 코드가 간결해지고 다양한 생성자 주입 방식을 선택할 수 있습니다. 각 어노테이션의 역할과 생성자 주입 방식은 다음과 같습니다. @RequiredArgsConstructor @RequiredArgsConstructor는 final 또는 @NonNull로 선언된 필드에 대한 생성자를 자동으로 생성합니다. 의존성 주입이 필요한 필드를 final로 지정하면 해당 필드만 초기화.. 2024. 10. 31.
CSS FlexBox 사용법: 컨테이너와 아이템 속성 알아보기 CSS FlexBox란? FlextBox 개념FlexBox(Flexible Box Layout)는 CSS 레이아웃 모듈로, 컨테이너 안의 아이템들을 효율적으로 배치하고 정렬하기 위해 사용됩니다. FlexBox를 사용하면 레이아웃을 더 쉽게 구성하고, 다양한 화면 크기나 장치에 맞게 반응형 디자인을 구현할 수 있습니다. Container, ItemFlexBox 는 컨테이너, 아이템에 각각 부여할수 있는 속성들이 있습니다. main axis, cross axis (중심축, 반대축)FlexBox 는 중심축(main axis)과 반대축(cross axis) 개념이 있습니다. 상황에 따라 중심축이 수평선이면 반대축은 수직선이 되고 수직선이 중심축일때는 수평선이 반대축이 됩니다. FlexBox Container 속.. 2024. 7. 7.
CSS 속성 선택자 종류 및 사용법 (Attribute Selectors) CSS 속성 선택자 정리 속성 선택자란CSS 속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 데 사용됩니다. 이는 HTML 요소의 특정 속성이나 속성 값에 따라 정밀하게 스타일을 적용할 수 있게 해줍니다. 다양한 종류의 속성 선택자와 그 사용 방법은 다음과 같습니다. 기본 속성 선택자 (Attribute Selector)기본 속성 선택자는 특정 속성을 가진 모든 요소를 선택합니다.[element[attribute]] { /* 스타일 규칙 */} 예제: [href]는 href 속성을 가진 모든 요소를 선택합니다.a[href] { color: blue;} See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen... 2024. 7. 2.
CSS 결합자 종류와 사용법 (Descendant, Child, Sibling Combinators) CSS 결합자 정리 CSS 결합자란CSS 결합자(combinator)는 여러 선택자를 결합하여 특정한 관계에 있는 요소들을 선택하는 데 사용됩니다. 결합자는 요소들 간의 관계를 정의하여 더욱 정밀하고 복잡한 스타일링을 가능하게 합니다. 주요 결합자와 그 사용 방법은 다음과 같습니다. 자손 선택자 (Descendant Selector)특정 요소의 모든 자손 요소를 선택합니다. 공백을 사용합니다. A B { /* 스타일 규칙 */} 예제: div p는 모든 div 요소 내의 모든 p 요소를 선택합니다.div p { color: blue;} See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.  자식 선택자 (Child S.. 2024. 7. 2.
CSS 기본 개념, 우선순위와 선택자 사용 방법 CSS (Cascading Style Sheets) 알아보기 CSS 란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하고 웹 문서의 외관을 제어하는 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의한다면, CSS는 이 구조와 콘텐츠의 시각적 표현을 설정합니다. CSS를 사용하면 텍스트의 색상, 글꼴, 레이아웃, 배경 이미지 등 다양한 스타일 요소를 지정할 수 있습니다. CSS 적용 우선순위Cascading 이란 폭포같은, 계속되는 이라는 뜻의 단어인데 이는 CSS가 스타일을 적용하는 우선순위와 관련이 있습니다.CSS가 적용되는 우선순위는 아래와 같습니다.Author Style: css파일에 작성한 스타일User Style: 사이트를 사용하는 유저가 임의로 지정하는 .. 2024. 6. 30.
HTML 하이퍼링크 속성과 예제, 문서 내부 링크 걸기 HTML 하이퍼링크웹 페이지 간의 연결을 만드는 데 사용되는 요소입니다. 주로 사용자가 클릭할 수 있는 텍스트, 이미지 또는 기타 요소를 제공하여 다른 웹 페이지로 이동하거나 현재 페이지의 다른 부분으로 스크롤할 수 있도록 합니다. 하이퍼링크는 웹의 기본적인 네비게이션 메커니즘을 제공하며, 웹 문서들 사이의 관계를 정의하는 데 중요한 역할을 합니다. 하이퍼링크 속성href속성href 속성은 태그에서 가장 중요한 속성으로, 하이퍼링크의 대상이 되는 URL을 지정합니다. 이 속성은 절대 URL(https://www.example.com)이나 상대 URL(../index.html)을 포함할 수 있습니다. 또한 href 속성의 값으로 이메일 주소나 페이지 내부의 특정 위치를 가리키는 앵커(#section1) .. 2024. 6. 29.
HTML 구조, 시멘틱(Simentic) 요소 알아보기 (header nav section...) HTML 구조, 시멘틱(Simentic)HTML의 시맨틱(Semantic) 요소는 문서의 구조와 의미를 명확히 표현하기 위해 사용되는 태그들을 의미합니다. 시맨틱 태그를 사용하면 웹 페이지의 콘텐츠를 더 잘 설명할 수 있으며, 이는 검색 엔진 최적화(SEO), 접근성, 그리고 코드의 가독성을 향상시키는 데 도움이 됩니다. Simentic 중요성가독성: 시맨틱 태그를 사용하면 HTML 코드를 읽고 이해하기가 더 쉬워집니다. 예를 들어, , , 등을 사용하면 각 부분의 목적과 역할이 명확해집니다.검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 태그를 사용하여 페이지의 구조와 내용을 더 잘 이해하고, 이를 기반으로 검색 결과를 개선할 수 있습니다.접근성: 시맨틱 태그를 사용하면 스크린 리더와 같은 접근성 도.. 2024. 6. 28.

티스토리툴바