IT로그아웃

Flux 패턴

준승박 — Wed, 15 Jun 2022 09:47:48 +0900

이번 글에서는 FLUX라는 패턴에 대해알아보고 등장배경에 대해 알아보겠습니다.

MVC 한계점?

MVC에서 View는 Controller에 연결되어 화면을 구성하는 단위요소이므로 다수의 View들을 가질 수 있습니다. 그리고 Model은 Controller를 통해서 View와 연결되어지지만, 이렇게 Controller를 통해서 하나의 View에 연결될 수 있는 Model도 여러개가 될 수 있습니다. 즉, 화면에 복잡한 화면과 데이터 구성이 필요하다면, Controller에 다수의 Model과 View가 복잡하게 연결되어 Massive ViewController(대규모 MVC 어플리케이션)가 되어버립니다.
View와 Model간에도 관계가 복잡하게 연결되어있어서 수정시 테스트가 힘들고, 파악이 어렵기 때문에 여러 Side-Effect를 불러오게 되는 문제점이 있습니다.

뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때, 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이 연관된 모델을 다시 갱신하기때문에, 관계에 대한 추적이 힘들다.
앱에 대한 기능 추가 및 변경에 따라 생기는 문제점을 예측하기 힘들다
앱이 복잡해 질수록 생기는 추가 업데이트에 관한 작성도 어려워진다.

이러하여 페이스북은 MVC패턴을 이용한 복잡한 어플리케이션에서 나타나는 문제점들을 해결하기 위해 FLUX패턴을 만들어 내었습니다.

Flux 디자인 패턴이란?

Action이 발생하면, Diapacher에서 해당 액션을 받아와 Store에서 저장된 정보에 변경을 하여 View 다시 전될되도록 하는 단방향 데이터 흐름을(unidirectional data flow) 적용시킨패턴입니다.
FLux는 대규모 어플리케이션에서 발생 할 수 있는 MVC패턴의 복잡성을 해결 하기위해 등장하였습니다.

Flux 패턴의 핵심요소

Flux에서는 4가지 핵심요소가 존재합니다. Action, Store, Dispatcher, View

Action

액션은 데이터의 상태를 변경할 수 있는 명령어 카드와 같습니다. 액션 생성자는 새로 발생한 액션의 타입과 데이터 페이로드를 액션 메시지로 묶어 디스패쳐로 전달합니다.

Dispatcher

디스패쳐는 액션 메시지를 감지하는 순간 그것을 각 스토어에 전달합니다. 전달은 콜백 함수로 이루어지며, 등록되어 있는 모든 스토어로 페이로드를 전달할 수 있습니다. 이때 스토어가 서로를 의존하고 있다면 (2개의 스토어) 특정 스토어가 업데이트되기를 기다리게 해주는 waitFor()를 사용할 수 있습니다.

Store

스토어는 어플리케이션의 상태를 변경할 수 있는 메서드를 가지고 있습니다. 어떤 타입의 액션이 날아왔느냐에 따라 메서드를 다르게 적용해 상태를 변경하게 됩니다.스토어에 저장된 데이터는 오직 액션에 의해서만 변경이 되어야 한다. 그래서 공개적으로는 setter들은 존재하지 않고 오직 getter들만 있게 된다.

View

보여지는 분 Vue에 해당되는 부분입니다. 컨트롤러 뷰는 스토어에서 변경된 데이터를 가져와 모든 자식 뷰에게 데이터를 분배합니다. 데이터를 넘겨받은 뷰는 화면을 새로 렌더링합니다.

Vue 이벤트 - day3

준승박 — Thu, 2 Jun 2022 13:59:26 +0900

Vue 이벤트

Vue에서 이벤트를 다루는 방법에 대하여 알아보겠습니다.

Vue에서는 이벤트를 인라인 이벤트 처리방법과 이벤트 메서드 헨들링 방법이 존재합니다.

1. 인라인 이벤트

Vue의 이벤트의 경우에는 v-on디렉티브를 통해 이벤트를 처리할 수 있습니다. 가장 많이 사용되는 Click이벤트를 구현하여 보겠습니다.

<template>
  <div>
    <button v-on:click="good +=1">굳</button>
    <button @click="good +=1">굳</button>
  </div>
</template>

