https://school.programmers.co.kr/learn/courses/30/lessons/81301

 

문제 설명

네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

  • 1478 → "one4seveneight"
  • 234567 → "23four5six7"
  • 10203 → "1zerotwozero3"

이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.

 

제한사항

  • 1 ≤ s의 길이 ≤ 50
  • s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다.
  • return 값이 1 이상 2,000,000,000 이하의 정수가 되는 올바른 입력만 s로 주어집니다.

 

function solution(s) {
    s = s.replaceAll('zero', '0')
    s = s.replaceAll('one', '1')
    s = s.replaceAll('two', '2')
    s = s.replaceAll('three', '3')
    s = s.replaceAll('four', '4')
    s = s.replaceAll('five', '5')
    s = s.replaceAll('six', '6')
    s = s.replaceAll('seven', '7')
    s = s.replaceAll('eight', '8')
    s = s.replaceAll('nine', '9')
    
    return Number(s)
}
저작자표시 비영리 변경금지

'JavaScript > 알고리즘 문제 풀기' 카테고리의 다른 글

[프로그래머스][Summer/Winter Coding(~2018)] 예산 - JavaScript  (0) 2023.04.25
[프로그래머스][Summer/Winter Coding(~2018)] 영어 끝말잇기 - JavaScript  (0) 2023.04.25
[프로그래머스][월간코드첼린지시즌1] 두 개 뽑아서 더하기 - JavaScript  (0) 2023.04.25
[프로그래머스][연습문제] 핸드폰 번호 가리기 - JavaScript  (1) 2023.04.19
[프로그래머스][연습문제] 바탕화면 정리 - JavaScript  (0) 2023.04.19

https://school.programmers.co.kr/learn/courses/30/lessons/68644

 

문제 설명

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.

 

제한사항

  • numbers의 길이는 2 이상 100 이하입니다.
  • numbers의 모든 수는 0 이상 100 이하입니다.

 

2중 for문을 사용해서 배열의 첫번째 값과 그 다음 값을 더한다.

sort() 메서드로 오름차순 정렬 후, 전개연산자와 new Set() 객체를 이용해서 배열의 중복값을 제거한다.

function solution(numbers) {
    let result = []
    
    for(i=0; i<numbers.length; i++) {
        for(j=i+1; j<numbers.length; j++) {
            result.push(numbers[i] + numbers[j])
        }
    }
    
    return [...new Set(result.sort((a, b) => a - b))]
}
저작자표시 비영리 변경금지

'JavaScript > 알고리즘 문제 풀기' 카테고리의 다른 글

[프로그래머스][Summer/Winter Coding(~2018)] 영어 끝말잇기 - JavaScript  (0) 2023.04.25
[프로그래머스][2021 카카오 채용연계형 인턴십] 숫자 문자열과 영단어 - JavaScript  (0) 2023.04.25
[프로그래머스][연습문제] 핸드폰 번호 가리기 - JavaScript  (1) 2023.04.19
[프로그래머스][연습문제] 바탕화면 정리 - JavaScript  (0) 2023.04.19
[프로그래머스][연습문제] 서울에서 김서방 찾기 - JavaScript  (0) 2023.04.19
  • for문 + indexOf()

중복값의 인덱스 번호를 duplication 배열에 담는다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e', 'a', 'a']
const duplication = []

for(let i = 0; i < arr.length; i++) {
    if(arr.indexOf(arr[i]) !== i) {
        duplication.push(i)
    }
}

duplication // [3, 6, 7]
저작자표시 비영리 변경금지

'JavaScript > 문법' 카테고리의 다른 글

[자바스크립트] 자주 사용하는 정규 표현식 (주민번호, 전화번호, 이메일, 특수문자)  (0) 2023.08.02
[자바스크립트] var, let, const 차이점  (0) 2023.04.26
[자바스크립트] 배열 중복값 찾기(filter, indexOf)  (0) 2023.04.25
[자바스크립트] 배열 중복 제거하기(전개연산자, Array.from, new Set, filter, indexOf)  (0) 2023.04.25
[자바스크립트] sort() 배열 정렬하기 (숫자, 영어, 대문자, 소문자, 한글)  (0) 2023.04.19
  • filter() + indexOf()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 모아 새로운 배열로 반환한다.

indexOf() 메서드는 호출한 string 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환한다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e', 'a']
arr.filter((item, index) => arr.indexOf(item) !== index) // ['c', 'a']

 

저작자표시 비영리 변경금지

'JavaScript > 문법' 카테고리의 다른 글

