1.) link태그에 값 넘겨주기

const blogDatas = data?.allMicrocmsBlog?.edges
...
<Link
  to={`/blogDetails/${nodes.id}`}
  state={{ blogDatas }}
  className={styles.blogLink}
/>

이렇게 'state'라는 프롭스로 현재 페이지에서 받아쓰는 api데이터를 넣어준다.

2.) link태그로 넘어간 페이지에서 받아준다

데이터를 가진 컴포넌트에서는 state라는 키값으로 보냈지만, 받을때는 location이라는 키값 안에 state, 보낸키값으로 데이터가 존재한다 (왤케 어려워..)

const BlogDetail = ({ data, location }) => {

이렇게 location으로 받고

const propsBlogData = location?.state?.blogDatas

이렇게 받아쓰면된다

보낼때는 <Link/ >의 state={키값: 넘기려는 데이터} 라는 키값의 프롭스로 보내고 받을때는 해당 컴포넌트의 프롭스로 location을 명시하고 location > state > 키값으로 받아 사용하면된다

초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요.

제한사항

prices의 각 가격은 1 이상 10,000 이하인 자연수입니다. prices의 길이는 2 이상 100,000 이하입니다.

입출력 예

prices return [1, 2, 3, 2, 3] [4, 3, 1, 1, 0]

function solution(prices) {
    var answer = [];

    prices.forEach((value, index) => {
        let check = 0;
        for (let i = index; i < prices.length - 1; i++) {
            if (value <= prices[i + 1]) {
                check += 1
            } else {
                check += 1
                break;
            }
        }    
        answer.push(check);
    })

    return answer;
}

1. prices의 배열순서대로 자신을 제외한 다음값부터 끝의 값까지 순서대로 계속 비교한다
2. 크기가 같거나 클경우는 check의 값을 더하고(비교대상의 값보다 낮아지지 않았기 때문) 계속 순회를 이어가고 값이 작아질경우 check에 값을 더한후 반복문을 멈추고(크기가 작아졌으니 현재 인덱스까지 더해준후 종료) 다음값을 다시 계산한다

keymap, targets두개의 배열이 주어지는데 targets에 있는 문자를 완성시키기 위해서는 keymap배열에 있는 단어와 그단어의 순서대로 입력을 해야하는데 최소한의 타이핑으로 완성시킬수 있는 값을 구해야한다 단, 입력해야할 문자가 keymap에 존재하지 않는다면 -1을 리턴한다

function solution(keymap, targets) {
    let answer = [];
    let map = new Map();

    for (let key of keymap) {
        for (let i = 0; i < key.length; i++) {
            if (map.get(key[i]) > i + 1 || !map.has(key[i])) map.set(key[i], i+1);
        }
    }

    for (let tar of targets) {
        let targetLength = 0;
        for (let i = 0; i < tar.length; i++) {
            if (!map.has(tar[i])) {
                targetLength = -1
                break;
            } else {
                targetLength += map.get(tar[i])
            }
        }
        answer.push(targetLength);
    }

    return answer;
}

1. map을 생성후 keymap에 키와 인덱스를 저장해주는데 새로들어오는 값이 저장된값보다 작을경우에만 재할당을 해줘서 각각 키들의 최소값을 구해준다
2. targets 배열에있는 단어를 순서대로 한글자씩 map에 저장해둔 값을 찾고 값이 없을경우 -1을 저장후 for문을 종료하고 값이 있는경우엔 값을찾아 합한후 배열에 차곡차곡 저장해준다

요즘프로그래머스 문제들 보면 map을 활용해서 푸는 문제들이 자주보이는데 적절히 활용하면 쉽게 알고리즘을 풀 수 있을거같다 연습을 해봐야겠다

자바스크립트에서 제공하는 내장 객체인 Map을 생성하는데 사용되는 생성자입니다. Map은 키-값 쌍을 저장하는 자료 구조로, 특정 키와 연결된 값을 쉽게 관리할 수 있도록 도와준다.

개념자체는 객체와 비슷한데 다른점이 있다 차이점 몇가지를 요약하자면

1. 함수를 포함한 모든타입을 값으로 저장할 수 있다.
2. 맵의 크기를 size속성으로 불필요한 loop없이 확인할 수 있다.
3. for...of 루프 및 forEach 메서드 등을 사용하여 간편하게 순회가능
4. 삽입 순서를 보장해줌
5. key는 고유값으로써, 단 한개만 존재한다

자! 몇가지 사용법을 살펴보자

map생성

let map = new Map();

값 삽입

map.set(key이름, 저장할 value);

map.set('name', 'gil-dong');
map.set(200, 1000);
map.set('consoleFunc', () => console.log('check'));

이미 키값이 있는값으로 다시 set을 하면 덮어씌워진다

값 읽기

map.get('name') // 'gil-dong'
map.get(200) // 1000

값 확인

map.has('name') // true
map.has('age') // false

키값으로 확인해서 값이부여됐다면 true 없다면 false를 return해준다.

값 삭제

map.delete('name') // true
map.get('name') // undefined

map 크기 확인

map.size // 2

문자나 배열을 length로 크기체크를 할때 obj형식을 기존의 Object.key().length로 확인하는 방식에 비해 더욱 직관적이고 편리하다

객체처럼 사용가능하지만 좀더 사용성이 좋아보이고 객체사용시의 불편했던점들이 개선된 느낌이다

값이 삽입된 순서가 중요한 경우 값이 추가되거나 삭제되는 경우가 많을경우 키값으로 문자열이나 심볼이 아닌 다른것으로 세팅할 경우 이런 경우에 적절히 잘 판단해서 사용하면 용이할 것 같다!

1. players, callings 두개의 배열제공
2. callings 있는 선수 순서대로 players의 배열의 선수가 1칸씩 앞으로 땡겨진다

function solution(players, callings) {
    var answer = players;

    for (let i = 0; i < callings.length; i++) {
        let overtakingIdx = players.indexOf(callings[i]);
        [answer[overtakingIdx - 1], answer[overtakingIdx]] = [answer[overtakingIdx], answer[overtakingIdx - 1]]
    }

    return answer;
}

1. calling의 길이를 체크해서 해설진의 호출횟수를 정한다(이 횟수만큼만 배열이 변하기 때문)
2. 첫번째부터 호출 선수의 인덱스를 indexOf함수로 players배열에서 찾는다
3. index값과 index-1값을 서로 바꿔준다(추월할 경우만 callings배열에 들어있으니 players맨앞에 추월선수가 있을확률은 배제)

문제풀이 과정을 생각해보았을때 splice나 slice로 배열에서 삭제 후 다시 채워넣는 방법보다 쉽게 해결 할 수 있는방법을찾다가 배열구조 분해할당으로 answer배열에 내가 교체를 원하는 배열값과 재할당할 값을 넣어서 손쉽게 풀이하였다.

let array = [1, 3, 5, 7];
[array[1], array[2]] = [8, 9];
console.log(array) // [1, 8, 9, 7]

보통 객체의 구조분해할당을 자주써서 배열은 처음사용해보아서 정리해보았다

부모컴포넌트의 함수를 자식한테 넘겨 사용해본적은 많으나 그 반대의 상황이라 검색을 해보았고 react hooks "useImperativeHandle"를 사용해 간단히 해결해 사용법을 공유해보고자 한다.

부모 컴포넌트

const parentsRef = useRef<any>(null);

const childFnClick = () => {
    // 자식컴포넌트에서 만들어진 함수
    if (parentsRef.current) parentsRef.current.onToggleDetail('down');
    or
    parentsRef?.current.onToggleDetail('down');
}

return (
    <Layer
        parentsRef={parentsRef}
    />
    <button onClick={childFnClick}>자식함수 실행!</button>
)

1. 부모 컴포넌트에서 ref 생성후 자식컴포넌트에 넘겨줍니다

자식 컴포넌트

import React,{useImperativeHandle} from 'react';

const Layer = (props) => {
    const {parentsRef} = props;
    const onToggleDetail = () => {
        ...함수로직...
    }
    useImperativeHandle(parentsRef, () => ({
        onToggleDetail
      }))
}

2. 부모 컴포넌트에서 받은 ref를 useImperativeHandle( 받은 ref, () => ({

    부모한테 보낼 함수명 작성 (객체형태로 보내기 때문에 함수명만 작성한다)

   }) ) (원래 사용법은 forwardRef를 사용해서 ref를 넘겨주라 했는데 직관적으로 ref를 표현하기 위해 사용하지 않았다)

3. 이렇게 둘사이를 연결해주고 부모컴포넌트에서 childFnClick 함수 내용처럼 사용을 해주면 된다. (참고로 매개변수가 들어가는 함수면 담아서 함수를 실행해 주면 된다.)

처음으로 자식 컴포넌트의 함수를 실행해 보았는데 이런경우가 생길줄 몰랐는데 앞으로도 작업하다보면 생각치 못한일이 벌어질것이다. 그런데 언제나 해결법은 존재한다😱

한글이 포함됀 현재 url값 얻기 = decodeURI(window.location.pathname)

회사에서 소셜로그인을 할때 callbackUrl을 localStorage에 담아두고 리다이렉트 할때 가져와서 리 렌더링을 하는 과정에서 벌어진 문제가 있었습니다..

useLocation의 렌더링 문제

useLocation().pathname으로 쉽게 해결되는듯 보였으나 문제는 console을 찍어보니 라우터가 변경 될때마다 한번씩 렌더링이 되는거였습니다 (나는 패스명만 가져오면 되는데..?)

검색을 하다보니 useContext로 만들어져 location값이 변경될때마다 React.memo를 사용해도 렌더링이 일어나는 것이였다.... 출처 - https://velog.io/@eye3570/React-Router-%EC%99%9C-useLocation%EC%9D%80-render%EB%A5%BC-%EC%9D%BC%EC%9C%BC%ED%82%AC%EA%B9%8C

최초 마운트한번만 되면 끝나야하는 컴포넌트가 렌더링 되니 분명 성능저하 + 불필요한 렌더라고 생각해 다른방법을 찾아보았다

최종.. window.location.pathname

자바스크립트 문법인데 현재window의 패스명을 가져오는데 문제는 한글이 또 깨지는것 이였다... 자동으로 인코딩됀 결과값 내가 필요한 url은 한글이 포함돼 이방법으론 안되는가 했는데 역시 안되는것은 없었다^^..

진짜최종.. decodeURI(window.location.pathname)

url을 인코딩, 디코딩해주는 함수가 있었다... 이것으로 최종 문제를 해결했다

결국 리액트를 쓰던 뷰를쓰던 자바스크립트가 기본이니 기본기를 닦는게 중요하다는걸 새삼 또 느끼는 하루네요💧

base64의 기본정의

base64란 쉽게 말하자면 64진법으로 2제곱수들에 기반한 진법중 화면에 표시되는 ASCII 문자를 써서 표현할 수 있는 가장 큰 진법이다.

전송중에 그대로 수정되지않고 전송됨을 보장되고 그로인해 보통 전자메일등 이진 데이터, xml등 복잡한 데이터전송에 많이 쓰인다

엄밀히 따지면 암호화라기 보단 네트워크를 통해 난독화된 데이터를 전송하고 손실없이 전송하기 위함이고 데이터및 코드를 날것으로 보여주지 않기위함이 있다.

자바스크립트(리액트) 인코딩 btoa()

function App () {
    const encoding = () => {
        const id = 'abc123'
        const encodeId = btoa(id)
        console.log('encodeId', encodeId)
    }
    return (
        <>
            <button onClick={encoding}>
                인코딩!
            </button>
        </>
    )
}

예시로 버튼을 누르면 인코딩해서 콘솔에 찍어주는 함수를 만들어 보았습니다 결과는?? 짠~ 잘 찍혔습니다! 하지만(🚨🚨🚨중요🚨🚨🚨) btoa를 쓰면 ~btoa~~ 이렇게 중앙선이 쳐지는데 stackoverflow 검색결과 node환경에서 지원하지 않는다고 해결법은 window객체를 이용하라는 결과가 나왔습니다

const encodeId = window.btoa(id)

이렇게 앞에 window만 붙혀주면 해결됩니다! 둘다 실행은 되고 결과는 같지만 권장하는 방법으로 해결하자구요 :)

