네발로 코딩하는 포메라니안

1. Promise란? 자바스크립트에서 비동기를 처리할 때, 동기처럼 처리하기 위해 사용하는 객체를 말한다. 비동기 처리가 끝난 후, 실행되어야 하는 것을 정의해놓고 비동기 처리가 끝나면 불려질 수 있도록 한다. 말 그대로, "넌 비동기 처리 끝나고 실행해줄게"하는 약속을 맺는다고 보면 된다. 비동기 처리 시 아래의 코드처럼 특정 로직이 끝나는 걸 기다리지 않고, 뒤의 로직을 바로 실행시키기 때문에 원하는 결과를 얻을 수 없다. let data; setTimeout(() => { data = 20; console.log('비동기 코드 실행 완료'); }, 3000); console.log(data); //undefined //비동기 코드 실행 완료 이를 해결하는 방법은 대표적으로 콜백함수가 있고, 지금 ..

Destructing이란, 구조(자료 구조)를 할당하면 좌항에 맞게 알아서 분해해서 할당해주는 것을 말합니다. let arr = [1, 2, 3]; let [n1, n2, n3] = arr; console.log(n1, n2, n3); 활용 1. 객체 프로퍼티 값 참조 let person = { name: "홍길동", age : 25, introduce(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } //var은 window에 선언하는 변수 //let(지역변수)으로 쓰면 this가 window라서 introduce의 이름, 나이값 출력X var {name, age, introduce} = person; console.log(name, age..

1. 매개변수의 개수에 따른 사용법 1. 매개변수가 없는 경우 func = () =>{ console.log("func"); } func(); 2. 매개변수가 1개인 경우 func = (num) =>{ console.log("func", num); } func(3); 매개변수가 1개면, ( ) 생략 가능 func = num =>{ console.log("func", num); } func(3); 3. 매개변수가 여러 개인 경우 반드시 ( )로 매개변수들을 묶어야 한다. func = (n1, n2) =>{ console.log("func", n1*n2); } func(3, 2); 2. return값에 따른 사용법 1. 실행 문장이 return 1개인 경우 1) return 키워드 사용 우리가 흔히 사용하는..

1. Vue Instance Vue는 javascript기반이므로 혹은 .js파일에 작성한다. Vue Instance는 아래의 코드를 말한다. new Vue({ /*속성: 값*/ }) 속성 설명 el Vue가 적용될 element를 지정 (값 = CSS Selector | HTML 태그명) data Vue가 사용하는 정보 등록하는 곳으로, (1) 객체 형태와 (2) 함수 형태(권장)가 있다. template 화면에 표현할 HTML, CSS등을 정의하는 속성 methods 화면 로직 제어(이벤트 처리 등)와 관련된 method 정의 lifecycle 속성 (beforeCreate, created, ..., destroyed) Vue Instance의 생성 전, 생성 후, ... , 소멸 후에 실행할 로직 ..

1. Vue.js란? 쉽게 생각하면 Frontend의 프레임워크라고 할 수 있으며, 가볍다는 것이 장점이다. 2. MVVM Pattern (Model + View + ViewModel) Model : 순수 JS 객체, Logic처리 View : 웹페이지 DOM (= html) ViewModel : Vue Vue가 view와 model을 자동으로 바인딩해서, 양방향 통신을 가능하게 한다. 풀어서 설명하자면, Vue가 DOMListener를 통해 DOM을 보고 있다가 변경사항이 생기면 JS에 반영한다. 반대로 DataBinding을 통해 JS에서 Data가 변경되면 DOM에 반영한다. 3. Vue 시작하기 1. Chrome 웹스토어에서 개발자 도구 추가 웹스토어에서 vue검색(아래 사이트) > Vue.js ..

