놀고있는 개발자

인프런 강좌 - 실습 UI 개발로 배워보는 순수JS 와 VueJs 개발

https://www.inflearn.com/course/%EC%88%9C%EC%88%98js-vuejs-%EA%B0%9C%EB%B0%9C-%EA%B0%95%EC%A2%8C/

강좌 교육과정

인프런 강좌 - 실습 UI 개발로 배워보는 순수JS 와 VueJs 개발

https://www.inflearn.com/course/%EC%88%9C%EC%88%98js-vuejs-%EA%B0%9C%EB%B0%9C-%EA%B0%95%EC%A2%8C/

강좌 교육과정

인프런 강좌 - 실습 UI 개발로 배워보는 순수JS 와 VueJs 개발

https://www.inflearn.com/course/%EC%88%9C%EC%88%98js-vuejs-%EA%B0%9C%EB%B0%9C-%EA%B0%95%EC%A2%8C/

강좌 교육과정

프로그래머스 자바 입문

1~5 챕터 완료

Vue.js 공식가이드

https://kr.vuejs.org/v2/guide/index.html

1. 시작하기

2. Vue 인스턴스

3. 템플릿 문법

VueJs 빠른시작 - Todo 만들기

https://blog.storyg.co/vue-js-posts/todos-tutorial

Todo 리스트 만들기

1. 클래스

자바는 객체를 만들기 위해 반드시 클래스를 먼저 만들어야 한다. 클래스는 객체를 만들기 위한 일종의 틀이다.

• 붕어빵이 객체라면, 붕어빵 틀은 클래스
• 자동차 클래스 생성

    public class Car{

    }

• Car.java란 파일을 만든다.
• 저장을 하면 이클립스는 컴파일하여 디스크에 Car라는 클래스를 생성한다.
• 자동차 클래스가 생성되었다고 해서 자동차가 만들어 진것은 아니다.

Car객체 생성하기 (자동차 만들기)

    public class CarExam{
        public static void main(String args[]){
            Car c1 = new Car();
            Car c2 = new Car();
        }
    }

• new 연산자는 new연산자 뒤에 나오는 생성자를 이용하여 메모리에 객체를 만들라는 명령.
• 메모리에 만들어진 객체를 인스턴스(instance)라고도 한다.
• 이렇게 만들어진 객체를 참조하는 변수가 c1 , c2 이다.
• 위의 코드가 실행되면 Car라는 객체가 2개가 만들어지고 각각의 객체를 참조하는 c1과 c2변수가 선언됩니다.

2. 참조타입

참조형 타입은 기본형 타입을 제외한 모든 타입입니다.  배열도 참조형이고, 클래스도 모두 참조 타입이다

• 참조형 변수
  • String str = new String(hello);
    • str 변수 앞에 기본형 타입이 아닌 String클래스가 적혀있다.
    • 이퀄(=)뒤에는 new 다음에 생성자라는 것이 있다.
    • new 라는 키워드는 클래스를 메모리에 올려준다. 이렇게 메모리에 올라간 클래스를 인스턴스라고 말한다.
• 메모리에 올라간 인스턴스를 가리키는 변수, 참조하는 변수, 레퍼런스 하는 변수가 str 이다. 참조한다. 레퍼런스 한다라는 것은 변수가 인스턴스를 가지고 있는게 아니라 말그대로 가리킨다는 의미이다.
• str이라는 변수에는 메모리의 위치 값이 저장되는 것이다. 메모리의 위치값이 저장된다고 하더라도, 어떤 메모리에 저장되는지 그 정보를 알 수 있는 방법은 없다. 그렇기 때문에 str변수는 String 인스턴스를 참조한다라고만 아시면 된다.
• 클래스들은 모두 참조형이다

3. String 클래스

문자열을 표현하는 자바에서 가장 많이 사용하는 클래스

자바 인스턴스 생성 방법

1. new연산자를 이용하지 않고 인스턴스를 만드는 경우

    String str1 = "hello";
    String str2 = "hello";