클릭 이벤트의 경우 버튼을 클릭시 변수good의 값이 +1 되는 이벤트를 작성한 코드입니다.

위와 같이 인라인 이벤트의 경우 클릭이벤트에서 원하는 코드를 입력하여 직접 실행하도록 합니다.

하지만 인라인 이벤트의 경우 한계점이 존재합니다.

어떠한 한계점이 존재할까요? 그렇습니다. 이벤트의 코드가 변경되거나 로직이 복잡해졌을 경우입니다.

위에 문제점을 해결 하기 위해 우리는 vue에서는 메서드를 통해 이벤트를 처리 할 수 있습니다.

2. 이벤트 핸들링 메서드

앞에서 구현한 코드를 메서드를 통해 작성해 보겠습니다.

<template>
  <div>
    <button v-on:click="good()">굳</button>
    <button @click="good()">굳</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      good: 0
    }
  },
  methods: {
    good() {
      if(good =< 10) this.good++
      else this.good--
    },
  },
}
</script>

버튼을 클릭시 good 메서드를 호출하게됩니다. good 메서드는 변수 good의 값을 컨트롤 하고 있습니다.

위와 같이 인라인 이벤트와 비교하여 복잡한 코드를 추가후 v-on디렉티브를 통해 메서드를 호출 할 수 있습니다.

3. 이벤트

vue에는 click 이벤트 외 여러가지 이벤트들이 존재합니다.

click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	`<Form>`이 제출될 때 실행함
reset	`<Form>`이 재설정될 때 실행함
select	`<select>`의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

4. 이벤트 수식어

vue에는 click 이벤트 외 여러가지 이벤트들이 존재합니다.

.prevent	기본 이벤트의 자동 실행을 중단
.once	한번만 이벤트를 실행
.stop	이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단)
.capture	포착 단계에서만 이벤트를 발생
.self	발생 단계에서만 이벤트를 발생

5. 키보드 이벤트

altKey	ALT 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
shiftKey	SHIFT 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
ctrlKey	CTRL 키가 눌러 졌는지 여부를 나타냅니다 (true/fale)
metaKey	META 키가 눌러 졌는지 여부를 나타냅니다. 윈도우에서는 window key 맥은 CommandKey
Key	이벤트에 의해서 나타나는 키의 값을 리턴함. 대소문자 구분

6. 마우스이벤트

button	이벤트를 발생시킨 마우스 버튼 0: 마우스 왼쪽 1: 마우스 휠 2: 마우스 오른쪽 버튼
ClientX, ClientY	마우스 이벤트가 일어 났을 때의 뷰포트 영역상의 좌표
offsetX, offsetY	마우스 이벤트가 발생한 HTML 요소 영역상에서의 좌표
pageX, pageY	마우스 이벤트가 일어났을 때의 HTML(document)영역상의 좌표
screenX, screenY	마우스 이벤트가 일어났을 때의 모니터 화면 영역상의 좌표

Vue 디렉티브 - day2

준승박 — Tue, 12 Apr 2022 15:28:56 +0900

Vue 디렉티브

디렉티브란 ? HTML 안에서 v-접두사를 사용하는 속성들을 의미합니다.
화면의 요서를 더 쉽게 조작하기 위하여 사용하는 기능들을 의미합니다.

1. v-text

해당 HTML 태그에 text를 표시 할 경우 사용됩니다.
innerText와 동일한 기능을 수행합니다.

<template>
  <div class="hello">
    <div v-text="text"></div>
  </div>
 </template>
 <script>
  export default {
    name: 'TEST',
    data(){
      return {
          text:'테스트중입니다.'
      }
    }
  }
</script>

2. v-if

지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다.
JAVASCRIPT의 if구문과 같은 방법 사용 가능

<template>
  <div class="hello">
    <div v-if='flag === 1'>flag 값이 1 일 경우 표시 하겠습니다</div>
    <div v-else-if='flag === 2'>flag 값이 2 일 경우 표시 하겠습니다</div>
    <div v-else>그 외의 값 일 경우 표시하게습니다.</div>
  </div>
  </template>
  <script>
  export default {
    name: 'TEST',
    data(){
      return {
        flag: 1
      }
    }
  }
</script>

해당 코드를 실행 시킬시 flag값에따라 표시되는 text가 다르다는 것을 확인 할 수 있습니다.

