코딩하는 동그리

[SPRING] 스프링 프레임워크와 스프링 부트 차이점

원코딩 — Wed, 26 Oct 2022 07:22:01 +0900

스프링(프레임워크)와 스프링 부트의 차이점은 무엇일까?

스프링 프레임워크

스프링을 통상적으로 스프링 프레임워크라 한다. 스프링 프레임워크는 자바 생태계에서 가장 대중적으로 사용되는 개발 프로그램이다. 의존성 주입(DI)과 제어 역전(IOC) 등의 특징으로 결합도를 낮추는 방식으로 어플리케이션을 개발할 수 있다. 이러한 환경은 단위 테스트가 용이하기 때문에 보다 퀄리티 높은 개발이 가능하다.

다만,

최소한의 기능으로 Spring MVC를 사용하여 기본 프로젝트를 셋팅하는데 개발자에게 너무 많은 시간이 걸렸고 이러한 이슈를 해결한게 스프링 부트! 이다.

스프링 부트

스프링부트는 자동설정 기능을 이용하여 개발자에게 필요한 모든 내부 디펜던시를 관리해준다.

[1차] 문제2) 해밍 거리 구하기 - JAVA

원코딩 — Mon, 17 Oct 2022 11:56:47 +0900

[1차] 문제2) 해밍 거리 구하기 - JAVA - COS PRO 1급 기출문제 - Java (goorm.io)

□ 문제설명

해밍 거리(Hamming distance)란 같은 길이를 가진 두 개의 문자열에서 같은 위치에 있지만 서로 다른 문자의 개수를 뜻합니다. 예를 들어 두 2진수 문자열이 "10010"과 "110"이라면, 먼저 두 문자열의 자릿수를 맞추기 위해 "110"의 앞에 0 두개를 채워 "00110"으로 만들어 줍니다. 두 2진수 문자열은 첫 번째와 세 번째 문자가 서로 다르므로 해밍 거리는 2입니다.

`1`0`0`1 0
`0`0`1`1 0

두 2진수 문자열 binaryA, binaryB의 해밍 거리를 구하려 합니다. 이를 위해 다음과 같이 간단히 프로그램 구조를 작성했습니다

1단계. 길이가 더 긴 2진수 문자열의 길이를 구합니다.
2단계. 첫 번째 2진수 문자열의 길이가 더 짧다면 문자열의 앞에 0을 채워넣어 길이를 맞춰줍니다.
3단계. 두 번째 2진수 문자열의 길이가 더 짧다면 문자열의 앞에 0을 채워넣어 길이를 맞춰줍니다.
4단계. 길이가 같은 두 2진수 문자열의 해밍 거리를 구합니다.

두 2진수 문자열 binaryA와 binaryB가 매개변수로 주어질 때, 두 2진수의 해밍 거리를 return 하도록 solution 메소드를 작성했습니다. 이때, 위 구조를 참고하여 중복되는 부분은 func_a라는 메소드로 작성했습니다. 코드가 올바르게 동작할 수 있도록 빈칸을 알맞게 채워 전체 코드를 완성해주세요.

□ 매개변수 설명

두 2진수 문자열 binaryA와 binaryB가 solution 함수의 매개변수로 주어집니다.

binaryA의 길이는 1 이상 10 이하입니다.
binaryA는 0 또는 1로만 이루어진 문자열이며, 0으로 시작하지 않습니다.
binaryB의 길이는 1 이상 10 이하입니다.
binaryB는 0 또는 1로만 이루어진 문자열이며, 0으로 시작하지 않습니다.

□ return 값 설명

두 2진수 문자열의 해밍 거리를 return 해주세요.

□ 예시

binaryA	binaryB	return
"10010"	"110"	2

□ 예시설명

두 2진수의 자릿수는 각각 5와 3입니다. 자릿수를 맞추기 위해 "110" 앞에 0 두 개를 채워주면 "00110"이 됩니다. 이제 두 2진수 문자열의 해밍 거리를 구하면 다음과 같습니다.

