ours_111318.log

[백준] 터렛

Fri, 04 Mar 2022 13:47:54 GMT

문제

풀이 1)각 터렛의 좌표와 반지름이 주어지고 이에 대한 원의 접점을 구하라는 뜻이다. 2)두 원의 반지름 r1, r2
두 원의 중심 사이의 거리 d

두 원의 접점이 생길 수 있는 경우의 수는 4개

1) 두 원의 접점이 무수히 많은 경우 : 두 원의 크기가 같은 경우 : d=0

2)두 원의 접점이 0개인 경우 :동심원인 경우 겹치는 부분이 없다 : d=o :r1, r2, d중에서 가장 큰수가 나머지 두 수의 합보다 큰 경우

3)두 원의 접점이 1개인 경우 : 외접 r1 + r2 = d : 내접 r1 - r2 = d

4)두 원의 접점이 2개인 경우 : r1 - r2

import math

T = int(input())

for _ in range(T):
    x1, y1, r1, x2, y2, r2 = map(int, input().split())
    d = math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)

    if x1 == x2 and y1 == y2:     #원의 중심이 같을때
        if r1 == r2:
            print(-1)
        else:
            print(0)

    else:                         #원의 중심이 같지 않을때 
        if r1 > d + r2 or r2 > d + r1 or d > r1 + r2:   #r1,r2,d중에서 가장 큰 수가 나머지 두 수의 합보다 큰 경우 
            print(0)
        elif abs(r1 - r2) == d or r1 + r2 == d:     #외접,내접일 경우
            print(1)
        else:                                        # 그밖의 경우 
            print(2)

[백준]설탕배달

Thu, 03 Mar 2022 01:47:26 GMT

문제

예제

풀이 1.5Kg설탕을 나머지 없이 담을 수 있다면, 5로 나눈 몫을 출력 2.5Kg설탕에 나머지가 생긴다면 3Kg에 담기(입력값은 -3, 카운트 +1) 3.입력값이 0보다 작아지면, -1 출력하고 종료


num = int(input())
count = 0 