3. v-for

지정한 뷰 데이터 개수만큼 해당 HTML을 반복출력 할 수 있습니다.

<template>
  <div class="hello">
    <div v-for='(element, index) in list' :key="index">{{ element }}</div>
  </div>
</template>
<script>
  export default {
    name: 'TEST',
    data(){
      return {
        list: [ '사과', '바나나', '파인애플', '포도' ]
      }
    }
  }
</script>

4. v-show

v-if와 같이 해당 HTML을 표시할지 말지 결정하는 디레티브이지만 v-if의 경우 해당 태그를 완전 삭제하지만 v-show는 css의 display:none과 같이 실제 태그는 남아있지만 화면상으로만 보이지 않는 상태를 가지는 차이점이 있습니다.

<template>
  <div class="hello">
    <div v-if='flag'>flag 값이 true 일 경우 표시 하겠습니다</div>
  </div>
  </template>
 <script>
  export default {
    name: 'TEST',
    data(){
      return {
        flag: true
      }
    }
  }
</script>

5. v-bind

HTML 태그의 class, style 과 같은 속성과 뷰 데이터의 속성을 연결하여 사용 할 수 있습니다.
v-bind의 경우 v-접두사 문구를 생략하여 사용 할 수 있습니다.

<template>
  <div class="hello">
    <div v-bind:id="id" v-bind:class="name" :style="{color:colorStyle}" >{{ name }}</div>
  </div>
</template>

<script>
  export default {
    name: 'TEST',
    data(){
      return {
        id:1,
        name: 'className',
        colorStyle: 'red',
      }
    }
  }


</script>

HTML의 태그 속성을 통해 id와 class를 컨트롤하고 폰트컬러를 변경하여 표시하였습니다.

6. v-on

HTML의 태그에 이벤트를 연결 할 때 사용, 대표적으로 click이벤트가 있습니다.

<template>
  <div class="hello">
    <button v-on:click='handleClick'>버튼</button>
    <div>{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'TEST',
  data(){
    return {
      text:'클릭전 텍스트'
    }
  },
  methods: {
    handleClick() {
      this.text = '클릭후 텍스트'  
    }
  },
}
</script>

click이벤트를 핸들링하는 코드입니다.
버튼을 클릭전에는 '클릭전 텍스트'가 표시 되지만 버튼을 클릭시 '클릭후 텍스트'가 표시됩니다.

7. v-once

지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다.
HTML태그를 딱 한 번만 렌더링해주는 것이 특징이며 주로 변동이 없는 정적인 부분을 보여줄때 사용 됩니다. (값이 변경되어도 초기값만 표시)

<template>
  <div class="hello">
      <button v-on:click='handleClick'>버튼</button>
    <div v-once>여기 값은 변하지 않습니다. {{ text }}</div>
  </div>
 </template>

<script>
export default {
  name: 'TEST',
  data(){
    return {
      text:'클릭전 텍스트'
    }
  },
  methods: {
    handleClick() {
      this.text = '클릭후 텍스트'  
    }
  },
}
</script>

Vue 환경 설정 - day1

준승박 — Tue, 12 Apr 2022 09:20:01 +0900

개발 환경 설정

1. Visual Studio Code : 코드 편집 툴

1) 설치

사용 가능한 코드 편집 프로그램을 설치 하여줍니다.
[비쥬얼 스튜디오] : https://code.visualstudio.com/

추가 확장 프로그램

Auto close Tag : 자동 태그 닫기
Live Server : 코딩을 실시간으로 확인-적용시켜 작업하기 편리
Prettier : 코드 자동 정렬
ESLint : 소스코드를 분석해 문법 에러
vscode-icons : VSCode 내 파일의 아이콘을 설정하여 무슨 파일인지 한번에 파악가능
Vetur : 문법 강조, vue.js 파일 코드의 하이라이팅 지원
Vue VSCode Snippets : 코드 조작 지원, vue.js 파일 초기 구성 생성

2. Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다.
즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다.

1) 설치
https://nodejs.org/ko/

홈페이지에서 현재버젼이 아닌 안정적, 신뢰도 높은 LTS버젼을 다운받을 것을 추천드립니다.

3. Vue CLI

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

CLI 설치하기

npm install -g @vue/cli

