전체 글 46

1주차 과제: JVM은 무엇이며 자바 코드는 어떻게 실행하는 것인가. #1

JVM이란 무엇인가 컴파일 하는 방법 실행하는 방법 바이트코드란 무엇인가 JIT 컴파일러란 무엇이며 어떻게 동작하는지 JVM 구성 요소 JDK와 JRE의 차이 1. JVM 이란 ? - JVM ( Java Virtural Machine ) 자바 가상 머신으로 자바 바이트 코드를 실행할 수 있는 주체이다. Java Byte Code 를 OS 에 맞게 해석 해주는 역할을 합니다. Java Compiler 는 .java 파일을 .class 라는 Java Byte Code로 변환 시켜 줍니다. Byte Code 는 기계어가 아니기 때문에 OS에서 바로 실행되지 않습니다. 이때 JVM은 OS 가 Byte Code를 이해할 수 있도록 해석해 줍니다. JVM의 해석을 거치기 때문에 C언어 같은 네이티브 언어에 비해 속..

Live-Study 2021.02.21

09 v-fi 와 v-show

다음은 조건문을 사용한 예제를 보여주겠습니다. 첫번째 V-IF v-if 안에 true 에 값이 들어가 있으므로 출력되는걸 확인할 수 있다. 안믿어도 어쩔 수 없습니다. 다음은 버튼을 이용해 show 에 값을 true -> false 로 바꾸는 프로그래밍을 해보겠습니다. 처음 브라우저 화면 모습이고 눈에 보였는데 사라졌다 ㅠㅠ 다음은 V-ELSE 도 이용해 보겠다. v-if 가 false 이면 NO 가 출력되며 True 면 YES 가 보인다. 요렇게 왔다 갔다 보인다. 다음은 TEMPLATE 태그를 이용 다중에 div 를 출력하거나 미출력할 수 있다. 다음은 V-ELSE-IF 를 이용해 코딩을 해보겠다. 첫번째 number 에 값이 1 일 경우에는 1,2,3 노출 , 2일때는 HII 노출 나머지 (ELSE..

Vue. JS 2021.02.08

08 클래스 & 스타일 바인딩

Vue 공식 가이드 : kr.vuejs.org/v2/guide/class-and-style.html 클래스와 스타일 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 오늘은 클래스와 스타일 바인딩 !! 위에서 태그 아래 생성한 .red 와 .blod 클래스를 사용해 보겠다. 다음엔 클래스 바인딩을 적용해 보도록 하겠다. 바인딩을 하기위해 class 앞에 콜론을 붙여준뒤 아래 data 부분에 isRed 의 값을 선언해 준다. isRed 가 True 면 red에 값이 class 에 들어가고 false 시 바인딩이 안된다. 보기와 같이 맨 처음 브라우저에서는 class 에 값이 없다. 이유는 isRed 가 false 이기 때문이다. 클릭 버튼 클릭 ! isRed..

Vue. JS 2021.02.08

REST API

REST API 란 ? ( Representational State Transfer API ) API ( application Programming Interface ) 란 ? 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환가능 하도록 하는 것 REST API 정의 REST 기반으로 서비스 API 를 구현하는 것 최근 openAPI , 마이크로 서비스 등을 제공하는 업체 대부분은 REST API 를 제공 REST API 의 특징 사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다. REST 는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다..

간단용어 2021.02.07

REST

REST ( Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 자원( resource)의 표현(representation)에 의한 상태 전달 a. 자원의 표현 - 자원 : 해당 소프트웨어가 관리하는 모든 것 - 자원의 표현 : 자원을 표현하기 위한 이름 b. 상태(정보)전달 - 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달한다. - JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다. 월드 와이드 웹(WWW)과 같은 분산 하이퍼미디어 시스템을 위한 스프트웨어 개발 아키텍처의 한 형식 REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을..

간단용어 2021.02.07

07 Watch 속성

먼저 VUE 공식 가이드에 나와있는 Computed 와 Watch 에 대한 속성이다. 가이드에 나와 있듯이 Watch 보다는 Computed 를 사용하라고 권장하고 있다. 소개를 하자면 처음 브라우저에는 욱태 눈이와요 가 출력될 것이고 버튼을 클릭하게 되면 message 는 홈런볼로 변하게 되며 !! message를 감시하고 있던 watch 에서 먼저 콘솔로그에 메개변수로 받은 newValue 와 oldValue 를 출력하고 updated 는 눈이 그쳤어요 로 변환시킨다.

Vue. JS 2021.02.03

06 Computed 속성

05 Method 에 이어 두번째 Method 와 비슷하지만 비슷하지 않은 Computed 1. 기본 연산자 먼저 간단한 연산자를 구현해 보겠다. data 에 number 라는 변수명으로 1 값을 생성 2. 약간 복잡 연산자 ? 만약 이런 연산자를 써야 한다고 보자. message 는 변수명이고 나머지는 자바스크립트 언어에도 존재하는 함수들이다. ( 단어들을 나눠 역순으로 한다음 다시 합친다 라는 의미) 이렇게 선언된 message에 위에 선언한 연산자를 구현한 값을 브라우저로 확인하면 !!! 각 글자로 나눈뒤 역순으로 배열하고 그걸 다시 합친 결과값 3. Computed 사용 !! 여기서 포인트는 !!!? 다음은 메서드에 선언하여 사용했을때 인데 여기서 차이점은 reversedMessage 다음에 ()..

Vue. JS 2021.02.03

창발적 설계로 깔끔한 코드를 구현하자.

켄트 벡이 제시한 단순한 설계 규칙 네 가지가 소프트웨어 품질을 크게 높여준다고 믿는다. 모든 테스트를 실행한다. 중복을 없앤다. 프로그래머 의도를 표현한다. 클래스와 메서드 수를 최소로 줄인다. 단순한 설계 규칙 1. 모든 테스트를 실행하라. 테스트가 가능한 시스템을 만들려고 애쓰면 설계 품질이 더불어 높아진다. 크기가 작고 목적 하나만 수행하는 클래스가 나온다. SRP를 준수하는 클래스는 테스트가 훨씬 더 쉽다. "테스트 케이스를 만들고 계속 돌려라"라는 간단하고 단순한 규칙을 따르면 시스템은 낮은 결합도와 높은 응집력이라는, 객체 지향 방법론이 지향하는 목표를 저절로 달성한다. 단순한 설계 규칙 2~4 : 리팩터링 구체적으로는 코드를 점진적으로 리팩터링 해나간다. 새로 추가하는 코드가 설계 품질을 ..

클린코드 2021.01.31

초기화 지연 ( Lazy initialization )

초기화 지연은 필드 초기화를 실제로 그 값이 쓰일 때까지 미루는 것이다. 값을 사용하는 곳이 없다면 필드는 결코 초기화 되지 않는다. 클래스를 초기화하고 객체를 생성하는 비용은 줄어들지만, 필드 사용 비용은 증가 시킨다. 초기화 지연이 적용된 필드 가운데 실제로 초기화되어야 하는 필드의 비율, 초기화 비용, 필드 실제 이용 빈도에 따라 실제 성능은 떨어질 수 있다. 필드 사용 빈도가 낮고 초기화 비용이 높다면 쓸만할 것이다. 실제로 대부분의 경우에는 지연된 초기화를 하느니 일반적으로 초기화 하는 것이 낫다. 참조 : wonwoo.ml/index.php/post/724

간단용어 2021.01.31

05. 데이터 양방향 바인딩 (Data Two Way Binding)

간단간단으로 input 박스에 입력시 하단에 실시간으로 입력한 값 동시에 노출하기 이벤트 구현 몸풀기로 keyup 사용시 해당 글자들을 console창에 노출 시키도록 해보자.. 먼저 input 박스에 keyup을 선언하는데, v-on:keyup 으로 선언할 수 있지만 위에 이미지 처럼 v-on: 대신 @ 로 대체할 수 있다. keyboardEvent 를 클릭해서 보면 다양한 키-밸류 들을 확인할 수 있다. 이중 우린 Target 에 Value 를 이용 양방향 데이터 바인딩을 해보겠다. 브라우저에서 INPUT 박스에 문자 222 를 입력하니 아래 {{ }} 선언한 곳에도 같이 222 가 동시에 입력되는 걸 확인할 수 있다. 더 간단히 !!? 위에 이벤트를 @keyup="updateText" 대신 v-mo..

Vue. JS 2021.01.31