• hello라는 문자열이 메모리 중에서 상수가 저장되는 영역에 저장된다. 상수는 변하지 않는 값을 의미.
• String str2 = hello; 이 문장이 실행될 때에 hello 라는 문자열 상수는 이미 만들어져 있으므로 str1이 참조하는 인스턴스를 str2도 참조한다.

2.new연산자를 이용해서 인스턴스를 만드는 경우

    String str3 = new String("hello");
    String str4 = new String("hello");

• new연산자를 이용하여 인스턴스를 만들면 인스턴스는 무조건 새롭게 만들어진다.
• String str4 = new String(hello); 이 문장이 실행될때도 새롭게 만들게 되므로, str3 과 str4는 서로 다른 인스턴스를 참조한다.

    if(str1 == str2){  // 같은 인스턴스를 참조하므로 결과는 true 
        System.out.println("str1과 str2는 같은 레퍼런스입니다.");
    }

    if(str1 == str3){  // str1과 str3은 서로 다른 인스턴스를 참조하므로 결과는 false 
        System.out.println("str1과 str3는 같은 레퍼런스입니다.");
    }

    if(str3 == str4){  // str3과 str4는 서로 다른 인스턴스를 참조하므로 결과는 false 
        System.out.println("str3과 str4는 같은 레퍼런스입니다.");
    }

• 참조변수끼리 == 로 비교하면 서로 같은 것을 참조하는지 비교한다.
• String은 다른 클래스와 다르게 new를 사용하지 않고 사용할 수 있다. 메모리를 아끼려면 String은 new를 사용하지 않고 사용하는 것이 좋다.
• String은 불변 클래스이다. 불변이란 String이 인스턴스가 될때 가지고 있던 값을 나중에 수정할 수 없다.
• String은 문자열과 관련된 다양한 메소드를 가지고 있다. 메소드를 호출한다 하더라도 String은 내부의 값이 변하지 않는다.
• String이 가지고 있는 메소드중 String을 반환하는 메소드는 모두 새로운 String을 생성해서 반환한다.

    String str5 = "hello world";
    String str6 = str5.substring(3);

• substring은 문자열을 자른 결과를 반환하는 메소드이다. 해당 코드가 실행되어도 str5는 변하지 않는다.
• str6은 str5가 가지고 있는 문자열 중 3번째 위치부터 자른 결과 즉 새로운 String을 참조하게 된다.

4. 필드선언

자동차는 자동차 이름, 자동차 번호를 가지고 있고, 자동차는 달리고 멈추는 기능이 있다. 여기에서 가지고 있는 것을 속성이라고 한다. 자바에서는 이러한 속성을 필드(Field)라는 용어로 사용한다.

• 이름과 번호를 필드로 가지고 있는 Car클래스 선언

    public class Car{
        String name;    
        int number;
    }

• Car 클래스를 인스턴스화 하기

    Car c1 = new Car();
    Car c2 = new Car();
    //Car라는 인스턴스가 메모리에 2개 만들어 진다. 객체별로 name과 number라는 속성을 가진다.

• 속성 이용하기
  • 참조 변수 다음에 나오는 점(dot)은 참조변수가 참조하는 객체가 가지고 있는 것을 사용할 때 사용

    //c1.name은  c1이 참조하는 객체의 name 을 의미.

    c1.name = "소방차";  //c1이 참조하는 객체의 name을 소방차로 설정 
    c1.number = 1234;   // c1.number = 1234란 c1이 참조하는 객체의 number를 1234 로 설정 

    c2.name = "구급차"  //c2가 가리키는 객체의name을 구급차로 설정
    c2.number = 1004;  //c2가 가리키는 객체의 number를 1004로 설정


    System.out.println(c1.name);  //콘솔에 c1이 참조하는 객체의 name 을 출력합니다. 
    System.out.println(c1.number); //콘솔에 c1이 참조하는 객체의 number 를 출력합니다. 

    String name = c2.name;   //c2가 참조하는 객체의 name 을 String 타입 변수 name 도 참조하게 합니다.