아래의 명령어를 입력후 vue버젼이 나온다면 제대로 설치된것입니다.
vue --version // 3.x

프로젝트 생성해보기

1) 프로젝트명을 정하여 프로젝트 생성
   vue create 프로젝트명

2) 설치하고 싶은 vue의 버젼을 선택하여줍니다 (vue3선택)
   defalut를 선택시 바로 설치 가능

2-1) if manually을 선택시 여러가지 옵션들을 선택할수 있음

프로젝트 실행해보기

1) 설치폴더에 가면 vue_test라는 폴더가 생성된것을 확인할수있음

2) 위에서 설치한 vs code를 열어 폴더를 열어줌

3) HelloWorld.vue 와함께 파일들이 생성된것을 확인할수있음
    터미널을 열어 npm run serve를 입력해줌

4) 성공 메세지와함께 로컬 서버로 접속하면 아래에 페이지 확인 가능

프로그래머스 - Lv.1수박수박수박수박수박수?

준승박 — Wed, 24 Nov 2021 04:12:07 +0900

문제 설명

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

제한 조건

n은 길이 10,000이하인 자연수입니다.

입출력 예nreturn

3	"수박수"
4	"수박수박"

나의 풀이

function solution(n) {
  let answer = '';

    for(let i = 1; i<=n; i++){
        if(i % 2 === 0){
            answer += "박"
        }else{
            answer += "수"
        }
    }

  return answer;
}

몸풀기 문제인것같다. 짝수홀수만 계산할줄 알면된다.

다른사람 풀이

function solution(n) {
  let answer = '';

  for (let i = 0; i < n; i++) {
    answer += i % 2 === 0 ? '수' : '박';
  }

  return answer;
}

똑같이 n만큼 반복문을 돌고 짝수엔 "수"를, 홀수엔 "박"을 리턴값에 더해준것같다.

프로그래머스 - Lv.1 키패드누루기

준승박 — Mon, 22 Nov 2021 23:55:52 +0900

문제 설명

스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다.

이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다.
맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다.

엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다.
왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다.
오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다.
가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다.
4-1. 만약 두 엄지손가락의 거리가 같다면, 오른손잡이는 오른손 엄지손가락, 왼손잡이는 왼손 엄지손가락을 사용합니다.

순서대로 누를 번호가 담긴 배열 numbers, 왼손잡이인지 오른손잡이인 지를 나타내는 문자열 hand가 매개변수로 주어질 때, 각 번호를 누른 엄지손가락이 왼손인 지 오른손인 지를 나타내는 연속된 문자열 형태로 return 하도록 solution 함수를 완성해주세요.

[제한사항]

numbers 배열의 크기는 1 이상 1,000 이하입니다.
numbers 배열 원소의 값은 0 이상 9 이하인 정수입니다.
hand는 "left" 또는 "right" 입니다.
- "left"는 왼손잡이, "right"는 오른손잡이를 의미합니다.
왼손 엄지손가락을 사용한 경우는 L, 오른손 엄지손가락을 사용한 경우는 R을 순서대로 이어붙여 문자열 형태로 return 해주세요.

입출력 예numbershandresult

[1, 3, 4, 5, 8, 2, 1, 4, 5, 9, 5]	"right"	"LRLLLRLLRRL"
[7, 0, 8, 2, 8, 3, 1, 5, 7, 6, 2]	"left"	"LRLLRRLLLRR"
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]	"right"	"LLRLLRLLRL"

입출력 예에 대한 설명

입출력 예 #1

순서대로 눌러야 할 번호가 [1, 3, 4, 5, 8, 2, 1, 4, 5, 9, 5]이고, 오른손잡이입니다.

왼손 위치오른손 위치눌러야 할 숫자사용한 손설명

*	#	1	L	1은 왼손으로 누릅니다.
1	#	3	R	3은 오른손으로 누릅니다.
1	3	4	L	4는 왼손으로 누릅니다.
4	3	5	L	왼손 거리는 1, 오른손 거리는 2이므로 왼손으로 5를 누릅니다.
5	3	8	L	왼손 거리는 1, 오른손 거리는 3이므로 왼손으로 8을 누릅니다.
8	3	2	R	왼손 거리는 2, 오른손 거리는 1이므로 오른손으로 2를 누릅니다.
8	2	1	L	1은 왼손으로 누릅니다.
1	2	4	L	4는 왼손으로 누릅니다.
4	2	5	R	왼손 거리와 오른손 거리가 1로 같으므로, 오른손으로 5를 누릅니다.
4	5	9	R	9는 오른손으로 누릅니다.
4	9	5	L	왼손 거리는 1, 오른손 거리는 2이므로 왼손으로 5를 누릅니다.
5	9	-	-