[자바스크립트] var, let, const 차이점  (0) 2023.04.26
[자바스크립트] 배열 중복 인덱스 찾기(for문, indexOf)  (0) 2023.04.25
[자바스크립트] 배열 중복 제거하기(전개연산자, Array.from, new Set, filter, indexOf)  (0) 2023.04.25
[자바스크립트] sort() 배열 정렬하기 (숫자, 영어, 대문자, 소문자, 한글)  (0) 2023.04.19
[자바스크립트] 문자열(String) 또는 숫자(Number)를 배열로 만들기  (0) 2023.04.19
  • 전개연산자 + new Set()

전개 연산자를 사용하면 배열이나 문자열 같이 반복 가능한 0개 이상의 인수 또는 요소를 확장하여, 0개 이상의 키-값 쌍으로 객체를 확장시킬 수 있다.

Set 객체는 자료형에 관계 없이 원시값(string, number, bollean, undefined, null 등..)과 객체 참조 모두 유일한 값을 저장할 수 있다.

= 중복된 값이 있으면 1개만 남긴다. (중복 혀용 X)

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
[...new Set(arr)] // ['a', 'b', 'c', 'd', 'e']

 

  • Array.from() + new Set()

Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 배열을 만든다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
Array.from(new Set(arr)) // ['a', 'b', 'c', 'd', 'e']

 

  • filter() + indexOf()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 모아 새로운 배열로 반환한다.

indexOf() 메서드는 호출한 string 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환한다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
arr.filter((item, index) => arr.indexOf(item) === index) // ['a', 'b', 'c', 'd', 'e']
저작자표시 비영리 변경금지

'JavaScript > 문법' 카테고리의 다른 글

[자바스크립트] 배열 중복 인덱스 찾기(for문, indexOf)  (0) 2023.04.25
[자바스크립트] 배열 중복값 찾기(filter, indexOf)  (0) 2023.04.25
[자바스크립트] sort() 배열 정렬하기 (숫자, 영어, 대문자, 소문자, 한글)  (0) 2023.04.19
[자바스크립트] 문자열(String) 또는 숫자(Number)를 배열로 만들기  (0) 2023.04.19
[자바스크립트] 소수점 처리하기(올림, 내림, 반올림, 제거, 자르기)  (0) 2023.04.19

프로젝트를 진행하다 보면 여러 개발 환경을 세팅해야 할 때가 있다.

그중 노드 버전을 변경해야 할 때가 있는데 NVM(Node Version Manager)을 사용하면 상황에 맞게 원하는 버전으로 노드를 설치하거나 변경할 수 있다.

 

1. nvm 설치하기

https://github.com/coreybutler/nvm-windows/releases

 

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

위의 사이트에서 nvm-setup.exe 파일을 다운받아 설치한다.

터미널에서 nvm -v를 하면 설치된 버전을 확인할 수 있다.

 

2. nvm install 버전

원하는 버전의 노드를 설치한다.

nvm list 명령어로 설치된 노드 버전을 확인할 수 있고,

nvm list available 명령어로 설치 가능한 노드 버전을 확인할 수 있다.

 

3. nvm use 버전

원하는 버전의 노드로 변경한다.

 

※주의※
node를 실행 파일로 설치한 경우, nvm으로 node 버전이 안 바뀔 수 있다.
이 때는 제어판에서 node를 삭제한 후, nvm을 설정한다.

 

저작자표시 비영리 변경금지

'기타 개념' 카테고리의 다른 글

REST, REST API, RESTful API란?  (0) 2023.06.08
웹 개발 프로세스 - 기획부터 배포까지  (0) 2023.05.22

결과 화면

Plus 버튼을 누르면 숫자가 1 증가하고, Minus 버튼을 누르면 숫자가 1 감소한다.

1. 바닐라 자바스크립트로 카운터 만들기

  • index.html
<body>
    <button id="minus">Minus</button>
    <span id="number"></span>
    <button id="plus">Plus</button>
</body>

 

  • index.js
// html 태그 선택
const plus = document.getElementById('plus')
const minus = document.getElementById('minus')
const number = document.getElementById('number')

// 초기값
let count = 0

// html 화면에 초기값 count 보여주기
number.innerText = count

// count가 변할 때 마다 화면에 보여주기
const updateText = () => {
  number.innerText = count
}

// count +1
const handlePlus = () => {
  count++
  updateText()
}

// count -1
const handleMinus = () => {
  count--
  updateText()
}

// 버튼 클릭 이벤트
plus.addEventListener('click', handlePlus)
minus.addEventListener('click', handleMinus)

 

※ 리덕스 기본 개념

  • store

data를 저장하는 곳이다.

import { createStore } from 'redux'
const store = createStore(reducer)

 

  • state(상태)

변경이 필요한 data이다.

 

  • reducre

state를 변경하는 function(함수)이다.

reducer의 return 값이 state가 된다.

const reducer = (state, action) => {}

 

  • action