5. 메소드

필드가 물체의 상태라면, 물체의 행동에 해당하는게 메소드다. car에 이름과 번호가 있기도 하지만, car는 앞으로 전진할수도 있고 후진하는 행동도 할 수 있다.

• 메소드는 입력값이 있고, 그 입력값을 받아서 무언가 한 다음 결과를 도출해 내는 수학의 함수와 비슷한 개념이다.
• 이때 입력값을 매개변수라고 하고,결과값을 리턴값이라고 합니다.
  • 인자( Argument ) 는 어떤 함수를 호출시에 전달되는 값을 의미한다.
  • 매개 변수( Parameter ) 는 그 전달된 인자를 받아들이는 변수를 의미한다.
• 메소드란 클래스가 가지고 있는 기능이다. 클래스 안에 선언됩니다.

6. 메소드 선언

다양한 형태의 메소드

public class MyClass{
    public void method(){
        System.out.println("method1이 실행됩니다.");
    }

    public void method2(int x){
        System.out.println(x + " 를 이용하는 method2입니다.");
    }

    public int method3(){
        System.out.println("method3이 실행됩니다.");

        return 10;
    }

    public void method4(int x, int y){
        System.out.println(x + "," + y + " 를 이용하는 method4입니다.");
    }

    public int method5(int y){
        System.out.println(y + " 를 이용하는 method5입니다.");
        return 5;
    }
}

7. 메소드 사용

• 메소드를 사용하기 위해서는 메소드가 정의된 클래스인 MyClass 가 생성되어야 한다
• 객체를 생성할 때는 new 연산자를 이용한다.
  
• 메소드 사용할때는 생성된 클래스를 참조하는 레퍼런스변수.메소드명() 으로 사용할 수 있다.

    public class MyClassExam{
        public static void main(String args[]){
            MyClass my1 = new MyClass(); //메소드가 정의된 클래스 생성 

            my1.method1();   //MyClass에서 정의해 놓은 메소드 method1() 를 호출한다.       

            my1.method2(10);

            int x = my1.method3();

            System.out.println("method3 이 리턴한 " + x + " 입니다.");

            my1.method4(10,100);

            int x2 = my1.method5(50);

            System.out.println("method5 가 리턴한 " + x2 + " 입니다.");

        }
    }

8. String class method

• 문자열 길이 구하기
  • str.length()는 str이 참조하는 문자열의 길이를 구해서 int 타입으로 리턴해주는 메소드 이다.

    System.out.println(str.length());  //str

• 문자열 붙히기 (concat)
  • str.concat(world) 메소드는 str 이 참조하는 문자열 hello 에다가 메소드의 인자로 들어온 문자열 world 를 붙혀서 String 타입으로 리턴하는 메소드다.
  • String Class는 불변 클래스로, 메소드가 수행되면, 새로운 문자열을 만든다. 그러므로, 원래 클래스는 변하지 않는다.

    String str = new String("hello");

    System.out.println(str.concat(" world"));  //출력결과는 hello world 
    System.out.println(str);  //출력결과는 hello 

• 문자열 자르기 (subString)
  • str.subString(1,3) 은 str이 참조하는 문자열을 인덱스 1번부터 3번까지 자른 결과이다.
  • str.subString(2) 은 str이 참조하는 문자열을 2번 인덱스부터 마지막까지 자른 결과를 의미한다.
  • 문자열의 인덱스는 0번 부터 시작한다.
    

    System.out.println(str.substring(1, 3)); //출력결과  el
    System.out.println(str.substring(2));   //출력결과 llo world

9. 변수 scope와 static

변수의 스코프

프로그램상에서 사용되는 변수들은 사용 가능한 범위를 가진다. 그 범위를 변수의 스코프라고 한다.

변수가 선언된 블럭이 그 변수의 사용범위이다.

    public class ValableScopeExam{

        int globalScope = 10;   //클래스 변수 

        public void scopeTest(int value){   
            int localScope = 10;
            System.out.println(globalScope);
            System.out.println(localScpe);
            System.out.println(value);
        }
    }