while True:
    if num % 5 == 0:                #입력값의 나머지가 0 일때
        count += int(num//5)        #5로 나눈 몫을 카운트에 넣음
        print(count)
        break

    num -= 3                         #입력값에서 -3
    count += 1                       #카운트 1 증가 
    if num < 0:                      #입력값이 0보다 작으면
        print(-1)                    #-1을 출력 
        break

[백준]베르트랑 공준

Wed, 02 Mar 2022 14:41:38 GMT

풀이

1.소수를 구하는 함수를 만든다. 2.n< i <= 2n 의 범위 안에서 소수를 찾으면 count +=1 을 해준다. 3.count를 출력한다.

import math

def num(n):                            # 소수구하는 함수 num
    if n == 1:                         # 1은 소수가 아님.
        return False
    else:                                         #제곱근이 있는 수 중에 
        for i in range(2,int(math.sqrt(n))+1):   
            if n % i == 0:                        #약수가 있으면 false
                return False
        return True

all_list = list(range(2, 246912))         #문제에서 제한한 범위
save_list = []                            #빈 리스트 생성
for i in all_list:                        #2부터 2*123,456범위에
    if num(i):                            #num 함수에 해당하면
        save_list.append(i)               #리스트에 추가

n = int(input())                          #입력받은 정수 n

while True:
    count = 0                        #소수의 개수
    if n == 0 :                      #0이 입력되면 종료
            break
    for i in save_list:              #save_list에 저장된 소수들 중,
        if n < i <= n*2:             #입력한 값의 범위 내에서 값이 있으면
            count += 1               #있을 때 마다 카운트 +1
    print(count)
    n = int(input())                 #0 입력받기 전까지 계속 해야하므로

CORS

Sun, 13 Feb 2022 23:22:48 GMT

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

교차 출처 요청의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

SQL

Sun, 06 Feb 2022 07:56:03 GMT

SQL

SQL (Structured Query Language) 관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다.

관계형 데이터베이스 관리 시스템에서 자료의 검색과 관리, 데이터베이스 스키마 생성과 수정, 데이터베이스 객체 접근 조정 관리를 위해 고안되었다. 많은 수의 데이터베이스 관련 프로그램들이 SQL을 표준으로 채택하고 있다.

SQL 문법의 종류는 다음 세 가지가 있다

데이터 정의 언어 (DDL : Data Definition Language)
- CREATE (데이터베이스 개체 (테이블, 인덱스, 제약조건 등)의 정의)
- DROP (데이터베이스 개체 삭제)
- ALTER (데이터베이스 개체 정의 변경)
데이터 조작 언어 (DML : Data Manipulation Language)
- INSERT INTO (행 데이터 또는 테이블 데이터의 삽입)
- UPDATE ~ SET (표 업데이트)
- DELETE FROM (테이블에서 특정 행 삭제)
- SELECT ~ FROM ~ WHERE (테이블 데이터의 검색 결과 집합의 취득)
  
  뒷부분의 “동적 SQL”에서 SELECT 문은 한 번 실행에 1행의 결과를 얻는 “단일행 SELECT 문장”과 커서로 여러 줄의 결과를 얻는 “커서 SELECT 문”이 있다
데이터 제어 언어 (DCL : Data Control Language)
- GRANT (특정 데이터베이스 사용자에게 특정 작업을 수행 권한을 부여)
- REVOKE (특정 데이터베이스 이용자로부터 이미 준 권한을 박탈 함.)
- SET TRANSACTION ( 트랜잭션 모드 설정 (동시 트랜잭션 격리 수준 (ISOLATION MODE) 등))
- BEGIN (트랜잭션 시작)
- COMMIT (트랜잭션의 실행)
- ROLLBACK (트랜잭션 취소)
- SAVEPOINT (무작위로 롤백 지점을 설정)
- LOCK (TABLE 등의 자원을 차지)

참조

https://ko.wikipedia.org/wiki/SQL

MVC

Sun, 06 Feb 2022 07:48:23 GMT

MVC

모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향없이 쉽게 고칠 수 있는 애플리케이션을 만들 수있다

MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.

모델: 데이터와 비즈니스 로직을 관리합니다.
뷰: 레이아웃과 화면을 처리합니다.
컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니

모델

모델은 앱이 포함해야할 데이터가 무엇인지를 정의합니다. 데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리며(따라서 필요한대로 화면을 변경할 수 있습니다) 가끔 컨트롤러에게 알리기도 합니다(업데이트된 뷰를 제거하기 위해 다른 로직이 필요한 경우).

다시 쇼핑 리스트 앱으로 돌아가서, 모델은 리스트 항목이 포함해야 하는 데이터 — 품목, 가격, 등. — 와 이미 존재하는 리스트 항목이 무엇인지를 지정합니다.

뷰는 앱의 데이터를 보여주는 방식을 정의합니다.

쇼핑 리스트 앱에서, 뷰는 항목이 사용자게에 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받습니다.

컨트롤러

컨트롤러는 앱의 사용자로부터의 입력에 대한 응답으로 모델 및/또는 뷰를 업데이트하는 로직을 포함합니다.

예를 들어보면, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖습니다. 이러한 액션들은 모델이 업데이트되는 것이므로 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한다음, 업데이트된 데이터를 뷰로 전송합니다.

단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있습니다(예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬). 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있습니다.

참조

https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC https://developer.mozilla.org/ko/docs/Glossary/MVC

ORM

Sun, 06 Feb 2022 07:28:57 GMT

ORM

Object Relational Mapping, 객체-관계 매핑

객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다.
- 객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다.
- 객체 모델과 관계형 모델 간에 불일치가 존재한다.
- ORM을 통해 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결한다.
데이터베이스 데이터 <—매핑—> Object 필드
- 객체를 통해 간접적으로 데이터베이스 데이터를 다룬다.
Persistant API라고도 할 수 있다. Ex) JPA, Hibernate 등

ORM의 장단점

장점
- 객체 지향적인 코드로 인해 더 직관적이고 비즈니스 로직에 더 집중할 수 있게 도와준다.
  - ORM을 이용하면 SQL Query가 아닌 직관적인 코드(메서드)로 데이터를 조작할 수 있어 개발자가 객체 모델로 프로그래밍하는 데 집중할 수 있도록 도와준다.
  - 선언문, 할당, 종료 같은 부수적인 코드가 없거나 급격히 줄어든다.
  - 각종 객체에 대한 코드를 별도로 작성하기 때문에 코드의 가독성을 올려준다.
  - SQL의 절차적이고 순차적인 접근이 아닌 객체 지향적인 접근으로 인해 생산성이 증가한다.
