전체 글

1️⃣ HTML만으로 간단한 웹사이트 만들기 소플의 블로그에 오신 여러분을 환영합니다! 2️⃣ CSS를 사용하여 웹사이트 스타일링하기 h1{ color:green; font-style: italic; } 3️⃣ 웹사이트에 React.js 추가하기 소플의 블로그에 오신 여러분을 환영합니다! function MyBtn(props){ const [isClicked, setIsClicked]= React.useState(fasle); return React.createElement( 'button', {onClick: ()=> setIsClicked(true)}, isClicked ? 'Clicked!' : 'Click here!' ); }; // 리액트 컴포넌트를 DOM 컨테이너에 렌더링하는 코드 const ..

1️⃣ 리액트는 무엇인가? 💚 리액트의 정의 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리: 자주 사용되는 기능을 정리해 모아 놓은 것 💚 다양한 자바스크립트 UI 프레임워크 앵귤러JS: 프레임워크, 지원 종료 리액트: 라이브러리, 지원 중 뷰JS: 프레임워크, 지원 중 프레임워크 vs 라이브러리 프로그램 흐름에 대한 제어 권한 프레임워크는 개발자가 아닌 프레임워크에게 라이브러리는 개발자가 필요한 부분만 가져다 사용, 흐름에 제어 X 💚 리액트 개념 정리 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집 SPA를 쉽고 빠르게 만들 수 있는 도구 2️⃣ 리액트의 장점 💚 빠른 업데이트와 렌더링 속도 Virtual Dom 사용 웹페이지와 실제 DOM 사..

1️⃣ HTML 살펴보기 💚 HTML이란 무엇인가? Hyper Text Markup Language 마크업 언어의 한 종류 마크업: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미 태그()라고 부르는것을 사용하여 웹사이트 구조 만듦 💚 웹사이트의 뼈대를 구성하는 태그들 : 뼈대 : 웹사이트의 여러 속성 (제목, 설명) 등 메타 데이터를 담음. : 실제 웹사이트에서 보여지는 콘텐츠들 💚 SPA 여러가지 버튼이나 탭을 누르며 페이지를 이동할 때, 브라우저에서 나오는 내용이 바뀜 → 각 페이지별로 HTML 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시함 → 페이지 수가 너무 많아지는 문제 이를 해결하기 위해 SPA등장 (Singl..

1️⃣ DAO (Data Access Object) 실제 DB에 접근하는 객체 DB에서 데이터를 꺼내오거나 넣는 역할 DB에 접속하여 데이터의 CRUD작업을 하는 클래스 Service와 실제 데이터베이스를 연결하는 역할을 하게 됨 데이터베이스에 접근하기 위한 로직과 비즈니스 로직을 분리하기 위해 사용함 (원래 DB의 데이터와 프로그래밍 언어는 패러다임의 불일치로 인해 사용할 수 없음) Spring Data JPA에서는 JpaRepository를 상속받는 인터페이스가 DAO의 역할을 하게된다. 2️⃣ Entity 이때, Entity Class를 통해 클래스를 DB테이블과 1:1 매칭할 수 있음 Entity는 실제 DB테이블에 존재하는 Column들과 매핑되는 핵심 클래스 Entity는 DB의 테이블과 1대..

1️⃣ 빌더 패턴 💚 빌더 패턴 복잡한 객체 생성 과정 및 표현 방법을 분리해, 동일한 생성 절차에서 서도 다른 표현 결과를 만들 수 있게 하는 패턴 💚 빌더 패턴 장점 어떤 필드에 어떤 값을 채워야 할지 명확히 지정할 수 있음 필수 및 선택인자가 많아질수록 생성자 방식보다 가독성이 좋다 자바빈 패턴(setter를 이용하는 방식)보다 안전함. setter 생성을 방지하기 때문에 객체를 변경할 수 없음 (불변성 보장) 2️⃣ 생성자 패턴 vs 빌더 패턴 💚 생성자 패턴 예시 지금 채워야 할 필드가 무엇인지 명확히 지정할 수 없음 변수의 위치가 뒤바뀐 채로 생성되어도 문제점을 찾지 못하고 넘어갈 수 있음 public class Person { private String name; private int age..

1️⃣ 의존성주입 (DI : Dependency Injection) 방법 의존성 주입에는 3가지 방법이 존재한다. 필드 주입 수정자 주입 (setter 주입) 생성자 주입 💚 필드 주입 필드에 @Autowired를 붙여서 바로 주입하는 방법이다. 필드 주입의 특징 코드가 간결해진다. 단, 외부에서 변경이 불가능하여 테스트하기 어려운 단점이 있다. @Component public class CoffeeService { @Autowired private MemberRepository memberRepository; @Autowired private CoffeeRepository coffeeRepository; } 필드 주입을 사용하지 않는 이유 DI 프레임워크가 없으면 아무것도 할 수 없다. 테스트 코드의 ..