자바스크립트(리액트) 디코딩 atob()

마찬가지로 메소드를 사용해 인코딩된 문자를 메소드에 담아주면 됩니다.

const password = 'qwe123'
const encodeId = window.atob(password)

글을 마치며

이렇게 인코딩,디코딩 개념을 알아보았는데 데이터전송에서 변함이 없다는 이점을 가지고 있는 인코딩을 적재적소에 잘 사용해서 프론트의 질을 높히는 것이 중요할것 같다는 생각이 들었습니다😎

혹여 틀린정보가 있다면 댓글로 편하게 남겨주세요^^~

개요

처음에 파일을 백엔드에 넘길때 파라미터로 그냥 넘기려했는데 에러가 자꾸 나길래 해결법을 찾다 보니 file을 전송하려면 그냥 params값을 넘기는것이 아니라 new FormData라는곳에 key : value로 적재를 해서 보내야한다.

사용법

1. ev.target.files

<input type='file' accept='image/*, audio/*, .pdf, .txt' onChange={onChangeHandler} />

이런 html태그가 있고 accept는 올릴수 있는 파일들 셋팅이며 image/* 같은 코드는 이미지포맷 전체 .pdf같은 코드는 .pdf로 끝나는 파일을 뜻한다

const onChangeHandler = (ev) => {
    const files = ev.target.files
    console.log(files)
}

이렇게 onChange시 input file을 선택하면 콘솔에 FileList하고 객체로 정보값이 들어오게된다. (multipl속성을 쓰면 여러개의 인덱스를 가지지만 한개를 기준으로 하면 ev.target.files[0]을 쓰면된다.)

2. new FormData

이렇게 콘솔을 확인했으면

const formData = new FormData;
formData.append('files', files, files.name );

이렇게 new FormData를 변수에 담고 데이터를 적재해 준다. 매개변수 3개는 (속성, 데이터정보를 담은 변수(state or ref), 나타낼 파일명)

3. parameters

method: 'post',
      url: 'enquire/create',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }

파라미터를 호출하는 코드에서 data: formData, headers: {'Content-Type': 'multipart/form-data'} 이 두코드를 수정해서 요청하면 정상적으로 post동작을 수행한다.

쿠키는 기본적으로 key값, value값, 만료기한이 있는 저장소 개념이다 대부분의 브라우저에서 지원가능하며 브라우저에 저장이 되는것이다. 서버에서 쿠키에 데이터값을 요청하면 브라우저에 저장된 값이 만료되지 않았다면 서버로 전달되며 클라이언트(브라우저)에 300개까지 저장 가능하며 한개의 쿠키당 4kb정도의 크기를 가지고 있다

설치

npm install react-cookie
or
yarn add react-cookie

import

import {useCookies} from 'react-cookie'

const [cookies, setCookie, removeCookie] = useCookies();

setCookie('키값','데이터값',{path,expires,maxAge...})

여기서 useCookies에 인자로 들어가는 값은 의존성을 띄며 값을 적지 않으면 모든쿠키중 값이 변할때 마다 렌더링이 된다.

setCookie 첫번째는 키값으로 쓸 이름 두번째는 넣을 데이터값 세번째는 path = 경로(문자열): 쿠키 경로, /모든 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용 expires = 만료(날짜): 쿠키의 절대 만료 날짜이며 데이터타입이 날짜여야한다 maxAge(숫자): 클라이언트가 쿠키를 수신한 시점부터 들어간 인자값으로 n초후에 쿠키만료 (초[ms가 아닌 s])

using

function App(){
    const setCookieFn = () => {
        // moment는 날짜구하는 라이브러리 이며 1분후를 나타내고 expires의 타입이 date라서 마지막메소드로 치환해준다
        const expires =  moment().add('1','m').toDate()
        setCookie('coookeee',true,{expires})
    }

    useEffect(()=>{
        if (cookies.coookeee == 'true'){
            console.log(쿠키값에 따라 수행할 내용)
        }
    },[])

    console.log(cookies.coookeee)
    // 콘솔창에서도 true가 잘 찍힌다

    return (
        <>
            <button onClick={setCookieFn}>
                cookie저장
            </button>
        </>
    )
}

이렇게 버튼을 누르고 함수를 실행시켜 쿠키를 셋팅해주면 이렇게 개발자도구창 > Application > Cookies를 누르면 데이터가 잘 들어와있다! 시간도 1분뒤에 만료되게끔 잘 설정이 되어있다😎

useEffect구문으로 나와있는것 처럼 쿠키값으로 데이터를 비교해서 팝업창같이 몇일간 휘발성으로 데이터를 사용해야 할 경우 예제대로 사용하면 편리하다

하지만 setCookie의 두번째 인자로 Boolean값을 넣어 봤는데 string으로 타입이 들어가 있었다 내생각에는 http통신을 할때 string값만 이동이 가능해서 자동으로 파싱이 된것같다...(틀린말이라면 댓글로 알려주심 감사하겠습니다)

후기

이렇게 처음으로 쿠키를 사용해봤는데 간단히 팝업창을 띄우고 몇일간 안볼래요라는 기능을 만들기위해 사용해봤는데 라이브러리를 써서 그런지 생각보다 쉬웠고 쿠키의 특성대로 이렇게 몇일간 사용하며 개인정보등 민감한 문제를 삼지 않는 데이터값 관리할때 유용하게 사용할 수 있을것 같다✌🏻

npm install --save react-scroll-wheel-handler
or
yarn add react-scroll-wheel-handler

import

import ReactScrollWheelHandler from "react-scroll-wheel-handler"

사용법

<ReactScrollWheelHandler
  upHandler={(e) => console.log("scroll up")}
  downHandler={(e) => console.log("scroll down")}
>
  ...
</ReactScrollWheelHandler>

props

• upHandler: Function that is triggered on scroll up
• downHandler: Function that is triggered on scroll down
• leftHandler: Function that is triggered on scroll left
• rightHandler: Function that is triggered on scroll right
• CustomComponent: Component with forwardRef. It will be rendered in place of the container div.
• pauseListeners: Boolean. isRequired. Default: false. With this props you can block all events from be fired
• timeout: Integer. isRequired. Default: 600. Timeout between scroll.
• disableKeyboard: Boolean. Default: false.
• disableSwipe: Boolean. Default: false.
• disableSwipeWithMouse: Boolean. Default: false.
• preventScroll: Boolean. isRequired. Prevent scroll, if you want to implement your own scrolling. Default: false.
• wheelConfig: Array. Default: []. Set config for Lethargy lib. Example: [7, 100, 0.05]. stability, sensitivity, tolerance.

설명

주로 사용하는 메소드는 upHandler = { 스크롤 업할시 동작할 함수 } upHandler = { 스크롤 다운할시 동작할 함수 } timeout = { 스크롤이 타임아웃 되는 동안의 시간 default = 600ms }

사용하게된 계기

react-responsive-carousel를 사용해 섹션별로 스크롤해서 이동하는 페이지를 구성중이었는데 deltaY값을 이용해서 스크롤 컨트롤을 해보려했는데 문제점은 deltaY값이 들어오는것 보다 함수 실행이 더빠르고 들어오는값을 제어할 방법이 없었기에(떠오르는 방법이 없었다가 정확할 수 있다) React Scroll Wheel Handler라이브러리를 활용했고 내가 원했던 한번의 스크롤링에 한번의 함수가 실행됬고 그에 맞게 콜백을 넣어서 원하는 정답에 도달할 수 있었다✌🏻

리액트를 사용하다보면 props로 컴포넌트간의 값을 전달해줄때가 있는데 컴포넌트의 수가 많아지고 자식이 많아지면 그 값을 props로 전달하는데 한계가 있다 (오류가 났을때 디버깅시 오래걸릴 수 있기때문) 그래서 생겨난것이 useContext훅이고 컴포넌트를 하나 만든후 전역적으로 데이터값을 받아서 사용할 수 있기에 유지보수에 용이할 것으로 생각된다

사용방법

1. context에 사용될 컴포넌트를 하나 만들어준다. ex...(./store/SampleContext.js)
2. 컴포넌트에 createContext를 import하고 기본값으로 사용될 인자를 괄호안에 넣어준다 (provider or value가 없을경우 넘겨질 기본값)

   SampleContext.js
   

import {createContext} from "react";

export const SampleContext = createContext(null);

3. app.js에서 해당 context값을 받을 컴포넌트를 context명.Provider태그로 감싸준다 (provider는 value를 받는다)

app.js

import {SampleContext} from '경로'

function App(){ const [text,setText] = useState(false) return ( <SampleContext.Provider value={text}> </SampleContext.Provider> ) }

4. 프롭스를 필요로하는 자식컴포넌트에 가서 context컴포넌트 import후 불러와준다.

import react,{useContext} from 'react' import {SampleContext} from '경로'

const Use = () => { const text = useContext(SampleContext) return (

```

후기

사용해보니 토이 프로젝트에서 react-router-dom을 사용했는데 여기선 routes들만 존재해야 한다는 오류가 떠서 아직 value값까지 설정해서 넘기진 못했는데 원하는 컴포넌트에 import해서 값을 띄워보는덴 성공했다

아직 토이프로젝트나 포폴용 작업같은 소규모 밖에 안해봐서 사용할일이 크게 없었는데 큰작업에서는 아주 편리하게 사용될것 같아 공부를 해두면 좋을것 같다는 생각이 들었다😎

글을 쓰는데 참고한 링크 https://youtu.be/LwvXVEHS638

풀이

function solution(x) {
    let answer = 0
    let splited = String(x).split("").map((value)=>parseInt(value))
    let allPlus = splited.forEach((i)=>answer+=i)

    return x % answer === 0 ? true :  false
}

풀이법

1. 주어진 수를 나눠야 하기 때문에 문자열로 치환해서 숫자 한개씩 분리하고 다시 숫자로 바꾼후 변수에 담아준다.
2. forEach문을 사용해 배열의 담긴 수를 모두 더해준다(x가 두자릿수가 아닐 경우가 있을 수 있기에 forEach문을 사용했다.)
3. 마지막으로 주어진 수랑 나눠서 더한값과 비교후 Boolean을 리턴해준다.

다른사람들의 풀이

대게 reduce를 사용해 배열을 더하는 풀이가 많은데 아직까진 reduce를 정확하게 사용하긴 어려워서 나는 forEach문으로 풀어냈다....

혹은 for문으로 배열의 길이만큼 더해주는풀이도 있는데 굳이 for문을 안써도 단순반복으로 풀릴것 같아 사용하지 않았다

풀이

function solution(n) {

    let isSqrt = Math.sqrt(n)
    let answer
    Number.isInteger(isSqrt) ? answer = Math.pow(isSqrt+1,2) : answer = -1
    return answer

}

풀이법

1. isSqrt 변수에 주어진 수를 루트를 씌워준다.
2. 조건문으로 루트가 씌워진 수가 정수면 +1을 해서 2제곱 값을 리턴해주고 정수가 아니면 -1을 리턴해준다.

풀이후기

대부분 사람들이 Math.Sqrt() = 루트값 구해주는 메서드 Math.pow(제곱할 수,몇제곱을 할지) = 제곱근 구하는 메서드 Number.isInteger() = 정수인지 참거짓을 리턴해주는 메서드 를 사용해 적절한 조건문으로 풀이를 했더군요

예전 문제라 그런지 계산식이 들어간 풀이도 있었는데 적절한 메서드를 사용해 풀이를 하니 가독성도 좋고 연산속도도 빠르게 나왔다..! : )

다행히 저번에 약수구하기 문제풀때 Math.sqrt를 알게되어서 이번엔 쉽게 풀었다..Number.isInteger도 이번에 처음 사용해 보았는데 정수판별할때 사용하면 편리할것 같다!!

두개배열의 비교 (배열의 길이가 다르고 한배열이 특정패턴을 가졌을때) 배열이 두개가 주어지고 두값을 반복할때 for문등 함수를 사용하지 않고 배열비교를 하려할때 사용하면 좋을것이다.

const a = [1,2,3,4,5];
const b = [1,3,2,4,5,6,3,7];

이렇게 길이가 다른 두배열이 있다는 가정하에 두개의 값을 순차적으로 비교한다면

b.map((item,index)=>{
    a[index % a.length] === item 
})

이런식으로 길이가 긴 배열의 index는 미지수이고 a는 한정되어있으니 인덱스/a의길이 이렇게 해주면 나머지값으로 0일땐 0 1일땐 1 2일땐 2리턴되기 때문에 반복문처럼 길이 가 긴 배열의 길이만큼 배열 인덱스만큼 짧을 배열을 순회할 수 있는것이다

풀이

function solution(answers) {

    let one = [1, 2, 3, 4, 5];
    let two = [2, 1, 2, 3, 2, 4, 2, 5];
    let three = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5];

    let everyAnswer = [0,0,0];

    answers.map((value,index)=>{
        return one[index % one.length] === value && everyAnswer[0]++
    })
    answers.map((value,index)=>{
        return two[index % two.length] === value && everyAnswer[1]++
    })
    answers.map((value,index)=>{
        return three[index % three.length] === value && everyAnswer[2]++
    })

    let maxNum = Math.max(...everyAnswer)
    let answer = []

    for(let i=0; i<everyAnswer.length; i++){
        if (everyAnswer[i] == maxNum){
            answer.push(i+1)
        }
    }

    return(answer)

}

풀이방법

1. 수포자들의 정답 패턴을 각각 배열에 담아준다.
2. 정답을 맞춘 수를 담기위해 everyAnswer에 배열값 3개를 준비해주고 answers로 들어오는 배열을 map메소드를 통해 수포자들의 배열값을 비교해 정답이면 각각 배열에 ++를 시켜준다.
3. 정답을 많이 맞춘 수치를 구하기 위해 Math.max를 사용해 변수에 담아서 준비한다
4. for반복문으로 everyAnswer 길이만큼 반복을 해주는데 everyAnswer의 값이 maxNum과 같으면 가장많은 정답을 맞춘 사람이니 배열의 index값의 +1을 해서 answer에 정답자 번호를 넣어준다.(여러사람일 경우도 순차적으로 추가되기때문에 이방법을 사용)

풀이후기

처음에 결과로 오류가 엄청 나오길래 딱 든생각이 문제에보면 최대 10,000문제 라는 말이있는데 그러면 배열을 계속해서 루프를 시키면서 결과를 받아야하는데 내가 선언한 배열을 딱 정해져있어서 오류가 난다고 생각했고 분하지만 도저히 생각이 나질않아 이부분만 정답풀이를 보았는데 처음에 내생각에 반복문이나 다른 메소드들이 있을줄 알았는데 그게 아니였다...

코드에서보면 one[index % one.length] === value 이 부분에서 긴배열의 map에서index 랑 짧은 배열의 나머지값으로 일정패턴배열의 값을 계속 돌릴 수 있었다

이부분은 중요한 개념일 것 같아서 따로 글을 올려두려한다🤓

풀이

function solution(s) {
    let sSplit = s.split(' ').map((value)=>{
        let answer = value.split('').map((value,index)=>{
            return index % 2 === 0 ? value.toUpperCase() : value.toLowerCase()
        })
        return answer.join('')
    })
    return sSplit.join(' ')
}

function solution(s) {
    let sSplit = s.split(' ')
    let bucket = [];
    for (let i=0; i<sSplit.length; i++){
        let ssSplit = sSplit[i].split('').map((value,index)=>{
            return index % 2 === 0 ? value.toUpperCase() : value.toLowerCase()
        })
        bucket.push(ssSplit.join(''))
    }

    return(bucket.join(' '))
}

풀이방법

1. 공백을 기준으로 문자열을 나눠준다.
2. 3개의 문자열이 되었으면 3개의 문자열에서 또 한글자씩 나눠준다.
3. 나눠진 3개의 문자열의 인덱스를 나눴을때 나머지가 없다면 짝수이므로 toUpperCase를 사용해 대문자로 치환해준다.(홀수는 소문자로 치환해 준다.)
4. 그후 나눠진 문자열을 join('')으로 합쳐주고 배열 3개가 나오면 join(' ')공백을 넣어 문자열을 합쳐주고 정답을 return해준다.

   풀이후기

5. 문제를 잘 읽자 코드실행은 정답으로 나오는데 오류가 많아서 보니 예시문제가 홀수여서 공백포함 index계산을 하다보니 정답처리가 된것이지 문자가 하나라도 짝수였으면 정답이 안되는 문제였던것이다...🥲
6. 문제를 잘 읽자..(2) 이건 테스트케이스 까지 추가해서 풀어냈는데 오답이 더많이 나와서 질문하기를 좀 뒤져본 결과 '예시테스트에서 문자가 무조건 소문자로 들어오지 않을것이다' 라는 글을보고 4번줄에 value만 있는부분에 .toLowerCase() 를 추가하니 정답이였다...(결국 같은문제 다른방식으로 두번품..ㅋ)😂

풀이

function solution(d, budget) {
    let answer = 0
    let total = 0
    let dSort = d.sort((a,b)=> a-b)
    for (let i=0; i<d.length; i++){
        if (total + dSort[i] <= budget){
            total += dSort[i]
            answer ++
        }
    }
    return answer
}

풀이방식

1. 적은수 부터 합해서 계산해 나가야 하기 때문에 sort 함수를 통해 오름차순으로 배열을 정리해준다.

2. 반복문을 통해 배열 길이만큼 total에 덧셈을 하고 budget값보다 같거나 작을때 까지만 더하고 정답을 return해 준다.

   다른사람의 풀이

   function solution(d, budget) {
    let answer = 0;
    let money = 0;
    d.sort((a,b) => a-b).forEach(function(val){
        money += val;
        if(money <= budget){
            answer++;    
        }
   
    })
    return answer;
   }

   나와 비슷한 방식이지만 반복문을 쓰지않고 forEach문으로 money에 순차적으로 값을 더하다 money를 이용해 조건문으로 budget보다 작을때까지만 새로운 변수 answer에 ++하는 방식을 사용하였다

풀이 후기

처음에 좀 쉬울줄 알았는데 map도 써보고 reduce도 써보았지만 아직 능숙치 않아서인지 그냥 제일 기본적인 반복문과 조건문으로 문제를 해결했다 효율성에서 시간은 괜찮게 나왔는데 좀더 이문제에 적합한 함수를 사용했더라면 이라는 아쉬움이 묻어난다...🥲

문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.

function solution(n) {
    return n.toString().split('').reverse().map(item=>Number(item))
}

문제풀이 방식

1. 숫자열은 split함수가 안되기 때문에 문자열로 바꾼후 잘라준다.

2. reverse함수를 통해 순서를 바꿔준다.

3. map함수를 통해 배열이 string객체로 담겨져 있는걸 한개씩 숫자로 반환해서 배열을 완성해준다.

처음엔 마지막 문자열을 숫자로 바꾸는 부분을 단순 parseInt등으로 생각했는데 조금 찾아보니 map함수로 일일히 리턴을 해줘야만 하는것 같아서 해보니 정상 작동했다

풀이후기

어쩌다보니 한줄짜리 프로그램이 되었는데 굳이 여러변수를 만들지 않고 풀어보니 간단하기도 했고 가독성만 괜찮다면 짧게 쓰는것도 좋을것같다🤓