따라서 "LRLLLRLLRRL"를 return 합니다.

입출력 예 #2

왼손잡이가 [7, 0, 8, 2, 8, 3, 1, 5, 7, 6, 2]를 순서대로 누르면 사용한 손은 "LRLLRRLLLRR"이 됩니다.

입출력 예 #3

오른손잡이가 [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]를 순서대로 누르면 사용한 손은 "LLRLLRLLRL"이 됩니다.

나의 풀이

function solution(numbers, hand) {
    var answer = '';

    let center = [2,5,8,11]
    let location_L = 10;
    let location_R = 12;
    let dist_L = 0;
    let dist_R = 0;

    for(let i = 0 ; i < numbers.length; i++){

        let val = numbers[i]
        if (numbers[i] == 0 ){
            val = 11;
        }
        if ( val == 1 || val == 4 || val == 7){
            answer += 'L';
            location_L =  val;
        } else if (val == 3 || val == 6 || val == 9){
            answer += 'R';
            location_R =  val;
        } else{
            dist_L = center.indexOf(location_L) != -1 ? Math.abs(val - location_L ) /3 : Math.abs(val-1 - location_L ) /3 +1;
            dist_R = center.indexOf(location_R) != -1 ? Math.abs(val - location_R ) /3 : Math.abs(val+1 - location_R ) /3 +1;

            if (dist_L == dist_R){
                if (hand == "right"){
                    answer += 'R'
                    location_R = val;
                } else{
                     answer += 'L'
                    location_L = val;   
                } 
            } else if(dist_L > dist_R) {
                answer += 'R'
                 location_R = val;
            } else{
                answer += 'L'
                location_L = val;
            }
        }

    }
    return answer;
}

프로그래머스 - Lv.1 크레인 인형뽑기 게임

준승박 — Mon, 22 Nov 2021 01:40:02 +0900

문제 설명

게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다.
"죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다.

게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 칸부터 인형이 순서대로 쌓이게 됩니다. 다음 그림은 [1번, 5번, 3번] 위치에서 순서대로 인형을 집어 올려 바구니에 담은 모습입니다.

만약 같은 모양의 인형 두 개가 바구니에 연속해서 쌓이게 되면 두 인형은 터뜨려지면서 바구니에서 사라지게 됩니다. 위 상태에서 이어서 [5번] 위치에서 인형을 집어 바구니에 쌓으면 같은 모양 인형 두 개가 없어집니다.

크레인 작동 시 인형이 집어지지 않는 경우는 없으나 만약 인형이 없는 곳에서 크레인을 작동시키는 경우에는 아무런 일도 일어나지 않습니다. 또한 바구니는 모든 인형이 들어갈 수 있을 만큼 충분히 크다고 가정합니다. (그림에서는 화면표시 제약으로 5칸만으로 표현하였음)

게임 화면의 격자의 상태가 담긴 2차원 배열 board와 인형을 집기 위해 크레인을 작동시킨 위치가 담긴 배열 moves가 매개변수로 주어질 때, 크레인을 모두 작동시킨 후 터트려져 사라진 인형의 개수를 return 하도록 solution 함수를 완성해주세요.

[제한사항]

board 배열은 2차원 배열로 크기는 "5 x 5" 이상 "30 x 30" 이하입니다.
board의 각 칸에는 0 이상 100 이하인 정수가 담겨있습니다.
- 0은 빈 칸을 나타냅니다.
- 1 ~ 100의 각 숫자는 각기 다른 인형의 모양을 의미하며 같은 숫자는 같은 모양의 인형을 나타냅니다.
moves 배열의 크기는 1 이상 1,000 이하입니다.
moves 배열 각 원소들의 값은 1 이상이며 board 배열의 가로 크기 이하인 자연수입니다.

입출력 예boardmovesresult

[[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]]

