반응형 분류 전체보기375 [DB] H2 데이터베이스 설치 https://www.h2database.com/html/main.html H2 Database Engine H2 Database Engine Welcome to H2, the Java SQL database. The main features of H2 are: Very fast, open source, JDBC API Embedded and server modes; in-memory databases Browser based Console application Small footprint: around 2.5 MB jar file size Supp www.h2database.com Window Installer / All Platfoms 둘 중 원하는 거 다운 받으면 된다. 난 All Platforms.. 2023. 5. 4. [Spring] 회원 관리 (2) - 서비스 개발 / test ✔ 회원 서비스 개발 hello.hellospring > service > MemberService - 회원가입기능 package hello.hellospring.service; import hello.hellospring.domain.Member; import hello.hellospring.repository.MemberRepository; import hello.hellospring.repository.MemoryMemberRepository; public class MemberService { private final MemberRepository memberRepository = new MemoryMemberRepository(); // 회원가입 public Long join(Member mem.. 2023. 4. 28. [Spring] 회원 관리 (1) - repository / Test case ✔ 비즈니스 요구사항 정리 • 데이터: 회원ID, 이름 • 기능: 회원 등록, 조회 • 아직 데이터 저장소가 선정되지 않음 (가상의 시나리오) ➕ 일반적인 웹 애플리케이션 구조 • 컨트롤러 : 웹 MVC의 컨트롤러 역할 • 서비스 : 핵심 비즈니스 로직 구현 • 리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리 • 도메인 : 비즈니스 도메인 객체, 예) 회원, 주문, 쿠폰 등등 데이터베이스에 저장하고 관리됨 ✔ 회원 도메인과 리포지토리 만들기 domain > Member package hello.hellospring.domain; public class Member { private Long id; // 시스템이 저장하는 아이디 private String name; // 회원 이름 .. 2023. 4. 28. [Spring] 스프링 웹 개발 기초 ✔ 프로젝트 생성 https://start.spring.io/ 인텔리제이에서 advanced > build.gradle 파일을 연 후, 실행시키고 http://localhost:8080/ 을 확인한다. 이 화면 뜨면 성공 설정 > gradle 입력 > Build and run using, Run tests using 을 intelliJ IDEA로 바꾸기 ✔ 정적 컨텐츠 static > hello-static.html 정적 컨텐츠 입니다. 2023. 4. 27. [DB] Sharding (샤딩) ✔ Shading 샤딩은 수평 분할(Horizontal Partitioning)과 동일하며, 인덱스의 크기를 줄이고, 작업 동시성을 늘리기 위한 것이다. 수평 분할이란 스키마가 같은 데이터를 두 개 이상의 테이블에 나누어 저장하는 디자인을 말한다. 데이터베이스를 샤딩하게 되면 기존에 하나로 구성될 스키마를 다수의 복제본으로 구성하고 각각의 샤드에 어떤 데이터가 저장될 지를 샤드키를 기준으로 분리한다. 샤딩과 수평적 파티셔닝과의 차이점은 수평적 파티셔닝은 동일한 DB 서버 내에서 테이블을 분할하는 것이고, 샤딩은 DB 서버를 분할한다는 것이다. 즉, DB 서버의 부하를 분산할 수 있다. ◽ 요구사항 : 샤딩을 하기 위해서는 아래의 공통된 요구사항이 필요하다. • 라우팅을 위해 구분할 수 있는 유일한 키값이.. 2023. 4. 27. [DB] Replication (복제) ✔ Replication Replication은 복제를 뜻하며 2대 이상의 DBMS를 나눠서 데이터를 저장하는 방식이며, 사용하기 위한 최소 구성은 Master / Slave 구성이어야 한다. • Master DBMS 역할 : 웹서버로 부터 데이터 등록, 수정, 삭제 요청 시 바이너리로그(Binarylog)를 생성하여 Slave 서버로 전달한다. (웹 서버로부터 요청한 데이터 등록, 수정, 삭제 기능을 하는 DBMS로 많이 사용된다.) • Slave DBMS 역할 : Master DBMS로 부터 전달받은 바이너리로그를 데이터로 반영하게 된다. (웹 서버로부터 요청을 통해 데이터를 불러오는 DBMS로 많이 사용된다.) ◽ Replication을 사용하는 이유 ① 스케일 아웃(Scale-out) → 사용자가.. 2023. 4. 27. [React] 미니 블로그 만들기 ✔ 미니 블로그에 필요한 기능 / 각 기능에 필요한 Component • 글 목록 보기 기능 (리스트 형태) - PostList, PostListItem • 글 보기 기능 - Post • 댓글 보기 기능 - CommentList, CommentListItem • 글 작성 기능 - PostWrite • 댓글 작성 기능 - CommentWrite ✔ 프로젝트 생성 npx create-react-app mini-blog cd mini-blog npm start ✔ 필요한 실습 패키지 설치 react-router-dom v6 / styled-components v5 npm install --save react-router-dom styled-components package.json 에 들어가서 확인할 수 있다.. 2023. 4. 26. [React] styled-components import React from "react"; import styled from "styled-components"; const Button = styled.button` color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark ? "black" : "white"}; border: 1px solid black; `; function Sample(props) { return ( Normal Dark ) } export default Sample; 이렇게 나온다. color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark.. 2023. 4. 25. [React] Font 와 관련된 속성 ✔ Font-family • serif - 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴 • sans-serif - 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴 - 컴퓨터 모니터에서는 Serif 보다 가독성이 좋음 • monospace - 모든 글자가 같은 가로 길이를 가지는 글꼴. 코딩을 할 때 주로 사용 • cursive - 사람이 쓴 손글씨 모양의 글꼴 • fantasy - 장식이 들어간 형태의 글꼴 ✔ Font-style • normal - 일반적인 글자의 형태를 의미 • italic - 글자가 기울어진 형태로 나타남 - 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것 • oblique - 글자가 비스듬한 형태로 나타남 - 그냥 글자를 기울인 것 2023. 4. 25. [React] Context 를 사용하여 테마 변경 기능 만들기 src > chapter_14 > ThemeContent.jsx import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext; src > chapter_14 > MainContent.jsx import {useContext} from "react"; import ThemeContext from "./ThemeContext"; function MainContent(props) { const {theme, toggleTheme} = useContext(ThemeContext); return ( 안녕하세요, 테마 변경이.. 2023. 4. 25. [React] Card 컴포넌트 만들기 ✔ Card 컴포넌트 만들기 src > chapter_13 > Card.jsx function Card(props) { const {title, backgroundColor, children} = props; return ( {title && {title}} {children} ); } export default Card; src > chapter_13 > ProfileCard.jsx import React from "react"; function FancyBorder(props) { return ( {props.children} ); } export default FancyBorder; index.js 고치고, npm start ? 2023. 4. 24. [React] Composition 방법과 Inheritance ✔ Composition : 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 ① Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 ⁎ Sidebar 나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop 을 사용한 FancyBorder 컴포넌트 function FancyBorder(props) { return ( {props.children} ); } WelcomeDialog 컴포넌트 import React from "react"; import FancyBorder from "./FancyBorder"; function WelcomeDialog(props) { return ( 어서오세요! 우리 사이트에 방문하신 것을 환.. 2023. 4. 24. 이전 1 ··· 23 24 25 26 27 28 29 ··· 32 다음 반응형
