[AngularJS] ngRepeat scope 생성

AngularJS의 ngRepeat 속성은 반복 수행을 할 때 유용하게 활용된다. 그러나 다음과 같은 경우 예상과는 다르게 반응하는 결과물을 볼 수 있다. 위의 예제를 보면 라디오 버튼을 클릭해도 $scope.selected 값은 변경되지 않는 것을 확인 할 수 있다. 이러한 현상이 발생하는 이유는 ngRepeat이 새로운 scope를 생성하기 때문이다. AngularJS에서 자식 scope의 값이 변경되더라도 부모 scope의 동명 변수가 변경되지 않는다. 때문에 우리가 기대했던 mainCtrl의 selected값이 변경되지 않는 것이다. 그렇다면 우리가 원하는 대로 동작하게 하기 위해서는 어떻게 해야할까? 간단하다. $parent를 이용하는 것이다. $parent는 부모 scope영역에 접근 할 수 있게 해준다. 다음 코드는 우리의 예상대로 작동한다. 둘의 차이점은 $parent의 유무 뿐이다. 이번 경험을 통해 새삼 명세를 잘 읽어야 한다는 생각을 다시 한 번 하게 되었다. 참고 링크:  https://docs.angularjs.org/api/ng/directive/ngRepeat

[카카오] 1차 코딩 테스트 문제3(캐시) 풀이 using Javascript

카카오 2017년 하반기 신입 공채 1차 코딩 테스트 문제 3번 풀이. 문제3. 캐시(난이도: 하) 지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다. 이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다. 어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감한 상황이다. 어피치에게 시달리는 제이지를 도와, DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 프로그램을 작성하시오. 입력 형식 캐시 크기( cacheSize )와 도시이름 배열(cities)을 입력받는다. cacheSize 는 정수이며, 범위는 0 ≦ cacheSize ≦ 30 이다. cities는 도시 이름으로 이뤄진 문자열 배열로, 최대 도시 수는 100,000개이다. 각 도시 이름은 공백, 숫자, 특수문자 등이 없는 영문자로 구성되며, 대소문자 구분을 하지 않는다. 도시 이름은 최대 20자로 이루어져 있다. 출력 형식 입력된 도시이름 배열을 순서대로 처리할 때, “총 실행시간”을 출력한다. 조건 캐시 교체 알고리즘은 LRU(Least Recently Used) 를 사용한다. cache hit 일 경우 실행시간은 1이다. cache miss 일 경우 실행시간은 5이다. 보다 자세한 문제 설명은 아래 카카오 공식 블로그 링크에서 확인할 수 있다. http://tech.kakao.com/2017/09/27/kakao-blind-recruitment-round-1/ 문제 풀이 이번 문제는 LR...

[카카오] 1차 코딩 테스트 문제2(다트 게임) 풀이 using Javascript

