프로그래밍 기초/기초문법 (25) 썸네일형 리스트형 따옴표, 백틱(backtick, `) * 영어표기가 디폴트, 이하 한글표기 * Angular 기준 0. 따옴표 (= 문자열) - string - 작은 따옴표( ' ' ), 혹은 큰 따옴표 ( " " ) 안에 문자를 넣은 자료형 - [...str] 을 통해 문자열을 배열로 변환 가능 1. 백틱 ( ` ) - string - 문자열 안에 변수를 넣기 위해 사용 - 문자열로 반환 (템플릿 리터럴, Template Literal) let str: string = '백틱'; const newBacktick = ` 문자열과 ${str} 을 같이 사용하여 문자열로 반환 `; console.log(newBacktick); //문자열과 백틱 을 같이 사용하여 문자열로 반환 - 백틱을 사용하면 입력한 형식(줄바꿈, 띄어쓰기 등)이 유지된다. 1-1. 백틱 활.. 컴파일(Compile), 빌드(Build), 배포(Deploy), CI/CD 1. 컴파일 (Compile) - 사용자(인간)가 작성한 코드를 컴퓨터(기계)가 이해 할 수 있도록 번역 - 컴파일러: 번역하는 프로그램 2. 빌드 (Build) - 컴파일 된 파일을 컴퓨터가 실행할 수 있는 상태로 변환 - 실제로 실행 가능한 상태 3. 배포 (Deploy) - 빌드된 파일을 사용자가 접근할 수 있는 환경으로 배치 - 실제 서버에 반영 3-1. CI (Continuous Integration) - 빌드 및 테스트 자동화 과정 - 지속적 통합 - 다수의 개발자가 협업한 프로젝트에서 [ 병합 - 빌드 - 테스트 ] 과정에 소요되는 시간을 줄이기 위한 자동화 과정 다음과 같은 순서를 통해 실행된다. 1). 자동으로 기존 코드와 병합 2). 병합된 코드의 오류 체크 및 빌드와 검증 3). 문제.. 배열, 객체, 유사 배열 객체, Array.from, map * 영어표기가 디폴트, 이하 한글표기 * Angular 기준 0. 유사 배열 객체 - 배열또한 객체이므로 이를 이용하여 배열이 아님에도 배열처럼 사용할 수 있는 객체 - 중요한 것은 배열이 아니기때문에 배열에 사용할 수 있는 push, pop 등의 함수를 사용할 수 없다. - index 를 통해 접근 가능, 반드시 length 가 필요 - argument 도 유사배열 객체(https://cbw1030.tistory.com/12, http://taewan.kim/tip/argument_parameter/) 1). 사용하는 이유 - 함수의 결과값을 배열로 출력하고 싶을 때 - " 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 .. 정규 표현식 (RegEx - regular expression) 0. 정규 표현식 (RegEx - regular expression) - 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식언어이다. https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D - 간단하게 예를 들면 회원가입시 ID(영문 + 숫자, 5~20자리) 형식에 맞춰 기입됬는지 체크할때 사용됨 1. 정규 표현식 문법 1). 메타문자 ( \ ^ $ . | [ ] ( ) * + ? { } ) - 정규 표현식에서 사용되는 기호 - 특별한 의미(특정 기능)를 가짐 앵커 (anchor) - 문자열의 위치 - 특정 용도 ^ (특정 위치 고정) 행의 처음 $ (특정 위치 고정) 행의 끝 \ (특정 용도) 특정 문자와 결합.. Async, Await * 영어표기가 디폴트, 이하 한글표기 * Angular 기준 0. Async - 비동기 처리 패턴, 비동기 함수 - callback, Promise 의 단점을 보완 - Async 안에서 선언된 await 를 통해 강제로 동기화가 진행됨 1). 장점 - 무조건 처리해야 하는 부분을 해결함 - 간단한 문법 (메서드 앞 async, 함수 안 await 적기) 2). 단점 - 웹은 대체로 싱글 스레드이며 await 를 무조건 기다리기 때문에 처리 속도에 문제가 발생할 수 있음. - 따라서 이 부분에 대한 해결이 없으면 에러 발생 (제대로 체크하지 않으면 나중에 디버그할때 피눈물) 1. 활용 - indexDB 처럼 사용할 때 마다 무조건 호출이 필요한 경우. //호출 하는 함수 앞 async Function() .. 스레드, 프로세스, 멀티 태스킹 0. 스레드 - 실행의 단위 - 순차적으로 명령어 흐름이 흘러가는것 - 하나의 순차적인 코드 실행 1). 프로세스는 이러한 스레드가 1개 이상 1. 프로세스 - 작업의 단위 - 일종의 작업. 운영체제에서 볼때 실행중인 프로그램 - 작업 관리자 (ctrl + alt + del(or .)) 에서 실행중인 프로그램(프로세스) 를 보면 하나의 프로그램(ex. chrome) 이 여러개 실행중인 것을 볼 수 있는데. 이것을 멀티 프로세스라고 한다. 2. 멀티 태스킹 - 한번에 여러 프로세스를 처리 - 동영상을 볼 수 있는 프로그램인 media player 을 예로 들면 1). 영상 출력, 2). 음악 출력 => 2가지 작업 처리 하나의 프로세스 (media player) 에서 멀티 테스킹( 1). 영상 출력, 2).. Node.js 참고자료 - https://learn.microsoft.com/ko-kr/training/paths/build-javascript-applications-nodejs/ - https://codingapple.com/unit/nodejs-3-what-is-node-js/ 요약 - html 에 JavaScript 로 작업하던 중. 웹사이트 랜더링 성능 향상을 위해 V8 이라는 해석엔진을 만듬 ( = Node.js ) - 실행창(런타임 ~ 프로그램이 잘 돌아가도록 동작하는것), 브라우저 밖에서도 실행 가능 - 영문도 모르고 사용했던 npm install 할때. npm 이 기본 패키지 관리자. npm 쓰려면 Node.js 설치 필수 => JavaScript 를 사용하려면 Node.js 를 설치한 개발환경을 구축.. filter, forEach * 영어표기가 디폴트, 이하 한글표기 * Angular 기준 1. filter (함수) - 배열을 특정 조건으로 정제하여 일치하는 [i]번째를 출력함 interface 간식 { 견과류: string; 과일: string; } ... testArray: 견과류[] = [] ... this.testArray[0] = {견과류: '군밤', 과일: '바나나'} this.testArray[1] = {견과류: '땅콩', 과일: '사과'} //상수 tempData 는 tempArray 배열의 인자중, 견과류가 "밤" 일때 const tempData = this.testArray.filter(value => value.견과류 == '군밤'); console.log(tempData) 출력결과: "[{견과류: '군밤', .. 이전 1 2 3 4 다음