[1,5,3,5,1,2,1,4]

입출력 예에 대한 설명

입출력 예 #1

인형의 처음 상태는 문제에 주어진 예시와 같습니다. 크레인이 [1, 5, 3, 5, 1, 2, 1, 4] 번 위치에서 차례대로 인형을 집어서 바구니에 옮겨 담은 후, 상태는 아래 그림과 같으며 바구니에 담는 과정에서 터트려져 사라진 인형은 4개 입니다.

나의 풀이

function solution(board, moves) {
    var answer = 0;
    let box=[];
    console.log(board.length);
    for(let i = 0; i < moves.length; i++) {
        let position = moves[i] -1;
        for(let j = 0; j < board.length; j++) {
            if(board[j][position] !=0) {
                box.push(board[j][position])
                board[j][position]=0;
                
                if(box.length >= 2 && box[box.length-1] == box[box.length-2]) {
                    box.pop();
                    box.pop();
                    answer +=2;
                }
                
                break;
            }
        }
    }
    console.log(box);
    console.log(board);
    
    
    return answer;
}

단순하게 작업하였다.. 2차배열중 1차부터 차근 차근 찾아나갔다. 내가 생각했을때 가장 이용하기 쉬운 방법은 move[1,5,3,5,1,2,1,4]와 같은 뽑을 위치가 정해져있다는 것이다. 만약 1이면 1열 5면 5열이라는것을 알수있고 움직임을 제한시켜 최소화 시킬수있었다.

그리고 뽑았을경우 전에 값을 2개 지워주는 방법을 pop()을 두번이용하여 삭제후 answer에 +2를 함으로써 답을 출력시켜주었다.

프로그래머스 - Lv.1 체육복

준승박 — Tue, 16 Nov 2021 02:01:20 +0900

문제 설명

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

제한사항

전체 학생의 수는 2명 이상 30명 이하입니다.
체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌 체육복이 있는 학생만 다른 학생에게 체육복을 빌려줄 수 있습니다.
여벌 체육복을 가져온 학생이 체육복을 도난당했을 수 있습니다. 이때 이 학생은 체육복을 하나만 도난당했다고 가정하며, 남은 체육복이 하나이기에 다른 학생에게는 체육복을 빌려줄 수 없습니다.

입출력 예nlostreservereturn

5	[2, 4]	[1, 3, 5]	5
5	[2, 4]	[3]	4
3	[3]	[1]	2

입출력 예 설명

예제 #1
1번 학생이 2번 학생에게 체육복을 빌려주고, 3번 학생이나 5번 학생이 4번 학생에게 체육복을 빌려주면 학생 5명이 체육수업을 들을 수 있습니다.

예제 #2
3번 학생이 2번 학생이나 4번 학생에게 체육복을 빌려주면 학생 4명이 체육수업을 들을 수 있습니다.

나의 풀이

function solution(n, lost, reserve) {
    var answer = 0;
    let st = [];
    for(let i=0;i <= n;i++){
        st[i] = 1;
    }
    for(let i=1;i<=n;i++){
        for(let j=0;j<lost.length;j++){
            if(i == lost[j]) st[i] = 0;
        }
        for(let j=0;j<reserve.length;j++){
            if(i == reserve[j]) st[i] += 1;
        }
    }
    for(let i=1;i<=n;i++){
        if(st[i]==0 && st[i-1]==2){
            st[i-1] = 1;
            st[i] = 1;
        }else if(st[i]==0 && st[i+1]==2){
            st[i+1] = 1;
            st[i] = 1;
        }
    }
    for(let i =1;i<=n;i++){
        if(st[i]>0) answer++;
    }
    
    return answer;
}

문제 해설

    for(let i=0;i <= n;i++){
        st[i] = 1;
    }
    for(let i=1;i<=n;i++){
        for(let j=0;j<lost.length;j++){
            if(i == lost[j]) st[i] = 0;
        }
        for(let j=0;j<reserve.length;j++){
            if(i == reserve[j]) st[i] += 1;
        }
    }

위의 코드를 통해서 잃어버린사람과 여유분을 생각하여 필드를 만들어주는것은 쉬웠다 .... 그러나 생가가보다 밑에서 체육복을 나눠주는 과정이 어려웠다... 특히 앞뒤 구분해야하는 점이 어려웠던거같다..