`1`0`0`1 0
`0`0`1`1 0

위와 같이 첫 번째와 세 번째 문자가 서로 다르므로, 해밍 거리는 2가 됩니다.

문제)

class Solution {
    public String func_a(String str, int len){
        String padZero = "";
        int padSize = @@@;
        for(int i = 0; i < padSize; i++)
            padZero += "0";
        return padZero + str;
    }
    
    public int solution(String binaryA, String binaryB) {
        int maxLength = Math.max(binaryA.length(), binaryB.length());
        binaryA = func_a(binaryA, maxLength);
        binaryB = func_a(binaryB, maxLength);
        
        int hammingDistance = 0;
        for(int i = 0; i < maxLength; i++)
            if(@@@)
                hammingDistance += 1;
        return hammingDistance;
    }

    // The following is main method to output testcase.
    public static void main(String[] args) {
        Solution sol = new Solution();
        String binaryA = "10010";
        String binaryB = "110";
        int ret = sol.solution(binaryA, binaryB);
        
        // Press Run button to receive output. 
        System.out.println("Solution: return value of the method is " + ret + " .");
    }
}

정답)

// 다음과 같이 import를 사용할 수 있습니다.
import java.util.*;

class Main {
    public String func_a(String str, int len){
        String padZero = "";
        int padSize = len - str.length();
        for(int i = 0; i < padSize; i++)
            padZero += "0";
        return padZero + str;
    }
    
    public int solution(String binaryA, String binaryB) {
        int maxLength = Math.max(binaryA.length(), binaryB.length());
        if(maxLength > binaryA.length())
            binaryA = func_a(binaryA, maxLength);
        if(maxLength > binaryB.length())
            binaryB = func_a(binaryB, maxLength);
        
        int hammingDistance = 0;
        for(int i = 0; i < maxLength; i++)
            if(binaryA.charAt(i) != binaryB.charAt(i))
                hammingDistance += 1;
        return hammingDistance;
    }
    
    // 아래는 테스트케이스 출력을 해보기 위한 main 메소드입니다.
    public static void main(String[] args) {
        Main sol = new Main();
        String binaryA = "10010";
        String binaryB = "110";
        int ret = sol.solution(binaryA, binaryB);
        
        // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다.
        System.out.println("solution 메소드의 반환 값은 " + ret + " 입니다.");
    }
}

해설)

첫번째 @@@ 은 maxLength 에서 binary의 길이만큼 빼준다.

두번째 @@@은 binaryA 와 binaryB의 문자열에서 charAt 메서드를 이용해 한글자씩 비교한다.

[COS PRO 1급 기출문제 - Java] 1-1 음식전문점 운영

원코딩 — Sun, 16 Oct 2022 23:07:53 +0900

[1차] 문제1) 음식전문점 운영 - JAVA - COS PRO 1급 기출문제 - Java (goorm.io)

goorm

구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.

goorm.co

※ 프로그램 빈 칸 채우기 문제

□ 문제설명

배달음식 전문점 운영을 위해 다음과 같이 DeliveryStore 인터페이스와 PizzaStore, Food 클래스를 작성했습니다.

* DeliveryStore :
* DeliveryStore는 배달 음식점의 인터페이스입니다.
* 배달 음식점은 set_order_list와 get_total_price 메소드를 구현해야 합니다.
* set_order_list 메소드는 주문 메뉴의 리스트를 매개변수로 받아 저장합니다.

* get_total_price 메소드는 주문받은 음식 가격의 총합을 return 합니다.

* Food :
* Food는 음식을 나타내는 클래스입니다.
* 음식은 이름(name)과 가격(price)으로 구성되어있습니다.

* PizzaStore :
* PizzaStore는 피자 배달 전문점을 나타내는 클래스이며 DeliveryStore 인터페이스를 구현합니다.
* menu_list는 피자 배달 전문점에서 주문 할 수 있는 음식의 리스트를 저장합니다.
* order_list는 주문 받은 음식들의 이름을 저장합니다.
* set_order_list 메소드는 주문 메뉴를 받아 order_list에 저장합니다.