reducer의 두번째 파라미터 값이다.

action을 통해서만 state를 변경할 수 있다.

action은 object(객체)타입만 가능하고, 그 key 값은 type만 가능하다. (action.type)

공식문서에 따르면 if문 보다는 switch문이랑 더 자주 사용된다.

 

  • dispatch

reducer에 action을 보내는 방법이다.

dispatch를 통해서만 action을 실행시킬 수 있다.

현재 이벤트를 발생시키는 함수라고 볼 수 있다.

store.dispatch({type: 액션이름})

 

  • subscribe

store 안에 있는 변화를 감지한다.

store.subscribe(함수호출)

 

2. 리덕스로 카운터 만들기

yarn add redux 또는 npm install redux

 

  • index.html
<body>
    <button id="plus">Plus</button>
    <span id="number"></span>
    <button id="minus">Minus</button>
</body>

 

  • index.js
import { createStore } from 'redux'

// html 태그 선택
const plus = document.getElementById('plus')
const minus = document.getElementById('minus')
const number = document.getElementById('number')

// 초기값
number.innerText = 0

// string을 직접 사용하기 보다는 변수로 만들어서 사용하는 것이 오타 등의 에러를 발견할 수 있어 효율적이다.
const ADD = 'ADD'
const MINUS = 'MINUS'

// 2. reducer(변수 이름은 자유)를 만든다.
const reduceCountModifier = (count = 0, action) => {
  // 3. action을 만든다.
  switch (action.type) {
    case ADD:
      return count + 1
    case MINUS:
      return count -1
    default:
      return count
  }
}

// 1. store를 만든다.
const countStore = createStore(reduceCountModifier)

// store 안에 있는 state를 가지고 온다.
const onChange = () => {
  number.innerText = countStore.getState()
}

// store 안에 있는 state의 변화를 감지한다.
countStore.subscribe(onChange)

// 4. dispatch를 만든다.
const handlePlus = () => {
  countStore.dispatch({type: ADD})
}
const handleMinus = () => {
  countStore.dispatch({type: MINUS})
}

// 클릭 이벤트
plus.addEventListener('click', handlePlus)
minus.addEventListener('click', handleMinus)
저작자표시 비영리 변경금지

'React > React with redux' 카테고리의 다른 글

[리액트][리덕스] #3.2 React Redux (To Do List 삭제하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리액트][리덕스] #3.1 React Redux (To Do List 추가하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리액트][리덕스] #3.0 React Redux (To Do List 세팅하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리덕스] #2 Pure Redex: To Do List - 초보자를 위한 리덕스 101  (0) 2023.04.27
[리덕스] #0 Redux Introduction - 초보자를 위한 리덕스 101  (0) 2023.04.20

리덕스는 자바스크립트 앱을 위한 예측 가능한 상태(state) 컨테이너이다.

리덕스는 자바스크립트를 사용할 수 있다면 바닐라 자바스크립트, 리액트, 뷰, 앵귤러 등 여러 환경에서 함께 사용할 수 있다.

(리액트와 많이 사용하긴 하지만, 리액트를 위한 전용 라이브러리가 아니다.)

 

1. 깃허브 레포지토리 만들기

https://github.com/heejae0811/vanilla-redux

 

2. npx create-react-app vanilla-redux(레포이름)

 

3. 불필요한 파일 삭제하기

저작자표시 비영리 변경금지

'React > React with redux' 카테고리의 다른 글

[리액트][리덕스] #3.2 React Redux (To Do List 삭제하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리액트][리덕스] #3.1 React Redux (To Do List 추가하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리액트][리덕스] #3.0 React Redux (To Do List 세팅하기) - 초보자를 위한 리덕스 101  (0) 2023.04.28
[리덕스] #2 Pure Redex: To Do List - 초보자를 위한 리덕스 101  (0) 2023.04.27
[리덕스] #1 Pure Redex: Counter - 초보자를 위한 리덕스 101  (0) 2023.04.20

https://school.programmers.co.kr/learn/courses/30/lessons/12948

 

문제 설명

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

 

제한조건

  • phone_number는 길이 4 이상, 20이하인 문자열입니다.

 

function solution(phone_number) {
    let length = phone_number.length - 4
    
    return phone_number.slice(0, length).replace(/[0-9]/g, "*") + phone_number.slice(length, phone_number.length)
}
저작자표시 비영리 변경금지

'JavaScript > 알고리즘 문제 풀기' 카테고리의 다른 글

