순수함수는 함수형 프로그래밍에서 많이 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 순수함수가 되기 위해서는 사이드 이팩트가 없어야 합니다. Side Effect란? 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인을 말합니다. 대표적으로 네트워크 요청, API 호출이 Side Effect 입니다. 자바스크립트에서 순수함수를 만들기 위해서는 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 전달인자로 참조 자료형이 전달되는 경우, 의도치 않게 해당 객체 자체를 바꾸는 사이드 이펙트를 만들 수 있는데, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다. 그래서 배열의 불변성을 보장하는 map, filter, reduce 등을 많이 사용합니다.
문제 오름차순 정렬된 정수의 배열(arr)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 출력 number 타입을 리턴해야 합니다. 주의사항 이진탐색 알고리즘(O(logN))을 사용해야 합니다. 단순한 배열 순회(O(N))로는 통과할 수 없는 테스트 케이스가 존재합니다. target이 없는 경우, -1을 리턴해야 합니다. 입출력 예시 let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2); console.log(output); // --> 2 output = binarySearch([4, 5, 6, 9], 100); console.log(output); // --> -1 문제 풀이 const binarySearch = function (ar..
Router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 다른 주소에 따라 다른 뷰를 보여주는 과정으로, "경로에 따라 변경한다"라는 의미 Page Routing 우리가 인터넷을 사용해서 웹 사이트에 접속한다는 것은 브라우저를 통해서 웹 서버에게 경로의 요청을 전달하고 웹 문서를 받아보는 과정이다. 웹 서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고, 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정을 페이지 라우팅이라고 한다. MPA & SPA MPA(Multipage Application) 여러개의 페이지를 준비해 놓고 있다가 요청이 들어오면 요청에 맞게 적절한 페이지를 보내주는..
🌴 React State & Props State(상태)란 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다. 🌱 Props vs State 🍃 Props props는 외부로부터 전달받은 값(위로부터 인자와 같이 넘겨받음) - 변하지 않는 값을 말한다. (컴포넌트의 속성(property)을 의미한다.) 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 자바스크립트 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더..
Helper Method Recursion Helper Method Recursion는 외부 함수(outer function)와 안에 있는 재귀함수, 두 개의 함수를 가지고 있다. function outer(input){ let outerScopedVariable = []; function helper(helperInput){ // modify the outerScopedVariable helper(helperInput--); } helper(input); return outerScopedVariable; } Helper Method Recursion는 배열이나 데이터 목록 같은 것을 컴파일(compile)해야 할 때 사용된다. 예를 들어 어떤 배열에서 모든 홀수 값을 수집하는 것과 같은 작업을 수행할 ..
재귀란? "A process(a function in our case) that calls itself" "자기 자신을 호출하는 함수를 의미한다." 재귀 함수를 호출하게 되면 자기 자신을 끝없이 호출하게 된다. 이러한 재귀 함수를 잘 활용하면 반복적인 작업을 해야하는 문제를 더 간결한 코드로 풀어낼 수 있다. 재귀 함수는 계속해서 새로운 함수를 call stack에 추가한다.(동일한 함수를 계속 추가하고, 추가된 함수는 호출을 기다린다.) The call stack 함수를 호출하면 호출 스택의 꼭대기에 쌓이는데, 마치 책상 위에 쌓여있는 종이 더미와 같다. 종이 더미에 종이를 가장 위에 올려 놓듯이 우리가 새로 추가하는 함수가 제일 꼭대기에 위치하게 된다. 자바스크립트가 반환 키워드(return keyw..
🌴 문제 아래와 같이 정의된 피보나치 수열 중 n번째 항의 수를 리턴해야 합니다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1입니다. 그 다음 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합으로 정의합니다. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ... 🌴 출력 number 타입을 리턴해야합니다. 🌴 주의사항 재귀함수를 이용해 구현해야 합니다. 반복문(for, while) 사용은 금지됩니다. 함수 fibonacci가 반드시 재귀함수일 필요는 없습니다. 🌴 입출력 예시 let output = fibonacci(0); console.log(output); // --> 0 output = fibonacci(1); console.log(output); // -->..
🌴 문제 정수를 요소로 갖는 배열을 입력받아 3개의 요소를 곱해 나올 수 있는 최대값을 리턴해야 합니다. 🌴 출력 number 타입을 리턴해야 합니다. 🌴 주의사항 입력으로 주어진 배열은 중첩되지 않은 1차원 배열입니다. 배열의 요소는 음수와 0을 포함하는 정수입니다. 배열의 길이는 3 이상입니다. 🌴 입출력 예시 let output = largestProductOfThree([2, 1, 3, 7]); console.log(output); // --> 42 (= 2 * 3 * 7) output = largestProductOfThree([-1, 2, -5, 7]); console.log(output); // --> 35 (= -1 * -5 * 7) output = largestProductOfThree(..
🌴 문제 문자열을 입력받아 연속되는 문자가 있을 경우, 연속 구간을 반복되는 수와 문자로 조합한 형태로 압축한 문자열을 리턴해야 합니다. 🌴 출력 string 타입을 리턴해야 합니다. 🌴 주의 사항 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 3개 이상 연속되는 문자만 압축합니다. 🌴 입출력 예시 let output = compressString('abc'); console.log(output); // --> abc output = compressString('wwwggoppopppp'); console.log(output); // --> 3wggoppo4p 🌴 문제 풀이 function compressString(str) { // 문자열에서 반복되는 문자가 3개 이상일 경우 (반복된 수 ..
문제 암호화된 문자열과 암호화 키를 입력받아 복호화된 문자열을 리턴해야 합니다. 카이사르 암호(Caesar cipher)는 평문(plaintext)을 암호키 secret개만큼 (오른쪽으로) 평행이동시켜 암호화 합니다. 복호화는 암호화된 문자열을 원래의 평문으로 복원하는 것을 말합니다. 출력 string 타입을 리턴해야 합니다. 주의 사항 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 공백은 그대로 두어야 합니다. 입출력 예시 let output = decryptCaesarCipher('khoor', 3); console.log(output); // --> hello output = decryptCaesarCipher('zruog', 3); console.log(o..