* get_total_price 메소드는 order_list에 들어있는 음식 가격의 총합을 return 합니다.

주문 메뉴가 들어있는 리스트 order_list가 매개변수로 주어질 때, 주문한 메뉴의 전체 가격을 return 하도록 solution 메소드를 작성하려고 합니다. 위의 클래스 구조를 참고하여 주어진 코드의 빈칸을 적절히 채워 전체 코드를 완성해주세요.

□ 매개변수 설명

주문 메뉴가 들어있는 리스트 order_list가 solution 메소드의 매개변수로 주어집니다.

order_list의 길이는 1 이상 5이하입니댜.
order_list에는 주문하려는 메뉴의 이름들이 문자열 형태로 들어있습니다.
order_list에는 같은 메뉴의 이름이 중복해서 들어있지 않습니다.
메뉴의 이름과 가격은 PizzaStore의 생성자에서 초기화해줍니다.

□ return 값 설명

주문한 메뉴의 전체 가격을 return 해주세요.

□ 예시

order_list	return
["Cheese", "Pineapple", "Meatball"]	51600

해당 문제는 주어진 빈칸을 채우면 된다.

문제)

// 다음과 같이 import를 사용할 수 있습니다.
import java.util.*;

class Main {
    interface DeliveryStore{
        public void setOrderList(String[] orderList);
        public int getTotalPrice();
    }
    
    class Food{
        public String name;
        public int price;
        public Food(String name, int price){
            this.name = name;
            this.price = price;
        }
    }


    class PizzaStore _________________________ {
        private ArrayList<Food> menuList;
        private ArrayList<String> orderList;
        
        public PizzaStore(){
            menuList = new ArrayList<Food>();
            String[] menuNames = {"Cheese", "Potato", "Shrimp", "Pineapple", "Meatball"};
            int[] menuPrices = {11100, 12600, 13300, 21000, 19500};
            for(int i = 0; i < 5; i++)
                menuList.add(new Food(menuNames[i], menuPrices[i]));
            
            orderList = new ArrayList<String>();
        }
        
        public ___________________ {
            for(int i = 0; i < orderList.length; i++)
                this.orderList.add(orderList[i]);
        }
        
        public ___________________  {
            int totalPrice = 0;
            Iterator<String> iter = orderList.iterator();
            while (iter.hasNext()) {
                String order = iter.next();
                for(int i = 0; i < menuList.size(); i++)
                    if(order.equals(menuList.get(i).name))
                        totalPrice += menuList.get(i).price;
            }
            return totalPrice;
        }
    }
    
    public int solution(String[] orderList) {
        DeliveryStore deliveryStore = new PizzaStore();
        
        deliveryStore.setOrderList(orderList);
        int totalPrice = deliveryStore.getTotalPrice();
        
        return totalPrice;
    }

정답)

// 다음과 같이 import를 사용할 수 있습니다.
import java.util.*;

class Main {
    interface DeliveryStore{
        public void setOrderList(String[] orderList);
        public int getTotalPrice();
    }
    
    class Food{
        public String name;
        public int price;
        public Food(String name, int price){
            this.name = name;
            this.price = price;
        }
    }
    
    
     class PizzaStore implements DeliveryStore {
        private ArrayList<Food> menuList;
        private ArrayList<String> orderList;
        
        public PizzaStore(){
            menuList = new ArrayList<Food>();
            String[] menuNames = {"Cheese", "Potato", "Shrimp", "Pineapple", "Meatball"};
            int[] menuPrices = {11100, 12600, 13300, 21000, 19500};
            for(int i = 0; i < 5; i++)
                menuList.add(new Food(menuNames[i], menuPrices[i]));
            
            orderList = new ArrayList<String>();
        }
        
        public void setOrderList(String[] orderList){
            for(int i = 0; i < orderList.length; i++)
                this.orderList.add(orderList[i]);
        }
        