- 재사용 및 유지보수의 편리성이 증가한다.
  - ORM은 독립적으로 작성되어있고, 해당 객체들을 재활용 할 수 있다.
  - 때문에 모델에서 가공된 데이터를 컨트롤러에 의해 뷰와 합쳐지는 형태로 디자인 패턴을 견고하게 다지는데 유리하다.
  - 매핑정보가 명확하여, ERD를 보는 것에 대한 의존도를 낮출 수 있다.
- DBMS에 대한 종속성이 줄어든다.
  - 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하기 때문에 RDBMS의 데이터 구조와 Java의 객체지향 모델 사이의 간격을 좁힐 수 있다.
  - 대부분 ORM 솔루션은 DB에 종속적이지 않다.
  - 종속적이지 않다는것은 구현 방법 뿐만아니라 많은 솔루션에서 자료형 타입까지 유효하다.
  - 프로그래머는 Object에 집중함으로 극단적으로 DBMS를 교체하는 거대한 작업에도 비교적 적은 리스크와 시간이 소요된다.
  - 또한 자바에서 가공할경우 equals, hashCode의 오버라이드 같은 자바의 기능을 이용할 수 있고, 간결하고 빠른 가공이 가능하다.
단점
- 완벽한 ORM 으로만 서비스를 구현하기가 어렵다.
  - 사용하기는 편하지만 설계는 매우 신중하게 해야한다.
  - 프로젝트의 복잡성이 커질경우 난이도 또한 올라갈 수 있다.
  - 잘못 구현된 경우에 속도 저하 및 심각할 경우 일관성이 무너지는 문제점이 생길 수 있다.
  - 일부 자주 사용되는 대형 쿼리는 속도를 위해 SP를 쓰는등 별도의 튜닝이 필요한 경우가 있다.
  - DBMS의 고유 기능을 이용하기 어렵다. (하지만 이건 단점으로만 볼 수 없다 : 특정 DBMS의 고유기능을 이용하면 이식성이 저하된다.)
- 프로시저가 많은 시스템에선 ORM의 객체 지향적인 장점을 활용하기 어렵다.
  - 이미 프로시저가 많은 시스템에선 다시 객체로 바꿔야하며, 그 과정에서 생산성 저하나 리스크가 많이 발생할 수 있다.

참조 https://gmlwjd9405.github.io/2019/02/01/orm.html

JWT

Sun, 30 Jan 2022 09:10:28 GMT

JWT

회원 인증시, 사용자가 로그인을 하면, 서버는 사용자의 정보를 기반으로한 토큰을 발급한다. 사용자는 서버에 요청을 할때마다 JWT를 포함하여 전달하며,서버는 클라이언트에게서 요청을 받을때 마다, 해당 토큰이 유효하고 인증이 됬는지를 검증을 하고, 사용자가 요청한 작업에 권한이 있는지를 확인하여 작업을 처리한다. 서버에서는 사용자에 대한 세션을 유지할 필요가 없다. 사용자가 요청을 했을때 토큰만 확인하면 되므로, 세션관리가 필요없어서 서버자원과 비용을 절감할 수 있는 장점이 있다.

API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체. 즉,어떤 서버의 특정한 부분에 접속해서 그 안에 있는 데이터와 서비스를 이용할 수 있게 해주는 소프트웨어 도구라고 할수 있다.

API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
API는 모든 접속을 표준화한다

REST API란? :네트워크를 통해서 컴퓨터들끼리 통신할 수 있게 해주는 아키텍처 스타일을 말한다. 1.인터넷 식별자(URI)와 HTTP 프로토콜을 기반으로 한 단순함이 특징이다. 데이터 포맷으로는 브라우저 간 호환성이 좋은 제이슨(JSON)을 사용한다. 2.REST 방식의 API라면, 클라이언트-서버 모델로 구축되었다는 것을 의미하며, 정보의 페이로드(실제 전달하려는 내용)가 두 지점 사이를 왕복하게 된다, 3.REST API는 단일한 인터페이스를 사용한다.그렇기 때문에 해당 API를 사용하는 애플리케이션들이 동일한 경로를 통해서 접속해야 하고, 그 방식이 단순하게 된다.

:REST는 웹에 최적화되어 있고, 데이터 포맷이 JSON이기 때문에 브라우저들 간에 호환성이 좋다. 그래서 그 성능과 확장성이 뛰어난 것으로도 알려져 있다

IoC / Bean

Sun, 30 Jan 2022 09:08:27 GMT

Ioc(Inversion of Control)

