전체 글

[javascript] map,filter,every 함수

❗️map과 filter함수의 공통점은 기존배열을 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다는 뜻이고, 차이점을 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다. map() Array.prototype.map() 배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴한다. let newArray = arr.map(callback(currentValue[, index[, array]]) { // return element for newArray, after executing something } 안티패턴이지만 parameters(파라미터)를 확인하기 위해 코드를 적어보면 예시 let numbers = [1, 4, 9] le..

[React] Container-Presenter 패턴

개요 React의 가장 기본적인 디자인 패턴으로는 Container Presenter 패턴이 있다. container + presenter 패턴은 데이터처리와 데이터출력을 분리 하는 것이다. 즉 Container에서는 API Request, Exception Error, state 변경, redux, dispatch... Presenter에는 props, UI..을 관리하는 것이다. Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 Props로 넘긴다. 예시 // src/components/blog/Blog.js import React, {Component} from 'react'; class Blog extends Component { state = { loading: tr..

[알고리즘 테스트] 가운데 글자 가져오기

문제 설명 단어 s 가운데 글자를 반환하는 함수 solution을 만들어 보세요 단어의 길이가 짝수라면 가운데 두글자만 반환하면 됩니다. 제한 사항 arr의 길이 1 이상, 100 이하인 스트링입니다. 입출력 예 s return "abcde" "c" "qwer" "we" 풀이 문자열의 길이가 짝수인지 홀수인지 판단한다. 짝수이면 가운데 두 글자를 반환하고, 홀수이면 가운데 한 글자만 반환한다. function solution(s) { let answer = ''; if (s.length % 2 == 0) {//짝수일 경우 answer = s[s.length / 2 - 1] + s[s.length / 2] } else { answer = s[Math.floor(s.length/2)]; // 홀수의 경우, ..

[알고리즘 테스트] 평균 구하기

문제 설명 정수를 담고 있는 배열 arr의 평군 값을 return하는 함수, solution을 완성해보세요. 제한 사항 arr의 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수다. 입출력예 arr return [1,2,3,4] 2,5 [5,5] 5 문제 풀이 평균을 구하는 간단하고 쉬운 문제다. 배열에 담긴 요소들의 합을 구한다. 요소들의 합을 배열의 길이 (=요소 갯수)로 나눈다. function solution(arr) { let answer = 0; let sum = 0; for (int i = 0; i < arr.length; i++) { sum += arr[i] // 배열의 요소들을 하나씩 더함 } return answer = sum / a..

[알고리즘 테스트] 체육복

문제설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행이 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 resorve가 매개변수로 주어질때, 체육수업을 들을 수 있는 학생의 최대값을 return 하도록 solution함수를 작성해주세요. 제한 사항 전체 학생 수는 2명 이상 30명 이하입니다. 체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다. 여벌의 체육복을 가져온 학생의 수는 1명 이..

[TIL] 2022년 01월 17일

오늘 배운 TIL은 React 실무를 대비해서 파일 나누기를 배웠다. 목차 - 커리큘럼 실무적인 폴더구조 -> Container / Presenter 컴포넌트 분리 및 전달 => Props 목록 형태에 데이터를 보여주자 => map 함수 / filter 함수 컴포넌트의 재사용성을 높이는 방법 => Axios / Apollo-Client 안전한 코드를 작성하는 법 => Typescript 규칙을 정해서 협업 하는 방식 => Prettier / ESLint / Huskey -> 룰을 정해서 깃허브에 올리는 방식선언 Day 6 - 목표 실무적인 폴더 구조 컴포넌트 분리 데이터 전달 => props setState는 이런 원리다? => setState 동작원리 Optional-Chaning vs nulish-c..

[React] React - Next Router vs React Router

먼저 모든 코드에 의미를 담고서 이야기 해보면 Next 프레임워크와 React 프레임워크를 사용하면서 두 가지 차이점에 대해 궁금증이 생길것이다. React.js는 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 Next.js는 사실상 React.js와 많이 다르면서 취업하는데 있어 다른 개발자들에 비해 이점을 가져가지 못할 수 있다. 결론은 Next.js는 React.js를 감싸고 있는 프레임워크로 보면된다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 존재해 오히려 React보다 좀 더 배울만한 것이 많다고 볼 수 있다. 그런데, Next.js와 React에서 차이가 유일하게 크게 보이는 것은 바로 Router부분이다. 라우팅을 구..

[React] React Immutable

Immutable 이란? immutable은 react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리다. 불편함(Immutablity)를 지키며 상태관리하는 것을 편리하게 해준다. 설치법 npm install immutable Immutable의 필요성 Immutable은 이름에서도 알 수 있듯 객체의 불변성을 제공하는 라이브러리이다. react의 컴포넌트는 state 또는 상위 컴포넌트에서 전달받은 props(상태값)이 변할 때 리렌더링된다. 만약 직접 객체안에 내부 값을 직접 수정한다면 레퍼런스가 가리키는 곳은 같기 때문에 똑같은 값으로 인식한다. 따라서, 전개 연산자나 assgin함수를 이용하여 새로운 객체나 배열을 만들었지만 구조가 복잡할 경우에는 그 코드 또한 복잡한 방식으로 구성되었다...

[프로그래머스 알고리즘 테스트] 짝수와 홀수

문제 링크 문제 주어진 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 만들어 주세요 제한 조건 num은 int 범위의 정수입니다. 0은 짝수 입니다. 입출력 예 num return 3 "Odd" 4 "Even" 풀이법 나머지 연산 "%"만 알고 있다면 금방 풀 수 있는 문제 정수를 2로 나눈 나머지가 0일 경우 짝수, 0이 아닐 경우 홀수이다. function solution(num) { let answer = ''; if (num % 2 === 0) { return answer = "Even" } else { return answer = "Odd" } return answer; } 삼항 연산자 풀이법 function solution(num)..

[프로그래머스 알고리즘 테스트] 핸드폰 번호 가리기

1. 문제 프로그래머스 모바일은 개인정보 보호를 위한 고지서를 보낼 때 고객들의 전화번호 일부를 가린다. 전화번호 문자열 phone_number이 주어질때, 전화번호 뒷 4자리를 제외한 나머지 숫자를 전부 *로 가린 문자열을 리턴하는 함수, solution을 완성하세요. 2.제한 조건 s는 길이 4이상, 20 이하면 문자열이다. 전화번호 뒷 4자리를 제외한 나머지 숫자를 전부 *로 가린 문자열을 리턴해준다. 3.문제 풀이 function solution(num) { const len = num.length - 4; return "*".repeat(len) + num.substring(len) } slice문법을 사용한 풀이법 function solution(pNum) { return pNum.slice(..

[프로그래머스 알고리즘] 같은 숫자는 싫어

문제설명 배열에 arr이 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이떄, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려 합니다. 단, 제거가 된후에는 남은 수들을 반환할때 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면 arr = [1,1,3,3,0,1,1,] 이면 [1,3,0,1]을 return 해야합니다. arr = [4,4,4,3,3] 이면 [4,3]을 return 해야합니다. 배열 arr에서 연속적으로 나타나는 숫자를 제거하고 남은 수들을 return 하는 solution 함수를 완성해주세요. 제한 사항 배열 arr의 크기: 1,000,000 이하의 자연수 배열 arr의 원소 크기: 0보다 크거나 같고 9보다 작거나 같은 정..

[알고리즘 테스트] 문자열 정수로 변환하기

문제 풀이법 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. s의 길이는 1 이상 5이하여야 합니다 s의 맨앞에는 부호가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 0으로 시작하지 않습니다. s를 int형으로 변환하면 된다. 코드 function solution(s) { return Number(s); } 다른 사람의 풀이 // 문제가 개편되었습니다. 이로 인해 함수 구성이나 테스트케이스가 변경되어, 과거의 코드는 동작하지 않을 수 있습니다. // 새로운 함수 구성을 적용하려면 [코드 초기화] 버튼을 누르세요. 단, [코드 초기화] 버튼을 누르면 작성 중인 코드는 사라집니다. function strToInt(str){ return str/1 } // 아..