하나씩 차근차근 꾸준히

[기본 정보] 데이터 간격 x축 y축 총 갯수 5km 149개 253개 37,697개 1km 745개 1265개 942,425개 [소요 시간] 2d webGL 5km 0.30s 1.21s 1km 2.83s 3.07s 더 적은 데이터의 양을 가진 경우 webGL이 훨씬 속도가 느림 이유는? Canvas 2D와 webGL 렌더링 방식과 성능 특성이 다름 1. 초기화 오버헤드 webGL은 초기화, 설정에 상대적으로 많은 오버헤드가 있을 수 있음. 작은 데이터 세트일 때 더욱 두드러짐. 큰 데이터 세트에서 이 오버헤드(초기 설정, 메모리 할당과 같은 작업)가 전체 렌더링 시간에 미치는 영향이 상대적으로 작음 2. 배치 렌더링 webGL의 경우 그래픽 카드의 파이프라인을 최대한 활용하기위해 데이터를 배치로 묶어 ..

이런 코드가 있을때 style: (options.style ? options.style : this._defaultStyle) 간략하게 || 연산자를 사용하여 style: options.style || this._defaultStyle 이렇게 사용할 수 있다. 그런데 만약 options부터 undefined라서 오류가 난다면, _generateTopoLayer(data, options = {}) { //함수 내용 } 이렇게 수정할 수 있다. "options = {}"의 역할은? 함수 매개변수에 기본값을 할당하는 기능 options가 제공되지 않은 경우 빈 객체 {}로 초기화하여 undefined 오류를 방지함

async? 비동기 함수를 선언할 때 사용되며, 이 함수는 암묵적으로 Promise 객체를 반환 async 함수 내에서 await 키워드와 함께 사용되어 비동기 작업의 완료를 기다리도록 함 이렇게 함으로써 비동기 코드를 마치 동기 코드처럼 읽고 작성할 수 있음 어떤 상황에서 사용? 외부 리소스에 액세스할 때: 웹 API 호출 파일 시스템에 액세스 데이터베이스 쿼리 수행 등 긴 시간이 걸리는 연산: 이미지나 동영상 처리 큰 데이터 세트에 대한 연산 등 다른 비동기 작업에 의존하는 작업: 다른 Promise를 반환하는 함수를 호출하고 그 결과에 의존하는 경우

객체의 멤버 변수에 직접 접근하지않도록 하기위해 클래스 안에 private 변수를 사용하고 public setter, getter 메서드를 사용하는데 이렇게 구현하는 이유가 궁금했음 그 이유는 캡슐화를 구현하기 위함 캡슐화란, 데이터와 해당 데이터를 처리하는 메서드를 하나의 단위로 묶는 것 캡슐화를 하면 얻을 수 있는 이점은? 1. 데이터의 무결성을 보장할 수 있음 public 메서드를 사용하여 데이터에 접근하기때문에 클래스 외부에서 데이터를 무분별하게 변경할 수 없음 데이터의 정확성, 일관성, 유효성을 보장할 수 있음 2. 클래스 내부 구현을 숨길 수 있음 클래스 사용자는 public 메서드를 사용하여 클래스를 사용할 수 있고 클래스 내부 구현에 대해서 신경쓰지않아도됨 3. 코드의 유지보수성을 높일 수..

생성자란? 클래스의 인스턴스를 초기화하는데 사용되는 메서드 클래스의 이름과 동일하며, 반환값이 없고, 클래스의 인스턴스가 생성될 때 자동 호출됨 인스턴스 변수의 초기값을 설정하거나 매개변수를 받아들이고 이를 인스턴스 변수에 할당하거나 다른 메서드를 호출하여 인스턴스를 초기화하는 등의 작업을 수행함 인스턴스 변수의 초기값을 설정하는 생성자 예시 코드 public class Person { private String name; private int age; public Person() { this.name = "Unknown"; this.age = 0; } } Person person = new Person(); // 생성자 호출하여 인스턴스 초기화 매개변수를 받아들이고 이를 인스턴스 변수에 할당하는 생성자..

HTTP 요청 3가지 방법 GET - 쿼리 파라미터 메시지 바디없이 URL의 쿼리 파라미터에 데이터를 포함해서 전달 바디를 사용하지 않기 때문에 content-type이 없음 검색, 필터, 페이징에서 많이 사용 POST - HTML Form content-type : application/x-www-form-urlencoded 메시지 바디에 쿼리 파라미터 형식으로 전달 바디에 포함된 데이터가 어떤 형식인지 content-type을 반드시 지정해야함 회원 가입, 상품 주문, HTML Form 사용 HTTP message body에 데이터를 직접 담아 요청 HTTP API에서 주로 사용, JSON, XML, TEXT JSON의 경우, JSON 결과를 파싱해서 사용할 수 있는 자바 객체로 변환하려면 Jacks..

SSR - 서버 사이드 렌더링(JSP, 타임리프) 서버에서 동적으로 최종 HTML을 생성해서 클라이언트에 전달 CSR - 클라이언트 사이드 렌더링(React, Vue.js) HTML 결과를 자바스크립트를 사용해서 웹 브라우저에서 동적으로 생성해서 사용 주로 동적인 화면 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있음 1. 웹 브라우저에서 서버에 요청(html 내용 x, 자바스크립트 링크) 2. 자바스크립트 요청(클라이언트 로직, HTML 렌더링 코드) 3. http api - 데이터 요청(JSON으로 응답) 4. 자바스크립트로 HTML 결과 렌더링 CSR, SSR 동시에 지원하는 웹 프레임워크도 있음

[정적 컨텐츠] 웹 브라우저에 URL로 톰캣 서버에 요청을 하고 1. 스프링 컨테이너에 관련 컨트롤러가 있는지 탐색 2. resources에 해당 url html 파일을 탐색 탐색한 view를 응답하게 됨 [MVC와 템플릿 엔진] 웹 브라우저에 URL로 톰캣 서버에 요청을 하고 스프링 컨테이너에 관련 컨트롤러를 탐색, 요청한 template과 model을 viewResolver에게 전달 Thymeleaf 템플릿 엔진에서 처리해서 html로 변환 후 응답 [API] - @ResponseBody 문자 반환 @ResponseBody를 사용하면 viewResolver를 사용하지않음 대신, HTTP의 BODY에 문자 내용을 직접 반환(StringConverter) - @ResponseBody 객체 반환 객체가 반..