[프로그래머스][2021 카카오 채용연계형 인턴십] 숫자 문자열과 영단어 - JavaScript  (0) 2023.04.25
[프로그래머스][월간코드첼린지시즌1] 두 개 뽑아서 더하기 - JavaScript  (0) 2023.04.25
[프로그래머스][연습문제] 바탕화면 정리 - JavaScript  (0) 2023.04.19
[프로그래머스][연습문제] 서울에서 김서방 찾기 - JavaScript  (0) 2023.04.19
[프로그래머스][연습문제] 정수 내림차순으로 배치하기 - JavaScript  (0) 2023.04.19

https://school.programmers.co.kr/learn/courses/30/lessons/161990

 

문제 설명

코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다.

컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을 가집니다. 드래그를 하면 파일들을 선택할 수 있고, 선택된 파일들을 삭제할 수 있습니다. 머쓱이는 최소한의 이동거리를 갖는 한 번의 드래그로 모든 파일을 선택해서 한 번에 지우려고 하며 드래그로 파일들을 선택하는 방법은 다음과 같습니다.

 

  • 드래그는 바탕화면의 격자점 S(lux, luy)를 마우스 왼쪽 버튼으로 클릭한 상태로 격자점 E(rdx, rdy)로 이동한 뒤 마우스 왼쪽 버튼을 떼는 행동입니다. 이때, "점 S에서 점 E로 드래그한다"고 표현하고 점 S와 점 E를 각각 드래그의 시작점, 끝점이라고 표현합니다.
  • 점 S(lux, luy)에서 점 E(rdx, rdy)로 드래그를 할 때, "드래그 한 거리"는 |rdx - lux| + |rdy - luy|로 정의합니다.
  • 점 S에서 점 E로 드래그를 하면 바탕화면에서 두 격자점을 각각 왼쪽 위, 오른쪽 아래로 하는 직사각형 내부에 있는 모든 파일이 선택됩니다.

 

예를 들어 wallpaper = [".#...", "..#..", "...#."]인 바탕화면을 그림으로 나타내면 다음과 같습니다. 이러한 바탕화면에서 다음 그림과 같이 S(0, 1)에서 E(3, 4)로 드래그하면 세 개의 파일이 모두 선택되므로 드래그 한 거리 (3 - 0) + (4 - 1) = 6을 최솟값으로 모든 파일을 선택 가능합니다.

 

(0, 0)에서 (3, 5)로 드래그해도 모든 파일을 선택할 수 있지만 이때 드래그 한 거리는 (3 - 0) + (5 - 0) = 8이고 이전의 방법보다 거리가 늘어납니다.

머쓱이의 컴퓨터 바탕화면의 상태를 나타내는 문자열 배열 wallpaper가 매개변수로 주어질 때 바탕화면의 파일들을 한 번에 삭제하기 위해 최소한의 이동거리를 갖는 드래그의 시작점과 끝점을 담은 정수 배열을 return하는 solution 함수를 작성해 주세요. 드래그의 시작점이 (lux, luy), 끝점이 (rdx, rdy)라면 정수 배열 [lux, luy, rdx, rdy]를 return하면 됩니다.

 

제한사항

  • 1 ≤ wallpaper의 길이 ≤ 50
  • 1 ≤ wallpaper[i]의 길이 ≤ 50
  • wallpaper의 모든 원소의 길이는 동일합니다.
  • wallpaper[i][j]는 바탕화면에서 i + 1행 j + 1열에 해당하는 칸의 상태를 나타냅니다.
  • wallpaper[i][j]는 "#" 또는 "."의 값만 가집니다.
  • 바탕화면에는 적어도 하나의 파일이 있습니다.
  • 드래그 시작점 (lux, luy)와 끝점 (rdx, rdy)는 lux < rdx, luy < rdy를 만족해야 합니다.

 

모든 좌표값을 모아서 최소, 최대값을 구한다.

function solution(wallpaper) {
    let array = []
    let startX = []
    let startY = []
    
    wallpaper.map((rows, idx) => {
        [...rows].map((cols, key) => {
            if(cols === '#') {
                startX.push(idx)
                startY.push(key)
            }
        })
    })
    
    return [Math.min(...startX), Math.min(...startY), Math.max(...startX) + 1, Math.max(...startY) + 1]
}
저작자표시 비영리 변경금지

'JavaScript > 알고리즘 문제 풀기' 카테고리의 다른 글

[프로그래머스][월간코드첼린지시즌1] 두 개 뽑아서 더하기 - JavaScript  (0) 2023.04.25
[프로그래머스][연습문제] 핸드폰 번호 가리기 - JavaScript  (1) 2023.04.19
[프로그래머스][연습문제] 서울에서 김서방 찾기 - JavaScript  (0) 2023.04.19
[프로그래머스][연습문제] 정수 내림차순으로 배치하기 - JavaScript  (0) 2023.04.19
[프로그래머스][연습문제] 문자열 내 p와 y의 개수 - JavaScript  (0) 2023.04.19

+ Recent posts

티스토리툴바