IoC(Inversion of Control)란 "제어의 역전" 이라는 의미로, 말 그대로 메소드나 객체의 호출작업을 개발자가 결정하는 것이 아니라, 외부에서 결정되는 것을 의미한다.
간단히 말해 _"제어의 흐름을 바꾼다"_라고 한다.
객체의 의존성을 역전시켜 객체 간의 결합도를 줄이고 유연한 코드를 작성할 수 있게 하여 가독성 및 코드 중복, 유지 보수를 편하게 할 수 있게 한다.

기존에는 다음과 순서로 객체가 만들어지고 실행되었다.

1.객체 생성

2.의존성 객체 생성 /클래스 내부에서 생성

3.의존성 객체 메소드 호출

하지만, 스프링에서는 다음과 같은 순서로 객체가 만들어지고 실행된다.

1.객체 생성

2.의존성 객체 주입 스스로가 만드는것이 아니라 제어권을 스프링에게 위임하여 스프링이 만들어놓은 객체를 주입한다.

3.의존성 객체 메소드 호출

스프링이 모든 의존성 객체를 스프링이 실행될때 다 만들어주고 필요한곳에 주입시켜줌으로써 Bean들은 _싱글턴 패턴_의 특징을 가지며,

제어의 흐름을 사용자가 컨트롤 하는 것이 아니라 스프링에게 맡겨 작업을 처리하게 된다.

Bean

스프링 IoC 컨테이너가 관리하는 객체들을 Bean 이라고 부릅니다.
스프링은 이러한 Bean들의 의존성을 관리하고, 객체를 만들어 주며, Bean으로 등록을 해 주고, 이렇게 만들어진 것들을 관리합니다. 개발자가 이 부분까지 신경쓰지 않아도, 프레임워크가 알아서 해 주는 것입니다.
그리고 스프링 IoC 컨테이너가 위와 같은 관리를 해 줍니다. 이러한 Bean들을 담고 있는 스프링 IoC 컨테이너는 두 가지 중 하나를 사용합니다.

ApplicationContext 혹은 BeanFactory

ApplicationContext는 BeanFactory를 상속받으므로 둘 다 같은 일을 하는

이러한 스프링에서의 의존성 주입은 반드시 Bean으로 등록된 객체들 끼리만 가능합니다. 스프링 IoC 컨테이너는 Bean으로 등록되지 않은 객체에는 의존성 주입을 해 주지 않습니다.
- IntelliJ 에서는 Bean 인 경우 아래 사진처럼 왼쪽에 아이콘으로 표시해 줍니다.
- 위에서 예시를 들었듯, OwnerController 생성자에서 의존성 주입이 일어나고 있습니다.
- 그러면 OwnerController, OwnerRepository 모두 Bean이어야 할 것입니다.

어떻게 Spring IoC 컨테이너에 빈을 등록할까?

빈을 만드는 방법은 다양하지만 기본적으로 크게 두가지 방법이 있다.

① Component Scanning

② 빈 설정파일에 직접 빈을 등록

1. 자바 어노테이션(Java Annotation)을 사용하는 방법

JAVA에서 Annotation 이라는 기능이 있습니다. 사전상으로는 주석의 의미이지만 Java 에서는 주석 이상의 기능을 가지고 있습니다. Annotation은 자바 소스 코드에 추가하여 사용할 수 있는 메타데이터의 일종입니다. 소스코드에 추가하면 단순 주석의 기능을 하는 것이 아니라 특별한 기능을 사용할 수 있습니다.

Java에서는 @Override, @Deprecated 와 같은 기본적인 Annotation을 제공합니다. 아래의 상속 예제에서는 @Override 를 이용하여 상속임을 명시해줍니다.

**public class Parent { 
    public void doSomething() { 
        System.out.println("This is Parent"); 
    } 
} 

public class Son extends Parent{ 
    @Override 
    public void doSomething() { 
        System.out.println("This is Son"); 
    } 
}**

Spring에서는 여러 가지 Annotation을 사용하지만, Bean을 등록하기 위해서는 @Component Annotation을 사용합니다. @Component Annotation이 등록되어 있는 경우에는 Spring이 Annotation을 확인하고 자체적으로 Bean 으로 등록합니다.

실제 Spring 프로젝트에서 Controller를 등록할 때에는 아래와 같은 Annotation을 사용합니다. 아래의 예시에서 Controller 임을 Spring 에게 알려주기 위하여 @Controller Annotation을 사용했습니다.