        public int getTotalPrice(){
            int totalPrice = 0;
            Iterator<String> iter = orderList.iterator();
            while (iter.hasNext()) {
                String order = iter.next();
                for(int i = 0; i < menuList.size(); i++)
                    if(order.equals(menuList.get(i).name))
                        totalPrice += menuList.get(i).price;
            }
            return totalPrice;
        }
    }
    
    public int solution(String[] orderList) {
        DeliveryStore deliveryStore = new PizzaStore();
        
        deliveryStore.setOrderList(orderList);
        int totalPrice = deliveryStore.getTotalPrice();
        
        return totalPrice;
    }
 
 
 
     // 아래는 테스트케이스 출력을 해보기 위한 main 메소드입니다.
    public static void main(String[] args) {
        Main sol = new Main();
        String[] orderList = {"Cheese", "Pineapple", "Meatball"};
        int ret = sol.solution(orderList);
        
        // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다.
        System.out.println("solution 메소드의 반환 값은 " + ret + " 입니다.");
    }
}

해설)

문제를 이해하지 않아도 자바의 문법을 알고있으면 풀 수 있는 문제같다.

implements 로 인터페이스를 구현하고

구현한 메서드의 return 값에 맞게 반환타입을 지정해주면 된다.

[코딩테스트] 백준 7번 오븐 시계 (백준 2525번) - Java

원코딩 — Wed, 12 Oct 2022 16:38:56 +0900

2525번: 오븐 시계 (acmicpc.net)

2525번: 오븐 시계

첫째 줄에 종료되는 시각의 시와 분을 공백을 사이에 두고 출력한다. (단, 시는 0부터 23까지의 정수, 분은 0부터 59까지의 정수이다. 디지털 시계는 23시 59분에서 1분이 지나면 0시 0분이 된다.)

www.acmicpc.net

이번 문제의 입/출력을 확인해보면

현재 시간에서 입력한 시간을 더해주면 되는 문제라는 것을 알 수 있다.

핵심은 60분 마다 계산되는 부분이다.

변수는 3개로

int A 현재 시각

int B 현재 분

int C 요리하는 데 필요한 시간

이다.

오늘도 도움을 주신 블로그 > [백준] 2525번 : 오븐 시계 - JAVA [자바] (tistory.com)

[코딩테스트] 백준 6번 알람 시계 (백준 2884번) - Java

원코딩 — Wed, 12 Oct 2022 15:13:12 +0900

2884번: 알람 시계 (acmicpc.net)

2884번: 알람 시계

상근이는 매일 아침 알람을 듣고 일어난다. 알람을 듣고 바로 일어나면 다행이겠지만, 항상 조금만 더 자려는 마음 때문에 매일 학교를 지각하고 있다. 상근이는 모든 방법을 동원해보았지만,

www.acmicpc.net

가장 어려웠던 부분은 24시간을 계산해야되는 점이었다.

(23시에서 0시로 넘어가야 하는 부분)

너무 잘 설명해주신 분 덕분에 고비를 잘 넘겼다. (감사합니다) [백준] 2884번 : 알람 시계 - JAVA [자바] (tistory.com)

▶ 풀이

핵심은 45분 보다 적은지 큰지 여부를 확인하는 것이다.

45분 보다 적다면 시간(h)을 뺀 후 나머지를 분(m)에서 빼고

45분 보다 크다면 분(m)에서만 빼도 된다.

1. Scanner

import java.util.*;
public class Main {
	public static void main(String[] args) {
		Scanner scan=new Scanner(System.in);
		
		int H=scan.nextInt();
		int M=scan.nextInt();
		
		scan.close();	
		
		if(M<45)
		{
			H=H-1;
			M= 60 - (45 - M); // 45분을 뺀 나머지 분은 60분에서 뺀다. 
			if(H<0) { // 0시에서 -1을 해버리면 '-1시'가 되기 때문에 23시로 변경.
				H=23; 
			}
			System.out.println(H+" "+M);
			
		}
		else
		{
			M=M-45;
			System.out.println(H+" "+M);
		}
	}
}