다른사람의 풀이

function solution(n, lost, reserve) {      
    return n - lost.filter(a => {
        const b = reserve.find(r => Math.abs(r-a) <= 1)
        if(!b) return true
        reserve = reserve.filter(r => r !== b)
    }).length
}

보고선.. 또한번의 좌절감을 느꼈다.... 너무 아름다웠고 다시한번 메서드를 활용법에서 대해서 생각해봐야할것같다..

프로그래머스 - Lv.1 신규아이디 추천

준승박 — Tue, 16 Nov 2021 01:14:37 +0900

문제 설명

카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다.
다음은 카카오 아이디의 규칙입니다.

아이디의 길이는 3자 이상 15자 이하여야 합니다.
아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다.
단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다.

"네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 주려고 합니다.
신규 유저가 입력한 아이디가 new_id 라고 한다면,

1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다.
2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다.
3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다.
4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다.
5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다.
6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다.
     만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다.
7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.

예를 들어, new_id 값이 "...!@BaT#*..y.abcdefghijklm" 라면, 위 7단계를 거치고 나면 new_id는 아래와 같이 변경됩니다.

1단계 대문자 'B'와 'T'가 소문자 'b'와 't'로 바뀌었습니다.
"...!@BaT#*..y.abcdefghijklm" → "...!@bat#*..y.abcdefghijklm"

2단계 '!', '@', '#', '*' 문자가 제거되었습니다.
"...!@bat#*..y.abcdefghijklm" → "...bat..y.abcdefghijklm"

3단계 '...'와 '..' 가 '.'로 바뀌었습니다.
"...bat..y.abcdefghijklm" → ".bat.y.abcdefghijklm"

4단계 아이디의 처음에 위치한 '.'가 제거되었습니다.
".bat.y.abcdefghijklm" → "bat.y.abcdefghijklm"

5단계 아이디가 빈 문자열이 아니므로 변화가 없습니다.
"bat.y.abcdefghijklm" → "bat.y.abcdefghijklm"

6단계 아이디의 길이가 16자 이상이므로, 처음 15자를 제외한 나머지 문자들이 제거되었습니다.
"bat.y.abcdefghijklm" → "bat.y.abcdefghi"

7단계 아이디의 길이가 2자 이하가 아니므로 변화가 없습니다.
"bat.y.abcdefghi" → "bat.y.abcdefghi"

따라서 신규 유저가 입력한 new_id가 "...!@BaT#*..y.abcdefghijklm"일 때, 네오의 프로그램이 추천하는 새로운 아이디는 "bat.y.abcdefghi" 입니다.

[문제]

신규 유저가 입력한 아이디를 나타내는 new_id가 매개변수로 주어질 때, "네오"가 설계한 7단계의 처리 과정을 거친 후의 추천 아이디를 return 하도록 solution 함수를 완성해 주세요.

[제한사항]

new_id는 길이 1 이상 1,000 이하인 문자열입니다.
new_id는 알파벳 대문자, 알파벳 소문자, 숫자, 특수문자로 구성되어 있습니다.
new_id에 나타날 수 있는 특수문자는 -_.~!@#$%^&*()=+[{]}:?,<>/ 로 한정됩니다.

[입출력 예]

nonew_idresult

예1	"...!@BaT#*..y.abcdefghijklm"	"bat.y.abcdefghi"
예2	"z-+.^."	"z--"
예3	"=.="	"aaa"
예4	"123_.def"	"123_.def"
예5	"abcdefghijklmn.p"	"abcdefghijklmn"

나의 문제 풀이

function solution(new_id) {
    var answer = '';
    
    new_id = new_id.toLowerCase();
    
    new_id = new_id.replace(/[^a-z\d\-\_\.]/g, "");

    new_id = new_id.replace(/\.+/gi, ".");

    new_id = new_id.startsWith(".") ? new_id.slice(1) : new_id; 
    
    new_id = new_id.endsWith(".") ? new_id.substring(0, new_id.length-1) : new_id;
    
    if (new_id.length == 0) { 
        new_id = "a"; 
    }
    
    if (new_id.length > 15) { 
        new_id = new_id.substring(0, 15); 
        new_id = new_id.endsWith(".") ?new_id.substring(0, new_id.length-1) : new_id; 
    }
    
    if (new_id.length <= 2) { 
        for (let i = new_id.length; i<3; i++) { 
            new_id += new_id.substring(i-1); 
        } 
    }
    
    
    answer = new_id;    
    
    return answer;
}