• 클래스의 속성으로 선언된 변수 globalScope 의 사용 범위는 클래스 전체 이다.
  
• 매개변수로 선언된 int value 는 블럭 바깥에 존재하기는 하지만, 메서드 선언부에 존재하므로 사용범위는 해당 메소드 블럭내이다.
• 메소드 블럭내에서 선언된 localScope 변수의 사용범위는 메소드 블럭내이다.

main메소드에서 사용하기

• 같은 클래스 안에 있는데 globalScope 변수를 사용 할 수 없다.
• main은 static한 메소드이다. static한 메서드에서는 static 하지 않은 필드를 사용 할 수 없다.

    public class VariableScopeExam {
        int globalScope = 10; 

        public void scopeTest(int value){
            int localScope = 20;            
            System.out.println(globalScope);
            System.out.println(localScope);
            System.out.println(value);
        }   
        public static void main(String[] args) {
            System.out.println(globalScope);  //오류
            System.out.println(localScope);   //오류
            System.out.println(value);        //오류  
        }   
    }

static

• 같은 클래스 내에 있음에도 해당 변수들을 사용할 수 없다.
  
• main 메소드는 static 이라는 키워드로 메소드가 정의되어 있다. 이런 메서드를 static 한 메소드 라고 한다.
• static한 필드(필드 앞에 static 키워드를 붙힘)나, static한 메소드는 Class가 인스턴스화 되지 않아도 사용할 수 있다.

    public class VariableScopeExam {
        int globalScope = 10; 
        static int staticVal = 7;

        public void scopeTest(int value){
            int localScope = 20;        
        }

        public static void main(String[] args) {
            System.out.println(staticVal);      //사용가능 
        }

    }

static한 변수는 공유된다.

• static하게 선언된 변수는 값을 저장할 수 있는 공간이 하나만 생성된다. 그러므로, 인스턴스가 여러개 생성되도 static한 변수는 하나다.

    ValableScopeExam v1 = new ValableScopeExam();
    ValableScopeExam v2 = new ValableScopeExam();
    v1.golbalScope = 20;
    v2.golbalScope = 30; 

    System.out.println(v1.golbalScope);  //20 이 출력된다. 
    System.out.println(v2.golbalScope);  //30이 출력된다. 

    v1.staticVal = 10;
    v2.staticVal = 20; 

    System.out.println(v1.statVal);  //20 이 출력된다. 
    System.out.println(v2.statVal);  //20 이 출력된다. 

• golbalScope같은 변수(필드)는 인스턴스가 생성될때 생성되기때문에 인스턴스 변수라고 한다.
• staticVal같은 static한 필드를 클래스 변수라고 한다.
• 클래스 변수는 레퍼런스.변수명 하고 사용하기 보다는 클래스명.변수명 으로 사용하는것이 더 바람직하다고 하다.
  • VariableScopeExam.staticVal

10. enum 열거형

자바는 열거타입을 이용하여 변수를 선언할 때 변수타입으로 사용할 수 있다.

• 열거형은 JDK5에서 추가되었다.

• JDK5 이전에는 상수를 열거형 대신 사용

  • 상수를 이용하는 방법

    public class EnumExam {
        public static final String MALE = "MALE";
        public static final String FEMALE = "FEMALE";

        public static void main(String[] args) {
            String gender1;

            gender1 = EnumExam.MALE;
            gender1 = EnumExam.FEMALE;                  
        }
    }

상수를 사용했때의 문제점

• String으로 선언된 gender1 에는 MALE,FEMALE 둘 중 한가지 값을 갖기 원하는데, gender1의 type이 String 이기 때문에 gender1 = 소년; 이렇게 수행 되어도 전혀 문제가 되지 않는다.

• 실행할때 원했던 값인 MALE,FEMALE 이 아닌 다른 값이 들어오게 되므로 문제를 발생시킬 수 있다.

해결 방법