**// HelloController.java
@Controller
public class HelloController {
    // Http Get method 의 /hello 경로로 요청이 들어올 때 처리할 Method를 아래와 같이 @GetMapping Annotation을 사용하여 Mapping을 사용할 수 있습니다.
    @GetMapping("hello")
    public String hello(Model model){
        model.addAttribute("data", "This is data!!");
        return "hello";
    }
}**

@Controller Annotation을 intelliJ에서 Ctrl 을 눌러서 이동해보면 아래와 같은 소스를 확인할 수 있습니다. @Controller Annotation에는 @Component Annotation이 있는 것을 확인할 수 있습니다. @Component Annotation 으로 인하여 Spring은 해당 Controller를 Bean 으로 등록합니다.

**`// Controller.java

// -- 일부 생략 --
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Component
public @interface Controller {

    /**
     * The value may indicate a suggestion for a logical component name,
     * to be turned into a Spring bean in case of an autodetected component.
     * @return the suggested component name, if any (or empty String otherwise)
     */
    @AliasFor(annotation = Component.class)
    String value() default "";

}`**

2. Bean Configuration File에 직접 Bean 등록하는 방법

@Configuration과 @Bean Annotation 을 이용하여 Bean을 등록할 수 있습니다. 아래의 예제와 같이 @Configuration을 이용하면 Spring Project 에서의 Configuration 역할을 하는 Class를 지정할 수 있습니다. 해당 File 하위에 Bean 으로 등록하고자 하는 Class에 @Bean Annotation을 사용해주면 간단하게 Bean을 등록할 수 있습니다.

**// Hello.java
@Configuration
public class HelloConfiguration {
    @Bean
    public HelloController sampleController() {
        return new SampleController;
    }
}**

참조 https://velog.io/@gillog/Spring-DIDependency-Injection https://chanhuiseok.github.io/posts/spring-4/ http://melonicedlatte.com/2021/07/11/232800.html

DI (의존성 주입)

Sun, 30 Jan 2022 08:41:53 GMT

DI(의존성 주입)이란?

DI란 외부에서 두 객체 간의 관계를 결정해주는 디자인 패턴으로, 인터페이스를 사이에 둬서 클래스 레벨에서는 의존관계가 고정되지 않도록 하고 런타임 시에 관계를 다이나믹하게 주입하여 유연성을 확보하고 결합도를 낮출 수 있게 해준다.
즉, 각 객체간의 의존성을 스프링 컨테이너(Spring Container)가 자동으로 연결해주는 것으로, 개발자가 빈(Bean) 설정파일에 의존관계가 필요한 정보를 추가해주면, 스프링 컨테이너가 자동적으로 연결해 준다
의존성이란 한 객체가 다른 객체를 사용할 때 의존성이 있다고 한다.
의존성 주입은 IoC(Inversion of Control: 제어의 역전)원칙 하에 객체 간의 결합을 약하게 해주고 유지보수가 좋은 코드를 만들어 준다. 또한 의존성 주입은 개발자들이 객체를 생성하는 번거로움과 다양한 케이스를 고려하는 겨우를 줄이고, 변수 사용과 개발에 더욱이 집중할 수있게 해준다.

DI(의존성 주입)를 사용하는 이유?

재사용성을 높여준다.
테스트에 용이하다.
코드를 단순화 시켜준다.
사용하는 이유를 파악하기 수월하고 코드가 읽기 쉬워지는 점이 있다.
종속성이 감소하기 때문에 변경에 민감하지 않다.
결합도(coupling)는 낮추면서 유연성과 확장성은 향상 시킬 수 있다.
객체간의 의존관계를 설정할 수 있다.

스프링에서 의존성을 주입하는 방법

생성자에서 주입
필드에서 주입
setter 에서 주입

ex)

Store 객체가 Pencil 객체를 사용하고 있는 경우에 우리는 Store객체가 Pencil 객체에 의존성이 있다고 표현한다.

public class Store { 
    private Pencil pencil; 
}

두 객체 간의 관계(의존성)를 맺어주는 것을 의존성 주입이라고 하며 생성자 주입, 필드 주입, 수정자 주입 등 다양한 주입 방법이 있다. Spring 4부터는 생성자 주입을 강력히 권장하고 있다.

ex) DI가 필요한 이유

public class Pencil {

}

public class Store { 
    private Pencil pencil; 

public Store() { 
    this.pencil = new Pencil(); 
    } 
}

1. 두 클래스가 강하게 결합되어 있음

2. 객체들 간의 관계가 아니라 클래스 간의 관계가 맺어지고 있음

