데브코스 2일차 모르는 것이 너무 많다...
- 프로그래밍 패러다임
- 명령형 프로그래밍과 선연형 프로그래밍
- 객체지향 프로그래밍과 절차지향 프로그래밍
- 자바스크립트 객체생성과 프로토타입
- 모듈
- 유니코드
- 정규표현식
프로그래밍 패러다임
📝 명령형 프로그래밍과 선언형 프로그래밍
명령형 프로그래밍은 무엇을 어떻게(HOW) 할 것인가에 가깝고,
선언형 프로그래밍은 무엇을(WHAT) 원하는 지에 가깝다.
외식을 하는 상황을 예시로 든다면,
- 명령형: 12번 테이블 자리가 비어있습니다. 우리 가족은 저 자리로 걸어가 앉을 것입니다.
- 선언형: 네명이 앉을 자리를 부탁해요.
명령형은 자리에 어떻게 앉을지 관심이 있고, 선언형은 무엇을 원하는지에 집중되어 있다. 그럼 네명이 앉을 자리는 누가 마련해주지?, 앉는 것은 안정해도 되나? 같은 의문이 생긴다.
사실 선언형 방식이 제대로 동작하기 위해서는 명령형으로 "어떻게"가 구현된 것들이 추상화되어 있어야 한다. 여기서 추상이란, 사물이 지닌 여러 측면 중 특정한 부분만 보는 것이며 이 상황에서의 선언형은 자리를 마련해주고 앉는 것들을 추상화 시킨 것이다.
아래 코드는 명령형과 선언형을 2의 배수를 출력하는 코드를 통해 살펴본 것이다.
// 명령형: 요구사항을 어떻게 해결해야 할 지 컴퓨터에게 명령을 내림
let a = [1,2,3,4,5];
for (let i=0; i<5; i++) { // i를 5까지 1씩 더하면서
if (a[i] % 2 === 0) { // i가 2의 배수가 맞다면
console.log(a[i]); // i 출력
}
}// 선언형: 해결방안은 컴퓨터에 위임한 후 필요한 요구사항(2의 배수)을 출력하라고 명령을 내림
[1,2,3,4,5]
.filter((item) => item %2 ===0) // 2의 배수를 골라
.forEach((item) => console.log(item)); // 출력Control Flow, Data Flow
위처럼 if,Then,for 등을 통해 데이터를 제어하는 명령형 프로그래밍을 Control Flow방식이라 말하며, 상태가 존재하지 않고, 재귀나 Pipe를 통해 데이터가 흘러가도록 하는 선언형 프로그래밍을 Data Flow방식이라 한다.
패러다임은 사고방식의 차이이며, 자바스크립트는 명령형과 선언형 프로그래밍이 모두 가능하기 때문에 굳이 나누지 않고 필요한 프로그래밍 방식을 사용하면 된다.
📝 객체지향 프로그래밍과 절차지향 프로그래밍
정의
객체지향 프로그래밍은 사람의 사고방식과 유사하며, 현실에 있는 것을 추상화 한 "객체" 를 통해 객체간 메시지를 주고받으며 통신하는 것이다.
절차지향 프로그래밍은 컴퓨터의 처리방식과 유사한 방식으로, 순차적인 처리가 중시되며 데이터 중심의 함수 구현 방식이다.
장단점
객체지향은 디버깅과 유지보수, 코드의 재활용이 쉽고 간편해 복잡한 프로그램에 적합하지만, 처리속도가 절차지향에 비해 느리다는 단점이 있다.
절차지향 함수는 처리속도가 빠른 방면, 실행순서가 정해져 있기 때문에 유지보수와 디버깅이 어렵다. 하지만 간단한 프로그램의 경우 절차지향이 더 간단하고 직관적일 수 있다.
자바스크립트의 객체생성과 프로토타입
// 생성자 함수
function person(name, age, feature) {
this.name = name;
this.age = age;
this.feature = function (like) {
console.log(`${like}를(을) 좋아합니다.`);
};
}
const middle = new person("김태중",26,"🍰");
const top = new person("김태상",29,"🍖");자바스크립트는 객체리터럴, Object, 생성자 함수 방식을 이용하여 객체를 생성할 수 있다.
자바스크립트의 객체만으로도 객체지향 프로그래밍이 가능하다고 하는데, 프로토타입은 왜 필요한걸까? 프로토타입에 대한 설명은 다른 포스팅을 통해 소개하겠다.
📝 모듈
개발하는 애플리케이션의 크기가 커지면 파일을 여러개로 분리해야 할 필요가 있는데, 이때 분리된 파일들을 각각 모듈(module)이라 부른다.
모듈로 파일을 분리하게 되면 스크립트간의 의존도를 쉽게 파악할 수 있고, 실행 순서를 쉽게 제어할 수 있다는 장점이 있다.
모듈에 export 지시자를 사용하면 외부 모듈에서 해당 변수나 함수에 접근할 수 있으며(모듈 내보내기), import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다(모듈 가져오기).
모듈과 컴포넌트
모듈과 컴포넌트는 자주 혼용되는데, 모듈은 설계시점, 컴포넌트는 런타임 시점에 의미있는 요소이다. 즉 모듈은 의식적으로 나눈 것이고, 컴포넌트는 나눠진 요소에 포함되어 실행되는 요소인 것이다.
모듈의 특징
- 항상 use strict로 실행된다
- 모듈레벨 스코프가 있기 때문에 import 하지 않는 한 서로 참조할 수 없다.
- 단 한 번만 평가된다
- differ 옵션을 넣지 않아도 지연실행이 되기 때문에, DOM 생성 후 실행된다
📝 유니코드
문자의 기본개념
- CSS(Coded Character Set) 코드화된 문자들의 집합. 아스키코드도 여기에 속함
- CES(Character Encoding Scheme): CCS를 8비트집합에 대응시키는 것. 흔히 말하는 인코딩에 속함. UTF-8, UTF-16...이 여기에 속함
- TES(Transfer Encoding Syntax): 인코딩한 문자가 프로토콜을 타고 전송 될 때 공백 등으로 제약이 있을 수 있기 때문에 변환하는 것
유니코드 특징
- 유니코드는 2바이트지만, Surrogate Pair방법으로 4바이트의 영역까지 사용할 수 있는데, 자주 사용하는 영역인 BMP 내부와 외부의 영역의 문자를 합쳐 사용한다.
- 유니코드에서는 알파벳이든 한글이든 2바이트로, 1 length를 갖는다.
- BOM(byte Order Mark): 어플리케이션이 바이트순서를 알게 해주는 것으로 인코딩을 바꾸다 BOM 때문에 깨지는 경우가 많다.
📝 정규표현식
외국에서 오랜만에 한국 사람을 만났을 때 느낌이랄까.. 드디어 아는 얼굴이 나왔다. 코딩테스트에서 엄청 짧게 풀었다 싶은 코드들에는 정규표현식이 들어가 있는데, 높은 가독성에 비해 매우 느리다는 단점이 있다.
정규표현식을 쓸 일이 있다면 rubular.com, mozilla.org를 참고해보자
데브코스 선택과제: 정규표현식을 이용한 개미수열 풀기
function toAnt(num){
function DFS(L, n){ // 개미수열 재귀
if(num===L) console.log(n);
else{
DFS(L+1,ant(n));
}
}
DFS(0, 1);
function ant(n){ // 개미수열화
const regExp = /(.)\1*/g;
const answer = String(n).match(regExp)
.reduce((a,b)=>a+`${b.slice(0,1)}${b.length}`,"");
return answer
}
}
toAnt(5); // 112213 출력됨오늘의 생각
TIL이 강의요약으로 변질되는 느낌이다.
모르는 것이 많아서 그런걸까..? 기억에 더 잘남기를 바랄 뿐이다.
프로토타입은 너무 이해가 안돼서 주말의 나에게 패스..
오늘 진유림 개발자님의 깃,깃허브 특강이 있었는데 너무 오래 켜둔것이 문제였는지, 줌의 발적화 때문인건지 노트북이 자꾸 멈추다 꺼져버렸다.
🤬
노트북님을 모시기 위해 선풍기를 틀어주느라 git 관련 강의는 제대로 듣지 못했지만, 그래서인지 개발자라는 사람에 대한 부분을 더 많이 보게 된 것 같다.
잘해보려 노력한 곳에서도 떨어지고 화장실에서 몰래 울 정도로 힘든 시간을 보냈지만, 덕분에 성장했고 이제는 더 좋은 코드를 고민하는 개발자가 되었다는 것이 왠지 멋있기도 하고 위안이 되기도 했다. 울고 싶을 정도로 힘들어도 결국 성장한다는 뜻이니까.
또 더 좋은 개발씬을 기대한다는 말이, 지금 이 교육에 힘써주시는 모든 사람들의 생각과 같다는 점에서 개발에 대한 애정이 좀 더 두터워졌다.
개발공부 하길 잘했다.
참고사이트: 박스여우(프로그래밍 패러다임), 모던자바스크립트 튜토리얼(모듈),
