useQuery?

• useQuery는 React Query에서 제공하는 가장 중요한 훅 중 하나
• 비동기 데이터 fetching, 캐싱, 업데이트 및 재시도 로직을 매우 효율적으로 처리할 수 있게 해줍니다. 즉, useQuery는 서버에서 데이터를 가져오는 과정을 관리하면서, 개발자가 일일이 처리해야 할 로직을 간편하게 해결해주는 역할을 합니다.

useQuery의 주요 역할:

1. 데이터 fetching 관리 useQuery는 지정된 queryFn(쿼리 함수)을 실행하여 서버로부터 데이터를 가져옵니다. 이를 통해 REST API, GraphQL, 또는 다른 비동기 데이터 소스를 쉽게 호출할 수 있습니다.

const { data, isLoading, error } = useQuery(['posts'], fetchPosts)

2. 캐싱 useQuery는 가져온 데이터를 자동으로 캐시에 저장합니다. 동일한 쿼리 키를 사용하여 동일한 데이터를 요청하면, 서버로 새로운 요청을 보내지 않고 캐시된 데이터를 즉시 반환합니다. 이를 통해 서버 요청 횟수를 줄이고 성능을 최적화할 수 있습니다.

3. 데이터의 자동 업데이트 useQuery는 캐시된 데이터가 일정 시간이 지나거나 데이터가 변경될 때 자동으로 다시 데이터를 가져와 최신 상태로 업데이트합니다. 이를 stale-while-revalidate 패턴이라고 합니다. 예를 들어, staleTime이 지나면 캐시된 데이터가 오래된 것으로 간주되고, 다시 데이터를 가져옵니다.

4. 자동 재시도 useQuery는 네트워크 에러 등으로 인해 데이터 가져오기가 실패했을 때, 자동으로 재시도(retry)를 수행합니다. 기본적으로 3번까지 재시도하며, 이 동작은 설정에 따라 조정할 수 있습니다.

   const { data, isError } = useQuery(['posts'], fetchPosts, {
   retry: 2 // 최대 2번까지 재시도
   })

5. 로딩 상태 및 에러 관리 useQuery는 로딩 상태, 에러 상태, 성공 상태 등의 상태를 관리할 수 있습니다. 이를 통해 로딩 스피너를 보여주거나, 에러 발생 시 에러 메시지를 출력하는 등의 처리를 쉽게 할 수 있습니다.

   const { data, isLoading, isError } = useQuery(['posts'], fetchPosts)
   

if (isLoading) return

6. 쿼리 키를 통한 캐싱 및 데이터 식별
queryKey는 각 쿼리의 고유 식별자 역할을 합니다. queryKey에 따라 캐시를 구분하며, 동일한 queryKey를 가진 쿼리는 동일한 캐시 데이터를 공유합니다.

const { data } = useQuery(['posts', userId], () => fetchPosts(userId))

7. 수동 데이터 갱신 (refetch)
필요에 따라 데이터를 수동으로 다시 가져올 수 있도록 refetch 함수를 제공합니다. 이 기능은 데이터가 사용자 상호작용에 의해 갱신되어야 할 때 유용합니다.

const { data, refetch } = useQuery(['posts'], fetchPosts) <button onClick={() => refetch()}>Refetch Data

8. 의존성 기반의 데이터 fetching (enabled 옵션)
특정 조건이 충족될 때만 쿼리를 실행하도록 제어할 수 있습니다. 이를 위해 enabled 옵션을 사용하며, 주로 다른 상태 값에 따라 쿼리를 실행하거나 멈추고 싶을 때 사용됩니다.