: 위와 같은 문제점이 발생하는 근본적인 이유는 Store에서 불필요하게 어떤 제품을 판매할 지에 대한 관심이 분리되지 않았기 때문이다.

ex)의존성 주입(Dependency Injection)을 통한 문제 해결

문제를 해결하기 위해서는 우선 다형성이 필요하다. Pencil, Food 등 여러 가지 제품을 하나로 표현하기 위해서는 Product 라는 Interface가 필요하다. 그리고 Pencil에서 Product 인터페이스를 우선 구현해주도록 하자.

public interface Product {

}

public class Pencil implements Product {

 }

Store와 Pencil이 강하게 결합되어 있는 부분을 제거해주어야 한다. 이를 제거하기 위해서는 다음과 같이 외부에서 상품을 주입(Injection)받아야 한다

public class Store { 
    private Product product; 

public Store(Product product) { 
    this.product = product; 
    } 
}

여기서 Spring이 DI 컨테이너를 필요로 하는 이유를 알 수 있는데, 우선 Store에서 Product 객체를 주입하기 위해서는 애플리케이션 실행 시점에 필요한 객체(빈)를 생성해야 하며, 의존성이 있는 두 객체를 연결하기 위해 한 객체를 다른 객체로 주입시켜야 하기 때문이다.
예를 들어 다음과 같이 Pencil 이라는 객체를 만들고, 그 객체를 Store로 주입시켜주는 역할을 위해 DI 컨테이너가 필요하게 된 것이다.

public class BeanFactory { 
    public void store() { 
// Bean의 생성 
    Product pencil = new Pencil(); 

// 의존성 주입 
    Store store = new Store(pencil); 
    } 
}

이러한 개념은 제어의 역전(Inversion of Control, IoC)라고 불리기도 한다.
어떠한 객체를 사용할지에 대한 책임이 BeanFactory와 같은 클래스에게 넘어갔고, 자신은 수동적으로 주입받는 객체를 사용하기 때문이다. (실제 Spring에서는 BeanFactory를 확장한 Application Context를 사용한다.)

출처:https://mangkyu.tistory.com/150

#1.미니프로젝트: 두유노우?

Sun, 16 Jan 2022 10:28:37 GMT

두유노우?

두유노우 영단어? 매일 매일 배운 그날의 영단어와 내가 사용한 학습 매체를 유저들과 공유하고, 함께 학습하고 싶은 단어는 나의 단어장에 저장해 시간이 날 때 암기할 수 있는 웹 사이트입니다.

와이어 프레임

상세페이지

로그인 페이지
회원가입 페이지
메인 페이지 여러 유저들이 업로드한 페이지 목록(og이미지,단어)들을 확인할 수 있습니다.
업로드 페이지 유저들은 자신이 사용한 학습매체(책, 유튜브 영상 등)의 URL과 새롭게 배운 영어단어들을 작성하여 업로드할 수 있습니다.
상세단어장 페이지 유저들이 업로드한 영단어 목록과 URL 내용 및 썸네일을 확인할 수 있습니다.
내 단어장 페이지 상세단어장 페이지 내 '나도 학습하기' 버튼을 누른 영어단어들이 내 단어장 페이지에 차곡차곡 쌓입니다.

사용기술

Flask
MongoDB
JWT
Jinja 2
beautifulsoup4
JQuery
Bootstrap
Bulma
AWS EC2

영상

두유노우?

SQL_LEVEL 1

Mon, 20 Dec 2021 07:10:47 GMT

1.이름이 없는 동물의 아이디

https://programmers.co.kr/learn/courses/30/lessons/59039

SELECT ANIMAL_ID
FROM ANIMAL_INS
WHERE NAME IS NULL

2.이름이 있는 동물의 아이디

https://programmers.co.kr/learn/courses/30/lessons/59407

SELECT ANIMAL_ID
FROM ANIMAL_INS
WHERE NAME IS NOT NULL
ORDER BY ANIMAL_ID

3.NULL처리하기

https://programmers.co.kr/learn/courses/30/lessons/59410

SELECT ANIMAL_TYPE, IFNULL(NAME,"No name") as NAME, SEX_UPON_INTAKE
FROM ANIMAL_INS

Web 2 주차

Fri, 17 Dec 2021 12:33:52 GMT

[수업 목표]

jQuery로 간단한 HTML을 조작할 수 있다.
Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 알아보자. jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아오는것.

1.JQuery 시작하기

(1)JQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성 해둔 것. 라이브러리!

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다고 한다.
jQuery와 Javascript - 코드 비교

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다. (그렇게 때문에, 쓰기 전에 "임포트"를 해야한다는것!)