2. BufferedReader

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;
public class Main {
	public static void main(String[] args) throws IOException {
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		
		String[] str=br.readLine().split(" ");
		int H=Integer.parseInt(str[0]);
		int M=Integer.parseInt(str[1]);
		
		if(M<45)
		{
			H=H-1;
			M= 60 - (45 - M); // 45분을 뺀 나머지 분은 60분에서 뺀다. 
			if(H<0) { // 0시에서 -1을 해버리면 '-1시'가 되기 때문에 23시로 변경.
				H=23; 
			}
			System.out.println(H+" "+M);
			
		}
		else
		{
			M=M-45;
			System.out.println(H+" "+M);
		}
	}
}

[React] 리액트 정의와 Hooks

원코딩 — Tue, 11 Oct 2022 12:47:13 +0900

React의 정의

리액트 공식 홈페이지에서 내린 React 정의

출처 https://ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

React , 쉽게 정리해본다면

리액트는 상태 변화 프로그램(데이터 관리 프로그램) 이다. 즉, 반복이 많거나 변경이 빈번한 환경에서 활용된다.

MVC 구조에서 view의 역할(화면 출력하는 역할)을 수행한다.

React 특징

* 가상 돔을 사용하여 Application의 퍼포먼스를 최적화했다.

* 싱글 페이지 Application에서 UI를 만드는 라이브러리이다보니 페이지 전환 기능 등을 제공하지 않는다. 이때는 react-router와 같은 추가적인 라이브러리를 사용해야 한다.

* 단방향 데이터 바인딩

자세한 설명이 궁금하다면 > https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

React와 Vue의 차이점

* React는 자바스크립트 라이브러리이고 Vue는 프레임워크이다. 즉, 라이브러리인 리액트는 사용자가 필요에 따라 썻다 뺐다가 비교적 자유롭고 프레임워크인 Vue는 프레임 워크가 지원하는 문법에 따라서 작성해야 한다. 리액트는 사용하는 개발자에 따라 소스가 바뀔 수 있지만 Vue는 뷰에서 지정해준 문법 방식을 이용해야 한다는 의미이다.

* 속도가 빠른건 Vue이다.

* React는 오직 자바스크립트로만 이루어진다.

* 문법 장벽이 낮은건 Vue이다.

자세한 설명이 궁금하다면 > https://velog.io/@leehaeun0/React-vs-Vue-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90

(고수들의 설명) > https://erwinousy.medium.com/%EB%82%9C-react%EC%99%80-vue%EC%97%90%EC%84%9C-%EC%99%84%EC%A0%84%ED%9E%88-%EA%B0%99%EC%9D%80-%EC%95%B1%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EB%8B%A4-%EC%9D%B4%EA%B2%83%EC%9D%80-%EA%B7%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%B4%EB%8B%A4-5cffcbfe287f

Hooks

리액트의 Hooks 는 16.8버전에서 추가된 기능이다.

리액트의 컴포넌트는 함수형과 클래스형으로 구분되는데 함수형 컴포넌트는 한 번 호출되면 데이터가 메모리에서 사라지기 때문에 재사용이 불가능했다. 따라서 클래스형 컴포넌트를 굳이 굳이 사용해야 하는 경우가 많았다고 한다.

하지만 Hooks의 등장으로 함수형 컴포넌트에서도 생명주기 기능을 사용할 수 있게 되면서 컴포넌트간의 로직을 재사용할 수 있게 되었다.

자세한 설명이 궁금하다면 > https://velog.io/@niboo/React-Hooks-%EB%9E%80

지금부터는

실습에 필요한 내용을 정리해보자.

1. 주석처리

{/*여기는 주석 처리돼요*/}

2. XML 문법을 사용함

jsx (JavaScript + XML) 문법을 사용한다.

3. 루트 태그는 반드시 1개만 사용

