content.json

{"pages":[{"title":"About","text":"Have a beautiful beautiful day!","link":"/about/index.html"}],"posts":[{"title":"m개 중 n개를 선택하여 만들 수 있는 모든 경우의 수","text":"이 알고리즘을 생각하게 된 이유알고리즘 문제를 풀다보면, 배열의 요소들 중에서 몇 개를 선택하여 배열을 만드는 알로리즘을 짤 수 있다면 문제를 효율적이고 쉽게 풀 수 있다는 생각이 들었고 이 알고리즘을 생각하게 되었다. 인터넷에서 n개를 선택하여 만들 수 있는 모든 경우의 수를 추출하는 알고리즘을 찾아보았지만, 잘 이해가 되지않아 직접 만들어보게 되었다. 컨셉이진법의 On, Off 의 개념과 수의 연속성을 활용하였다. 배열의 요소들 중 포함한 요소를 1 (On) , 포함하지 않는 요소를 0 (Off) 이라고 표현한다. 예를 들어, 요소의 수가 3인 배열 [1, 2, 3] 중 2개의 요소로 만들 수 있는 배열은 이진법으로 110, 101, 011 이렇게 3가지 이다. 또한 이 방법은 수의 연속성을 활용하여 모든 경우를 빠짐없이 추출할 수 있다. 바로 앞 문장에서 나왔던 예시로 생각해보면, 1부터 7 (< 2의 3제곱수) 수를 이진법으로 표현한 뒤 1이 2번 들어가는 수를 추출하면 된다. 장점이 방법은 배열의 요소의 수와 n의 수에 상관이 없고 빠짐없이 모든 경우의 수를 추출할 수 있다. 코드 구현 시 고려 사항들 011은 처럼, 자리수를 모두 표현 해주기 위해 앞에 1을 붙인 수(2의 원하는 자리수 제곱)부터 범위를 시작한다. (이 의미없는 1은 나중에 제거한다) 원하는 n만큼 1이 들어가 있다면 추출한다. 1이 들어간 인덱스를 원래 배열의 인덱스로 사용해 원하는 요소가 들어간 배열을 만든다. 이 알고리즘을 활용해 푼 문제John and Mary want to travel between a few towns A, B, C … Mary has on a sheet of paper a list of distances between these towns. ls = [50, 55, 57, 58, 60]. John is tired of driving and he says to Mary that he doesn’t want to drive more than t = 174 miles and he will visit only 3 towns. Which distances, hence which towns, they will choose so that the sum of the distances is the biggest possible to please Mary and John- ? Example: With list ls and 3 towns to visit they can make a choice between: [50,55,57],[50,55,58],[50,55,60],[50,57,58],[50,57,60],[50,58,60],[55,57,58],[55,57,60],[55,58,60],[57,58,60]. The sums of distances are then: 162, 163, 165, 165, 167, 168, 170, 172, 173, 175. The biggest possible sum taking a limit of 174 into account is then 173 and the distances of the 3 corresponding towns is [55, 58, 60]. The function chooseBestSum (or choose_best_sum or … depending on the language) will take as parameters t (maximum sum of distances, integer >= 0), k (number of towns to visit, k >= 1) and ls (list of distances, all distances are positive or null integers and this list has at least one element). The function returns the “best” sum ie the biggest possible sum of k distances less than or equal to the given limit t, if that sum exists, or otherwise nil, null, None, Nothing, depending on the language. With C++, C, Rust, Swift, Go, Kotlin return -1. Examples: 123ts = [50, 55, 56, 57, 58]` `choose_best_sum(163, 3, ts) -> 163xs = [50]` `choose_best_sum(163, 3, xs) -> nil (or null or ... or -1 (C++, C, Rust, Swift, Go)ys = [91, 74, 73, 85, 73, 81, 87]` `choose_best_sum(230, 3, ys) -> 228 코드 구현123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354function chooseBestSum(t, k, ls) { if (ls.length < k) return null; //seleted var bArr = new Array(); var allCase = new Array(); var sumArr = new Array(); //FROM pow(2, ls.length) TO Math.pow(2, ls.length + 1) for ( var a = Math.pow(2, ls.length), i = 0; a < Math.pow(2, ls.length + 1); a++, i++ ) { var b = a; for (bArr[i] = []; b >= 1; ) { bArr[i].unshift(b % 2); b = Math.floor(b / 2); } } //2D array by Binary Method for (var i = 0; i < bArr.length; i++) { bArr[i].shift(); allCase[i] = new Array(); for (var j = 0; j < bArr[i].length; j++) { if (bArr[i][j] === 1) { allCase[i].push(ls[j]); } } } //all cases array for (var i = 0; i < allCase.length; i++) { if (allCase[i].length === k) { var sum = 0; for (var j = 0; j < allCase[i].length; j++) { sum = sum + allCase[i][j]; } sumArr.push(sum); } } sumArr.push(t); sumArr.sort(function(a, b) { return a - b; }); //sorted the array in ascending order if (sumArr[sumArr.indexOf(t) + 1] === t) { return t; } else if (sumArr[sumArr.indexOf(t) + 1] > t && sumArr.indexOf(t) === 0) { return null; } else { return sumArr[sumArr.indexOf(t) - 1]; }}","link":"/2019/05/22/all_cases/"},{"title":"Vaild braces - 괄호 짝찾기","text":"문제괄호들로 이루어진 string을 입력받아서, 괄호들의 순서가 올바른지 판단해주는 함수를 완성해주세요. 괄호들은 ()와 {}와 [], 이렇게 총 3가지 종류가 있습니다. 괄호들은 자기와 짝이 맞는 괄호를 만나야만 합니다. 다음의 예를 봐주세요. 12345678\"(){}[]\" => True\"([{}])\" => True\"(}\" => False\"[(])\" => False\"[({})](]\" => False@param {string} braces@return {boolean} 문제 이해괄호들이 이루어진 string을 입력받아서, 그 소, 중, 대괄호가 모두 유효한지 검사하는 알고리즘을 짜는 문제이다. 해결 방법1여러가지 괄호 string의 경우를 생각 해보고, 귀납적으로 해결방법을 구상했다. 그 중 괄호가 유효할 수 있는 최소한의 조건을 추렸다. “(){}[]” => True, 전체 괄호 string의 길이가 짝수이어야 한다. “(}” => False, 특정괄호의 개수와 그 짝 괄호의 개수가 같아야 한다. “[(])” => False, 짝괄호 사이의 공간 값이 짝수이어야 한다. 코드 구현1123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566function validBraces(braces) { var checking; var arrS1 = []; var arrS2 = []; var arrM1 = []; var arrM2 = []; var arrL1 = []; var arrL2 = []; //1. 전체 braces길이가 짝수 인지 확인 if (braces.length % 2 === 0) { function check(brace, saveArr) { while (position1 !== -1) { var position1 = braces.indexOf(brace, position1 + 1); if (position1 !== -1) saveArr.push(position1); //brace 가 들어있는 인덱스로 배열 만들기 } } check(\"(\", arrS1); check(\")\", arrS2); check(\"{\", arrM1); check(\"}\", arrM2); check(\"[\", arrL1); check(\"]\", arrL2); //2. 특정 괄호와 그 짝괄호의 개수가 같은지 확인하기 function checkArrLength(array1, array2) { if (array1.length === array2.length) { return 1; } else { return 0; } } var cAlS = checkArrLength(arrS1, arrS2); var cAlM = checkArrLength(arrM1, arrM2); var cAlL = checkArrLength(arrL1, arrL2); //3. 짝괄호 사이의 공간 값이 짝수인지 확인 function difference(Arr1, Arr2) { if (Arr1.length === 0) { checking = 0; return checking; } else { for (var i = 0; i < Arr1.length; i++) { if ((Arr2[i] - Arr1[i]) % 2 === 1) { checking = 0; return checking; } else { checking = -1; return checking; } } } } var S = difference(arrS1, arrS2); var M = difference(arrM1, arrM2); var L = difference(arrL1, arrL2); //2,3 을 모두 만족할 경우 true if (S + M + L === 0 && cAlS * cAlM * cAlL === 1) { return true; } else return false; } return false;} 결과 분석112345validBraces(\"}}]]))}])\"); //falsevalidBraces(\"())({}}{()][][\"); //falsevalidBraces(\"{}{[{}}]({})[]\"); //truevalidBraces(\"{}{[{}}]({})[]\"); //truevalidBraces(\"[(])\"); //false 통과1해결 방법 2 - stack 자료구조 이용, Last-In First-Out(마지막으로 들어가서 먼저 나온다) str(괄호들로 이루어진 문자열)을 왼쪽부터 오른쪽까지 탐색한다. 왼쪽이 닫힌 ‘( or [ or {‘ 괄호를 만나면 배열에 쌓는다. 오른쪽이 닫힌 ‘) or ] or }’ 괄호를 만나면 배열의 마지막 요소와 매칭되는지 비교한다. 매칭이 되면 배열의 마지막 요소를 지운다. 그렇지 않다면, 탐색을 계속한다. 탐색이 끝난 후, 배열에 남은 요소가 있다면 ‘false’를, 남은 요소가 없다면 ‘true’를 return 한다. 123456789101112131415161718192021222324function matchingBrackets(str) { var checkArr = []; for (var i = 0; i < str.length; i++) { if (str[i] === \"(\" || str[i] === \"[\" || str[i] === \"{\") { checkArr.push(str[i]); } else { if ( (checkArr[checkArr.length - 1] === \"(\" && str[i] === \")\") || (checkArr[checkArr.length - 1] === \"[\" && str[i] === \"]\") || (checkArr[checkArr.length - 1] === \"{\" && str[i] === \"}\") ) { checkArr.pop(); } } } if (checkArr.length === 0) { return true; } else { return false; }}matchingBrackets(\"(){{()[]}}[(){}]\"); // truematchingBrackets(\"[(){[{}]}([)[]]]\"); // false","link":"/2019/06/11/valid-braces/"},{"title":"Concatenated, 반복 문자열 문제","text":"The string is called prime if it cannot be constructed by concatenating some (more than one) equal strings together. For example, “abac” is prime, but “xyxy” is not(“xyxy”=”xy”+”xy”). Given a string determine if it is prime or not. Input/Output[input] string sstring containing only lowercase English letters [output] a boolean value true if the string is prime, false otherwise 문제이해전체 문자열이 “어떤 문자열로 ‘반복되어 연결되어 있지 않다면 true”를 반환하고, “반복되어 연결 되어있다면 false”를 반환하는 문제이다. 예를 들어, “abac”라는 문자열은 true를 반환하고, “xyxy”는 “xy”로 반복되어 연결 되어 있음으로 false를 반환한다. Clever 해결방법이 문제에 대한 다른 사람들의 짧고 멋진 풀이법 두가지를 정리해 보고자 한다. 첫번째, 작은 문자열의 반복으로 이루어지지 않은 문자열의 관점에서 본 해결방법123function primeString(s) { return (s + s).indexOf(s, 1) == s.length;} 문자열을 2개를 연결시킨 후 그 문자열을 찾으면, 당연히 그 인덱스는 연결부분이 나오게 된다.ex “1234567” + “1234567” = “1234567 1234567작은 문자열의 반복으로 이루어진 문자열은, 문자열이 2개를 연결시킨 문자열에 포함이 되는 모양을 볼 수 있다.ex “123123”+”123123” = “123123123123123” or “123123123123123” 12345배운점1. indexOf( ) 메서드- 문자열 전체도 검색 할 수 있다.- indexOf( a, **number**) 쉼표다음 부분은 number 인덱스 부터 a를 검색하라는 의미이다.|2. 스킬1 : 주어진 문자열을 **늘리는** 변형도 해볼 것 두번째, 작은 문자열의 반복으로 이루어진 문자열의 관점에서 본 해결방법이다.123456function primeString(s) { for (let i = 2; i <= s.length; i++) { if (s.slice(0, s.length / i).repeat(i) == s) return false; } return true;} “123123” + “123123” = “123123123123123” or “123123123123123”전체 문자열을 특정조각으로 자른 뒤 그 조각은 반복한 값과 원래의 문자열을 비교한다. 123배운점3. 스킬2 : 내가 **원하는 값을 만든 후**, 원래의 것과 비교4. if 구문 statement가 한 줄일 경우, a block statement ({})를 쓰지 않아도 된다. 나의 해결방법내가 생각한 문제 풀이법은 코드가 비효율적으로 길다. 문제를 빨리 풀어 레벨을 올리고 싶은 마음에 깊이 생각하지 않고 오류가 날 때마다 오류난 조건들을 if절로 커버하면서 풀었기 때문이다. 이제는 알고리즘 문제 해결 실력을 늘릴 수 있도록, 효율적 해결법에 대해 충분히 고민한 후, 코드작성을 해야겠다. 해결법‘전체 문자열 배열로 만든 후 배열을 두조각으로 나눠 a배열과 b배열을 비교하기’이때 for문을 사용해서 a배열에 한 문자씩 넣고, a배열과 같은 길이 다음 인덱스 부터 그 길이만큼을 자른 후(b배열)a.join값과 bjoin값을 비교한다a.join값과 b.join값이 같다면, 다음 a길이만큼을 전체배열에서 잘라 비교하여, 마지막 배열까지 같은지 비교하였다. 전체 배열 abababababsakldfjaslkdfja배열 ab라면b배열은 ab/ab/abababsakldfjaslkdfj, ab","link":"/2019/05/03/concatenated/"},{"title":"Prototype","text":"자바스크립트의 Prototype 이란, 어떠한 객체가 만들어지기 위한 그 객체의 모태(원형)를 말한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었다. Prototype은 크게 두가지 특징을 가지고 있다. 생성자 (constructor) 와 쌍을 이룬다. Instance 와 연결되어 있다. (Dunder proto와 prototype chain) 첫번째, 생성자 (constructor) 와 쌍을 이룬다.마치 “부부”처럼, 생성자가 있으면 Prototype은 반드시 존재한다. 생성자에는 아내인 Prototype에 대한 정보를 “기본적”으로 가지고 있다. 그 정보(prototype의 reference)를 prototype 이라는 속성에 저장 한다. 반대로 아내 prototype도 남편의 정보(constructor의 reference)를 constructor라는 속성에 저장하고 있다. 아래 이미지에서 파란색 줄은 Object라는 생성자의 prototype 속성에 저장된 정보를, 노란색 줄은 생성자 아내(prototype)의 constructor 속성에 저장된 정보를 보여준다. 각각의 속성의 값들은 그 자체로 아내(prototype)와 남편(constructor)을 가리킨다. 12Object === Object.prototype.constructor;//object를 '남편'이라고 한다면 object.prototype.constructor는 '남편의 아내의 남편'임으로 남편을 의미한다. 두번째, Instance 와 연결되어 있다.(Dunder proto와 prototype chain)Instance - “An object created by a constructor is an instance of that constructor.” 생성자함수에 의해 만들어진 객체를 인스턴스 라고 한다. 생성자와 프로토타입의 자식 이라고 생각할 수 있다. 12var hello = new Object();// 'hello' 는 Object와 Object.prototype의 인스턴스이다. Dunder proto ( ** proto ** ) 는 인스턴스가 직접적으로 엄마인 prototype의 정보를 담아두는 속성이다. 아래 그림에서 첫번째 주황색 줄을 보면, 생성자 함수로 hello 라는 (정확히는 hello 라는 참조를 갖는) 인스턴스를 만들었다. 그 후에 그 인스턴스 hello 를 출력 해보면, hello 객체 안에 ** proto ** 라는 속성이 들어있는 것을 볼 수 있다 - 세번째 주황색 줄. 그 속성 Dunder proto ( ** proto ** )의 값은 엄마의 정보(prototype의 reference)임을 알 수 있다 - 주황색 직사각형. Instance에 어떤 속성을 호출하면, Instance는 자신의 객체에서 “먼저” 속성값을 찾는다. 만약 속성값이 자신의 객체 안에 없다면, 연결된 Prototype (엄마, 생성자의 아내) 에서 속성값을 찾아 불러오고, 연결된 prototype에 찾는 속성이 없다면, Prototype의 Prototype(할머니)에서 속성값을 찾는다. 이 일련의 현상을 Prototype Chain 이라고 한다. 프로로 타입 체인을 타고 올라가다 최고 조상인 Object.prototype 에서 멈추게 된다. Mitochondrial Inheritance VS Prototype ChainObject.prototype을 보니 Mitochondrial Eve가 떠오른다. Prototype에서 “상속” 받았다는 표현을 쓰기도 하는 이유도 내가 Prototype Chain에 대해 알게 되면서 미토콘드리아 모계 “유전”을 떠올렸던 이유와 같을 것이다. 하지만, Prototype Chain 현상은 상속과 유전이라는 개념과는 매우 다르다. Prototype 에서 속성값을 찾아 불러올 때 Instance는 그 속성값을 가지고 있지 않기 때문이다. Instance는 단지 Prototype에 속성들에 대한 접근 권한을 갖고 있다고 생각할 수 있고, 찾고 있는 속성에 접근하여 그 값을 불러오는 것이다. Prototype Chain - 면접“class” or “Inheritance” VS “delegation” - you don’t know js속성값을 자기 객체로 가져와서 사용하는 것이 아니라는 점에서 “상속”이라는 표현보다 “행동 위임” or “Behavior Delegation”이라는 용어가 Prototype Chain 현상을 더 잘 표현한다.","link":"/2019/06/03/prototype/"},{"title":"Hexo Icarus Theme 커스터 마이징","text":"Hexo는 블로그 프레임워크이며, 다양한 테마를 제공합니다. 그 테마 중 현재 사용 중인 Icarus라는 테마를 어떻게 커스터 마이징 하였는지 정리하고자 합니다. Icarus 테마는 다양한 위젯을 제공하며, 이 위젯을 켜고 끌 수 있습니다. themes/icarus/_config.yml 파일에서 커스터마이징을 할 수 있습니다. 화면 분할 (위젯 설정)1234# Widget nametype: recent_posts# Where should the widget be placed, left or rightposition: {right} 현재 이 블로그처럼 article 공간을 좀더 크게 활용하고 싶다면 위젯을 한쪽으로 몰아 배치하면, 자동으로 article 부분의 공간이 넓어집니다. post 내용을 일정 부분 숨기기READ MORE을 표시하려면 자신이 작성한 post에 <!-- more --> 을 넣어주면 됩니다. 이 태그가 들어간 글의 앞부분은 Home 페이지에 노출이 됩니다. thumbnail 넣기자신이 작성한 post에 thumbnail:{이미지 주소}를 넣어 설정 가능 합니다.저는 깔끔하고 차분한 분위기 블로그를 위해 thumbnail을 숨겨놓았는 데, 어떻게 해야 할지는 현재도 고민 중입니다. <참고>https://github.com/ppoffice/hexo-theme-icarus/issues/60","link":"/2020/03/23/hexo-icarus-theme/"},{"title":"context","text":"함수가 호출될 때마다 각각의 컨텍스트가 생성됩니다.위 예제 코드에서 bar 함수가 먼저 호출 되었습니다. bar_함수_컨텍스트가 생성됩니다. 12345678'bar_함수_컨텍스트': { 변수객체: { arguments: [], variable: [{'object'}] //초기화 후에는 [{'object': 'masks'}]가 됩니다. }, scopeChain: ['foo 변수객체', '전역 변수객체'], this: window} 변수객체의 variable에 ‘object’가 들어간 것과 scopeChain에 bar 변수객체가 추가된 것을 볼 수 있습니다. 동일한 방식으로 foo 함수 컨텍스트도 생성됩니다. 1234567891011'foo_함수_컨텍스트': { 변수객체: { arguments: [{'subject' : 'We'}], variable: [] }, scopeChain: ['foo 변수객체', '전역 변수객체'], this: window}`변수객체`의 `arguments`에 'object'가, `scopeChain`에 `foo 변수객체`가 추가된 것을 볼 수 있습니다. `bar`함수안에서 `foo`함수가 실행 되더라도 스코프 체인을 타고 도달할 수 있는 변수객체에는 `bar변수객체`가 없습니다. 따라서 예제 코드의 답은 'We need(s) masks!'가 됩니다.","link":"/2020/03/24/context/"},{"title":"this keyword","text":"this가 객체를 가리킨다 하지만, 어떤 객체를 가리키는지는 this를 사용하는 해당 함수를 “어떤 방식으로 호출하느냐” 에 따라 결정된다. 123456789101112var name = \"bow-wow\";var obj = { name: \"ken\", log: function() { console.log(this.name); }};obj.log(); // 'ken'var fn = obj.log;fn(); // 'bow-wow' this 를 사용하는 해당 함수를 호출하는 방식에는 4가지가 있다. 1. Regular function call - 일반 함수 실행 방식1-1. in non-strict modenon-strict mode 에서 일반 함수 실행방식으로 this 를 사용한 함수를 호출했을 경우에 this 를 global object를 가리킨다. 1234567var name = \"ken\";function foo() { console.log(this.name); // 'this' === global object (브라우저상에선 window 객체)}foo(); 1-2. in strict mode (찾아보고 공부하기)123456789\"use strict\";var name = \"ken\";function foo() { console.log(this.name); // 'this' === undefined}foo(); 2. Dot Notation - 점 호출 방식Dot notation 방식으로 this 를 사용한 함수를 호출했을 경우에 this 는 점 앞부분의 객체를 가리킨다. 12345678910var age = 100;var ken = { age: 35, foo: function foo() { console.log(this.age); }};ken.foo(); ken.foo() 가 Dot notation방식으로 실행되었음으로 this.age 의 this 는 ken 객체를 가리킨다. 따라서 console.log 값은 35가 나온다. 3. Explicit binding - 분명하게 this를 지정하는 방식Function.prototype.call, Function.prototype.bind, Function.prototype.apply 3-1. call, apply1234567891011var age = 100;function foo() { console.log(this.age);}var ken = { age: 35, log: foo};foo.call(ken);//foo 함수는 실행되고, `this`는 첫번째 인자 'ken'으로 지정된다. 12345678910111213var age = 100;function foo(a, b, c) { console.log(this.age); console.log(arguments);}var ken = { age: 35};foo.call(ken, 1, 2, 3, 4, 5, 6, 7, 8, 9); //35foo.apply(ken, [1, 2, 3, 4, 5]); //35 !! call과 apply 차이점은 면접 질문으로 자주 출제12function.call(thisArg, arg1, arg2, ...) //thisArg는 필수요소function.apply(thisArg, [argsArray]) //thisArg는 필수요소 call과 apply는 모두 this 값을 명시해주는 인자를 첫 번째 인자로 가지며 return 값도 this 가 지정된 함수를 호출하는 것으로 동일하다. 하지만, 이 둘의 차이점은 call은 “많은 인자”를 가질 수 있지만, apply는 “최대 2개의 인자”를 갖을 수 있고 “두 번째 인자는 배열”이여야 한다는 것이다. 3-2. bind공부 중/ 4. ‘new’ keyword 를 사용해서 실행한 함수12345678910function Person() { // this = {}; this.name = \"ken\"; // this = { name: 'ken' }; // return this;}var ken = new Person();console.log(ken); new 연산자를 사용하면 빈 객체가 생기고, this 는 이 객체를 가리킨다. 틀린 예제 정리예제1.1234567891011121314var age = 100;const something = { age: 1, speak: function() { console.log(this.age); // ? }};const butler = { age: 10, serve: function(cb) { cb(); }};butler.serve(something.speak); 1-1. 정답butler.serve 에서 something.speak 를 일반함수 호출방식으로 cd() 호출하고 있음으로 this 는 global object 를 가리키므로 답은 100 이다. 1-2. 나의 오답 이유내가 헷갈렸던 부분은 butler.seve 의 인자 부분에 대한 해석이었다. something.speak 를 Dot Notation 방식으로 호출하려 한다면 something.speak() 가 올바르다. something.speak 는 속성에 대한 값을 나타낸다. 예제2.1234567891011121314151617function programmer() { this.isSmart = false; this.upgrade = function(version) { this.isSmart = !!version; work(); };}function work() { if (this.isSmart) { window.alert(\"I can do my work! I am smart!\"); // ? }}var programmer = new programmer();// THINK: What should happen?programmer.upgrade(1.1); 2-1. 정답work 함수안의 this 가 어떤 객체를 가리키고 있는 지 묻는 문제이다. work() 는 일반함수 호출방식으로 실행되었음으로 work 함수안의 this 는 global object를 가리킨다. 글로벌 객체에 isSmart 라는 속성은 정의되지 않았음으로, window.alert 는 실행되지 않는다. programmer.upgrade의 키 값인 함수가 ‘1.1’를 인자를 갖고 실행된다. upgrade 함수안의 this 는 programmer 를 가리킨다. programmer 의 속성 isSmart 에 !!1.1 인 true 를 할당한다. (!!version 은 값을 불리언값으로 바꿔주는 역할) work 함수를 일반호출 방식으로 실행한다. work 함수안의 this는 글로벌 객체를 가리킴으로 if 조건문을 만족 하지않아 alert 메서드는 실행되지 않는다.","link":"/2019/06/03/this-keyword/"},{"title":"컵 돌리기 게임","text":"세 개의 뒤집힌 컵 중 한 개의 컵 안에 열쇠가 있습니다. 당신이 열쇠를 찾기 위해 컵을 들어올리려는 순간, Drogon이 빠르게 컵의 위치를 뒤섞기 시작합니다. 컵의 교환이 끝났을 때, 열쇠가 들어있는 컵을 찾아야 합니다. 컵의 위치는 인덱스로 표현됩니다. (0부터 시작) 키가 들어있는 컵의 인덱스와 교환된 컵의 인덱스를 나타내는 배열(swaps)을 입력으로 받습니다. * 예를들어, 열쇠가 들어있는 컵의 처음 위치가 0이고 컵이 교환되는 순서가 다음과 같다면 [(0, 1), (1, 2), (1, 0)] 첫 교환때 열쇠가 있는 컵은 0 에서 1로 이동하게 됩니다. 두번째 교환때 열쇠가 있는 컵은 1 에서 2로 이동하게 됩니다. 마지막 교환때 1에 있는 컵이 0으로 가지만, 열쇠가 있는 컵에는 영향을 미치지 않습니다. 따라서 열쇠가 있는 컵의 위치는 2가 됩니다. * swaps = [[0, 1], [1, 2], [1, 0]] * firstPosition = 0 * findKey(firstPosition, swaps) == 2 * 컵의 갯수는 최소한 두 개 이상입니다. 1function findKey(start, swaps) {} 문제 이해각 과정 중 시간이 가장 많이 든 과정이다. 배열의 합으로 이루어진 swaps 배열의 의미를 이해하는 부분이 생소하였다. 컵을 돌리기 게임을 상상했다. swaps 배열 안의 각각의 요소들은 한번의 교환을 의미한다. 예를 들어 요소 0번인 [0, 1]은 0번의 컵을 1번의 컵과 교환하는 것을 의미한다. start는 키가 들어있는 처음 컵의 위치를 나타낸다. 해결 방법 배열에서 index() 메서드를 이용해 가장 먼저 등장하는 키가 들어있는 컵의 위치를 찾는다. 그 요소 배열의 컵의 위치를 바꿔준다. 두번째에 있을 경우 첫번째로, 첫번째에 있을 경우 두번째로 바꿔준다. 배열의 길이가 끝날때 까지 계속 키가 들어있는 컵의 위치를 찾고 위치를 바꾸는 작업을 계속한다. 코드 구현123456789101112131415161718function findKey(start, swaps) { if (swaps.length === 0) { return start; } else { for (var i = 0; i < swaps.length; i++) { if (swaps[i].indexOf(start) != -1) { var find = swaps[i].indexOf(start); //find는 열쇠 위치의 인덱스 if (find === 0) { find += 1; } else { find -= 1; } //이제 find는 바뀐 위치의 인덱스 start = swaps[i][find]; //바뀐 위치의 열쇠가 들어간 컵 숫자 } } return start; }} 결과 분석12345678910111213141516171819\"빈 swaps가 주어지면 처음 위치를 반환해야 한다.\";findKey(3, []); // 3(\"컵이 2개일 때, 열쇠가 있는 컵의 위치를 반환해야 한다.\");findKey(1, [[0, 1]]); // 0(\"컵이 3개일 때, 열쇠가 있는 컵의 위치를 반환해야 한다.\");findKey(0, [ [0, 1], [2, 1], [0, 1]]); // 2(\"컵이 10개일 때, 열쇠가 있는 컵의 위치를 반환해야 한다.\");findKey(4, [ [0, 9], [9, 3], [3, 7], [7, 8], [8, 2], [4, 5]]); // 5 컵의 개수에 상관없이 원하는 컵의 위치를 찾아낸다.","link":"/2019/05/08/find-key/"},{"title":"홀수번 나타나는 정수 찾기","text":"주어진 배열에서, 홀수 번 나타나는 정수를 찾아주세요. 단, 홀수 번 나타나는 정수는 항상 한개뿐입니다. 예를들어, [1, 1, 1, 1, 10] 에서 1은 4번 나타나고, 10은 1번 나타나므로, 홀수 번 나타나는 정수는 10 입니다. 문제 이해주어진 배열에는 숫자들이 요소로 들어있고, 그 숫자 중 홀수번 나타나는 정수를 찾는 문제이다. 해결 방법첫번째 요소를 찾을 정수로 설정하고, 원래 배열에서 삭제하고, 다른 배열 b에 넣는다. 원래 배열에서 그 정수를 찾고 원래 배열에서는 삭제, b 배열에 넣는다. b 배열의 길이가 홀수인지 검토하고 홀수이면 반환한다. 코드 구현1234567891011121314151617181920function findOddInt(array) { for (var i = 0; i < array.length; ) { var arr = []; var a = array[i]; //찾을 정수 설정 arr.push(a); //arr에 찾을 정수 넣기 array.shift(); //찾을 정수 배열에서 삭제 for (var j = 0; j < array.length; ) { var b = array.indexOf(a); //배열에서 찾은 정수의 인덱스 if (b !== -1) { arr.push(a); //동일한 정수로 이루어진 새로운 배열 설정 array.splice(b, 1); } else { j = array.length; } } if (arr.length % 2 === 1) { return a; } }} 결과 분석12345\"test case 1\", findOddInt([20, 1, -1, 2, -2, 3, 3, 5, 5, 1, 2, 4, 20, 4, -1, -2, 5]); // 5;\"test case 2\", findOddInt([9]); // 9;\"test case 3\", findOddInt([1, 1, 1, 1, 1, 1, 3, 3, 3]); //3;\"text case 4\", findOddInt([1, 1, -1, -1, -1, 7, 7, 9, 9, 11, 11]); // -1;","link":"/2019/05/08/find-odd-int/"},{"title":"객체를 생성자 함수처럼 사용하기, Object.create(obj)","text":"1Object.create(obj); obj을 프로토타입으로 가질 객체를 생성하시오return 값은, 명시된 객체를 프로토 타입으로 가지고, 명시된 속성들을 가지는 새로운 객체 Syntax1Object.create(obj, propertiesObject); Ojbect.create(프로토타입이 될 대상, 속성들의 세부사항들을 설정할 수 있는 객체) 참고 - propertiesObject (Optional parameter) Use ExamplepropertiesObject : It is optional parameter. It specifies the enumerable properties to be added to the newly created object.","link":"/2019/07/14/create/"},{"title":"this 를 원하는 객체와 연결하기, call, apply, arguments","text":"1function.call(object); 의미: function이라는 함수가 실행될 때 그 안의 this가 object를 가리키도록 해 Syntax12function.call(object, argument1, argument2, arguments3 etc);` 실행할함수.call(함수안의 this가 가리킬 객체, 실행할 함수에서 받아올 인자들, , , )arguments들은 적는 것은 옵션사항이다. 1function.apply(object, [arg1, arg2, arg3...]); 실행할 함수.apply(함수안의 this가 가리킬 객체, 실행할 함수에서 받아올 인자들의 집합)arguments의 집합을 적는 것은 옵션사항이다. 1function.arguments; return 값은 function의 arguments 속성!은 an Array-like object 유사배열이다.따라서 arguments속성을 배열의 속성들과 매서드를 모두 자유롭게 사용하고 싶다면, Array.from(arguments)를 사용하면된다. arguments를 배열로 바꿔주어야 한다. 1Array.from(arguments) 의미: Array를 만들어라, 유사배열 arguments 로부터 온return값은 arguments 유사배열의 각 요소를 요소로 하는 배열 <참고> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call","link":"/2019/07/14/call/"},{"title":"원하는 요소 배열에서 모두 찾기","text":"1234567891011var indices = [];var array = ['hi', 'b', 'hi', 'c', 'hi'];var element = 'hi';var idx = array.indexOf(element);for(;idx !== -1;){ indices.push(idx); idx = array.indexOf(element, idx + 1);}console.log(indices);//[0, 2, 4]; arr.indexOf(searchElement, fromIndex) fromIndex부분은 fromIndex 부분부터 searchElement를 찾으라는 뜻이다. fromIndex가 음수라면, 배열의 처음부터 searchElement를 찾게 되고, fromIndex가 배열의 길이보다 크거나 같다면, -1이 반환된다. <출처> https://developer.mozilla.org","link":"/2019/05/03/Finding-all-the-occurences-of-an-element/"},{"title":"2020 BLOG 방향","text":"회사가 결정된 후, 일을 하기 시작 전 남는 시간동안, 블로그를 정리하고 이전하고 있습니다.이전 포스팅들을 하나씩 보다 보니 많은 생각들이 교차합니다.프로그래밍을 공부하기 시작하며 배운 기술, 용어에 대해 단순히 정리한 포스팅도 있고, 그 개념들을 나름대로 해석하여 나만의 경험을 넣어 쓴 글도 있습니다.사실은 블로그 이전 작업을 하며, 단순 내용 정리나 너무 기초적인 내용을 다룬 포스팅들은 걸러내려고 했습니다.하지만, 그 부분들도 저의 히스토리를 볼 수 있다는 점에서 조금은 부끄럽지만 남겨두기로 하였습니다. (몇 개는 지워야 할 것 같습니다🤫) 이제는 단순 내용정리 보다는 내 생각과 해석이 담긴 글의 비중을 높이려고 합니다. 단순히 어떻게 구현했는 지 보다는 구조를 파악하여 어떻게 작동하는 지에 대해 설명하는 글을 쓰려고 노력할 것입니다. (아직은 너무 부족하지만 구조파악을 연습하면 나아질 것이라고 생각합니다.) 문장도 조금 더 깔끔하게 쓰도록 노력할 것입니다. 아직은 포스팅 하나 쓰는 시간이 많이 걸리지만 조금씩 줄일 수 있을 거라고 기대합니다. 구직 동안, 면접과 과제, 코딩 테스트를 통해 여러 개발자 분들의 피드백을 받으며, 그동안 배운 개념들이 명료해졌습니다. 그 개념들을 블로그에 정리해 나가려고 합니다. 2020년 3월, 코로나 바이러스로 인해 마스크를 쓰고 다니는 요즘, 건강에 감사하며.","link":"/2020/03/24/2020-Blog/"},{"title":"Object Constructor - 생성자로 객체 만들기","text":"객체 생성자(Object Constructor)는 비슷한 객체를 무수히 만들어낼 수 있다. cf. 객체 리터럴로 객체를 생성할 수도 있다. var dog = { name: ‘메시’, breed:’푸들’, weight: ‘6kg’} 객체 생성자 만들기1234567function Dog(name, breed, weight) { //객체 생성자 특징 1. a function, 2.name with Upper Case this.name = name; //3. 'this' Keywords this.breed = breed; this.weight = weight; //4. return nothing} 객체 생성자 특징 객체 생성자는 함수이다. 생성자 함수명은 일반적으로 대문자로 시작한다. this 키워드를 사용한다. 생성자 함수는 아무것도 반환하지 않는다. 생성자 사용법과 new 연산자(new Operator)12345678910function Dog(name, breed, weight) { this.name = name; this.breed = breed; this.weight = weight;} //객체 생성자 만들기var messi = new Dog(\"메시\", \"푸들\", \"6kg\");//객체 생성자 사용하여 객체 만들기 - 아래 작동방식의 예시var fido = new Dog(\"피도\", \"진돗개\", \"30kg\");var ace = new Dog(\"에이스\", \"닥스훈트\", \"1kg\"); 작동방식 🔥 new 연산자가 새로운 빈 객체를 만든다. new는 this가 방금 새롭게 만든 빈 객체를 가리키도록 만든다. 객체 생성자 Dog함수를 호출하고, ‘메시’, ‘푸들’, ‘6kg’을 인자로 전달한다. 함수의 블럭이 호출되고, 아까 만든 빈 객체의 속성에 값들이 할당된다. messi가 그 객체의 참조 변수가 된다. 예시로 만들어진 객체들1234567891011121314151617181920messi 객체{ name: '메시', breed: '푸들', weight: '6kg'}fido 객체{ name: '피도', breed: '진돗개', weight: '30kg'}ace 객체{ name: '에이스', breed: '닥스훈트', weight: '1kg'} <참고> HeadFirst Javascript","link":"/2019/05/27/Object-Constructor/"},{"title":"DOM, Document Object Model 이란?","text":"HTML을 작성할 때에는 HTML 콘텐츠를 다른 HTML 콘텐츠 내에 캡슐화하여 문서를 작성한다. 1234<html> <head></head> <html></html></html> 이를 통해 Tree로 표현 가능한 계층 구조가 만들어진다. 브라우저는 HTML 문서를 로딩할 때, 이 계층구조 (Tree)를 해석하여 마크업이 어떻게 캡슐화 되었는 지를 보여주는 노드 개체(객체) 트리를 생성한다. 123해석, 변환HTML -------------> 노드 개체들의 Tree 구조인 DOMby 브라우저 DOM은 자바스크립트를 사용해 이 문서에 대한 스크립트 작성 (삭제, 추가, 바꾸기, 이벤트 처리, 수정)을 위한 프로그래밍 인터페이스를 제공한다. DOM은 원래 XML 문서를 위한 API였지만, HTML 문서에서도 사용 되도록 확장되었다. 노드 개체노드의 사전적 의미는 ‘나무줄기의 마디’ 혹은 ‘인체 관절 부근의 절’ 이다. 노드 개체 트리인 DOM을 하나의 나무라고 보면, 그 마디 각각을 노드라고 할 수 있다. 즉, DOM Tree 구조에서 데이터의 상하위 계층을 나타내는 위치의 항목이다. Node, 생성자 함수통상적인 DOM Tree의 각 노드 개체는 생성자 함수 Node 로부터 속성과 메서드를 상속 받는다. 여기서 생성자 함수인 Node 는 노드 개체 와 구분하기 위해 영어로 표기하였다. 123456789101112131415161718192021 null | |.__proto__ | Object.prototype | |.__proto__ | Node.prototype | |.__proto__ | Element.prototype | |.__proto__ |HTMLElement.prototype | |.__proto__ |HTMLDivElement.prototype 다시 말하면, 모든 노드 유형은 Node로 부터 속성 및 메서드를 상속 (정확하게는 위임) 받으며, 그 Node는 Object.prototype으로 부터 속성 및 메서드를 상속 (위임) 받는다. 123456Object < Node < Element < HTMLElementObject < Node < AttrObject < Node < CharacterData < TextObject < Node < CharacterData < commentObject < Node < Document < HTMLDocumentObject < Node < Document < DocumentFragment 문서 내의 노드 유형에 따라 Node 개체를 확장한 하위 노드 개체 / 인터페이스 가 추가로 존재한다. 위의 목록은 가장 일반적인 노드 인터페이스에 대한 브라우저에서 구현된 상속 모델들이다. 노드 개체를 다루기 위한 Node 속성 및 메서드 childNodes firstChild lastChild nextSibling nodeName nodeType nodeValue parentNode previousSibling appendChild() clondeNode() compareDocumentPosition() contains() hasChildNodes() insertBefore() isEqualNode() removeChild() replaceCild() 노드 인터페이스에서 제공되는 속성 및 메서드 외에, document, HTMLElement, HTML*Element 인터페이스와 같은 하위 노드 인터페이스에서도 수많은 관련 속성 및 메서드가 제공된다.","link":"/2019/06/26/what-is-DOM/"},{"title":"this란 무엇일까?","text":"“그래서, this가 뭔가요?”“this는 해당함수를 어떤 방식으로 호출하느냐에 따라 결정 됩니다. blur blur blur…”“그래서, this가 뭔가요?” 면접에서 this에 대해 한참을 설명하고 나서 들었던 질문입니다. 저는 this를 단순히 객체를 가리키는 것 이라고만 생각하고 있었습니다. 면접 후, this에 대해 좀더 자세히 공부하였고, 머릿속에 있던 자바스크립트의 개념들과 이것(여기서의 이것은?)을 연결하여 이해 할 수 있었습니다. 아래의 내용들은 제가 this에 대해서 공부하면서 함께 공부했던 내용들을 정리해놓은 것입니다. 주로 ZeroCho 님의 블로그를 보고 공부하였습니다. Execution Context (실행 컨텍스트)실행 컨텍스트를 이해하면서 this를 자연스럽게 이해할 수 있었습니다.this뿐 아니라 Scope, Closer, Hoisting 등 자바스크립트의 필수적인 개념들을 하나의 그림으로 이해할 수 있었습니다. 실행 컨텍스트는 코드가 실행되는 문맥이라고 생각할 수 있습니다. 우선, 실행 컨텍스트의 흐름을 이해해야 합니다. 처음 코드를 실행하면 모든 것을 관리하는 전역 컨텍스트가 생깁니다. 함수 호출 시 마다 컨택스트가 하나씩 생깁니다. 그 컨텍스트 안에 변수객체, Scope Chain, this 가 생성됩니다.변수객체는 함수의 인자인 arguments와 해당 스코프의 변수인 variable을 포함합니다. 컨텍스트 생성 후, 함수가 실행됩니다.이때 함수에서 사용되는 변수들은 먼저 변수 객체 안에서 그 값을 찾고 없다면 스코프체인을 따라 올라갑니다. 함수 실행이 종료되면 해당 컨텍스트는 사라집니다. 페이지가 종료되면 전역 컨텍스트는 사라집니다. 컨텍스트를 객체로 이해하기이 코드에서 무엇이 console로 찍힐까요? 123456789101112var object = 'chocolate';function foo(subject) { console.log(subject + ' need(s) ' + object + '!');}function bar() { var object = 'masks'; foo('We');}bar(); 컨텍스트를 이용해 하나씩 설명해보겠습니다. 처음 코드 실행시, 전역 컨텍스트가 생깁니다. 12345678'전역_컨텍스트': { 변수객체: { arguments: null, variable: [] }, scopeChain: ['전역 변수객체'], this: window} 여기서 this를 확인할 수 있고, 아래와 같은 규칙을 가집니다. this는 따로 설정하지 않으면 기본적으로 window로 설정이 됩니다. (wow!🤭) new 키워드나 bind를 통해서 this를 설정해 줄 수 있습니다. (wow!🤭) this에 대한 답을 얻었습니다. 예제에 대한 이어지는 설명은 다른 포스트에 정리하겠습니다. <출처>ZeroCho 님의 블로그: https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0 this에 대한 총 정리this에 대한 현상들과 함께 정리해 보겠습니다.영어에서 ‘this’는 문맥(context)에 따라 가리키는 값이 달라집니다. 자바스크립트의 this도 마찬가지 입니다. this는 기본적으로 window 객체로 설정이 되어있습니다. (브라우저에서 코드가 실행된다면!)그래서 일반 호출 방식(예를 들어, foo())으로 함수를 호출하면 this는 window 가 됩니다. 하지만 점 호출 방식(예를 들어, messi.getAge())으로 함수를 호출하게 되면 함수 컨텍스트가 생성되고 this는 점의 앞부분 객체으로 설정됩니다.한마디로 문맥이 달라지게 되는 것입니다. 이전에 다른 포스트에서 정리해놓았던 예제를 컨텍스트와 함께 설명해 보겠습니다. 12345678910var age = 100;var messi = { age: 1, getAge: function getAge() { console.log(this.age); }}messi.getAge(); getAge 함수 컨텍스트에 대해 위와 같은 방식으로 설명해 보겠습니다. 12345678'getAge_함수_컨텍스트': { 변수객체: { arguments: null, variable: null }, scopeChain: ['getAge 변수객체', '전역 변수객체'], this: messi} 여기서 this가 messi 객체로 설정됩니다. 따라서 this.age의 console 값은 1이 찍히게 됩니다. call, apply, bind 를 이용해서 this와 원하는 객체를 연결시킬 수 있습니다.call, apply, bind에 대해서는 이전 포스트, this 를 원하는 객체와 연결하기, call, apply, argument에 정리해 놓았습니다. 123foo.call(messi, arg1, arg2, ...);foo.apply(messi, argsArray);foo.bind(messi, arg1, arg2, ...); new keyword를 이용해서 this를 설정할 수 있습니다.new keyword에 대해서는 이전 포스트, Object Constructor - 생성자로 객체 만들기에 정리해 놓았습니다. 12345678910function Dog() { var name = 'messi'; this.age = 1;}var name = 'max';var age = 15;var obj = new Dog();console.log(obj.age); //1 맺음말자바스크립트의 기본 동작들에 대해 공부하면서, this에 대해 모호했던 개념들이 사라졌고, 다른 다양한 개념들도 정리될 수 있었습니다. 특히 Closure개념에 대해 다시금 깨닫게 되었습니다. 이것은(여기서의 이것은?) 다음번에 정리해 보려고 합니다. <참고> https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0 https://codeburst.io/all-about-this-and-new-keywords-in-javascript-38039f71780c 끄적끄적정리해 보다, 정리해보다둘다 맞는 표현이군요. ‘어디 한번 해보겠다는 거야?’와 같이, ‘대들어 맞겨루거나 싸우다’를 뜻하는 말인 ‘해보다’는 한 단어이므로 붙여 쓰는 것이 맞습니다. 한 단어 ‘해보다’의 쓰임이 아닌 경우, 본용언과 보조 용언의 결합으로 보아 ‘해 보다’로 띄어서 쓰는 것이 원칙입니다. 다만, 이때 ‘해 보다’는 한글 맞춤법 제47 항에 따라 ‘해보다’로 붙여 쓰는 것이 허용됩니다. 예를 들어, ‘이거 네가 한번 해 볼래?’와 같이 ‘해 볼래’를 띄어 쓰는 것이 원칙이며 ‘해볼래’로 붙여 쓰는 것도 허용됩니다. <출처>국립국어원: https://www.korean.go.kr/","link":"/2020/03/24/what-is-this/"},{"title":"배열 특정 요소 삭제","text":"코딩문제를 풀때, 특정 요소를 삭제하는 방법은 자주 사용된다. 아래는 배열의 특정 요소 삭제 방법과 내가 자주 실수하는 포인트들을 정리하였다. 다음은 배열의 특정 요소 삭제 방법 이다. 1배열이름.splice(인덱스, 1); 간단한 사용 예시 1234var array = [1, 2, \"ipad\", 3, 4, 5];var apple = array.splice(2, 1);//array = [1, 2, 3, 4, 5]//apple = ['ipad'], apple은 배열, array 타입이 된다 실수하는 포인트 주의사항 slice가 아닌 splice 문자열에서는 사용이 불가능하다 splice는 기존 배열또한 변형이 일어나며, slice는 기존배열에 변화를 주지 않는다 (2019.5.2 update) —참고 Object의 속성을 지우는 메서드는 delete이다 123var object = { Brand: \"Samsung\", ModelNumber: \"2098d0dkd0\" };delete object.ModelNumber; //delete_객체명.속성명//object = {Brand: 'Samsung'}","link":"/2019/04/30/Remove-the-Element-from-an-Array/"},{"title":"Intro","text":"책을 읽고 인상깊었던 부분, 느낀점들을 기록해놓으려고 합니다.이 기록들이 저의 이상과 현실을 연결해주는 데 도움이 되었으면 합니다.","link":"/2020/08/29/Books-intro/"},{"title":"Git이란 무엇일까","text":"내용은 계속 수정 및 업데이트 예정markdown도 적응중 Git이란 무엇일까 _ 이력 저장소Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. (Wikipedia) 깃이란, 한마디로 이력 저장소 이다. 개발자들이 협업을 효율적으로 할 수 있도록 변경사항들을 추적할 수 있는 시스템이다. 변경사항은 소스코드 뿐아니라 파일의 변화도 포함한다. Git의 컨셉 _ 가지git은 master라는 큰 중심 줄기가 있고, 여러 개의 Branch들을 치는 나무 이미지를 떠올리면 된다. 여기서 Branch는 격리된 개별 원격 저장소 보면 된다. 개발자1은 작업하여 branch1에 자신의 작업물을 저장하고, 개발자2는 작업하여 branch2에 자신의 작업물을 저장하고, 개발자3는 작업하여 branch3에 자신의 작업물을 저장하고, 개발자4는 작업하여 branch4에 자신의 작업물을 저장하고, 개발자5는 작업하여 branch5에 자신의 작업물을 저장하고…이렇게 각자 개별 작업이 끝나면 각 Branch 들을 큰 중심줄기와 합한다 (Merge). 정리하면,Git은 큰 중심 저장소(master)에 다른 여러사람들이 작업할 개별 작은 저장소(branch)를 만들고, 개별 작업이 끝날때 마다 큰 중심저장소에 병합 Merge 하여 협업을 효율적으로 도울 수 있다. 개별 원격 저장소 생성 (master가 없을 경우 자동생성된다) 작업 후 결과물 저장 개별 원격 저장소의 작업물들을 master에 병합 Git 만들기 _ 새롭게 혹은 복제하여git을 만들기 위해선 git은 새롭게 만들거나, 기존의 저장소를 복제 하여 만들 수 있다. git을 생성하면 로컬 저장소와 원격 저장소가 생성된다. 다음은 git 생성 2가지 Terminal commands 이다. 1$ git init //현재 속해있는 폴더안에 새로운 git저장소가 만들어 진다. 1$ git clone <위치> //저장소를 복제하여 받아온다. <위치> 부분에는 로컬경로를 넣거나, 원격서버의 저장소경로를 넣을 수 있다 (예 https://gitlab.com/~) Git이 제공하는 로컬 저장소 이해하기 _ 중간에 준비영역을 거친다(Index)개발자1이 작업하여 branch1(개별 원격 저장소)에 자신의 작업물을 저장할 때, 깃이 제공하는 로컬 저장소 (Local Repository)에서 개별 원격 저장소로 작업물을 옮기는 과정을 거친다. ‘’깃이 제공하는 로컬 저장소(Local Repository)’’개발자 1이 작업하던(in workingspace) 작업물은 Index(준비영역)을 거처 깃이 제공하는 로컬 저장소에 저장된다. Workspace — Index — Local Repository 다음은 로컬 저장소까지 파일들을 추가, 확정하기 위한 Terminal commands이다. 1. Workspace to Index1$ git add <OPTION> 위의 명령어를 사용하면, Index에 add 할 수 있다 2. Index to Local Repository1$ git commit -m <DESCRIPTION> 위의 명령어를 사용하면, 확정된 파일을 로컬 저장소에 commit 시킬 수 있다 3. Local Repository to Remote Repository (Branch)1$ git push origin <BRANCH NAME> 위의 명령어를 사용하면, 로컬 저장소에 있는 파일들을 개별 원격저장소로 push 시킬 수 있다 git add <option> git add -A 아래경우 모두 포함 할 때 git add . 새 파일과 수정된 파일이 있을때 git add -U 수정된 파일과 삭제된 파일이 있을 때 (새로운 파일은 없을때) git commit -m <DESCRIPTION><DESCRIPTION>이 부분에는 설명을 적을 수 있다. (코멘트 같은 느낌)","link":"/2019/05/02/what-is-git/"},{"title":"SVG로 그림 그리는 효과 구현 - 1탄","text":"Circular Progress Bar를 구현하는 방법에 대해 정리해보려고 합니다.Apple Watch activat ring, Donot 그래프, iPhone Timer, 음악앱에서 많이 보이는 재생시간 progress bar 등의 많은 곳에서 사용되고 있습니다. 여러가지 방식이 있겠지만, 제가 찾은 가장 단순한 방식은 SVG를 이용해서 구현하는 것이였고, 그 방식에 대해 정리해보겠습니다. 원리는 간단합니다.SVG의 path를 동그란 모양으로 으로 그려주면(그려주는 효과를 내면) 됩니다. 먼저, 직선을 그리는 효과 및 구현을 간단히 정리해보겠습니다.SVG의 path의 stroke 기능을 이용할 수 있습니다.stroke의 점선 간격을 조절하여(정확하게는 점선의 실선부분의 위치를 조절하여) 구현할 수 있습니다. 점선 A(1000px 실선, 1000px 빈선(?) 1000px 실선, 1000px 빈선(?))을 상상해봅니다.추가로 눈에 보이는 path 길이는 1000px로 정해져 있다고 상상합니다.마치 1000px 가로 길이의 상자에 들어가 있다고 말입니다.그 상자 안에는 거대한 점선 A가 천천히 왼쪽에서 오른쪽으로 움직입니다.우리가 보는 관점에서는 선이 오른쪽에서 왼쪽으로 그려지는 것처럼 보여질 것입니다. 머릿속으로 코드를 구현해 봅니다. 시작점 설정: 실선 부분의 시작 위치가 1000px (1000px 가로 길이의 상자에서는 아무것도 없는 것처럼 보임) 끝점 설정: 실선 부분의 시작 위치가 0px (0px 가초 길이의 상자에서는 1000px의 실선의 전체가 보임) 이 둘 연결을 애니메이션 으로 연결하면 되겠네. from(아무것도 보이지 않음), to(실선이 모두 채워진 상태)keyframes 이 알아서 중간 frame 들을 연결 시켜줌 https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes 그럼 실제 코드로 정리해보겠습니다. 12<svg class=\"svg-box\"><path class\"path\" d=\"M0,200,L1000,200 \"/></svg> //시작점(좌표처럼 생각) 0px, 200px //끝점 1000px, 200px 1234567891011121314151617181920212223242526272829303132.svg { width: 1000px; height: 100px; //viewBox로도 설정할 수 있습니다. background-color: red;}.path { stroke: black; stroke-width: 10px; stroke-dasharray: 1000px; //dasharray로 실선과 빈선을 모두 지정할 수 있습니다. //- value 가 하나인 경우, (e.g) stroke-dasharray: 50px, 50px짜리 실선과 빈선으로 이루어진 점선 //- value 가 두개인 경우, (e.g) stroke-dasharray: 50px, 10px, 50px짜리 실선과 10px 짜리 빈선으로 이루어진 점선 animation: draw 3s infinite; animarion-timing-function: linear;}@keyframes draw { from { stroke-dashoffset: 1000px; //점선 전체의 시작점을 설정합니다. 이 경우에는 \"오른쪽으로\"으로 \"1000px 이동\" 한 곳이 \"전체 점선의 시작점\" 입니다. //\"dashoffset\" 는 빈선이 아닌, 실선의 시작점(전체 점선의 시작점)을 의미합니다. } //중간의 일어나는 frame들은 keyframes이 알아서 만들고 컨트롤 합니다. to { stroke-dashoffset: 0px; //점선 전체의 시작점이 0px으로 설정 }} 다음은 위의 값을 실행시킨 것 입니다.https://codepen.io/letsdoyi/pen/ZEWybya 제가 헷갈렸던 부분은 dashoffset의 의미를 이해하는 것 keyframes 이 중간 frame 들을 연결 시켜주는 원리를 도입 하는 것이였습니다. 처음에는 전체의 시작점이 1000px ~ 0px로 이동한다고 생각하여 선의 움직임을 반대로 예상하였습니다. 그렇다면, 마지막으로 선을 그리듯한 효과는 어떻게 내는 것인지 정리 해보겠습니다. path stroke 이용 stroke-dasharray 이 path 길이와 같도록 설정 stroke-dashoffset(시작점 설정)를 path 길이와 0으로 설정하여 애니메이션 대입 참고로, path 길이는 DOM의 getTotalLength라는 메서드를 이용할 수 있습니다.path 길이 측정은 {SVGPathElement}.getTotalLength() 이 값을 이용 다음은 직선이 아닌 곡선을 그리는 듯한 느낌을 주는 코드입니다.https://codepen.io/letsdoyi/pen/XWdgRXm 2편에서는 circular progres bar 구현(+ svg 만드는 법)에 대해 정리해 보겠습니다.","link":"/2020/08/29/circular-progress-bar-implement/"},{"title":"SVG로 그림 그리는 효과 구현 - 2탄","text":"1편에 이어서,Circular Progres Bar 구현에 대해 설명해보겠습니다. svg path 점선을 이용해서 그리는 효과를 구현했다면,원형으로 된 path svg를 만들어서 동일한 애니메이션을 구현하면 될 것입니다. 그렇다면, 어떻게 svg를 만들 수 있을까요?여러가지 방법이 있을 수 있습니다. svg 문법을 익혀 원하는 모양을 만들기https://css-tricks.com/svg-path-syntax-illustrated-guide/ 공개된 svg generator 를 이용하기https://codepen.io/anthonydugois/pen/mewdyZ 일러스트레이터를 이용해 그려서 svg로 추출 마지막 3번째 방법에 대해 설명 하겠습니다.(물론 1번째 방법(svg 문법 익히기)을 조금 알면 모양을 짐작할 수 있습니다.) 마지막 3번째 방법은 일러스트레이터가 필요합니다. circle을 그립니다. compound path 를 make 합니다. 면을 선으로 만듭니다.이때 결과물이 원 circle로 보이지만, path style(fill property)을 이용하여 우리가 생각하는 선으로 제대로 보이게 할 수 있습니다. svg 로 export 시킵니다. showCode 를 눌러서 svg 코드를 볼 수 있습니다. 1234<svg viewBox=\"{복사한 코드의 viewBox}\"> //(e.g) viewBox=\"0 0 22 22\" <path class=\"path\" d=\"{복사한 코드를 넣기}\" /></svg> 12345678910111213141516.path { fill: none; stroke: #833ab4; stroke-width: 3px; stroke-dasharray: 56.6px; animation: dash 10s linear;}@keyframes dash { from { stroke-dashoffset: 56.6px; } to { stroke-dashoffset: 0; }} 12var $path = document.querySelector(\".path\");console.log($path.getTotalLength()); 완성!다음은 위 코드를 이용해서 만든 circular progress bar 입니다.https://codepen.io/letsdoyi/pen/dyMPyWy 시간이 된다면, svg 문법을 익혀 원하는 모양을 만들기에 대해 정리한 포스팅을 하려고 합니다.언제가 될지는 모르겠습니다.","link":"/2020/08/29/circular-progress-bar-implement-2/"},{"title":"함께 자라기, 애자일로 가는 길 - 김창준","text":"“우리가 정말 매일매일 함께 자랄 수 있을까” “우리”라는 단어와 “자랄 수(성장)” 에 꽂혀서 집게된 책 자라기1만시간: 자신의 기량을 향상시킬 목적으로 반복하는 수련 시간을 말하는 것“의도적수련 Deliberate Practice”이 매우 중요 학습을 최대로 향상 피드백을 짧은 주기로 얻는것 실수를 교정할 기회가 있는것 수파리- 검도 불교 용어우선 규칙을 지키고규칙을 깨뜨리고규칙 자체를 넘어선다 신뢰를 쌓는 공유인가 신뢰를 깎는 공유 인가신뢰자산 높은 조직은 커뮤니케이션 효율이나 생산성이 높다.신뢰자산 - 조직원들간에 높은 수준의 신뢰가 기반 신뢰를 쌓는 상식적 방법 : 투명성과 공유, 인터렉션But 정말 신뢰가 쌓이는가?(공유조건별 신뢰도 변화 실험,측정도구 Subjective Value Inventory)한가지 작업물, 최고 작업물 공유: 신뢰도 떨어짐 why?상대방에게 최고 작업물이 아닐것 같은 불안감(방어적)솔직한 의견내는 것도 꺼림듣는사람도 방어적임 느낌상대방의 부정적의견, 하나의 작품 = 나, 나에대한 공격, 자기효능감 하락 복수개 프로토타입 작업물 공유: 신뢰도 높아지고, 성과도 굿 객관성의 주관성품질이란 누군가에게 가치가 되는 것이다.고품질을 얻으려고 노력하는 사람들은 ‘인간’에 대한 이해가 필수적 감정을 배제할 수 없다.감정과 의사결정을 연결하는 특정 뇌영역에 손상을 입은 환자들에 대한 연구 논리 문제, 높은 IQ 테스트 점수 결정과 관련된 인지적 작업에서 문제 - 식당 결정 같은 사소한 결정도 하지 못함 의사결정을 하는 과정에 감정적이고 직관적인 부분이 큰 역할을 하고 있으며, 그런 감정적 부분이 배제된다면 의사결정을 제대로 할 수 없다. 쾌속 학습팀지금 당장하지 않는다면 장차 할 확률은 절반이하로 떨어집니다. 일단 30분만 업무 개선을 기도해 보는 겁니다.학습속도를 놓이는 게 얼마나 도움이 될지. 워드 커닝햄 명언“작지만 유용한 프로그램을 매일 작성할 것을 추천합니다” 프로젝트 확률론“관심사의 섞임(mingling of concerns)을 통해 서로에 대해 엄청 나게 많은 것을 매우 빨리 배울 수 있기 때문입니다. 이런식으로 학습한 지식은 관리자나 혹은 누구든 딱한사람이 모델링한 것의 위험을 피할 수” 애자일 도입 성공 요인 분석전문가팀은 무섭고 두렵더라도 중요한 일이라면 그 일을 안하는 리스크를 인식하고 꾸준히 시도한다는 점 “두려워도 중요하다면 시도해봐야하지 않겠는가” 애자일을 애자일스럽게 도입하기불확실한 것에 대한 확실한 전략은 정해진 수순을 따르는 것이 아니라 곁에 있는 사람과 함께 주변을 탐색하고 조금 나아가고 확인하고를 반복하면서 우리의 현 맥락에 맞는 좋은 전략들을 스스로 만들어 나가는 것","link":"/2020/08/30/cooperative-learning/"},{"title":"Vanilla Coding Bootcamp Prep 과정 후기","text":"2주 뒤면, 8주 동안의 “바닐라 코딩 프렙” 과정이 모두 끝나게 된다. 수업들을 통해 배우고 느꼈던 부분들에 대해 정리해 보고자 한다. 수업과 과제에 대하여수업은 중간에 쉬는 기간을 제외하고 총 8주 정도 진행되었고, 주마다 과제가 1개씩 주어졌다. 과제는 알고리즘을 푸는 문제 또는 간단한 앱을 직접 만들어보는 것들이었다. 과제는 다음 수업 내용을 예습 할 수 있거나 그 주의 수업내용을 복습할 수 있는 내용으로 구성되어 있었다. 과제를 하다 안 풀리는 내용들은 수업을 통해 알아갈 수 있기 때문에, 수업 시간이 너무 재미있고 기다려졌다. 수업과 과제와의 연결관계에 대해서는 수강 기간 중 가장 기억에 남은 순간들과 연계시켜 적어보면 좋을 것 같다. 기억에 남았던 첫 번째 순간은 처음으로 알고리즘을 사용해 화면에서 작동되는 슬라이더를 만들었던 순간이었다. 매번 알고리즘 문제는 풀긴 하는데, 앱에서 언제 어떻게 사용되는지는 잘 알지 못했다. 과제를 하던 중 처음으로 내가 짠 알고리즘은 이렇게 이용하면 되는구나 하고 알게 되었을 때 신기하기도 하고 기뻤던 기억이 난다. 두번째는 수업 시간에 데이터들을 어떻게 관리하는 지 기초적인 관리법을 배웠을 때인데, 마지막 과제(조금더 복잡한 앱 만들기) 중 가장 궁금했던 부분이기도 해서 너무 재미있었다. 이렇게 과제를 통해서 궁금증을 갖고 수업에 참여하게 되고, 수업에서 힌트를 얻을 수 있었기 때문에 수업 내용이 더 잘 이해되고 기억에 오래 남는 것 같다. 수업에서 배웠던 가장 기본적이고 중요한 것들프렙 수업을 수강하면서 가장 좋았던 점은 자바스크립트 이론 외에 많은 부분을 배울 수 있었다는 점이다. 모든 직업이 그렇겠지만, 그리고 개발자라는 직업에 대해서 아직 자세히는 알지 못하지만, 특히 개발자라는 직업의 특성상 계속해서 새로운 기술들과 변화에 노출될 수밖에 없기 때문에, 새로운 기술들을 “어떻게” 익혀야 하는지, 실력을 “어떻게” 올릴 수 있는 지, 그 방법을 아는 것이 중요하다고 생각한다. 프렙 과정 동안, 수업 중간 중간에 해주신 말씀들 때문에, 이러한 방법들에 대해 많이 배우고, 마음가짐을 많이 바꾸게 되었다. 아직 매우 부족한 부분이지만, 기술 문서를 읽을 때에도, 정의가 나온 첫 줄부터 꼼꼼히 읽으려고 하고 있고, 코드도 문법을 지켜 꼼꼼히 작성하려고 노력하고 있다. 첫 수업 때, “코드는 ‘많은’사람이 읽는 ‘글’을 쓰는 것과 같다”라는 말을 해 주신 적이 있다. 이 말의 의미는 코드이 한줄 한줄이 의미가 없어서는 안되고, 많은 사람들이 이해할 수 있도록 간결하고 깔끔하게 작성 해야 한다는 의미 뿐 아니라, 개발은 여러 사람이 같이 작업을 하는 일(협업) 이라는 뜻도 포함하고 있다고 생각한다. 프렙 과정 후에는 부트캠프 정규 과정이 시작된다. 부트캠프를 통해서 여러 사람과 교류하며 개발에 대해 더 깊이 배울 수 있기 때문에 꼭 참여하고 싶다. 내일은 이 부트캠프 참가 자격 유무를 결정하는 테스트가 있는 날이다. 긴장이 되기는 하지만 테스트를 잘 마무리 해서 좋은 결과가 있었으면 좋겠다.","link":"/2019/06/20/Vanillacoding-prep-course-testimonial/"},{"title":"Software Design Patterns - Intro","text":"소프트웨어 엔지니어링에서 디자인 패턴은, 일반적이며(general) 재사용이 가능한 소프트웨어 설계의 상황에서 흔히 일어나는 문제에 대한 솔루션이다. 이것은 설계에서 끝나지 않으며, scoure와 machine code로 전환가능 하다.by wikipedia 한마디로, 소프트웨어 설계에서 문제들을 해결하기 위해 고안되었고, 실용적이며, 재사용 가능한 설계 패턴입니다. 디자인 패턴을 익히면서 저의 코드 전체 구조에 대한 이해가 점점 높아지고, 패턴 간의 장단점을 익혀 적용해 볼 수 있기를 기대합니다.많은 디자인 패턴 중에서, 구조 패턴에 대해 정리해 보려고 합니다. Structural Patterns Adapter Bridge Composite Decorator Facade Flyweight Proxy","link":"/2020/08/30/design-patterns-intro/"},{"title":"Why Typescript?","text":"타입스크립트에 대해 정리해 보도록 하겠습니다.타입스크립트는 “어떤 문제를 해결하기 위해” 등장한 언어이며, 타입스크립트를 “사용하는 이유” 에 대해 여러 블로그를 읽고 정리한 글 입니다.제 생각이 아닌 단순히 정리한 글이기 때문에 평어체를 쓰도록 하겠습니다. 1. 현존하는 자바스크립트의 문제C#과 Java 같은 체계적이고 정제된 언어에서 사용하는 강한 타입 시스템은 높은 가독성과 코드 품질을 제공할 수 있고, 컴파일 환경에서 에러를 발생해 치명적인 오류를 쉽게 잡아낼 수 있다. 반면, 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 비교적 유연하게 개발할 수 있는 환경을 제공하지만, 간단한 오류조차 실제로 프로그래밍을 돌려 해당 코드가 실행되기 전에는 감지 할 수 없다. 타입스크립트는 현존하는 자바스크립트의 이러한 문제를 풀기 위해 등장했고, 그 수단으로 정적 타입 분석을 내세웠다. 2. 정적 타입 검사를 도입하고자 하는 움직임자바스크립트의 문제점을 풀려고 했던 어떤 시도들이 있었을까? Typescaript Facebook의 Flow, https://flow.org/ - “Flow is a static type checker for Javascrpt.” Elm, https://elm-lang.org/ - “A delightful language with no runtime exceptions.” PureScript, https://www.purescript.org/, “A strongly-typed functional programming language that compiles to JavaScript.” ReasonML, https://reasonml.github.io/ - “Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems.” 3. 그렇다면 왜 타입스크립트 인가?Flow, Elm, PureScript, ReasonML 등, 정적 타입 분석을 제공하는 여러 대체제가 있다. 이들 중 타입스크립트를 사용해야하는 이유는 무엇일까? 여러 대체제 중, Elm, PureScript, ReasonML 등의 언어는 자바스크립트 문법과 매우 이질적이였다. 따라서 3가지 큰 단점이 있었다. 기존 자바스크립트 코드베이스의 마이그레이션에 대한 비용이 커졌고 (전혀 다른 문법으로 프로젝트를 다시 작성해야 되기 때문) 기존 자바스크립트 개발자가 체감하는 학습 곡선이 가파라진다. 3rd party 자바스크립트 패키지의 사용이 어려워진다. 반면에 타입스크립트는 자바스크립트 코드를 이해하며 최신 ECMAScript 표준을 지원한다. 또한 위의 3가지 단점을 뒤집는 장점을 갖는다. 4. 타입스크립트의 그 자체로서의 장점타입스크립트의 장점을 살펴보기 위해 타입스크립트가 무엇인지 살펴보자. “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.” 이 문장에서 주목해야할 포인트는 1. typed 와 2. superset 이다. 이 두 포인트 들에 주목해보자. 4-1. “Typed” 의미 정적 타입 시스템을 도입하여 컴파일 단계에서 오류를 포착할 수 있다. 명시적인 정적 타입지정은 개발자의 의도를 명확하게 코드로 기술 할 수 있어, 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다. 그렇다면 정적 타입 분석은 무엇을 의미하며, 어떤 장점을 제공 할까? Static Type System프로그램을 실행해 보지 않고도 런타임 이전에 타입 분석을 진행하는 방식이다. (<-> Dynamic Type System 실제로 실행될 때 타입분석)프로그램이 실제로 실행되기 전에 상당수의 오류를 잡아낼 수 있다. (실 사용자가 맞닥뜨리는 버그중 15%를 사전에 예방할 수 있다는 논문 결과 - http://earlbarr.com/publications/typestudy.pdf) our central finding is that both static type systems find an important percentage of public bugs: both Flow 0.30 and TypeScript 2.0 successfully detect 15%! 4-2. “Superset” 의 의미 타입스크립트의 상위집합이다. 따라서 기존의 자바스크립트의 모든 문법을 포용한다. 타입스크립트는 추가적인 타이핑 없이 자바스크립트를 이해함으로 도입의 진입장벽이 낮아졌다. 자바스크립트 프로젝트에서 점진적인 마이그레이션 또한 지원한다. 5. 타입스크립트의 성공적인 생태계타입스크립트는 코어 개발자, 컨트리뷰터, 지원도구 라이브러리, 개발자 커뮤니티들의 형성에 크게 성공하였다. 추가. 타입스크립트의 구성요소 언어 명세타입스크립트가 어떤 의미를 가지로 있고 어떻게 동작해야하는 지 기술해둔 문서가 있다.https://www.notion.so/ts-84653d9d7d294884b3c1350b30bd92cb#9fd9ad0767fb4522976467f8d125d10d 컴파일러타입스크립트의 코드를 입력으로 받아, 명세에 맞게 해석한 후 대되는 자바스크립트 코드를 출력으로 내보낸다.대표적인 컴파일러의 구성 요소들 Parser: 코드를 읽고 구문을 해석함 Type Checker: 타입 정보에 모순이 없는지 검사 Emitter: 브라우저가 실행 가능한 자바스크립트 파일을 뱉어냄 Reference https://ahnheejong.gitbook.io/ts-for-jsdev/01-introducing-typescript/elements-of-typescript https://heropy.blog/2020/01/27/typescript/ https://poiemaweb.com/typescript-introduction https://www.typescriptlang.org/","link":"/2020/09/13/why-typescript/"},{"title":"Module Dependency","text":"모듈 A가 최신버전으로 설치되는 데, 왜 이전 버전이 왜 추가로 설치되는 거지?개발을 하던 도중 어떤 모듈의 버전을 올리면서 각 모듈들의 의존성에 대해 이해해야 했고, 그것을 정리해여 글로 남기려고 합니다. Node packaged Magager(npm)를 사용해 저희는 개발에 필요한 모듈 패키지들을 편리하게 설치하고 제거하여 개발하고 있습니다. 하지만 때로는 각각의 패키지들이 연결 되어있는 경우가 있습니다. 그것을 “모듈 의존성” 이라고 합니다. 예를 들어, 모듈 A를 사용하기 위해서는 모듈 B 1.0 버전을 설치해야 합니다. 이때 “모듈 A는 모듈 B에 의존한다” 라고 말합니다. npm intall 을 실행하면 npm 는 pakage.json 파일을 찾고 의존성 트리를 만들 준비를 합니다. 가장 간단한 트리를 만드려고 합니다. 가능한 가장 깊이가 얕고, 가지가 적은 나무를 말입니다. 어떻게 이런 나무를 만들 수 있을 까요? 이 물음에 대한 답을 통해 npm install 이 어떤 식으로 모듈들을 설치하고 제거 하는지 알 수 있었습니다. 다음은 저의 질문에 답을 주었던 글이고, 아래는 이 글을 읽고 정리한 내용입니다.Understanding npm dependency resolution 추가 point! npm install 시, module은 알파벳 순서로 설치된다. package.json 파일과 npm install을 사용하면 동일한 의존성 트리를 만들수 있다.","link":"/2020/09/13/npm/"},{"title":"Hexo 블로그 깃헙과 연결하고 관리하기","text":"Hexo 블로그를 깃헙에 연결하고 관리하는 방법에 대해 정리하려고 합니다.블로그를 연결하고 관리하기 위해서는 2가지 레포지토리가 필요합니다. deploy 하여 깃헙 페이지가 될 레포 하나 와 소스들의 버젼관리를 위한 레포하나가 필요합니다. 1. deploy 하여 깃헙 페이지가 될 레포 설정 깃헙 페이지용 레포 만들기 (Page를 이용해야함으로 public) _config.yml 파일에서 아래 코드를 추가하기 123456789101112# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/Plugins:- hexo-deployer-gittheme: icarus# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git repo: {깃헙 페이지용 레포 이름}.git hexo-deployer-git 플러그인 설치하기npm install ~ hexo generate 업데이트한 파일들을 빌드하기 (public 폴더에 대입) hexo deploy 다음 명령어를 입력하면 블로그가 deploy! 2. 깃헙으로 관리할 레포 설정 깃헙 관리용 레포 만들기 깃헙 레포를 설정 할때와 동일,git remote set-url origin https://github.com/letsdoyi/{블로그 버젼관리용 레포}.git","link":"/2021/01/03/manage-hexo-with-git/"},{"title":"기초 - class (Javascript ES6)","text":"실무에서 사용하는 자바스크립트의 기초적인 문법들을 차근차근 정리해보려고 합니다.// 실무에서 어떻게 사용하고 있나? 클래스class ?!클래스는 templete (틀) 이고 메모리에 올라가지 않고… 등등의 이야기는 뒤쪽에 정리하도록 하겠습니다. 먼저.. class 는 언제 쓰는 가?중요한 건, 어떤 경우에 class를 쓰는 가 / 왜 쓰는 가 가 class 문법이 만들어진 중요한 포인트인 것 같습니다. class 는 1. “연관” 있는 데이터 / 함수 들을 한 덩어리로 2. “묶어” (그 묶은 데이터를 field (속성 - 데이터) 이라고 하고, 함수를 method (행동)라고 합니다) 3. “틀” 을 만들어 데이터 마다 다른 결과물을 만들고 싶을 때 사용할 수 있습니다. 예를 들어, 삼각형의 가로, 삼각형의 세로, 삼각형의 넓이를 구하는 함수, 사각형의 가로, 사각형의 세로, 사각형의 넓이를 구하는 함수 등등의 데이터 / 함수들이 있다고 가정해 봅니다. 당연히 삼각형은 삼각형끼리 사각형은 사각형끼리 묶어서 관리하면 편리 할 것 입니다. 추가로 실제 값을 가지지 않은 삼각형 / 사각형의 틀을 가지고 있다면, 여러가지 값들을 가진 삼각형 / 사각형을 만들기 편할 것 입니다. 코드로 확인해 보겠습니다. 1234567891011121314class 사각형 { // you can pass data to 삼각형 as creating 삼각형 object constructor(width, height, color){ // fields this.width = width; this.height = height; this.color = color; } // methods printArea() { console.log(this.width * this height); }} 이제 삼각형이라는 틀을 완성했습니다.그럼 이 틀을 이용해 가로 10, 세로 10, 빨간색 이라는 데이터를 넣은 사각형을 만들어 보겠습니다. 1const rectangle = new 사각형(10, 10, 'red'); 원하는 데이터를 이 틀(class)에 넣어서 다양한 결과물을 만들어 낼 수 있습니다. 빨간(데이터) 사각형 파란(데이터) 사각형 가로, 세로 길이가 같은 (데이터) 사각형 (클래스를 붕어빵틀, 그리고 그 결과물을 팥 붕어빵, 크림 붕어빵 이라는 유명한 예시들이 있습니다….) 그리고, 그 결과물을 조금더 전문 용어로 표현 하면, 이것을 class 의 instance 또는 object 라고 합니다. class 정의 연관된 데이터와 함수를 묶는 틀 묶인 데이터를 field(속성), 묶인 함수를 method (행동) 이라 함 그 틀에 의해 실제 데이터로 만들어진 결과물을 인스턴스 라고 함 class 특징 클래스는 한번만 선언 됨 - https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Classes#re-running_a_class_definition 안에 실제 데이터가 들어있지 않은 단순한 틀이기 때문에 메모리에 올라가지 않음 <- 조금 더 확인해보아야","link":"/2021/02/15/class-Javascript-ES6/"}],"tags":[{"name":"DOM","slug":"DOM","link":"/tags/DOM/"},{"name":"node","slug":"node","link":"/tags/node/"},{"name":"Algorithm","slug":"Algorithm","link":"/tags/Algorithm/"},{"name":"Javascript","slug":"Javascript","link":"/tags/Javascript/"},{"name":"CleverSolution","slug":"CleverSolution","link":"/tags/CleverSolution/"},{"name":"if( )","slug":"if","link":"/tags/if/"},{"name":"index( )","slug":"index","link":"/tags/index/"},{"name":"prototype","slug":"prototype","link":"/tags/prototype/"},{"name":"constructor","slug":"constructor","link":"/tags/constructor/"},{"name":"instance","slug":"instance","link":"/tags/instance/"},{"name":"dunder proto","slug":"dunder-proto","link":"/tags/dunder-proto/"},{"name":"job interview question","slug":"job-interview-question","link":"/tags/job-interview-question/"},{"name":"behavior delegation","slug":"behavior-delegation","link":"/tags/behavior-delegation/"},{"name":"hexo","slug":"hexo","link":"/tags/hexo/"},{"name":"this","slug":"this","link":"/tags/this/"},{"name":"context","slug":"context","link":"/tags/context/"},{"name":"new","slug":"new","link":"/tags/new/"},{"name":"call","slug":"call","link":"/tags/call/"},{"name":"apply","slug":"apply","link":"/tags/apply/"},{"name":"bind","slug":"bind","link":"/tags/bind/"},{"name":"javascript","slug":"javascript","link":"/tags/javascript/"},{"name":"오답노트","slug":"오답노트","link":"/tags/%EC%98%A4%EB%8B%B5%EB%85%B8%ED%8A%B8/"},{"name":"arguments","slug":"arguments","link":"/tags/arguments/"},{"name":"indexOf()","slug":"indexOf","link":"/tags/indexOf/"},{"name":"Array","slug":"Array","link":"/tags/Array/"},{"name":"Git","slug":"Git","link":"/tags/Git/"},{"name":"object","slug":"object","link":"/tags/object/"},{"name":"splice()","slug":"splice","link":"/tags/splice/"},{"name":"slice()","slug":"slice","link":"/tags/slice/"},{"name":"Delete","slug":"Delete","link":"/tags/Delete/"}],"categories":[{"name":"Programming","slug":"Programming","link":"/categories/Programming/"},{"name":"DOM","slug":"Programming/DOM","link":"/categories/Programming/DOM/"},{"name":"Algorithm","slug":"Algorithm","link":"/categories/Algorithm/"},{"name":"Javascript","slug":"Programming/Javascript","link":"/categories/Programming/Javascript/"},{"name":"Playground","slug":"Playground","link":"/categories/Playground/"},{"name":"Thoughts","slug":"Thoughts","link":"/categories/Thoughts/"},{"name":"Tool","slug":"Tool","link":"/categories/Tool/"},{"name":"Git","slug":"Tool/Git","link":"/categories/Tool/Git/"},{"name":"Books","slug":"Books","link":"/categories/Books/"},{"name":"Software Engineering","slug":"Programming/Software-Engineering","link":"/categories/Programming/Software-Engineering/"},{"name":"Paradigm","slug":"Programming/Paradigm","link":"/categories/Programming/Paradigm/"},{"name":"ETC","slug":"Programming/ETC","link":"/categories/Programming/ETC/"}]}