Javascript

document.getElementById("element").style.display = "none";

jQuery

$('#element').hide();

2.JQuery 다뤄보기

(1)jQuery 사용하기

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다.
- jQuery CDN
```
https://www.w3schools.com/jquery/jquery_get_started.asp
```
와 사이에 아래 코드를 넣으면 된다.
jQuery를 사용하는 방법

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 사용했지만, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다
자주쓰는 jQuery

input 박스의 값을 가져와보기


 
     아티클 URL

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

div 보이기 / 숨기기


 
     아티클 URL
     
 
 
     간단 코멘트

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다) $('#post-box').show();

3. css의 값 가져와보기 (display 속성 값)
```javascript
$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

태그 내 텍스트 입력하기 1) input box의 경우

$('#post-url').val('여기에 텍스트를 입력하면!');

2)버튼의 텍스트 바꾸기

// 가리키고 싶은 버튼에 id 값을 준다음

$('#btn-posting-box').text('포스팅 박스 닫기');

5. 태그 내 html 입력하기
` ~ ` 내에,동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)

```javascript
// 사이에 html을 넣고 싶은 태그에 id값을 준 다음

    

//버튼넣기    
 let temp_html = '';
 $('#cards-box').append(temp_html);

//카드넣기
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                    
                `;
$('#cards-box').append(temp_html);

3.JQuery 적용하기

(1)'나홀로메모장'에 포스팅박스 열기/닫기 기능을 함께 붙여보기

포스팅 박스 열기 버튼에 function을 달기

// onclick 속성(attribute)을 추가합니다.



- 클릭 해서 포스팅 박스를 여닫게 하기
    1) 포스팅 박스에 id 값을 주기

    ```jsx
    
        
            
                아티클 URL
                
            
            
                간단 코멘트
                
            
            
        
    
    ```

    2)포스팅 박스 제어하기  
```jsx
   function openclose() {
    // id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        // post-box를 가리고
        $('#post-box').hide();
    } else {
        // 아니면 post-box를 펴라
        $('#post-box').show();
      }
    }

3) posting-box를 시작부터 감춰두기 (css의 display:none 속성!)

inline-style (인라인 스타일) 여기저기 쓰면 복잡하겠지만, 이렇게 쓰면 직관적으로 "아 처음부터 안보이는 태그구나!"를 알 수 있다. (물론, class주고, css에서 display:none 속성을 주는 것도 방법!)


    
        
            아티클 URL

(4) '포스팅박스 열기' 버튼의 글씨 바꿔주기

포스팅박스 열기 버튼에 id 값 주기
```
      
```

버튼 텍스트를 바꿔주기

      function openclose() {
          // id 값 post-box의 display 값이 block 이면
          if ($('#post-box').css('display') == 'block') {
              // post-box를 가리고
              $('#post-box').hide();
                      // 가렸으니까 이제 열기로 바꿔두기
              $('#btn-posting-box').text('포스팅 박스 열기');
          } else {
              // 아니면 post-box를 펴라
              $('#post-box').show();
                      // 폈으니까 이제 닫기로 바꿔두기
              $('#btn-posting-box').text('포스팅 박스 닫기');
          }
      }

(5)완성코드

4.Quiz_JQuery 연습하기

Q.문제 Q.완성코드

5. 서버-클라이언트 통신 이해하기

(1) 서버→클라이언트: "JSON"을 이해하기

크롬 익스텐션 JSONView 설치하기
- Jsonview

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 아주 유사한 형태.

예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다.

(2) 클라이언트→서버: GET 요청 이해하기

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
```
                      예) 영화 목록 조회
```
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
```
                    예) 회원가입, 회원탈퇴, 비밀번호 수정
```

GET
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 크게 두 부분으로 나뉜다. 바로 "?"가 나눠지는 지점인데,
```
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 이다.    
```
- 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보: code=161967

GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다 ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
```
           q=아이폰                        (검색어)
           sourceid=chrome        (브라우저 정보)
           ie=UTF-8                      (인코딩 정보)
```
그럼 code라는 이름으로 영화번호를 주자!는 것은
```
  누가 정하는 것일까요?  
  → 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 **약속**입니다.
```
프론트엔드: *"code라는 이름으로 영화번호를 주면 될까요?"*
백엔드: *"네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"*

6. Ajax 시작하기

(1) Ajax 시작하기

크롬 개발자 도구에 다음과 같이 써보세요

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