const { data } = useQuery(['posts'], fetchPosts, { enabled: isUserLoggedIn, // isUserLoggedIn이 true일 때만 쿼리 실행 })

9. 배경 동기화
useQuery는 백그라운드에서 데이터를 지속적으로 동기화할 수 있습니다. 이를 통해 실시간으로 데이터를 최신 상태로 유지할 수 있습니다.

const { data } = useQuery(['posts'], fetchPosts, { refetchInterval: 60000, // 60초마다 데이터를 다시 가져옴 })

### useQuery를 사용한 기본 예시:

import { useQuery } from '@tanstack/react-query'

const fetchPosts = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts') if (!response.ok) throw new Error('Network response was not ok') return response.json() }

const Posts = () => { const { data, isLoading, isError, error } = useQuery(['posts'], fetchPosts)

if (isLoading) return

return (

{data.map((post) => (
• {post.title}
))}

export default Posts

### 요약
**useQuery**는 비동기 데이터를 가져오고, 캐시하고, 관리하는 모든 작업을 간편하게 처리해 줍니다.
캐싱과 자동 재시도, 자동 갱신 같은 기능을 제공해 서버 데이터와의 동기화를 쉽게 유지할 수 있습니다.
상태 관리를 통해 로딩, 에러, 성공 상태를 적절히 관리할 수 있습니다.
수동 데이터 갱신, 배경 동기화 등 다양한 옵션을 제공하여 데이터 fetching을 정교하게 제어할 수 있습니다.
이를 통해 효율적으로 비동기 데이터를 관리하고, 코드의 복잡성을 줄일 수 있습니다.


## 컴포넌트를 호출하면 useQuery 가 호출되서 fetching 된다는 거지? 
맞습니다! useQuery 훅을 사용한 컴포넌트를 호출하면 해당 컴포넌트가 렌더링될 때 자동으로 useQuery가 실행되고, 데이터를 fetching합니다. React Query가 비동기 함수(queryFn)를 실행해서 데이터를 가져오고, 그 결과를 컴포넌트 내에서 사용할 수 있게 되는 구조입니다.


## useQuery는 언제 실행돼?
useQuery는 다음과 같은 경우에 자동으로 실행됩니다:

1. 컴포넌트가 처음 마운트될 때
컴포넌트가 렌더링될 때, 즉 컴포넌트가 DOM에 처음 추가되면 useQuery가 자동으로 실행됩니다.
이때 지정된 queryFn 함수가 호출되어 데이터를 fetching합니다.

const { data, isLoading } = useQuery(['posts'], fetchPosts)

2. queryKey가 변경될 때
queryKey는 React Query에서 쿼리를 구별하고, 데이터를 캐싱하는 데 사용됩니다. queryKey가 변경되면 React Query는 이 변화를 감지하고, 자동으로 데이터를 다시 fetching합니다.
예를 들어, queryKey에 userId가 포함되어 있을 때, userId가 변경되면 useQuery는 다시 실행됩니다:

const { data, isLoading } = useQuery(['user', userId], () => fetchUser(userId))

userId가 변경되면 React Query는 이 쿼리가 새로운 데이터라고 판단하고 다시 데이터를 가져옵니다.

3. 캐시된 데이터가 만료(stale)되었을 때
React Query는 캐시된 데이터를 유지하면서 staleTime이라는 설정을 통해 데이터를 새로 가져올 시점을 결정합니다.
staleTime이 지나면 캐시된 데이터가 "stale(낡음)" 상태로 간주되고, 데이터가 만료되면 다시 fetching이 자동으로 실행됩니다.

const { data } = useQuery(['posts'], fetchPosts, { staleTime: 10000 }) 이 예에서는 10초가 지나면 캐시된 데이터가 만료되고, 쿼리가 다시 실행됩니다.

4. 페이지를 다시 포커싱할 때
기본적으로 React Query는 페이지가 다시 포커싱될 때 (즉, 사용자가 페이지를 떠났다가 다시 돌아왔을 때) 자동으로 데이터를 새로 fetching합니다. 이 기능은 최신 데이터를 유지하기 위해 유용합니다.

const { data } = useQuery(['posts'], fetchPosts)

사용자가 탭을 이동했다가 다시 돌아오면 useQuery가 다시 실행됩니다.

5. 네트워크가 재연결될 때
네트워크 연결이 끊겼다가 다시 연결될 때에도 useQuery는 자동으로 실행되어 데이터를 다시 fetching합니다.

6. refetch를 수동으로 호출할 때
필요에 따라 데이터를 다시 가져오고 싶다면, refetch 함수를 수동으로 호출할 수 있습니다. useQuery는 이 함수가 호출될 때마다 쿼리를 다시 실행합니다.

const { data, refetch } = useQuery(['posts'], fetchPosts)

return <button onClick={() => refetch()}>Refetch Data

7. 의존성 옵션인 enabled가 true로 변경될 때
useQuery는 enabled 옵션을 통해 언제 쿼리를 실행할지 제어할 수 있습니다. 이 값이 false였다가 true로 변경되면 쿼리가 실행됩니다.

const { data } = useQuery(['posts'], fetchPosts, { enabled: isUserLoggedIn })

isUserLoggedIn 값이 true가 되면 useQuery가 실행됩니다.

### 요약:
- 컴포넌트가 처음 렌더링될 때 (DOM에 추가될 때)
- queryKey가 변경될 때
- 캐시된 데이터가 만료(stale) 상태일 때
- 페이지가 다시 포커싱될 때
- 네트워크가 다시 연결될 때
- 수동으로 refetch를 호출할 때
- enabled 옵션이 true로 변경될 때
이런 다양한 시점에서 useQuery는 데이터를 다시 가져오며, 이 과정을 통해 최신 데이터를 유지할 수 있습니다.


## 꼭 파라미터만 query key 에 넣을수있엉 ?

queryKey에 꼭 파라미터만 넣을 필요는 없습니다. queryKey는 React Query에서 캐싱과 데이터를 구별하기 위한 고유 식별자로 사용되며, 단순히 파라미터뿐만 아니라 모든 값을 포함할 수 있습니다. queryKey는 배열이나 문자열, 또는 객체로 구성할 수 있습니다.

### ex) query key 가 1 을 호출했어 그러고 2를 호출해 그리고 다시 1을 호출해 
그러면 이미 캐싱이 되어있잖아 1 이 
근데 db 상에서는 캐시가 1인 데이터가 바껴있어 
그러면 1이 이미 캐싱되어잇기때매 재호출안해 ? 

- 좋은 질문입니다! React Query는 캐싱된 데이터를 사용하는데, 이를 최신 상태로 유지하기 위한 여러 가지 방법을 제공합니다. queryKey가 "1"인 데이터를 다시 호출했을 때, 캐시된 데이터를 바로 사용하긴 하지만, 데이터가 업데이트되었을 가능성을 대비해 재호출이 필요한 상황에서는 데이터를 자동으로 다시 fetching할 수 있습니다.

### React Query가 캐시된 데이터를 관리하는 방식:

1. 캐시된 데이터 사용:

queryKey가 "1"인 쿼리는 이미 캐싱된 데이터가 있기 때문에 바로 캐싱된 데이터를 사용합니다. 이렇게 하면 빠르게 UI를 업데이트할 수 있습니다.

2. staleTime:

React Query는 **staleTime**이라는 설정을 통해 데이터를 얼마나 오래 "신선한 상태"로 유지할지 결정할 수 있습니다. staleTime이 지나면 데이터는 "stale" 상태가 되고, React Query는 자동으로 다시 데이터를 fetching할 수 있습니다.
기본적으로 staleTime은 0으로 설정되어 있기 때문에, 데이터를 캐시에서 사용하더라도 곧바로 다시 fetching하여 최신 데이터를 가져옵니다.

const { data } = useQuery('1', fetchData, { staleTime: 5000 }) // 5초 동안

캐시된 데이터가 유효
위 예시에서는 5초 동안 캐시된 데이터가 신선한 것으로 간주되며, 그 후에는 다시 fetching이 이루어집니다.

3. 페이지 포커스 시 자동 fetching:

React Query는 페이지가 다시 포커스될 때(사용자가 다른 탭으로 갔다가 돌아왔을 때) 캐시된 데이터가 stale 상태가 아니더라도 자동으로 다시 fetching하여 최신 데이터를 가져옵니다. 이 기능은 기본으로 활성화되어 있습니다.

const { data } = useQuery('1', fetchData, { refetchOnWindowFocus: true })

4. 수동으로 데이터를 다시 fetching:

만약 데이터가 바뀌었다는 것을 알고 있거나, 강제로 다시 fetching하고 싶다면 refetch 함수를 호출할 수 있습니다.

const { data, refetch } = useQuery('1', fetchData)

// 수동으로 refetch 호출 <button onClick={() => refetch()}>다시 불러오기

5. 데이터가 바뀌었다는 것을 감지하는 전략 (onSuccess나 onSettled):

서버에서 데이터를 가져온 후 onSuccess나 onSettled와 같은 옵션을 통해 데이터를 갱신했는지 확인할 수 있습니다.
onSuccess 콜백은 데이터 fetching이 성공적으로 완료된 후 실행되며, 이를 통해 추가적인 로직을 처리할 수 있습니다.

### 그럼 staleTime 이걸 설정안하면 사실상 캐싱되는 데이터가 없는거네 ?

- 아니요, staleTime을 설정하지 않아도 데이터는 여전히 캐싱됩니다. 하지만 기본 설정에서 캐시된 데이터가 즉시 stale 상태가 됩니다. 즉, **데이터는 캐싱되지만, 캐시된 데이터를 바로 stale(낡음)으로 간주하고 최신 데이터를 서버에서 다시 fetching**하게 됩니다.

#### staleTime을 설정하지 않았을 때의 동작:
1. 데이터 캐싱: useQuery는 기본적으로 모든 데이터를 캐싱합니다. 하지만 staleTime이 기본값인 0일 경우, 캐시된 데이터는 즉시 "stale" 상태로 간주됩니다.
3. stale 상태: 캐시된 데이터가 stale 상태일 때, React Query는 컴포넌트가 마운트되거나 페이지가 포커스될 때마다 자동으로 최신 데이터를 다시 fetching합니다.
3. 캐시된 데이터 사용: stale 상태의 캐시 데이터는 여전히 사용됩니다. 즉, **서버로부터 새 데이터를 받아오기 전에 캐시된 데이터를 먼저 화면에 보여주지만, 곧바로 새로운 데이터를 가져오는 요청을 동시에 시작**합니다.

## 그러니까 캐시된 데이터를 화면에 먼저 표시해놓고 서버에서 가져오는게 뭐가 좋은거야 ?? 

캐시된 데이터를 먼저 화면에 표시하고, 동시에 서버에서 최신 데이터를 가져오는 방식은 사용자 경험(UX)을 개선하고, 성능 최적화 측면에서 여러 가지 이점이 있습니다. 다음은 이러한 방식이 좋은 이유입니다:

1. 빠른 응답 시간으로 사용자 경험 향상
캐시된 데이터를 사용하면, 사용자가 페이지를 열었을 때 서버 응답을 기다리지 않고 즉시 화면에 데이터를 표시할 수 있습니다. 서버에서 최신 데이터를 받아오는 동안 사용자에게는 이미 화면에 데이터가 보이기 때문에 앱이 더 빠르고 응답성 있게 느껴집니다.
서버 요청에 시간이 걸리는 경우에도 사용자는 기다림 없이 기존 데이터를 먼저 확인할 수 있습니다.
예시:
**쇼핑몰 사이트에서 제품 리스트를 보다가 새로고침을 하면, 이전에 본 제품 리스트가 바로 표시되고, 최신 재고 상태나 가격은 나중에 서버에서 업데이트**됩니다.
**사용자 입장에서는 페이지 로딩 시간이 거의 느껴지지 않음**.
최신 정보가 필요할 경우에만 백그라운드에서 자동으로 데이터가 업데이트.

2. 네트워크 지연에 대한 완화
네트워크 상태가 불안정하거나 서버 응답 시간이 길어지더라도, 캐시된 데이터를 보여주면 사용자가 빈 화면을 보지 않게 됩니다.
서버에서 최신 데이터를 받는 데 시간이 걸리더라도, 캐시된 데이터를 통해 중간 경험을 제공함으로써, 사용자가 더 나은 경험을 하게 됩니다.
예시:
모바일 데이터가 느리거나 와이파이 연결이 약한 경우, 캐시된 데이터를 먼저 보여주면, 사용자는 일단 화면이 로드되었다고 인식합니다. 최신 데이터가 곧 업데이트되면, 사용자는 성능 문제를 크게 느끼지 않게 됩니다.

3. 데이터 변동이 적은 경우 캐시가 유용
만약 데이터가 자주 변하지 않는 경우, 캐시된 데이터를 사용하는 것이 더 효율적입니다.
자주 변하지 않는 데이터를 서버에서 매번 불러오는 대신, 캐시를 사용하여 네트워크 요청을 줄이고 성능을 최적화할 수 있습니다.
예시:
사용자의 프로필 정보나 설정과 같은 데이터는 자주 변하지 않기 때문에, 캐시된 데이터를 먼저 보여주고, 서버에서 최신 정보가 있는지 확인하는 방식이 적합합니다.

4. 네트워크 요청을 줄여 성능 최적화
캐시를 사용하면 불필요한 네트워크 요청을 줄일 수 있습니다. 예를 들어, 사용자가 자주 방문하는 페이지나 기능에서 동일한 데이터를 반복적으로 요청하는 대신, 캐시된 데이터를 재사용할 수 있습니다.
이로 인해 서버 부하가 줄어들고, 앱 성능이 전반적으로 향상됩니다.
예시:
사용자가 같은 리스트를 여러 번 확인할 때마다 매번 서버에 요청하지 않고, 캐시된 데이터를 먼저 제공하면, 네트워크 비용을 절감하고 서버의 부하를 줄일 수 있습니다.

5. 점진적 데이터 업데이트로 사용자 경험 부드럽게 유지
캐시된 데이터를 먼저 보여준 뒤, 서버에서 최신 데이터를 가져오면, 사용자가 느끼는 변경 사항이 더 부드럽게 이루어집니다. 서버 데이터를 기다리느라 화면이 계속 로딩 상태에 머무르지 않고, 사용자는 화면을 바로 사용할 수 있고, 그동안 백그라운드에서 데이터를 업데이트하면 됩니다.
데이터가 업데이트되면 화면을 부드럽게 갱신함으로써 사용자 경험을 자연스럽게 유지할 수 있습니다.
예시:
뉴스 앱에서 캐시된 기사 목록을 먼저 보여준 후, 최신 기사를 백그라운드에서 가져오는 경우, 사용자는 기다림 없이 앱을 탐색할 수 있으며, 기사가 업데이트될 때 자연스럽게 새로운 정보가 화면에 표시됩니다.

6. 오프라인 모드 지원
캐시된 데이터를 활용하면 오프라인 상태에서도 일부 기능을 사용할 수 있습니다. 네트워크 연결이 없을 때도 캐시에 저장된 데이터를 이용해 일시적인 오프라인 경험을 제공할 수 있습니다.
예시:
사용자가 비행기 모드로 전환되었을 때도, 이전에 불러왔던 콘텐츠가 캐시에서 보여지므로 오프라인 상태에서도 앱을 사용할 수 있습니다.

#### 요약:
- 빠른 화면 로딩: 캐시된 데이터를 먼저 보여줌으로써 사용자는 기다림 없이 콘텐츠를 확인할 수 있습니다.
- 네트워크 문제 완화: 서버 응답이 느리거나 네트워크 연결이 불안정할 때도 캐시를 통해 즉시 응답성 있는 경험을 제공합니다.
- 성능 최적화: 불필요한 네트워크 요청을 줄여 성능을 개선하고, 서버 부하를 줄입니다.
- 오프라인 지원: 캐시를 통해 네트워크 연결 없이도 일정 부분 기능을 제공할 수 있습니다.

이런 이유로, 캐시된 데이터를 먼저 사용하고 서버에서 최신 데이터를 가져오는 방식은 사용자 경험을 개선하고 성능을 최적화하는 데 매우 유용합니다.

## 결론
#### 부제: staleTime 설정 없이 useQuery 는 어떻게 동작하냐면
1. staleTime 설정이 없다는것은 데이터의 신선시간을 설정하지 않았다라는 것이다.
2. fetching 후 데이터는 즉시 stale(낡음)처리가 된다. 
3. 컴포넌트가 호출되어서 useQuery 가 호출되면 다시 서버에서 데이터를 fetching 한다.
4. staleTime 없이도 데이터는 캐싱이 되어서 서버에서 가져오는 동안 캐싱된 데이터를 보여주고 데이터를 가져온 순간 교체된다.
5. 캐싱이 된 데이터를 쓰는것의 장점은 사용자가 기다리지 않아 사용자의 경험이 향상된다.

목적: 재택근무하면서 회사 내부망의 회사의 server 에 접근하고 싶다.

1. 집에다가 vpn client 를 깔게되면 회사네트워크와 집간에 터널링이 되며 회사 ip 를 하나 할당 받게된다.
2. 데이터 패킷에다가 outer ip , inner ip 두개를 감싸서 던진다.
3. 먼저 inner ip 에는 보내는곳: 할당받은 회사ip , 받는곳 : 회사서버
4. 먼저 outer ip 는 보내는곳 : 진짜 할당받은 우리집 , 받는곳: 회사 게이트웨이 ip 로 감싼다.
5. 이 데이터 패킷이 인터넷을 돌아다닌다
6. 터널링한 회사 게이트 웨이에 이 패킷이 닿으면 암호화된 패킷을 복호화한다.
7. 그러면 inner ip 에 있는 할당된 회사 ip 에서 회사 서버에 접속할수있게 된다.
8. 그러면 회사 보안정책을 해치지않고 접속이 가능하다.

출처 :https://www.youtube.com/watch?v=Q0EgiHhw-E4&list=PLXvgR_grOs1BkUIxKsLEUdefyMWMA0_U-&index=4 최고 ..

debugger; 을 궁금한 소스코드에 삽입

개발자도구 source 탭에서 변수 확인

1. 이 상태에서 위의 파란 버튼을 누르면 debugger라는 구문이 밑에 또 있지 않는 한 그냥 끝까지 실행한다.만약 실행하다가 또 다른 debugger문장이 있으면 그 자리에서 다시 멈춰선다.

2. 파란버튼 오른쪽에 버튼은 "Step over next function call", 즉 다음 함수 구문으로 넘어가는 버튼이다.아까 위의 상태에서 저 버튼을 누르면 다음과 같이 진행된다.

출처 : https://im-developer.tistory.com/84 https://ko.javascript.info/debugging-chrome

1. pages 폴더

• 각각의 URL 경로에 해당하는 React 컴포넌트가 들어있습니다. 예를 들어, 'pages/index.js'는 홈페이지를 구성하는 컴포넌트를 포함합니다.

2. components 폴더

• 공통적으로 사용되는 UI 컴포넌트가 들어있습니다. 예를 들어, 'components/Button.js'는 여러 페이지에서 사용되는 버튼 컴포넌트를 포함합니다.

3. lib 폴더

• 다양한 유틸리티 함수, 상수, API 호출 등과 같은 것들이 들어있습니다. 예를 들어, 'lib/api.js'는 서버에서 데이터를 가져오는 API 호출을 담당하는 함수를 포함합니다.

4. styles 폴더

• 전역적으로 적용되는 스타일 파일이 들어있습니다. 예를 들어, 'styles/global.css'는 전체 웹 사이트에서 적용되는 CSS 스타일을 포함합니다.

5. public 폴더

• 정적 파일 (이미지, favicon 등)이 들어있습니다.

또한, 컴포넌트의 구조는 다음과 같은 Atomic Design 방식을 사용할 수 있습니다.

1. Atoms

• UI의 기본적인 블록으로서, 버튼, 텍스트, 아이콘 등과 같은 작은 컴포넌트를 의미합니다.

2. Molecules

• Atom들을 결합한 것으로서, 검색창이나 로그인 폼 등과 같은 상대적으로 복잡한 컴포넌트를 의미합니다.

3. Organisms

• Molecule들과 Atom들을 결합한 것으로서, 헤더나 푸터 등과 같은 전체 페이지의 레이아웃을 의미합니다.

4. Templates

• 페이지 레이아웃을 정의하는데 사용되는, 여러 개의 Organisms와 Molecules를 결합한 것을 의미합니다.

5. Pages

• 실제로 사용자가 볼 수 있는 웹 페이지를 의미합니다. Template을 사용하여 구성되며, 필요한 데이터와 기능을 갖추고 있습니다.

위와 같은 구조를 사용하면, 각 컴포넌트가 담당하는 역할을 명확히 구분할 수 있으며, 코드의 유지보수가 쉬워질 수 있습니다.

너무 도움이 되어서 메묘 ,,, gpt ㄴㅓ 천재냐,,

출처: https://careerly.co.kr/qnas/594

당신이 프로젝트 깃 클론 받은 후 npm install 하여 의존성 패키지 설치했는데 npm run storybook 에서 이런 에러가 난다면 ,,?

단순히 .stotybook 경로에 public 이라는 폴더를 생성해주면된다.!!

잘못연결해서 검색해서 들어오셨다구요 ? 그럼 이명령어를 치세요

git remote remove origin

1. 먼저 연결을 원하는 계정 들어가서 repository 생성한다.

2. 연결하는 명령어 친다.

   git remote add orgin git@[sshconfig에 등록해둔 HOST]:[깃아이디]/[레파지토리이름].git
   

// 예시 git remote add orgin git@github.com:yurim-hgr/reactReview.git

3. 확인

git remote -v

4. 브랜치 생성

git branch -M main

5. 원격 저장소에 push 하기

git push -u origin main

```

자꾸까먹어서 쓰는글

선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다.

가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 두 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 나머지 한 변이 될 수 있는 정수의 개수를 return하도록 solution 함수를 완성해주세요.

제한사항

sides의 원소는 자연수입니다. sides의 길이는 2입니다. 1 ≤ sides의 원소 ≤ 1,000

입출력 예

sides result [1, 2] 1 [3, 6] 5 [11, 7] 13

입출력 예 설명

입출력 예 #1

두 변이 1, 2 인 경우 삼각형을 완성시키려면 나머지 한 변이 2여야 합니다. 따라서 1을 return합니다.

입출력 예 #2

가장 긴 변이 6인 경우 될 수 있는 나머지 한 변은 4, 5, 6 로 3개입니다. 나머지 한 변이 가장 긴 변인 경우 될 수 있는 한 변은 7, 8 로 2개입니다. 따라서 3 + 2 = 5를 return합니다.

입출력 예 #3

가장 긴 변이 11인 경우 될 수 있는 나머지 한 변은 5, 6, 7, 8, 9, 10, 11 로 7개입니다. 나머지 한 변이 가장 긴 변인 경우 될 수 있는 한 변은 12, 13, 14, 15, 16, 17 로 6개입니다. 따라서 7 + 6 = 13을 return합니다.

내코드

function solution(sides) {
    var answer = 0;
    let max1 = Math.max(sides[0], sides[1]);
    let min1 = Math.min(sides[0], sides[1]);

    let max = sides[0]+sides[1] -1;

    let x;
    // 나머지한변이 긴변인 경우 
    answer += max -max1

    //가장긴변이 둘중에 하나일경우 max1 일경우 
    for(let i = max1 ; i> 0 ;i--){
        // console.log(i, min1 , max1)
        if(i+min1 > max1){
            answer +=1;
        }
    }



    return answer;
}

코드 설명

• 이 함수는 입력으로 주어진 sides 배열의 원소를 이용하여, 세 변으로 이루어진 삼각형을 만들기 위한 가능한 나머지 한 변의 길이를 구하는 문제를 해결하는 함수입니다.

함수의 구현은 다음과 같습니다.

1. 먼저 , 주어진 sides 배열에서 가장 긴 변과 가장 짧은 변을 구합니다. 이를 위해 Math.max()와 Math.min() 함수를 사용합니다.
2. 그 다음에 가장 긴 변의 길이를 이용하여 가능한 나머지 한 변의 길이를 계산합니다.

• 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 하므로, sides[0] + sides[1] - 1을 계산하여 이 값을 max 변수에 저장합니다.

3. 나머지 한 변의 길이를 구하기 위해, 가장 짧은 변의 길이와 가장 긴 변의 길이 사이에서 가능한 정수 값을 모두 세어봅니다.

• 이를 위해, 가장 긴 변의 길이인 max부터 가장 짧은 변의 길이인 min1까지 반복문을 돌며, 가능한 정수 값인 경우 answer 변수에 1을 더해줍니다.

따라서, 이 함수는 주어진 세 변의 길이를 이용하여 가능한 나머지 한 변의 길이의 개수를 반환합니다.

어려울줄알았는데 push 하는 타이밍을 잘 넣어주면 되는 문제였다. !!

JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요.

##제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다.

입출력 예

s return "3people unFollowed me" "3people Unfollowed Me" "for the last week" "For The Last Week"

배우고 싶은 코드 1

function solution(s) {
    return s.split(" ").map(v => v.charAt(0).toUpperCase() + v.substring(1).toLowerCase()).join(" ");
}

배우고 싶은 코드 2

function solution(s) {
    var answer = '';
    for (let i = 0; i < s.length; i++) {
      if (i === 0 || s[i-1] === " ") {
        answer += s[i].toUpperCase();
      } else {
        answer += s[i].toLowerCase();
      }
    }
    return answer;
}

내코드

function solution(s) {
    var answer = '';
    for(let i=0;i<s.length ; i++){
        if(i==0 ){

            answer += s[i].toUpperCase();

        }else if(s[i-1]== ' '){

            answer += s[i].toUpperCase();
        }else if(s[i-1]!= ' ' && s[i] == s[i].toUpperCase()){

            answer += s[i].toLowerCase();
        }else{
            answer += s[i]
        }
        console.log(answer)
    }
    return answer;
}

문제 설명

한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해보세요. 같은 식이라면 가장 짧은 수식을 return 합니다.

제한사항

• 0 < polynomial에 있는 수 < 100
• polynomial에 변수는 'x'만 존재합니다.
• polynomial은 0부터 9까지의 정수, 공백, ‘x’, ‘+'로 이루어져 있습니다.
• 항과 연산기호 사이에는 항상 공백이 존재합니다.
• 공백은 연속되지 않으며 시작이나 끝에는 공백이 없습니다.
• 하나의 항에서 변수가 숫자 앞에 오는 경우는 없습니다.
• " + 3xx + + x7 + "와 같은 잘못된 입력은 주어지지 않습니다.
• "012x + 001"처럼 0을 제외하고는 0으로 시작하는 수는 없습니다.
• 문자와 숫자 사이의 곱하기는 생략합니다.
• polynomial에는 일차 항과 상수항만 존재합니다.
• 계수 1은 생략합니다.
• 결괏값에 상수항은 마지막에 둡니다.
• 0 < polynomial의 길이 < 50

입출력 예

polynomial result "3x + 7 + x" "4x + 7" "x + x + x" "3x"

입출력 예 설명

입출력 예 #1

"3x + 7 + x"에서 동류항끼리 더하면 "4x + 7"입니다.

입출력 예 #2

"x + x + x"에서 동류항끼리 더하면 "3x"입니다.

배우고싶은 코드

function solution(polynomial) {
    const arr = polynomial.split(" + ");
    const xNum = arr
                .filter(n => n.includes("x"))
                .map(n => n.replace('x', '') || '1')
                .reduce((acc, cur) => acc + parseInt(cur, 10), 0);
    const num = arr
                .filter(n => !isNaN(n))
                .reduce((acc, cur) => acc + parseInt(cur, 10), 0);

    let answer = [];
    if(xNum) answer.push(`${xNum === 1 ? "" : xNum}x`);
    if(num) answer.push(num);

    return answer.join(" + ");
}

내코드

function solution(polynomial) {
    var answer = '';
    let numx = 0 ;
    let num = 0;
    const arr = polynomial.split(" ");
    console.log(arr)
    for(let i =0 ; i <arr.length ;i+=2){
        if(arr[i].includes("x")){
            //numx += Number(arr[i].substr(arr[i].length-1, 1))
            let tempx = arr[i].replace("x" , "")|| 1;
            numx += Number(tempx)
        }else{
            num+= Number(arr[i])
        }
        console.log(numx ,num)
    }


    if(numx == 0 ){
        answer = String(num)
    }else if( numx !=1 && num ==0 ){
        answer = String(numx)+ "x"
    }else if(numx ==1  && num !=0){
        answer= "x + " + String(num)
    }else if(numx ==1  && num ==0){
        answer= "x" 
    }else{
        answer= String(numx)+ "x + " + String(num)
    }


    return answer;
}

다항식구하기 테스트 케이스 8 다항식구하기 테스트 케이스 10 다항식구하기 테스트 케이스 12 가 안되가지고 열받았는데

1.x의 계수가 1인경우 2 상수가 0 인경우 등을 생각해줘야했다. ex)입력값 "x + 0"

문제 설명

머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의 좌표는 [0, 1], down을 누른다면 [0, -1], left를 누른다면 [-1, 0], right를 누른다면 [1, 0]입니다. 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요.

[0, 0]은 board의 정 중앙에 위치합니다. 예를 들어 board의 가로 크기가 9라면 캐릭터는 왼쪽으로 최대 [-4, 0]까지 오른쪽으로 최대 [4, 0]까지 이동할 수 있습니다.

제한사항

board은 [가로 크기, 세로 크기] 형태로 주어집니다. board의 가로 크기와 세로 크기는 홀수입니다. board의 크기를 벗어난 방향키 입력은 무시합니다. 0 ≤ keyinput의 길이 ≤ 50 1 ≤ board[0] ≤ 99 1 ≤ board[1] ≤ 99 keyinput은 항상 up, down, left, right만 주어집니다.

입출력 예

keyinput board result ["left", "right", "up", "right", "right"] [11, 11] [2, 1] ["down", "down", "down", "down", "down"] [7, 9] [0, -4]

입출력 예 설명

입출력 예 설명 #1

[0, 0]에서 왼쪽으로 한 칸 오른쪽으로 한 칸 위로 한 칸 오른쪽으로 두 칸 이동한 좌표는 [2, 1]입니다.

입출력 예 설명 #2

[0, 0]에서 아래로 다섯 칸 이동한 좌표는 [0, -5]이지만 맵의 세로 크기가 9이므로 아래로는 네 칸을 넘어서 이동할 수 없습니다. 따라서 [0, -4]를 return합니다.

배우고싶은 코드

function solution(keyinput, board) {
    let key = {"right" : [1,0], "up" : [0,1], "down" : [0,-1], "left" : [-1,0]};


    let rslt = keyinput.map(v => key[v]).reduce((a,b) => { 
        if (Math.abs(a[0] + b[0]) > board[0]/2 || Math.abs(a[1] + b[1]) > board[1]/2) 
            return [a[0],a[1]] ; 

        return [a[0] + b[0], a[1] + b[1]];}
    , [0,0])


    return rslt;
}

내코드

function solution(keyinput, board) {
    var answer = [0,0];
    let x = 0;
    let y = 0;

    const xRange= Math.floor(board[0]/2);
    const yRange= Math.floor(board[1]/2);
    console.log(xRange, yRange)
    for(let i = 0 ; i < keyinput.length ;i++){
        if(keyinput[i] =="left" && -xRange < x )x--
        else if(keyinput[i] =="right" && xRange > x )x++
        else if(keyinput[i] =="up" && yRange > y )y++
        else if(keyinput[i] =="down" && -yRange < y )y--
        console.log([x,y])
    }
    return [x,y];
}

좌표를 구하는 부분에서 X, Y를 배열안에 넣는 것이 조금애먹었지만

한번 푸니까 감잡음!

문제 설명

이진수를 의미하는 두 개의 문자열 bin1과 bin2가 매개변수로 주어질 때, 두 이진수의 합을 return하도록 solution 함수를 완성해주세요.

제한사항

return 값은 이진수를 의미하는 문자열입니다. 1 ≤ bin1, bin2의 길이 ≤ 10 bin1과 bin2는 0과 1로만 이루어져 있습니다. bin1과 bin2는 "0"을 제외하고 0으로 시작하지 않습니다.

입출력 예

bin1 bin2 result "10" "11" "101" "1001" "1111" "11000"

입출력 예 설명

입출력 예 #1

10 + 11 = 101 이므로 "101" 을 return합니다.

입출력 예 #2

1001 + 1111 = 11000 이므로 "11000"을 return합니다.

코드

function solution(bin1, bin2) {

    return (parseInt(bin1,2)+parseInt(bin2 , 2)).toString(2);
}

못풀었다.(당당)

솔직하게 답 봤다

근데 정답보는 순간 깜짝 놀랐다. 둘다 내가 아는 함수였기때문이다.

그럴거면 더빨리 정답볼걸 그랬다

1. parseInt 함수
2. toString 함수

정수변환, 문자열로 변환은 알았지만 함수 호출시 괄호 안에 매개변수로 2를 던지면 이진수를 제어할수있다는거 첨알았다 그래 먼가 있을거같았어

지금 알았으면됬다 역시 아는게 힘 power knowing is strong 야매영어

정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.

제한 조건

arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.

입출력 예

내코드

function solution(arr) {
    let newArr = [...arr];

    if(arr.length ==1){
        newArr[0] = -1;
    }else{
        let s = arr.sort((a,b)=> a-b);
        newArr= newArr.filter(v=> v != s[0]);   
    }
    return newArr;
}

배우고싶은 코드 1

function solution(arr) {
    arr.splice(arr.indexOf(Math.min(...arr)),1);
    if(arr.length<1)return[-1];
    return arr;
}

1. Math.min 이용
2. min 함수안 rest 문법 이용하여 파라미터 보내기
3. indexOf() 함수이용하여 인덱스 구하기
4. splice 이용하여 원하는인덱스의 문자 자르기

배우고싶은 코드 2

function solution(arr) {
    const min = Math.min(...arr);
    return arr.length !== 1 ? arr.filter(i => i !== min) : [-1]
}

1. 삼항연산자 이용하기
2. 삼항연산자 안에 true 값일때 filter 로 하기

오늘부터 표로 기록하려한다.

문제 설명

영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.

제한사항

numbers는 소문자로만 구성되어 있습니다. numbers는 "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" 들이 공백 없이 조합되어 있습니다. 1 ≤ numbers의 길이 ≤ 50 "zero"는 numbers의 맨 앞에 올 수 없습니다.

입출력 예

입출력 예 설명

입출력 예 #1

"onetwothreefourfivesixseveneightnine"를 숫자로 바꾼 123456789를 return합니다.

입출력 예 #1

"onefourzerosixseven"를 숫자로 바꾼 14067를 return합니다.

내코드

function solution(numbers) {
    let arr = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]

    for(let i = 0 ; i<arr.length ; i++){
        if(numbers.includes(arr[i])){
            numbers = numbers.replaceAll(arr[i] , String(i));  
             console.log(numbers)
        }
    }

    return +numbers;
}

틀린 포인트 기록:

1. replace를 하면 하나만 되고 replaceAll 을 해야 다바뀐다
2. numbers.replace를 해서 다시 numbers 변수에 담아야한다 .

배우고 싶은 코드

function solution(numbers) {
    const number = ["zero","one","two","three", "four", "five", "six", "seven", "eight", "nine"]
    for(let i = 0 ; i<number.length; i++){
        numbers = numbers.split(number[i]).join(i)
    }
    return +numbers
}

배운 포인트 :

1. join() 함수 : 괄호안에 i 를 넣었는데 나누어진 것을 i 사이에 끼우면서 문자열로 합칠 수 있다는것 ex) 문자열에서 one 를 split을 해서 나누고 1 으로 다시 join 을 한다 . 그러면 1twothree ....이렇게 됨 ..!!! 참신한방법이네

힌트 : slice() ==> 칼

문제 설명

문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ my_str의 길이 ≤ 100 1 ≤ n ≤ my_str의 길이 my_str은 알파벳 소문자, 대문자, 숫자로 이루어져 있습니다.

입출력 예

입출력 예 설명

입출력 예 #1

"abc1Addfggg4556b" 를 길이 6씩 잘라 배열에 저장한 ["abc1Ad", "dfggg4", "556b"]를 return해야 합니다.

입출력 예 #2

"abcdef123" 를 길이 3씩 잘라 배열에 저장한 ["abc", "def", "123"]를 return해야 합니다.

유의사항

입출력 예 #1의 경우 "abc1Addfggg4556b"를 길이 6씩 자르면 "abc1Ad", "dfggg4" 두개와 마지막 "556b"가 남습니다. 이런 경우 남은 문자열을 그대로 배열에 저장합니다.

내코드

function solution(my_str, n) {
    var answer = [];
    let str = "";
    for(let i = 0 ; i < my_str.length; i++){
        str+= my_str[i];
        if((i+1)%n ==0){
            answer.push(str);
            str = '';
        }else if((i+1) == my_str.length){
            answer.push(str);
        }

    }
    return answer;
}

반복하면서 n의 배수일 경우 push 한다 이거였는데

배우고 싶은 코드

function solution(my_str, n) {
    let res = [];
    for (let i = 0; i < my_str.length; i+=n) res.push(my_str.slice(i, i+n));
    return res;
}

for 문의 i 의 증감식을 보면 i+=n 이라고 되어있다 참 괜찮은 아이디어다 i 를 n 만큼 더해줘서 배열을 잘라서 넣어준다

slice 함수는 i 번째 함수에서 i+n 번째의 앞까지 잘라준다. 이 문자열 더미를 배열에 넣어준당 !

문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ my_string ≤ 110 my_string은 대문자, 소문자, 공백으로 구성되어 있습니다. 대문자와 소문자를 구분합니다. 공백(" ")도 하나의 문자로 구분합니다. 중복된 문자 중 가장 앞에 있는 문자를 남깁니다.

입출력 예

my_string result "people" "peol" "We are the world" "We arthwold"

입출력 예 설명

입출력 예 #1

"people"에서 중복된 문자 "p"와 "e"을 제거한 "peol"을 return합니다.

입출력 예 #2

"We are the world"에서 중복된 문자 "e", " ", "r" 들을 제거한 "We arthwold"을 return합니다.

내코드

리듀스함수를 이용한 코드

function solution(my_string) {

    //my_string을 spread 연산자로 배열을 만들어준다 .
    //acc 의 초기값은 [] 이다 
    //배열에 cur(현재값) 이 포함되어있는지 확인한다 
    // 포함되어있으면 그대로 배열을 출력하고 
    // 포함되어있지않으면 현재 값을 push 한다. 

    let check = [...my_string].reduce((acc, cur ) => 
        acc.includes(cur) ? acc : [...acc , cur] 
     ,[]).join("")
    // 출력 
    //['p'] 
    //['p', 'e']
    //['p', 'e' , 'o']
    //['p', 'e' , 'o'] 중복문자인 p 는 출력되지않고 그전배열 그대로 출력
    //['p', 'e' , 'o' , 'ㅣ']
    //['p', 'e' , 'o' , 'ㅣ'] 중복문자인 e 는 출력되지않고 그전배열 그대로 출력
    return check;
}
let my_string = 'people'
console.log(solution(my_string))

배우고싶은 코드

set 을 이용한 풀이

function solution(my_string) {
    return [...new Set(my_string)].join('');
}

reduce 함수는 너무재밌는거같당 ,,, set 은 중복제거니까 바로 되넹

이미지출처 : https://www.ajunews.com/view/20190722152409181

어제 순위 34629위 점수 1206점 해결한문제 93개

오늘 순위 29175위 (어제대비 5454등 상승) 점수 1234점 (어제대비 28점 상승) 해결한 문제 101 개 (어제대비 8문제 품)

푼문제 lv.0 문제 * 2개 lv.1 문제 * 6개

아니 점수상승 머냐.. 8문제에 5000등 상승 !! 근데 12만등에서 출발한거는 1점만 올라도 쑥쑥이었는데 좀 더디긴해 ..^^

그래도 20000 등 입성 ㅊㅋㅊㅋㅊㅋㅊㅋ

문제 설명

소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요.

제한사항

2 ≤ n ≤ 10,000

입출력 예

입출력 예 설명

입출력 예 #1

12를 소인수분해하면 2 * 2 * 3 입니다. 따라서 [2, 3]을 return합니다.

입출력 예 #2

17은 소수입니다. 따라서 [17]을 return 해야 합니다.

입출력 예 #3

420을 소인수분해하면 2 * 2 * 3 * 5 * 7 입니다. 따라서 [2, 3, 5, 7]을 return합니다.

참고한 코드

function solution(n) {
    var answer = [];
    let idx = 2;
    while(n !== 1){
        if(n% idx ==0){
            n/=idx;
            answer.push(idx);
        }else{
            idx+=1;
        }
    }

    return Array.from(new Set(answer));
}

문제포인트

1. Array.from 으로 배열을 초기화할수있는가
2. Set 을 씀으로써 중복제거를 할수있는가
3. 소인수분해를 할수있는지 (서면소인수분해 곱창은 개잘먹을수있는데 .. ) 저거는 하도생각이 안나서 참고한코드인데 2로 존나게 나누다가 0으로 안떨어지면 이제 나누는수에 1을 추가하고 다시3이 된수로 나머지 0 이 아닐때까지 존나게 나누는 것이다 정말 좋은아이디어인듯.. !