본문 바로가기

Programming/TIL

 (33)
정규표현식 RegExp 오늘은 알고리즘 관련 문제를 대량 풀었는데, 그 중 새로 알게된 한 가지 개념에 대해 간단하게 적어보려 한다. 1. 정규 표현식 (RegExp) 정규 표현식의 영어식 축약어 (RegExp)의 정식 이름은 Regular Expression이라고 한다. 보통 이 표현을 '정규식'으로도 많이 부른다. 정규식이 뭐고 그 사용법이 궁금해서 계속 구글링하여 얻은 정보로는, 우선 정규식은 POSIX, PCRE 등 다양하게 존재한다는 것이다. * 프로그래밍 언어별로 사용되는 정규식 표현의 명칭들과 엔진들을 비교/정리해 놓은 사이트가 있다. 그 중 Javascript에서는 XRegExp 을 따른다는 것이다. (영어 원문) 정규식을 구성하는 문법들이나 메소드들은 굉장히 많고 아직 많이 익숙하지 않아 오늘 풀은 예제를 놓고..
Higher Order Function [고차함수] 2편 1. HOF [고차함수] 고차 함수 (higher order function)는 함수를 인자 (argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수 (caller)의 인자 (argument)로 전달되는 함수를 콜백 함수 (callback function)이라 한다. 고차함수가 사용되는 경우들은 아래와 같다. 1. 다른 함수를 인자로 받는 경우 (커리 함수) 2. 함수를 리턴하는 경우 3. 함수를 인자로 받고, 함수를 리턴하는 경우 1 - 2. 내장 고차함수 [Built-in HoF] 배열 내장 고차함수 filter() : 배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내는 (filter) 메소드이다. 한 가지 예로, 수(number)를 요소로 갖는 배열 중 짝수만 걸러내거나 ..
HTML 구성 전 와이어프레임 설계 및 Mock-up 구현 깔끔하고 단정된 구조의 HTML을 만들기 위해서는 아래의 단계를 거쳐야 한다. 1. HTML 구성 전 와이어프레임 설계 및 Mock-up 구현. 와이어프레임 (Wireframe)은 '골격'의 의미로, 단순한 도형만을 사용해 제품의 인터페이스를 시각적으로 묘사한 것을 말한다. 이런 작업 없이 바로 HTML을 작성한다는 것은 기초설계도 없이 건물을 짓는 것과 마찬가지다. 이렇게 간단한 레이아웃을 미리 작성함만으로 HTML을 효율적으로 작성할 수 있다. 그 후, 만들어진 와이어프레임을 토대로 HTML을 실제 작동되는 모습처럼 만드는 작업을 목업 (Mock-up)이라고 한다. 이 단계에서 우리는 서버에 연결시키거나, Javascript도 사용하지 않고, HTML 출력을 하나하나 입력을 해주는 작업을 하는 건데,..
Git 1. Git Git은 아주 작은 단위의 프로젝트부터 중요 프로젝트까지 그 어떤 작업이든 빠르고 효율적으로 다룰 수 있도록 해주는 누구에게나 열려있는 오픈 소스의 버전 관리 시스템 (Version Control System) 이다. 1 - 1. VCS VCS를 통해 버젼을 수정 및 저장을 할 수 있다. 이전 버젼으로 복원 시킬 수가 있다. 문제 원인 파악 및 추적이 바로 가능하다. 협력 및 Collaboration이 가능하다. 백업 용도로도 사용된다. * Github : VCS Social Platform for all git users. * Git과 Github는 마치 커피와 커피숍과 같다. 1 - 2. Local Repository / Remote Repository Git 중에서도 프로그래머로서, 가..
Linux CLI (Command Line Interface) 1. Linux CLI (Command Line Interface) Graphic User Interface (GUI) 와는 다르게, CLI는 마우스와 각종 UI 컴포넌트 대신에 표준 입출력 시스템 (Standard I/O) 을 통한 입력과 그에 따른 결과를 출력하는 형태로 나타난다. 컴퓨터의 시작은 GUI가 아닌 CLI 였다고 한다. 맥북을 사용하는 개발자라면 Terminal 이라는 툴이 익숙할텐데, 이 Terminal에서 우리는 CLI를 사용한다. ls : 'list' 의 약자로, 현재 위치한 디렉토리 (폴더) 안에 있는 파일들을 나열해준다. cd : 'change directory' 의 약자로, 다른 디렉토리로 이동할 수 있게 해준다. Ex., cd ~ => cd Desktop mkdir : 'ma..
Primitive & Reference, Scope & Closure 1. Primitive & Reference 원시 자료형 (Primitive type) 과 참조 자료형 (Reference type) 의 구분에 대해서 알아볼텐데, 자료형 각자 맞는 상황과 각자 할당할 때의 차이 또한 중요하니 이 또한 알아보자. 원시 자료형 : 원시 자료형의 값의 크기는 다르지만, 변수의 크기는 같다. 원시 자료형들은 'Call stack' 이라는 저장소에 담김. 원시 타입의 데이터 (Primitive type data: 원시 자료형) 은 객체가 아니면서 method를 가지지 않는 6 가지의 타입들이 있다. Ex. 6 가지 타입들: string, number, bigint, boolean, undefined, symbol, (null) * 이 중, bigint 와 symbol 은 특별한..
Array_Methods & Object 1. 배열 배열은 순서 (index) 가 있고, 값 (element) 으로 구성되어 있다. 이를 통해 배열을 조회 또는 변경이 가능한데, 배열 안에 배열이 있는 '이중 배열'인 경우에도, 동일 방법으로 할 수 있다. 아래의 예시를 보자. 1 - 1. 배열의 기초 메소드 배열에서 사용되는 용어들은 기본적으로 이런 것들이 있다. index : 문자열에서 사용했던 것과 비슷하게, 배열의 인덱스를 조회 또는 가져올 수가 있다. Ex., arr[i], arr[0] element : 배열 안의 것들을 요소 (element) 라고 부른다. length : 문자열에서의 사용법과 비슷하게 배열의 길이를 조회하는데 사용된다. push, pop push(el) 는 배열의 맨 마지막에 'el' 이라는 요소를 추가할 때 사용한..
querySelector & textContent 오늘 배운 내용은 짧게 정리해봤다. 해당 부분은 추후 배울 DOM 주제에서 더 살펴볼 예정이다. 핵심은, 아래의 방법, querySelector와 textContent를 활용하여 텍스트 조회를하고 텍스트 내용을 변경할 수 있다는 점이다. 1. querySelector document.querySelector를 활용하여 웹 페이지의 특정 엘리먼트 (Element) 를 선택/조회할 수 있다. 2. textContent textContent를 활용하여 선택한 엘리먼트의 콘텐츠(Content)를 고칠 수 있다. 두 가지를 동시에 사용할 수도 있는데, 이를 통해 꽤 재미있는 시도들을 해볼 수 있다. 예를 들어, 기사 제목의 일부를 수정하거나, 네이버 실시간 검색어 1위를 바꿔 볼 수도 있다. 물론, 콘솔창에서 이..

티스토리툴바