GRAY | 추천 알고리즘의 과학 저자

하고 많은 웹 프레임워크 ( 혹은 라이브러리 ) 중에서 리액트를 배워야 하는 이유는 너무나 간단하다. 첫 번째 이유는 전 세계에서 사랑받는 대중적인 웹 프레임워크이고, 두 번째 이유는 그만큼 많은 질문과 답변이 커뮤니티에서 오갔기 때문에 쉽게 도움을 받을 수 있다는 것이고, 세 번째 이유는 js, JSX에 대한 이해와 오늘 설명할 component, state, props 정도만 알면 바로 사용해볼 수 있기 때문이다. JSX ( JavaScript Xml ) 형태가 html과 유사한 문서 작성용 스크립트 언어이다. Babel ( 바벨 ) 이라는 컴파일러 ( 온라인에서 확인 가능 ) 를 통해 자바스크립트 언어로 변경된다. JSX에서는 특별하게 중괄호{} 를 통해 JavaScript 코드를 삽입할 수 있다...

OOP ( 객체 지향 프로그래밍 ) 은 말 그대로 객체 단위로 쪼개서 프로그래밍을 하자는 것이다. 어떤 이는 이 개념이 단순히 프로그램을 잘게 쪼개는 걸로 오해하여 너무 많은 클래스를 만들어서 협업하는 동료를 힘들게 하기도 한다고 한다. 자바스크립트에서는 너무나 많은 객체가 있다. 그래서 조금 다르게 표현하면 OOP를 이해하기 편할 거다. OOP in JavaScript ( 자바스크립트의 추상화 프로그래밍 ) 객체 지향 프로그래밍 이라는 말 자체가 Object Oriented Programming 을 직역한 거다. 좀 더 쉽게 이해하자면 그냥 현실 세계의 무언가를 추상화하여 부품단위로 쪼개 넣어준 뒤 하나로 합치듯 구성하는 것이다. 스마트폰을 예 들어 보자. 스마트폰을 구성하고 있는 보편적인, 공통적인 ..

어려운 표현은 최대한 필터링하고, 아주 쉽게 이해할 수 있도록 설명하자. 기본적으로 우리가 아는 함수는 변수를 파라미터로 받거나, 받지 않을 수 있다. 또, 파라미터를 받더라도 안쓰는 경우도 있다. 물론 이런 경우라면 파라미터를 굳이 받을 필요가 없겠지만. 그렇다면, 파라미터로 받아오는 변수는 무엇을 담고 있을까? 퍼스트 클래스 ( First Class Citizen ) 고차 함수는 파라미터로 함수를 받아온다. 머리가 아프다. 파라미터로는 변수만 오는 거 아니었어? 아래의 예시를 보자 const a = 1; // 변수 a에 숫자 1을 할당한다. const b = [1, 2, 3]; // 변수 b에 배열 [1, 2, 3]을 할당한다 const c = { key: 'value' }; // 변수 c에 객체 {..

지금까지 배우던 메소드는 결국 컨스트럭터를 가진 클래스의 함수이다. 클래스는, 일종의 템플릿인데 변수에 새로운 클래스를 할당받으면 클래스에 선언해둔 값을 사용할 수 있고 함수를 메소드처럼 적용할 수 있다. 당연히 Array()는 일종의 클래스이고, 그렇기에 배열을 선언하면 각종 메소드를 자유롭게 사용할 수 있다. 오늘은 이전에 작성해둔 메소드를 이용해 나만의 짭배열, Garray() 클래스를 만들어보았다 클래스 ( Class ) 클래스의 개념부터 시작하기에 앞서, 아래의 예시를 보자. 배열을 생성하는 Array()는 클래스이며, 클래스이기에 메소드를 추가하여 사용할 수 있다. Array.prototype.lalala = function() { console.log('lalala'); } let arr =..