가장 부모가 되는 태그는 중복될 수 없다.

[React] 리액트/웹스톰 라이브러리 다운로드 하는 방법 (초기 세팅)

원코딩 — Tue, 11 Oct 2022 01:15:36 +0900

기존에 사용했던 자바스크립트 라이브러리는
리액트에 비하면 아무것도 아니었다.

개인 프로젝트를 시작하면서 리액트를 다루게 됐다.

리액트는 매우 복잡하기 때문에 편집기 사용이 필수이다.

나는 웹스톰 편집기를 이용해서 리액트를 공부중인데 리액트는 마치 하나의 프로젝트 만드는 느낌이다.

jQuery, Vue.js 등은 html이나 jsp 파일에 조금? 추가 하는게 전부였는데 리액트는.. 밑의 사진으로 말을 대신하겠다.

리액트로 프로젝트를 생성하면 자동으로 라이브러리가 다운로드 된다.

but, 추가적으로 라이브러리가 필요한 상황에 대해서 다뤄보도록 하겠다.

라이브러리 다운로드

프로젝트 > package.json 클릭 > 밑의 사진에 표기된 공간에 라이브러리 다운로드

package.json 에서 라이브러리 입력

라이브러리의 버전 선택

다운로드 받고자 하는 라이브러리를 입력하면 위의 사진처럼 자동으로 최신 버전이 확인 된다. (편집기 굿굿!)

특별한 경우가 아니라면 최신 버전으로 다운로드 받아주는게 좋다.

내가 다운로드 받으려는 라이브러리는 router로 include를 위함이다.

라이브러리를 입력 후 저장을 하면 밑에 업데이트 하겠냐는 창이 뜬다. (위의 사진 참고)

Run 'npm install' 버튼을 클릭하자.

콘솔창이 열심히 빙글빙글 돌아가다가

Process finished with exit code 0

마지막 줄에 이렇게 출력되면 오류없이 라이브러리가 다운로드 받아진거다.

[코딩테스트] 백준 자바 5번 사분면 고르기 (백준 14681번)

원코딩 — Sun, 9 Oct 2022 18:01:45 +0900

1. 스캐너

import java.util.*;

public class Main{
	public static void main(String[] args) {
		Scanner scan=new Scanner(System.in);
		int x=scan.nextInt();
		int y=scan.nextInt();
		
		if(x>0)
		{
			if(y>0)System.out.println("1");
			else System.out.println("4");
		
		}
		else {
			if(y>0)System.out.println("2");
			else System.out.println("3");
		}
	}
}

2. BufferedReader

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class Main{
	public static void main(String[] args) throws IOException{
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		int x=Integer.parseInt(br.readLine());
		int y=Integer.parseInt(br.readLine());
		if(x>0)
		{
			if(y>0)System.out.println("1");
			else System.out.println("4");
		
		}
		else {
			if(y>0)System.out.println("2");
			else System.out.println("3");
		}
	}
}

[Vue] 뷰 기초1 ( 뷰를 이용한 데이터 출력 )

원코딩 — Tue, 4 Oct 2022 23:22:22 +0900

오늘은 간단히 Vue.js를 이용해서

웹에 데이터를 출력해보겠다.

오늘의 미션
"Hello 동그리!!" , "Vue JS~_~"
출력하기

그전에

Vue.js 에 대해 간단히 정리하고 넘어가자.

Vue.js의 정의

* 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크

* 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스

* UI를 빠르게 개발하기 위해서 만든 자바스크립트 프레임워크

출처 : https://ko.wikipedia.org/wiki/Vue.js

Vue.js의 장점

* 가상 DOM 을 지원하여 빠른 UI렌더링이 가능

* 다른 자바스크립트 프레임워크와 달리 유연하고 가벼움

* React와 Angular의 장점을 가진 Vue.js

Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
양방향 데이터 바인딩이란? 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
단방향 데이터 바인딩이란? 컴포넌트 단방향 통신을 의미하는데 컴포넌트 간 데이터를 전달할 때 항상 상위컴포넌트에서 하위 컴포넌트 방향으로 전달하게끔 구조화 되어 있는 것을 의미한다.