Ajax 기본 골격

  $.ajax({
     type: "GET",
     url: "여기에URL을입력",
     data: {},
     success: function(response){
        console.log(response)
       }
    })

Ajax 코드 해설

 $.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
          data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
          success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
            console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
          }
        })

$ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

 >GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
        http://naver.com?param=value¶m2=value2 

  > POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
        data: { param: 'value', param2: 'value2' },

 - success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

   success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
         console.log(response) 
        }

WEB_1주차

Tue, 14 Dec 2021 10:54:31 GMT

[수업목표]

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
Javascript 기초 문법을 익힌다.

1. 서버/클라이언트/웹의 동작 개념

(1)웹의 동작 개념 (HTML을 받는 경우)

: 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서","그려 주는" 것이다. 즉, 브라우저가 하는 일은 1) 요청을 보낸다. (서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것)

    예) https://naver.com/
    →  "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것

2) 받은 HTML 파일을 그려준다.

(2)웹의 동작 개념 (데이터만 받는 경우)

:그럼 항상 이렇게 HTML만 내려주는걸까? 데이터만 내려 줄 때가 더 많다.
 사실 HTML도 줄글로 쓰면 이게 다 '데이터'.

예) 공연 티켓을 예매하고 있는 상황을 상상해봅시다!
좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 난감하겠죠ㅠ?

이럴 때! 데이터만 받아서 받아 끼우게 된답니다.

:데이터만 내려올 경우는, 이런 생김새를 JSON 형식이라고 한다.

2.HTML, CSS 기본 내용

1.HTML

(1)HTML과 CSS의 개념

HTML은 뼈대, CSS는 꾸미기! : HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각 하자. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었으니, HTML 코드 내에 CSS 파일을 불러와서 적용한다.
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역

(2)HTML 기초

HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 (페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것 )

body 안에 들어가는 대표적인 요소들





  
  
  스파르타코딩클럽 | HTML 기초



  
  나는 구역을 나누죠
  나는 문단이에요
  
       bullet point!1 
       bullet point!2 
  

  
  h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.
  h2는 소제목입니다.
  h3~h6도 각자의 역할이 있죠. 비중은 작지만..
  
  span 태그입니다: 특정 글자를 꾸밀 때 써요
  
  a 태그입니다:  하이퍼링크 
  
  img 태그입니다: 
  
  input 태그입니다: 
  
  button 태그입니다: 
  
  textarea 태그입니다: 나는 무엇일까요?

Pycharm에서 자동정렬 단축키 - Windows: Ctrl + Alt + L - macOS: option + command + L

(3)HTML 부모-자식 구조 살펴보기

html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다

빨간색 div 안에, 초록색/파란색 div가 들어있다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동! 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리! 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐다!

Q1.간단한 로그인 페이지 만들기




    
    로그인페이지
    
    



    
        
          로그인 페이지
          아이디, 패스워드를 입력해주세요
        

          ID: 
          PW:

2.CSS

CSS는 어떻게 사용? : ~ 안에 로 공간을 만들어 작성한다.

예) mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억!
자주 쓰이는 CSS

배경관련 background-color background-image background-size background-position 사이즈 width height 폰트 font-size font-weight font-famliy color border-radius 간격 margin padding
(margin은 바깥 여백, padding은 내 안쪽 여백)
CSS 파일 분리

3.bootstrap

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)
bootstrap - 시작 템플릿










스파르타코딩클럽 | 부트스트랩 연습하기

이걸로 시작해보죠!

``` - 부트스트랩 컴포넌트 4.0 [부트스트랩 컴포넌트 4.0](https://getbootstrap.com/docs/4.0/components/alerts/)

Q1.나홀로 메모장(포스팅 박스) 만들기

3.Javascript

(1)자바스크립트 - HTML 연결

~ 안에 로 공간을 만들어 작성한다. 내에 자바스크립트를 작성하는 것

버튼에 함수를 연결하기. 버튼을 누르면 함수가 불린다.

1주차 과제

부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성하기





    
    
    

    
    

    
    
    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기
    
    





    
    
        향초를 팝니다 가격: 5,000원/개
        이 향초는 사실 특별한 힘을 가지고 있어요. 항초를 켜고 기도를 하면 자기전 뭐든지 이뤄지게 된답니다. 하나 사가세요!
    

    
        
            
                주문자 이름
            
            
        
        
            
                 수량 
            
            
        
        
            
                주소
            
            
        
        
            
                전화번호