• 이런 문제를 발생시키지 않게 하기 위해서 열거형을 사용하시면 됩니다.

• 열거형 정의 방법

    enum Gender{
        MALE, FEMALE;
    }

• 열거형 사용 방법

    Gender gender2;

    gender2 = Gender.MALE;
    gender2 = Gender.FEMALE;

    //Gender타입의 변수에는 MALE이나 FEMALE만 대입이 가능. 다른 값은 저장할 수가 없다.  

특정 값만 가져야 한다면 열거형을 사용하는 것이 좋다.

프로그래머스 자바 입문

https://programmers.co.kr/learn/courses/5/lessons/137

배열

1 배열(array) 란?

-같은 타입의 여러 변수를 하나의 묶음으로 다루는 것

-많은 양의 값을 다룰 때 유용하다

-단지 여러 개의 값을 저장하는 공간이다.

2 배열의 선언과 생성

-타입[] 변수이름:

-타입 변수이름[]:

-int[] aa; //배열 선언   aa = new int[10];  //배열 생성

-int[] aa = new int[10];

-Aa[0] aa[1] aa[2] aa[3] aa[index] 배열은 0부터

3 배열의 초기화

-생성된 배열에 처음으로 값을 저장하는 것

-int[] aa = [1,2,3,4,5]

-for(int i=0; I < aa.length; i++){

           System.out.println(a[i]);

}

5 다차원 배열의 선언과 생성

-int[][] aa;

-int aa[][];

-int[] a[];

-int[][] aa={

           {10,20,50}, {40,50,10}, {20,60,50}, {20,50,80}

}

Aa[0]  aa[0][0] aa[0][1] aa[0][2]

Aa[1]  aa[1][0] aa[1][1] aa[1][2]

Aa[2]  …

6 가변배열

Int[][] aa = new int[5][];

Aa[0] = new int[4];

Aa[1] = new int[2];

…

7 배열의 복사

-for문을 이용한 복사

Int[] num = {1,2,3,4,5}

Int[] newnum = new int[10]

For(int i=0; i<num.length;i++){

  Newnum[i] = num[1]

}

-system.arraycopy() 를 이용한 배열의 복사

System.arraycopy(arr1, 0, arr2, 0, arr1.length);

//arr1[0] 에서 arr2[0]으로 arr1.length만큼 데이터 복사

조건문

If(조건식){문장들}

1. if문

 If, if-else, if-else if

 If(조건식 true or false){ 조건식이 true일 경우 문장 수행 }

 Else{ 모든 조건식의 결과가 false 일 경우 수행 }

2. 중첩 if문

 If문 안에 또 다른 if문을 중첩해서 넣을 수 있다.

 If(조건식1){

   If(조건식2){

}

}

3. switch문 – 조건이 많을경우 switch

조건식의 계산 결과가 int범위 이하의 정수만 가능 (byte, short, char, int)

조건식 계산 후 그 결과와 같은 case문으로 이동 후 break문을 만날 때까지 문장들을 수행.

break문이 없으면 switch문의 끝까지 실행

switch(조건식){

case 값1: … break;

case 값2: … break;

default: 조건식의 결과와 일치하는 case문이 없을 때 실행

}

반복문

문장을 반복해서 수행할 때 사용

조건식과 수행할 블록{} 또는 문장으로 구성

반복회수가 중요한 경우레 for문 그 외에는 while문 사용

1. for문

For(1초기화;2조건식;4증감식){

  3조건식 true일 때 수행 될 문장

}

2. 중첩 for문

For(){

For(){

}

}

3. while문

While(조건식){

 조건식의 결과가 true일 때 수행 될 문장

}

5. do-while문

최소 한 번 은 실행 하고 조건식으로 넘어간다.

Do{

}while(조건식)

6. break문

조건문, 반복문을 빠져나갈 때 Break.

Break 다음 문장이 있어도 실행하지 않고 조건,반복문을 끝냄.

7. continue문  

자신이 포함된 반복문의 끝으로 이동하고 다음 반복으로 넘어감.