출처 : https://mkil.tistory.com/435

> 가상 DOM 에 대한 부분이 궁금하다면? https://velog.io/@surim014/Vue.js-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-1-%EC%A0%95%EC%9D%98-%ED%8A%B9%EC%A7%95%EC%9E%A5%EB%8B%A8%EC%A0%90

실습해보기

먼저, 뷰를 사용하기 위해선, 자바스크립트에서 링크를 연결한 것과 같이

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js ">
<script src="https://unpkg.com/axios/dist/axios.min.js ">

위와 같이 링크를 연결해줘야 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <div>{{message}}</div>
  </div>
  <div id="app2">
    <div>{{message2}}</div>
  </div>
  <script>
    new Vue({
    	el:'#app',
    	data:{
    		message:'Hello 동그리!!'
    	}
    })
    new Vue({
    	el:'#app2',
    	data:{
    		message2:'Vue JS~_~'
    	}
    })
  </script>
</body>
</html>

정확한 이유는 모르겠지만, jQuery는 상단 <head>태그에서 사용했는데

Vue.js는 <body>태그 중에서도 하단에 작성한다.

new Vue로 인스턴스를 생성한다.

el은 인스턴스가 적용되는 범위이다. (인스턴스가 그려지는 화면의 시작점)

data는 뷰가 반영되는 속성이다.

뷰를 통해 데이터를 출력하기 위해서는 양쪽에 {{ }} 괄호를 넣어주면 된다.

( {{}} 모양이 콧수염을 닮았다고 해서 콧수염 표현식(Mustache Expression)이라고도 한다.)

위의 실습처럼 {{message}} , {{message2}} 같이 표기해주면 HTML DOM에 데이터가 렌더링 된다.

3. 출력

[코딩테스트] 백준 자바 4번 윤년 (백준 2753번)

원코딩 — Mon, 3 Oct 2022 16:02:30 +0900

2753번: 윤년 (acmicpc.net)

2753번: 윤년

연도가 주어졌을 때, 윤년이면 1, 아니면 0을 출력하는 프로그램을 작성하시오. 윤년은 연도가 4의 배수이면서, 100의 배수가 아닐 때 또는 400의 배수일 때이다. 예를 들어, 2012년은 4의 배수이면서

www.acmicpc.net

1. Scanner

import java.util.*;
public class Main{
	public static void main(String[] args) {
		Scanner scan=new Scanner(System.in);
		int a=scan.nextInt();
		scan.close();
		
		if(a%4==0)
		{
			if(a%400==0)
			{
				System.out.println("1");
			}
			else if(a%100==0)
			{
				System.out.println("0");
			}
			else {
				System.out.println("1");
			}
		}
		else
		{
			System.out.println("0");
		}

	}
}

1-2. Scanner + 삼항연산자

import java.util.*;
public class Main{
	public static void main(String[] args) {
		Scanner scan=new Scanner(System.in);
		int a=scan.nextInt();
		scan.close();
		
		System.out.println((a%4==0)?((a%400==0)?"1":(a%100==0)?"0":"1"):"0");
	}
}

2-1. BufferedReader

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;
public class Main{
	public static void main(String[] args) throws IOException{
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		int a=Integer.parseInt(br.readLine());
		
		if(a%4==0)
		{
			if(a%400==0)
			{
				System.out.println("1");
			}
			else if(a%100==0)
			{
				System.out.println("0");
			}
			else {
				System.out.println("1");
			}
		}
		else
		{
			System.out.println("0");
		}

	}
}

2-2. BufferedReader + 삼항연산자

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.*;
public class Main{
	public static void main(String[] args) throws IOException{
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		int a=Integer.parseInt(br.readLine());
		System.out.println((a%4==0)?((a%400==0)?"1":(a%100==0)?"0":"1"):"0");
	}
}