1. Spring MVC 프로젝트 구조 파일 구조는 위와 같으며, src/main/webapp/META-INF/context.xml은 직접 생성해야 한다. 없으면 Servers 폴더에 있는 파일이 실행된다. 2. XML 설정 파일 1. pom.xml - 프로젝트의 개발 환경 설정 ex) java버전, 필요한 library 등록 등 2. server.xml - Servers폴더 내에 위치 - server의 설정파일 - 실행 시킬 프로젝트가 등록되어 있다. 3. context.xml - "web project"의 환경 관련 설정 파일 ex) DB Connection Pool 4. web.xml - "web project"의 실행 관련 설정 파일 - Tomcat이 뜨자마자 web.xml을 실행해서 contex..

1. Spring MVC 프로젝트 생성하기 New > Spring Legacy Project Project name을 작성하고, Spring MVC Project를 선택한 후 [Next] package는 최소 3-depth로 작성하며, 여기서 mvcproject가 앱 이름이 된다. 2. 프로젝트 환경 설정하기 pom.xml에 자신의 프로젝트에 맞는 버전으로 수정, 필요한 library추가하기 프로젝트 우클릭 > Maven > Update Project... 생성한 프로젝트 선택 > [Force Update of Snapshots/Releases] > [OK] 까지하면, 아래에 업데이트 상태를 보여준다. 되도록이면, 업데이트가 끝날 때까지 프로그램을 만지지 않는 걸 권장한다.

1. Spring MVC란? Spring이 제공하는 기능 중, Servlet 기반의 MVC Framework가 있다. Spring MVC = 기존의 MVC + Front Controller이다. 기존의 MVC패턴에 대한 설명은 아래 글에 있다. 2022.03.27 - [웹프로그래밍/Servlet & JSP] - Servlet & JSP (3) - MVC 패턴 Servlet & JSP (3) - MVC 패턴 1. MVC 패턴이란? Model-View-Controller로 구조를 만들어 개발하는 개발 패턴이다. 이 패턴에 따라 개발하면 분업이 되어 유지보수가 쉽다고 알려진 형식들 중 하나이다. Controller가 Model과 View의 다리 역 yerinpy73.tistory.com 2. Spring MV..

1. 문제 https://www.acmicpc.net/problem/20056 20056번: 마법사 상어와 파이어볼 첫째 줄에 N, M, K가 주어진다. 둘째 줄부터 M개의 줄에 파이어볼의 정보가 한 줄에 하나씩 주어진다. 파이어볼의 정보는 다섯 정수 ri, ci, mi, si, di로 이루어져 있다. 서로 다른 두 파이어볼의 위치 www.acmicpc.net 2. 풀이과정 문제 자체를 바로 이해하기 어려웠다. 2단계에서 "파이어볼이 여러 개 있으면, 그 자리에서 나눠지고 이동은 다음 단계에 한다."는 식으로 수정했으면 좋겠다. 실행 과정 1) Node라는 클래스를 만들어 한 곳에 파이어볼이 여러 개오면, 값을 누적시킨다. 2) 다음 이동에서 cnt>1이면, 방향에 따라 이동시킨다. *남은 파이어볼의 질..

1. 문제 https://www.acmicpc.net/problem/13168 13168번: 내일로 여행 첫 번째 줄에는 한국에 있는 도시의 수 N(1 ≤ N ≤ 100)과 1인당 내일로 티켓의 가격 R(1 ≤ R ≤ 1,000,000)이 주어집니다. 두 번째 줄에는 N개의 도시의 이름이 주어집니다. 도시의 이름은 알파벳 대소 www.acmicpc.net 2. 풀이과정 간단하게 말해서, 티켓 없을 때 & 티켓 샀을 때 각각 플로이드 와샬 알고리즘으로 각 도시에서 도시까지의 최단거리를 구하는 문제이다. 하지만, 문제를 제대로 읽지 않아 테스트케이스에 없던 Taxi와 Airplane을 고려해주지 않고 NullPointer Error로 고생했다. 이 문제에서 주의 깊게 볼 점 2가지 1) 비용의 최솟값이 1이..