Continue 이후의 문장은 수행되지 않는다.

8. 이름 붙은 반복문과 break

Break는 자신이 포함된 반복,조건문을 빠져나가지만

이름을 붙인 반복문을 break 하면 그 반복문을 빠져나간다.

둘 이상의 반복문을 건너뛰는 것이 가능.

Aaa : for(){

           For(){

           If(){

                     Break Aaa;  

                     System.out.println(1);

}

}

}

오오오오 김민준님 실물이다 오오오오오옹ㅇㅇ

유툽강의에서듣던 목소리 레알 실물이다오오오오오옹ㅇㅇ

리액트 = 프론트엔드 라이브러리

왜쓰나? 

요즘 웹은 단순한 웹페이지가아니라 웹 어플리케이션이다. ui가 자주바뀐다 페이지를 계속 새로 불러오는게 아니라 동적웹을 구현할때 그냥 자바스크립트만 사용하면 코드정리안돼고 불편하니까 라이브러리를 사용한다. 라이브러리 사용 이유는 생산성, 유지보수성 관련.

리액트는 자바스크립트에 가깝고 ui에 집중된 라이브러리.

상태가 자주 바뀌는 대규모 어플리케이션을 구축하기 위해 리액트가 만들어짐

virtual DOM - 자바스크립트로 이루어진 가상의 돔. 가상의 돔에 먼저 그려놓고 바뀐게 있으면 그걸 업데이트 하는 방식. 

리액트를 특별하게 만드는점 - 어마어마한 생태계. react전용 플러그인들이 많이 만들어지고있다. 사용하는곳이 많고, 사용하는사람이 많아 정보찾기 용이하다. 완성도 높은 라이브러리.

props : 부모가 가지고 있고 값을 바꿀수없다.

state : 값을 바꿀수있지만 setState 로 바꿀 수 있다.

세미나 자료

https://trello.com/b/XNk2ruv5

자바 중급 - 컬렉션 프레임워크

https://programmers.co.kr/learn/courses/9/lessons/256

- java.util 패키지에 자료를 다룰 수 있는 자료구조 클래스가 있다.

- 자료구조 클래스들을 컬렉션 프레임워크 라고 한다.

- 자료를 저장할수 있는 구조 : 자료구조

Collection     - 컬렉션 프레임워크레서 가장 기본이 되는 interface

 - 여기에 자료가 있다 라는 것을 표현

 - 중복 허용, 자료 저장된 순서 기억못함

 - add(), size(), iterator()

Iterator        - Collection에 저장된 자료를 하나씩 꺼낼 수 있는 interface

- hasNext(), next()

Set             - 중복 허용X 

- Collection 인터페이스를 상속받는다

- add()

List             - 중복 허용, 순서 기억하는 자료구조

- Collection 인터페이스를 상속받는다

- get(int)

Map            - Key, Value 가지는 자료구조

 - put(), get()

 - Key 중복 X

 - KeySet() : 모든 Key 정보를 읽을 수 있는 Set을 반환

자바 중급 - 제네릭

https://programmers.co.kr/learn/courses/9/lessons/257

인스턴스를 만들 때 사용하는 타입을 지정하는 문법

<E> 가 제네릭을 적용한 것. 가상 클래스.

public class Box<E> {
        private E obj;
        public void setObj(E obj){
            this.obj = obj;
        }

    public class BoxExam {
        public static void main(String[] args) {
            Box<Object> box = new Box<>();
            box.setObj(new Object());
            Object obj = box.getObj();

            Box<String> box2 = new Box<>();
            box2.setObj("hello");
            String str = box2.getObj();
            System.out.println(str);

            Box<Integer> box3 = new Box<>();
            box3.setObj(1);
            int value = (int)box3.getObj();
            System.out.println(value);
        }
    }

- 제네릭 사용 가상타입 선언 -> 사용시 구체적 타입 설정

- 대표적으로 컬렉션 프레임워크 관련 클래스(Iterator, Set, List, Map) 에서 사용