이미지
카카오 2017년 하반기 신입 공채 1차 코딩 테스트 문제 2번 풀이. 문제2. 다트 게임(난이도: 하) 카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다. 각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다. 점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수^1 , 점수^2 , 점수^3 )으로 계산된다. 옵션으로 스타상(*) , 아차상(#)이 존재하며 스타상(*) 당첨 시 해당 점수와 바로 전에 얻은 점수를 각 2배로 만든다. 아차상(#) 당첨 시 해당 점수는 마이너스된다. 스타상(*)은 첫 번째 기회에서도 나올 수 있다. 이 경우 첫 번째 스타상(*)의 점수만 2배가 된다. (예제 4번 참고) 스타상(*)의 효과는 다른 스타상(*)의 효과와 중첩될 수 있다. 이 경우 중첩된 스타상(*) 점수는 4배가 된다. (예제 4번 참고) 스타상(*)의 효과는 아차상(#)의 효과와 중첩될 수 있다. 이 경우 중첩된 아차상(#)의 점수는 -2배가 된다. (예제 5번 참고) Single(S), Double(D), Triple(T)은 점수마다 하나씩 존재한다. 스타상(*), 아차상(#)은 점수마다 둘 중 하나만 존재할 수 있으며, 존재하지 않을 수도 있다. 0~10의 정수와 문자 S, D, T, *, # 로 구성된 문자열이 입력될 시 총점수를 반환하는 함수를 작성하라. 입력 형식 “점수|보너스|[옵션]”으로 이루어진 문자열 3세트. 예)  1S2D*3T 점수는 0에서 10...

[카카오] 1차 코딩 테스트 문제1(비밀 지도) 풀이 using Javascript

이미지
카카오 2017년 하반기 신입 공채 1차 코딩 테스트 문제 1번 풀이. 문제1. 비밀비도(난이도: 하) 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 “공백”(“ “) 또는 “벽”(“#”) 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 “지도 1”과 “지도 2”라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. “지도 1”과 “지도 2”는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진수에 해당하는 값의 배열이다. 네오가 프로도의 비상금을 손에 넣을 수 있도록, 비밀지도의 암호를 해독하는 작업을 도와줄 프로그램을 작성하라. 입력 형식 입력으로 지도의 한 변 크기  n  과 2개의 정수 배열  arr1 ,  arr2 가 들어온다. 1 ≦  n  ≦ 16 arr1 ,  arr2 는 길이  n 인 정수 배열로 주어진다. 정수 배열의 각 원소  x 를 이진수로 변환했을 때의 길이는  n  이하이다. 즉, 0 ≦  x  ≦ 2^n - 1을 만족한다. 출력 형식 원래의 비밀지도를 해독하여  "#" ,  공백 으로 구성된 문자열 배열로 출력하라. 보다 자세한 문제 설명은 아래 카카오 공식 블로그 링크에서 확인할 수 있다. http://tech.kakao.com/2017/09/27/kakao-blind-recruitment-round-...

[Javascript] 메모리 관리(Garbage Collector)

이미지
메모리 생존 주기 프로그래밍 언어는 그 종류와 상관없이 비슷한 메모리 생존 주기를 가진다. 필요할 때 할당한다. 해당 메모리를 사용한다(읽기, 쓰기). 메모리 사용이 불필요해질 경우 해제한다. 위의 순서에서 1, 2번은 명확하게 정의 할 수 있다.  하지만 3번의 경우 언어에 따라 그 정의가 달라진다.  저급 언어 에서는 명시적으로 메모리 할당을 해제하지만, Javascript와 같은 고급 언어는 명시적 해제가 이루어지지 않는다. 때문에  가비지 콜렉터(Garbage Collector) 의 도움을 받는다. 메모리 생존 주기를 한 단계씩 살펴보자. 출처: Valtteri Mäki 1. 메모리 할당 값 초기화 자바스크립트에서는 변수를 선언하는 순간 메모리를 자동으로 할당한다. const n = 123; //정수형 변수 메모리 할당 const s = 'string'; //문자열 변수 메모리 할당 const o = { a: 'abc', b: 123 }; //객체 및 객체의 구성 요소에 대한 메모리 할당 const a = [1, 2, 3]; //배열 및 구성 요소에 대한 메모리 할당 const u; //javascript에서는 초기값을 부여하지 않았을 경우 undefined로 값을 배정하고 메모리를 할당한다. 함수 호출을 통한 할당 함수를 call 하는 순간에도 메모리 할당이 일어난다. const d = new Date(); // Date 객체 메모리 할당 const e = document.createElement('div'); // DOM 엘리먼트를 메모리 할당 2. 메모리(값) 사용 메모리 사용이란 할당된 메모리를 읽기/쓰기 하는 과정을 의미한다.  변수 또는 객체의 속성값을 읽고 쓸때 발생하며, 함수 호출 및 인수를 넘길 때도 일어난다. 3. 메모리 해제 앞의 과정은 프로그래머에 의해 명확하게 통제...

[Hackerrank] Breaking the Records 문제 해설 - Algorithms > Implementation / Easy

이미지
Breaking the Records 1. 문제 설명 이 문제는 교내 농구 선수인 Maria의 시즌 성적을 구하는 문제이다. 한 시즌에서 n번 경기를 치루는 동안 각각의 점수를 s배열에 표기한다(s[0], s[1], ..., [sn-1]). 구하고자 하는 결과물은 다음과 같다. 한 경기에서 기록한 최고 점수가 업데이트 된 횟수 한 경기에서 기록한 최저 점수가 업데이트 된 횟수 예를 들면 다음과 같이 한 시즌 경기를 치뤘을 경우,  Maria의 한 시즌 성적 최고 점수는 10 -> 20 -> 25로 총 2번 업데이트 됐다(10점은 초기값). 그리고 최저 점수는 10 -> 5 -> 4 -> 2 -> 1로 총 4번 업데이트 됐다(10은 초기값). *원본 링크:  https://www.hackerrank.com/challenges/breaking-best-and-worst-records/problem 2. Input Format 첫번째 줄에는 한 시즌에 치뤄진 경기 수(n)가 주어진다. 부전째 줄에는 Maria가 각 경기에서 기록한 점수(s)가 주어진다. 3. Output Format 최고 점수와 최저 점수가 업데이트 된 횟수를 각각 출력한다. Sample Input 1 9 10 5 20 20 4 5 2 25 1 Sample Output 1 2 4 Sample Input2 10 3 4 21 36 10 28 35 5 24 42 Sample Output2 4 0 Solution 이 문제는 반복문을 통해 해결 할 수 있다. 초기 최고점과 최저점을 시즌 첫번째 경기의 점수로 설정한다. 경기 횟수만큼 반복문을 실행한다. 반복문 안에서 현재 최고점보다 더 높은 점수가 발생하면 increase가 발생했다고 생각하고 최고점 카운트를 1 증가시킨다. 3번과 동일한 형태로 현재 최저점보다 더 낮은 점수가 발생하면 decrease가 발생했다고 생각하고 최저점 카운트를 1 증가시킨다. 최종 코드는 ...

[ES6] const, let을 통한 변수 선언

개인적으로 const , let 을 통한 변수 선언은 ECMAScript2015가 발표되면서 Javascript에 가져온 큰 변화 중 하나라고 생각하다. 기존 Javascript에서는 모든 변수를 var 를 이용해 선언해야 했다. 이들 사이에는 어떤 차이가 있는지 알아보자. 1. 호이스팅(hoisting)  const 와 let 은 호이스팅 이 되지 않는다. 이는 변수가 선언되기 전에 해당 변수를 호출할 수 없음을 의미한다. console.log(var1); //undefined var var1 = 'var'; console.log(var2); //Uncaught ReferenceError: var2 is not defined let var2 = 'let'; console.log(var3); //Uncaught ReferenceError: var3 is not defined const var3 = 'const'; var 의 경우 선언하기 전에 호출하면 에러가 발생하지 않는다. 하지만 const 또는 let 으로 선언된 변수는 에러를 출력한다. 2. scope 2.1 var - function scope 기존에 사용되었던 var는 function scope를 가진다. function scope란, 한 번 선언된 변수는 함수 단위 내에서 자유롭게 사용할 수 있음을 의미한다. 다음 코드를 보면 더욱 쉽게 이해 할 수 있다. for(var i = 0; i < 10; i++){ console.log('i is ', i); } console.log('after for i is ', i); //after for i is 10 function func(){ for(var j = 0; j < 10; j++){ console.log('j is ', j); } } func(); console.log('after for ...