클로저를 이해하는 데 오래 걸렸다. 그냥 딱 눈에 들어오는 게 아니라, 신경 써서 봐야 보였다. 근데 오늘 죽치고 보고 있으니까 제법 눈에 들어온다. 오늘은 스코프와 클로저에 대해 정리해보자. 시작하기에 앞서, 짧고 강렬하고 쉽게 이해할 수 있는 정리 함수를 선언하는 것은 연예인과 같다. 불러주지않으면 아무것도 하지 않는다. 연예인을 불러주면 ( 함수를 호출하면 ) 그 때에서야 방송에 연예인이 활동 ( 함수가 실행 ) 된다. 그래서 스코프나, 클로져를 구분할 때에 함수를 호출하는 부분부터 보면 이해가 쉽다. 아래의 예제를 호출부터 보도록 하자. var x = '유재석'; var y = '이효리'; var z = '비'; function 놀면뭐하니 (name) { // 3번: x가 name자리에 파라미터로..

메소드를 정리하다가, Koans 빡공했더니 스코프 ( Scope ), 클로져 ( closure ), 클래스 ( class ), 인스턴스 ( instance ), 상속 ( inheritance ) 등등 설명할 게 점점 늘어나는 걸 느꼈다. 특히, 클래스부터 상속까지의 개념을 하고 나니, 메소드를 설명할 때에 바로 클래스로 보여줬으면 기존에 사용하던 메소드처럼 사용하는 모습을 보여줄 수 있었을 텐데! 하면서 조금 아쉬웠지만, 처음부터 공부하는 사람이 보는 내용에 난데없이 클래스가 등장하면 혼란스러울 것 같아서 이번 포스트까지는 기존 방식대로 예시를 작성하겠다. 대신에 다음 포스트는 스코프와 클로져에 대해 포스팅하고 이후 클래스까지 설명을 하고 나면, 클래스로 이전에 만들었던 나만의 함수들을 만들어 보겠다! ..

이 글은 전편에 이어 문자열과 배열, 그리고 객체에서 유용한 각종 메소드를 이해하기 쉽게 설명해 놓은 글이다. 당연히 부족한 부분이 더 많을 수 밖에 없기때문에 자세한 내용은 링크를 통해 확인하자. 특정 메소드보다 실제로 어떤 문제를 해결할 때 사용하는 방법부터 시작해서 각종 메소드까지 정리해보겠다! (2) 여기서 작성한 메소드는 다음과 같다. 여기에 없다면, 다음 포스트를 확인하자. // 배열의 요소를 추가하거나 삭제하는 메소드 push() / unshift() / pop() / shift() // 두 개의 배열을 하나의 배열로 합치기 concat() // 배열 자르기 slice() Array.push() / Array.unshift() / Array.pop() / Array.shift() 배열에 새로..

이 글은 3일에 걸쳐 쌓인 각종 메소드를 적어뒀다가, 다시 한 번 찾아보며 정리한 글이다. 당연히 부족한 부분이 더 많을 수 밖에 없기때문에 자세한 내용은 링크를 통해 확인하자. 특정 메소드보다 실제로 어떤 문제를 해결할 때 사용하는 방법부터 시작해서 각종 메소드까지 정리해보겠다! 여기서 작성한 메소드는 다음과 같다. 여기에 없다면, 다음 포스트를 확인하자. // 문자열의 알파벳을 전부 대문자로 바꾸거나 소문자로 바꾸기 String.toUpperCase() / String.toLowerCase() // 문자열을 잘라 배열에 담기 String.split() // 빈 배열 찾기 빈 배열 찾기 // 배열인지 확인하기 Array.isArray(arr) // 배열 내부의 값 정렬하기 Array.sort([comp..

배열과 객체, 그리고 이를 다루는 각종 method는 JavaScript의 꽃이다. 어떤 상황에 어떤 메소드를 활용하느냐에 따라 코딩효율이 어마어마하게 차이가 난다!! 오늘은 객체와 배열에 대해 먼저 정리해보겠다. 내일은, 문제를 풀 때 사용했던 각종 method를 정리할 예정이다. 배열 ( Array ) 배열은 쉽게 말해 변수 혹은 상수의 묶음이다. 아래의 예를 보자. let array = [ 1, // typeof(1) === 'number' true, // typeof(true) === 'boolean' 'gray', // typeof('gray') === 'string' undefined, // typeof(undefined) === undefined { // object // typeof(obj..

코딩 기초 중 삽질의 시작을 알리는 반복문에 대해 학습했다. 반복문 지금 배우는 자바스크립트의 기초 반복문은 다른 언어와 똑같다. let num = 5; for( let i = 0; i < num; i++ ) { console.log('Hello World!) } /* * Hello World! * Hello World! * Hello World! * Hello World! * Hello World! */ 하지만 코플릿 문제 난이도가 좀 높은 편이다. 알고리즘에 익숙해지길 원해서일까? 알고리즘에서 다룰 문제들 중 쉬운 문제를 약간 변형하여 코플릿 문제로 넣어둔 게 좀 있었다. 페어로 진행하다보니 개발공부를 시작하신 지 얼마 안되신 폴빈님은 역시나 어려워 하셨다. (저도 처음 접했을 땐 이틀 밤샜어요. 저..