럿고의 개발 노트

[인프런] 웹 게임을 만들며 배우는 Vue6. 로또 추첨기6.1. vue 스타일 가이드- https://kr.vuejs.org/v2/style-guide/6.2. 자식 컴포넌트와 props6.3. 로또 추첨기 구현하기6.4. watch 사용해보기- watch는 왠만하면 사용하지 말것! 무한반복의 굴레에 들어갈수도 있음.- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js] 1234import Vue from 'vue';import LottoGenerator from './LottoGenerator'; new..

[인프런] 웹 게임을 만들며 배우는 Vue5. 가위바위보5.1. vue-devtools와 기타 정보들5.2. :class와 :style5.3. vue 라이프사이클5.4. 가위바위보 완성과 devtools 분석 - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[main.js] 12345import Vue from 'Vue'; // Vue를 불러오는 것 import RockScissorsPaper from './RockScissorsPaper'; // NumberBaseball.vue를 가져오는 것 new Vue(Rock..

[인프런] 웹 게임을 만들며 배우는 Vue4. 반응속도 체크4.1. 반응속도체크와 webpack watch4.2. v-bind와 vue style4.3. webpack-dev-server4.4. 반응속도체크 게임 완성하기4.5. computed와 v-show, template - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[ResponseCheck.html] 123456789101112131415161718192021 반응속도 체크 Colored by Color Scriptercs [RespnseCheck.vue] ..

● SPA란?- Single Page Application(단일 페이지 어플리케이션) - 기존 웹 서비스는 요청시마다 서버로부터 리소스, 데이터를 해석하고 화면에 랜더링 하는 방식 - 그러나 SPA형태는 브라우저에 최초에 한번 페이지 전체 로드 후 이후 부터 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 - 전통적인 페이지 vs 단일 페이지 어플리케이션 비교 - 예전부터 개발자들은 지속적으로 웹서비스와 개발방식을 발전 시켜옴 - CSS, JS 리소스 등 CDN형태로 캐싱 및 압축하고, View에서 템플릿엔진 들을 사용하고, 초기 SPA개념인 Backbone.js, Angular.js 라이브러리들이 나왔고, 지금은 템플릿 개념을 지나 컴포넌트 개념인 React.js, Vue.js, Angular2 ..

[인프런] 웹 게임을 만들며 배우는 Vue3. 숫자야구3.1. 웹팩 사용하기3.2. 프로젝트 구조와 웹팩 빌드3.3. 웹팩 로더 사용하기3.4. v-for로 반복문 사용하기3.5. 숫자야구 완성하기- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.[NmberBaseball.html] 123456789101112131415161718192021222324252627 숫자야구 Colored by Color Scriptercs [NumberBaseball.vue] 1234567891011121314151617181920212..

1. MVC 패턴과 Front Controller 패턴● MVC 패턴- Model View Controller - 디자인패턴은 소프트웨어 개발방법을 공식화 한것. - MVC는 Model, View, Controller의 약자로 어플리케이션을 세가지 역할로 구분한 개발방법론. - 목표는 사용자 인터페이스로부터 비즈니스 로직과 프레젠테이션 로직의 분리. - 분리를 통해 비즈니스 로직 재사용, View 유지보수 간단하다는 장점이 존재.++ 비즈니스 로직 : 어떤 특정 값을 얻기 위해 데이터의 처리를 수행하는 응용프로그램의 일부로 백엔드에서 일어나는 각종 처리를 일컫는 말 ++ 프레젠테이션 로직 : 말그대로 보여주기 위한 로직으로 화면상의 디자인 구성을 위한 로직 ● Front Controller 패턴- 모든 ..

● 요청 스코프(Request Scope)- 서버는 클라이언트의 HTTP(Hyper Text Transmission Protocol) 요청이 있을때 마다 javax.servlet.http.HttpServletRequest 인터페이스를 구현한 객체 생성 - 특히 이 객체는 요청 스코프(Request Scope)의 생명주기 동안 객체를 저장할 수 있는 Key/Value 속성 쌍들의 컬렉션을 담고 있음 - 각 쌍의 키는 문자열이며, 값은 어떠한 형태의 객체든 상관 없음.▶ 객체를 저장하거나 가지고 올 수 있는 메소드 - public void serAttribute(String name, Object obj); - ppublic Object getAttribute(String name); - 요청 스코프 속성은..

● HTTP(Hyper Text Transfer Protocol, 하이퍼텍스트 전송 방식)- 웹 서비스는 HTTP를 통해 데이터를 주고 받음 - 하이퍼 텍스트란 하이퍼링크를 통하여 움직일 수 있는 텍스트 - 앞에서 뒤로 읽어나가는 순차적 흐름이 아니라 중간에서 다른곳으로 오가는 방식을 의미 ● TCP/IP(Transmission Control Protocol / Internet Protocol)- TCP규약 + IP규약 / 웹에서만 사용 ▶ TCP(Transmission Control Protocol)- TCP는 데이터 전달 관리 규칙. 즉, 데이터를 작게 나누어서 옮기고 다시 조립하여 원래 데이터로 만드는 규칙- 여기서 잘게 나눈 데이터 단위는 패킷으로 인터넷에서 정보를 전달하는 단위- TCP는 패킷을..

[인프런] 웹 게임을 만들며 배우는 Vue2. 구구단2.1. 컴포넌트의 필요성2.2. 컴포넌트의 특성2.3. props와 웹팩의 필요성 - 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요![끝말잇기] -> 컴포넌트를 이용하여 한 페이지의 끝말잇기 여러개 넣기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 끝말잇기(컴포넌트 이용) // Vue 컴포넌트, 컴포넌트는 인스턴스보다 위에 있어야 함! Vue.component("wo..