전체 글
JS BOM( Browser Object Model ): 브라우저 객체 모델
BOM: 브라우저 객체 모델 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. window window 객체는 브라우저의 창을 나타냅니다. 모든 전역 변수, 객체, 함수들은 window 객체의 멤버가 됩니다. 심지어 DOM의 document도 window 객체에 포함되기 때문에 아래 두 코드는 같은 결과를 나타냅니다. window.document.getElementById("header"); document.getElementById("header"); window 객체 window.open("URL", "새 창 이름", "새 창 옵션") - 새 창 열기 window.close() - 현재 창 닫기 w..
JS DOM( Document Object Model ): 문서 객체 모델
DOM: 문서 객체 모델 문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 구조에서 최상위 객체로는 이 있으며, 그 하위 객체로는 와 가 있습니다. 모든 HTML 태그는 객체 또는 노드라 합니다. Document는 document 노드라 하고 태그들도 모두 노드입니다. HTML 태그 내의 텍스트 역시 텍스트 노드라 하고 주석도 주석 노드라 합니다. 위 그림 처럼 노드들은 트리 구조를 구성기 때문에 태그를 루트 노드가 되고, 태그와 태그는 루트 노드의 자식 노드가 됩니다. 이 같은 노드들은 모두 JS를 통해 접근할 수 있고 조작할 수 있습니다. 예를 들어 태그는 document.body로 접근할 수 있고 텍스트 노드는 innerHTML속성으로 접근할 수 있습니다. DOM 노드 탐색..
JS async & await
async & await async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다. async function 함수명() { await 비동기_처리_메서드명(); } async는 함수가 Promise를 반환하도록 하는 키워드입니다. await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. async async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다. 만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다. 아래 예시를 보면 "..
JS Promise를 사용한 비동기 처리
비동기 처리 비동기 처리란 코드가 끝나기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다. 비동기 처리 예제 setTimeout(function(), ms) console.log("first"); setTimeout(function () { console.log("second"); }, 3000); console.log("third"); 위 예제 코드에 대한 결과는 다음과 같습니다. "first" 출력 "third" 출력 "second" 출력 setTimeout은 지정한 초(예제에서는 3초) 만큼 기다린 후에 코드가 실행됩니다. 하지만 비동기 방식으로 실행되기 때문에 기다리는 동안 다음 코드가 실행됩니다. Promise 사용 전 비동기를 위한 방법: 콜백 함수 JS에서 비동기 처리에 대한 글을 보면 ..
JS addEventListener 사용법 ( + capturing, bubbling )
addEventListener() addEventListener()는 지정된 요소에 하나 이상의 이벤트 핸들러를 등록할 수 있습니다. removeEventListener() removeEventListener()는 addEventListener()로 연결된 이벤트 핸들러를 제거합니다. 이때 주의할 점은 반드시 addEventListener()를 사용했을 때와 마찬가지로 매개 변수를 설정해주어야 한다는 점과 addEventListener()과 같은 단계에 있어야 한다는 점입니다. element.addEventListener(event, function, useCapture) 1. element document, window 같이 이벤트를 적용할 요소입니다. 2. event 첫 번째 매개변수로 이벤트 유형을..
JS 정규식
정규식 정규식은 문자열에서 특정 내용을 찾거나 대체할 때 사용됩니다. 문장이 필터링 되어야 하는 경우 정규표현식을 이용하면 간편하게 처리할 수 있어 유용합니다. JS에서 주로 search(), replace(), match(), split() 등과 같은 메서드에 쓰입니다. 문자열.search(정규표현식) 문자열.replace(정규표현식, 치환문자열) 문자열.match(정규표현식) 문자열.split(정규표현식) 정규표현식.exec(문자열): 패턴과 일치하는 문자열을 배열로 반환 정규표현식.test(문자열): 패턴과 일치하는 문자열이 있는지 여부를 반환 정규식 규칙: /패턴/수정자 패턴 패턴 부분 정규식 규칙을 대부분 비슷합니다. 정규식 규칙 정규식 규칙 기호 | OR a|b [문자] 대괄호 내에 지정된 문..
JS Map과 Set
Map Key(키)와 Value(값)을 쌍으로 이루어진 컬렉션입니다. // Map 생성 및 선언 const map = new Map(); const map = new Map([ ['Apple', 1200], ['Banan', 1500], ['Orange', 2500] ]); // Map 값 추가 map.set('Apple', 1200); map.set('Banana', 1500); map.set('Orange', 2500); // Map 값 삭제 map.delete('Apple') // Map 값 가져오기 map.get('Apple'); // Map 값 존재하는지 확인 map.has('Apple'); // true or false // Map 크기 map.size; // Map 모든 값 삭제 map.cl..
JS 자바스크립트 반복문(Loop) / for in, for of 차이점
반복문 종류 for: 코드 블록을 반복 forEach: 배열의 각 요소에 대해 콜백함수를 호출 for in: 객체의 속성을 순회할 때사용 for of: 반복 가능한(iterable) 객체를 순회할 때 사용 for문: 가장 기본적인 순회 방법입니다. for (let i = 0; i { console.log(value); }); array.forEach((value, index) => { console.log("index: " + i..
JS 내장 객체: String, Date, Math, Array, 정규식 객체 등
내장 객체 내장 객체는 JS 엔진에 내장되어 있어 필요시에 사용할 수 있습니다. 내장 객체는 다음과 같은 방법으로 선언할 수 있습니다. 참조 변수 = new 생성 함수(); 내장 객체 종류는 대표적으로 아래와 같이 있습니다. 문자열 내장 객체 (Click) 날짜 내장 객체 (아래 설명) 수학 내장 객체 (아래 설명) 배열 내장 객체 (Click) 정규식 객체 (Click) 날짜 정보 객체: Date 날짜 객체 생성 const date = new Date(); new Date() // 현재 날짜와 시간 new Date(date string) // 날짜 문자열에서 날짜 객체 생성 // 연도, 월, 일, 시, 분, 초, 밀리초 (순서) new Date(ms) new Date(year,month) new Dat..
JS 자바스크립트 배열(Array) + 배열을 다루는 내장 API들 소개
배열(Array) 배열(Array)은 순서가 있는 데이터 집합을 다루기 위한 데이터 구조입니다. JS에서 배열은 다른 프로그래밍 언어와 다른 점이 있습니다. 바로 JS에서 배열은 특수한 형태의 객체로 다룬다는 점입니다. 또한 JS는 변수의 타입이 런타임에 결정되는 동적 타입 언어이기 때문에 배열에 담기는 데이터타입이 동일하지 않아도됩니다. var arr = []; console.log(typeof arr); // Object 출력 const mixedArr = [1, "two", true, {age: 4}, [5, 6, 7]]; 배열 선언 방식: const 배열을 선언할 때 const 키워드를 사용하는 것이 일반적입니다. 배열을 const로 선언하는 이유는 배열 변수가 재할당되지 않도록 하기 위해서입니다..
JS 문자열 메서드
let text = "ABCDEFGHI"; 문자열 길이 let length = text.length; //9 문자열 부분 자르기 slice(start, end) let str = text.slice(2, 5); // CDE let str = text.slice(2); // CDEFGHI let str = text.slice(-4); // FGHI let str = text.slice(-4, -2); // FG substring(start, end) let str = text.substring(2, 5); // CDE let str = text.substring(2); // CDEFGHI substr(start, length) let str = text.substr(2, 5); // CDEFG let st..
JS 자료형과 타입 변환 모음
자료형 변수에 저장할 수 있는 자료형은 다음과 같습니다. 문자열: String 숫자형: Number 논리형: Boolean 빈 데이터: undefined 자료형 구하기: typeof 지정한 테이너 또는 변수에 저장된 자료형을 알고 싶을 때 typeof를 이용하면 구할 수 있습니다. let num = 5; let str = "문자열"; let obj = {name: 'kim', age: 25}; console.log(typeof num); // numver console.log(typeof str); // string console.log(typeof obj); // object 문자열 문자열 → 숫자 Number(): Number("100"), Number(" ") 빈 문자열인 경우 0 반환 단항 + 연..
JS 호이스팅과 var, let, const 차이점
호이스팅 호이스팅(hoisting) JavaScript의 인터프리터가 함수나 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 동작을 의미합니다. 즉, 함수나 변수를 선언하기 전에도 사용할 수 있다는 것을 의미합니다. 코드 실행 전, 자바스크립트 엔진이 해당 스코프에서 선언된 함수와 변수를 모두 찾고, 함수 선언문을 가장 최상단에 끌어올리고 그 다음으로 변수 선언을 올립니다. 아래 예제들을 보면서 설명하도록 하겠습니다. console.log(value); var value = "hello"; // undefined 여기서 변수 value 선언이 끌어 올려지기 때문에 다음과 같이 해석됩니다. var value; // 변수 value 호이스팅 console.log(value); // value ..
JS 현재 창 인쇄하기: window.print()
JS는 window.print() 메서드를 통해 현재 브라우저 창을 인쇄할 수 있습니다. DOCTYPE html> 현재창 인쇄 인쇄
JS 데이터 표시하는 방법(innerHTML, write(), console.log(), alert())
innerHTML document.getElementById(id)를 사용하여 HTML 요소에 접근할 수 있습니다. 아래처럼 innerHTML 속성을 사용하여 HTML 내용을 작성할 수 있습니다. DOCTYPE html> h1 태그 div 태그 document.getElementById("test").innerHTML = "id가 test인 곳에 innerHTML 사용"; document.write() document에 출력하는 문법입니다. 아래 예제와 같이 HTML 문서가 로드된 이후, document.write()를 사용하면 기존 HTML이 모두 삭제됩니다. 때문에 document.write()는 테스트용도로만 사용하는 것이 좋습니다. DOCTYPE html> h1 태그 div 태그 TEST docu..
AWS EC2 Swap File로 메모리 부족 대처(feat. EC2 Build 멈춤 해결)
EC2에서 빌드 중 계속 멈추는 현상이 발생했습니다. 문제는 프리티어는 RAM 1GB만 지원해주기 때문이었습니다. 이러한 메모리 부족 현상은 Amazon Docs에 설명되어 있듯이 하드디스크를 가상 메모리로 변환시켜 사용(Swapping)하여 해결할 수 있었습니다. 1. 메모리의 상태 확인 $ free 2. Swap File 생성 $ sudo dd if=/dev/zero of=/swapfile bs=128M count=32 dd 명령을 통한 루트 파일 시스템에 Swap File 생성 bs: 블록 크기, bs는 인스턴스에서 사용 가능한 메모리보다 작아야 합니다. count: 블록 개수 bs(128M) * count(16) = 4GB(4,096MB) 3. 생성한 Swap File 권한 설정 사용자의 읽기 및..
AWS Amazon RDS DBeaver에 연결 (+ EC2에서 접속)
DBeaver 1. 새 데이터베이스 연결 2. 자신 환경에 맞게 선택 3. Connection Settings RDS 인스턴스 들어가 정보를 확인한 후 아래에 기입해줍니다. 엔드포인트 및 포트 확인 [RDS 인스턴스] > [연결 & 보안] 탭 > 엔드포인트 및 포트 확인 이를 통해 연결을 할 수 있습니다. DB 이름 & RDS Username 확인 [RDS 인스턴스] > [구성] 탭 > DB 이름 & 마스터 사용자 이름 EC2에서 접속 EC2에 mariaDB 설치 # mariadb 설치 $ sudo yum install mariadb # RDS 접근 $ mysql -u {username} -p -h {엔드포인트}
AWS Amazon RDS (feat. MariaDB)
Amazon RDS(Relational Database Service) AWS에서 제공하는 관계형 데이터베이스 서비스입니다. EC2 인스턴스(서버) 안에 DB를 같이 두어 서비스할 수도 있는데 왜 RDS를 사용할까요? 만약 서비스를 운영하다가 서버에 문제가 생기면 서비스를 중단해야 하는 경우, 또는 트래픽에 따라 서버를 줄이고 늘리는 경우 등 서버와 DB를 분리하는 것이 유리합니다. 이를 좀 더 개념적이고 자세하게 설명하면 다음과 같습니다. 클라우드에서 관계형 데이터베이스를 간편하게 설정, 운영 및 확장할 수 있습니다. 하드웨어 프로비저닝, 데이터베이스 설정, 패치 및 백업과 같은 시간 소모적인 관리 작업을 자동화하면서, 비용 효율적이고 크기 조정 가능한 용량을 제공합니다. 사용자가 애플리케이션에 집중해..
AWS EC2에 Spring Boot 배포하기 (Amazon Linux)
작업한 프로젝트를 AWS EC2에 배포하기 위해서 다음과 같은 절차로 진행합니다. EC2 서버로 Github에서 코드를 가져옵니다. build하여 jar 파일을 생성합니다. 물론 로컬에서 build하여 jar 파일을 생성한 후 EC2 서버로 보내는 방법도 가능합니다. 1. 환경셋팅: Java 설치 / Git 설치 1-1) Git 설치 $ sudo yum install git 1-2) Java 설치 (JDK 11) yum은 jdk 1.8 까지만 설치가 가능합니다. 때문에 다음과 같은 방식으로 jdk11를 설치해주어야 합니다. 참고 yum 사용: CentOS, Red Hat 계열 apt-get 사용: Debian, Ubuntu # Amazon Corretto를 이용한 jdk 11 파일 다운로드 # -o 옵션..
AWS Window 환경에서 EC2 인스턴스에 접속하기 (feat. PuTTY)
Window 환경에서 SSH 접속을 하기 위한 방법으로 PuTTY를 사용하여 설명하겠습니다. RDP를 사용하여 연결하는 방법은 Amazon Docs를 참고하면 됩니다. 1. PuTTY 설치 https://putty.softonic.kr/ PuTTY 완전하고 안정적인 텔넷 및 SSH 클라이언트 putty.softonic.kr 2. PuTTYgen으로 .pem 파일 .ppk 파일로 변환 키 페어를 생성할 때 .ppk로 생성한 경우 이 부분은 생략하셔도 됩니다. PuTTY에서 키 페어를 이용하여 접속하기 위해서는 .ppk 확장자이어야 합니다. 만약 .pem 파일로 생성한 경우 .ppk 파일로 변환해주어야 합니다. PuTTYgen 접속 후 [Conversions] > [Import key] > .pem 파일 선..
AWS EC2 개념 및 인스턴스 생성
EC2 (Elastic Compute Cloud) AWS에서 제공하는 클라우드 컴퓨팅 서비스 입니다. AWS로부터 독립된 가상의 컴퓨터를 한 대 빌리는 것입니다. 장점 원하는 스펙만큼 구축할 수 있고, 사용한 만큼 비용을 지불합니다. (탄력성: Elastic) 클릭 몇 번으로 서버를 구축할 수 있기 때문에 매우 효율적입니다. 사용자가 (CLI , Command를 통해) 인스턴스를 완전히 제어할 수 있습니다. EC2 인스턴스 생성 AWS EC2 인스턴스를 생성했다면 우리는 그 인스턴스를 구성 및 실행하기 위한 OS, CPU, RAM, 용량 등을 구성해주어야 합니다. AMI는 이러한 서버에 필요한 OS, CPU, 소프트웨어 등을 구성 해놓은 템플릿입니다. 즉 우리는 AWS EC2 인스턴스를 생성할 때 AMI..
Vue.js 우편번호 서비스 연동하기 (Daum 우편번호)
Daum 우편번호 서비스를 이용하여 Vue.js 환경에서 우편번호 서비스를 연동하였습니다! https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net public/index.html index.html에 다음 코드를 넣어, 스크립트를 호출하게 해주어야 합니다. 컴포넌트에 다음 코드를 넣어주면 됩니다. 코드는 실제 사용한 코드와는 상관없이 용도만 알기 쉽도록 올렸습니다. 우편번호 찾기 위에 쓰인 변수들은 상단에 링크 걸어놓은 Daum 우편번호 서비스 가이드에 잘 설명..
알고리즘 면접 준비
정렬 차이 https://yeo-computerclass.tistory.com/422 정렬 정리(선택, 버블, 삽입, 합병, 퀵, 힙 정렬) 비효율 : 선택 정렬, 버블 정렬, 삽입 정렬 효율 : 합병 정렬, 퀵 정렬, 힙 정렬, 기수 정렬 선택 정렬 넣을 위치는 정해져있고 어떤 원소를 넣은지 선택하는 알고리즘 시간 복잡도: O(N^2) public static yeo-computerclass.tistory.com 이분 탐색 정렬된 배열을 이분 분할하여 탐색하는 알고리즘 시간 복잡도: O(logN) public static int binarySearch(int target, int[] arr) { Arrays.sort(arr); int start = 0; int end = arr.length-1; whi..
정렬 정리(선택 정렬, 버블 정렬, 삽입 정렬, 합병 정렬, 퀵 정렬, 힙 정렬)
비효율 : 선택 정렬, 버블 정렬, 삽입 정렬 효율 : 합병 정렬, 퀵 정렬, 힙 정렬 선택 정렬 넣을 위치는 정해져있고 어떤 원소를 넣은지 선택하는 알고리즘 시간 복잡도: O(N^2) public static void selectionSort(int[] arr) { for (int i = 0; i < arr.length - 1; i++) { int minIndex = i; for (int j = i + 1; j < arr.length; j++) { if (arr[j] < arr[minIndex]) { minIndex = j; } } int tmp = arr[minIndex]; arr[minIndex] = arr[i]; arr[i] = tmp; } } 버블 정렬 인접한 두 원소를 검사하여 정렬하는 알고리..
백엔드 면접 질문
싱글톤 패턴 하나의 인스턴스만 생성되며 전역에서 그 인스턴에 접근이 가능하도록 만든 패턴입니다. 생성자는 private로 선언하여 외부 클래스로부터 인스턴스 생성을 차단하며, static 메서드로 전역에서 싱글톤 인스턴스에 접근이 가능합니다. 단점 및 주의 private 생성자이기 때문에 테스트가 어렵습니다. 의존 관계상 클라이언트가 구체 클래스 의존합니다. 같은 인스턴스를 공유하기 때문에 상태를 유지하게 설계하면 안되고, 가급적 읽기만 가능하게 해야합니다. 빌더 패턴 builder의 인스턴스를 만들고 빌더에서 객체를 대신 만들도록 하는 방식입니다. 이때 단계별로 객체를 생성합니다. 장점 필요한 데이터만 설정할 수 있습니다. (빌더 패턴이 아닌 경우, 파라미터에 따라 dummy값을 넣어주거나 생성자를 따..
Spring Batch 문법
Spring Batch 순차적으로 Step 시행하기 @Configuration @RequiredArgsConstructor @Slf4j public class JobConfiguration { private final JobBuilderFactory jobBuilderFactory; private final StepBuilderFactory stepBuilderFactory; @Bean public Job testJob() { return jobBuilderFactory.get("testJob") .start(step1()) .next(step2()) // step1()이 정상 종료되면 step2()로 이동 .next(step3()) // steo2()가 정상 종료되면 step3()로 이동 .build(..
Spring Batch 메타 테이블 데이터
메타 테이블 데이터 BATCH_JOB_INSTANCE Job이 실행되면 JobInstance가 이 테이블에 저장된다. JOB_INSTANCE_ID : BATCH_JOB_INSTANCE 테이블의 PK VERSION : 업데이트 될 때마다 1씩 증가 JOB_NAME : Job의 이름 JOB_KEY : job_name과 jobParameter를 합쳐 해싱한 해시코드 저장 job_key이 같으면 추가적으로 기록되지 않습니다. 즉 같은 Batch Job인 경우 JobParameter가 다른 경우에만 추가적으로 데이터가 저장된다. BATCH_JOB_EXECUTION Job의 실행정보가 저장된다. JOB_EXECUTION_ID : BATCH_JOB_EXECUTION 테이블의 PK, JOB_INSTANCE와 1:N 관..
Spring Batch 설정하기
Spring Batch Dependency 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-batch' } Batch 기능 활성화 어노테이션(@EnableBatchProcessing) @EnableBatchProcessing @SpringBootApplication public class SpringBatchApplication { public static void main(String[] args) { SpringApplication.run(SpringBatchApplication.class, args); } } 메인 클래스에 @EnableBatchProcessing을 붙이는 방법 설정 파일을 따로 만들어서 해..
Spring Scheduler를 활용한 일정 주기 스케줄링 작업
Spring Scheduler는 스케줄링 작업을 효과적으로 관리하고 실행하기 위한 방법입니다. Scheduling 활성화 설정 Spring Scheduler는 `@Scheduled` 어노테이션을 붙여 사용할 수 있습니다. `@Scheduled`를 사용하기 위해서는 `@EnableScheduling` 어노테이션을 명시해주어 Scheduling을 활성화할 수 있습니다. `@EnableScheduling`을 명시하는 방법에는 두 가지가 있습니다. 방법1: @SpringBootApplication이 위치한 클래스 위에 명시하는 방법 @EnableScheduling @SpringBootApplication public class CovidHospApplication { public static void main(..