풀이 해설

문제에서 주어진 7단계의를 코딩으로 순서대로 표시해주었다. 정규식에서 조금 해맨 감이있지만 인터넷에서 검색해 금방 답을 도출해 낼수있었다.

가장어려웠던점

정규식 !!

다른사람의 풀이

function solution(new_id) {
    const answer = new_id
        .toLowerCase() // 1
        .replace(/[^\w-_.]/g, '') // 2
        .replace(/\.+/g, '.') // 3
        .replace(/^\.|\.$/g, '') // 4
        .replace(/^$/, 'a') // 5
        .slice(0, 15).replace(/\.$/, ''); // 6
    const len = answer.length;
    return len > 2 ? answer : answer + answer.charAt(len - 1).repeat(3 - len);
}

const solution = (new_id) => {
    const id = new_id
        .toLowerCase()
        .replace(/[^\w\d-_.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace(/^\.|\.$/g, '')
        .padEnd(1, 'a')
        .slice(0, 15)
        .replace(/^\.|\.$/g, '')        
    return id.padEnd(3, id[id.length-1])
}

1번풀이를 보고 반성햇다.. 체이닝을 끊지 않고 모든부분을 정규식을 통해 값을 구해줬다..

2. 또한 padEnd라는 함수를 통해 값을 구해주는것을 보고 padEnd에 대해 찾아보는 계기가 되었다.

프로그래머스 - Lv.1 두 개 뽑아서 더하기

준승박 — Tue, 16 Nov 2021 00:52:36 +0900

문제 설명

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

제한사항

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

입출력 예

numbersresult

[2,1,3,4,1]	[2,3,4,5,6,7]
[5,0,2,7]	[2,5,7,9,12]

입출력 예 설명

입출력 예 #1

2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.)
3 = 2 + 1 입니다.
4 = 1 + 3 입니다.
5 = 1 + 4 = 2 + 3 입니다.
6 = 2 + 4 입니다.
7 = 3 + 4 입니다.
따라서 [2,3,4,5,6,7] 을 return 해야 합니다.

입출력 예 #2

2 = 0 + 2 입니다.
5 = 5 + 0 입니다.
7 = 0 + 7 = 5 + 2 입니다.
9 = 2 + 7 입니다.
12 = 5 + 7 입니다.
따라서 [2,5,7,9,12] 를 return 해야 합니다.

나의 풀이

function solution(numbers) {
    var answer = [];
    var allnumbers = [];
    for(let i = 0; i< numbers.length; i++){
        for(let j = 0; j < numbers.length; j++){
            if(i != j ) allnumbers.push(numbers[i] + numbers[j]);
        }
    }
    const set = new Set(allnumbers);

    answer = [...set];
    answer.sort((a, b) => a - b);
    return answer;
}

풀이 해설

엄청 단순히 생각했었다. 우선 배열안의 숫자(자신 제외)를 한번씩 더한 값을 가지는 배열을 만들어준후

Set을 통해 중복 숫자를 삭제하고 정렬해주었다.

다른사람의 풀이

function solution(numbers) {
    const temp = []

    for (let i = 0; i < numbers.length; i++) {
        for (let j = i + 1; j < numbers.length; j++) {
            temp.push(numbers[i] + numbers[j])
        }
    }

    const answer = [...new Set(temp)]

    return answer.sort((a, b) => a - b)
}

function solution(numbers) {
    var answer = [];
    numbers = numbers.sort();
    console.log(numbers);
    for(var i = 0; i < numbers.length; i++){
        for(var k = i+1; k < numbers.length; k++){
            if(!answer.includes(numbers[i]+numbers[k])){
                answer.push(numbers[i]+numbers[k]);
            }
        }
    }
    answer = answer.sort(function(a, b){
        return a-b;
    });
    return answer;
}

다른사람의 풀이를 보며 느낀점은 기본적인 생각은 다 비슷했던거같다 먼저 자신을 포함한 모든수와의 합을 구한후 중복수를 제거해주고 정렬 해주는 느낌이 들었다.