<h1>GitHub에도 올라가면 안 되는 내용</h1>주로 DB 주소나 사용자명이나 비밀번호 등이 거기에 해당할 것이다. 내가 로컬에서만 작동하는 DB를 사용한다면 별 상관 없지만 DB를 서버에 올려놓는다면 이야기가 달라진다. 누군가는 해당 서버 주소를 통해서 유출된 사용자 명과 비밀번호를 가지고 접속할 수 있다는 이야기가 된다.<h1>.env 파일</h1>주로 환경 변수 설정을 위해서 사용하는 파일로, 이곳에 내가 사용하는 DB의 주소, 사용자명, 비밀번호를 적어둔다.<pre spellcheck="false"><code>RDS_ENDPOINT=엔드포인트
RDS_USERNAME=사용자명
RDS_PASSWORD=비밀번호</code></pre><h1>application.properties</h1>원래 DB 등의 연결, 설정을 위해 사용하는 파일로 로컬에서 DB를 사용할 경우 이곳에 직접적으로 정보를 기재해두었을 것이다.아래는 MYSQL 기준의 application.properties 파일이다.<pre spellcheck="false"><code>spring.config.import=optional:file:./config/.env[.properties]
spring.config.additional-location=classpath:/,classpath:/config/,file:./,file:./config/

spring.application.name=프로젝트명

# DB
spring.datasource.url=jdbc:mysql://${RDS_ENDPOINT}:3306/DB이름
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=${RDS_USERNAME}
spring.datasource.password=${RDS_PASSWORD}</code></pre>여기서 중요한 것은 .env 뒤에 붙어있는 <code spellcheck="false">[.properties]</code> 이 부분이다..env를 그냥 사용한 경우가 많고, 내가 세팅하는 부분이 아니기 때문에 간과하게 되는데 <code spellcheck="false">[.properties]</code>를 넣어주어야 인식이 된다.넣지 않아도 인식이 되는지는 모르겠다. <s>안 되니까 넣은 거라서...</s><h1>가장 중요한 Git에 올리지 않기.</h1>저걸 다 설정해놓고 그대로 <code spellcheck="false">commit</code> - <code spellcheck="false">push</code> 해버리면 깃허브에 공유 되어 결국 만천하에 공개된다.이를 방지하기 위해서 <code spellcheck="false">.ignore</code> 파일에 설정을 넣어두도록 하자.<pre spellcheck="false"><code>/config/
</code></pre>해당 내용을 추가해주었다.인텔리제이라면 아래와 같이 비주얼 환경에서 그대로 해주면 쉽다.<img src="https://image.until.blog/brightdawn/article/1720153271054" alt="until-720">

Spring boot에서 환경변수를 넣었는데 .env가 인식이 안될 때

Spring boot에서 환경변수 설정이 필요한 경우

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88">react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.<h2>staleTime</h2><blockquote><ul><li>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</li><li>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</li></ul></blockquote><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.<pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
 const username = useUsername();
 const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 staleTime: Infinity,
 })
 return data
}

export default useBlogQuery</code></pre>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.아래 예시는 게시글 리스트를 가져오는 훅이다.<pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
 GetArticlesParams,
 createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
 const blogData = useBlogData()
 const { order, query, tag } = useArticleParams()

 const params: GetArticlesParams = {
 order: order || undefined,
 query: query || undefined,
 tagSlug: tag || undefined,
 }

 const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
 queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
 queryFn: async ({ pageParam }) =&gt; {
 const getUserArticles = createGetUserArticles(blogData.username)

 return await getUserArticles({ page: pageParam, ...params })
 },
 initialPageParam: 0,
 getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
 })

 if (!data) throw new Error('Suspense Error')

 return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다<h2>gcTime (cacheTime)</h2><blockquote><ul><li>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</li></ul></blockquote><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, 서버사이드에서는 Infinity로 지정된다.일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.데이터 패칭에 직접적인 영향을 주지 않기 때문이다.다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.<h2>결론</h2>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define

react-query의 staleTime과 gcTime

이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용<a target="_blank" rel="noopener noreferrer nofollow" href="https://toss.im/slash-24">https://toss.im/slash-24</a>요기서 참가 신청 가능합니다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388525975" alt="until-1264">작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388578718" alt="until-1265">넘나 설레는것이애오~

이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용https://toss.im/slash-24요기서 참가 신청 가능합니다!작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!넘나 설레는것이애오~

토스 개발자 컨퍼런스 SLASH-24:

<h3>문제 설명</h3>콜라츠 추측이란 로타르 콜라츠(Lothar Collatz)가 1937년에 제기한 추측으로 모든 자연수 k에 대해 다음 작업을 반복하면 항상 1로 만들 수 있다는 추측입니다.<blockquote>1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.2.결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.</blockquote>예를 들어 주어진 수가 5 라면 5 ⇒ 16 ⇒ 8 ⇒ 4 ⇒2 ⇒ 1 이되어 총 5번만에 1이 됩니다.수가 커졌다 작아지기를 반복하는 모습이 비구름에서 빗방울이 오르락내리락하며 우박이 되는 모습과 비슷하다고 하여 우박수 또는 우박수열로 불리기도 합니다. 현재 이 추측이 참인지 거짓인지 증명되지 않았지만 약 1해까지의 수에서 반례가 없음이 밝혀져 있습니다.은지는 우박수열을 좌표 평면 위에 꺾은선 그래프로 나타내보려고 합니다. 초항이 k인 우박수열이 있다면, x = 0일때 y = k이고 다음 우박수는 x = 1에 표시합니다. 이런 식으로 우박수가 1이 될 때까지 점들을 찍고 인접한 점들끼리 직선으로 연결하면 다음과 같이 꺾은선 그래프를 만들 수 있습니다.<img src="https://image.until.blog/jisoo/article/1726805582241.png" alt="until-1395">은지는 이렇게 만든 꺾은선 그래프를 정적분 해보고 싶어졌습니다. x에 대한 어떤 범위 [a, b]가 주어진다면 이 범위에 대한 정적분 결과는 꺾은선 그래프와 x = a, x = b, y = 0 으로 둘러 쌓인 공간의 면적과 같습니다. 은지는 이것을 우박수열 정적분이라고 정의하였고 다양한 구간에 대해서 우박수열 정적분을 해보려고 합니다. 0 이상의 수 b에 대해 [a, -b]에 대한 정적분 결과는 x = a, x = n - b, y = 0 으로 둘러 쌓인 공간의 면적으로 정의하며, 이때 n은 k가 초항인 우박수열이 1이 될때 까지의 횟수를 의미합니다.예를 들어, 5를 초항으로 하는 우박수열은 5 ⇒ 16 ⇒ 8 ⇒ 4 ⇒ 2 ⇒ 1 입니다. 이를 좌표 평면으로 옮기면 (0, 5), (1, 16), (2, 8), (3, 4), (4, 2), (5, 1) 에 점이 찍히고 점들을 연결하면 꺾은선 그래프가 나옵니다. 이를 [0,0] 구간에 대해 정적분 한다면 전체 구간에 대한 정적분이며, [1,-2] 구간에 대해 정적분 한다면 1 ≤ x ≤ 3인 구간에 대한 정적분입니다.우박수의 초항 k와, 정적분을 구하는 구간들의 목록 ranges가 주어졌을 때 정적분의 결과 목록을 return 하도록 solution을 완성해주세요. 단, 주어진 구간의 시작점이 끝점보다 커서 유효하지 않은 구간이 주어질 수 있으며 이때의 정적분 결과는 -1로 정의합니다.<h3>제한 사항</h3><ul><li>2 ≤ k ≤ 10,000</li><li>1 ≤ ranges의 길이 ≤ 10,000</li><li>ranges의 원소는 [a, b] 형식이며 0 ≤ a &lt; 200, -200 &lt; b ≤ 0 입니다.</li><li>주어진 모든 입력에 대해 정적분의 결과는 227 을 넘지 않습니다.</li><li>본 문제는 정답에 실수형이 포함되는 문제입니다. 입출력 예의 소수 부분 .0이 코드 실행 버튼 클릭 후 나타나는 결괏값, 기댓값 표시와 다를 수 있습니다.</li></ul><h3>입출력 예</h3><img src="https://image.until.blog/jisoo/article/1726805591373.png" alt="until-1396"><h3>접근</h3><ol><li>k를 이용해서 1로 만들 수 점들을 구한다.</li><li>1에서 구한 점들로 좌표를 구한다.</li><li>구한 좌표고 그래프를 만들고 면적을 구한다.</li><li>구간들(ranges)에서의 정적분 결과를 return한다.</li></ol><h3>구현 Code</h3><pre spellcheck="false"><code class="language-python">def area(a, b):
 if a &lt;= b:
 return a + (b - a) / 2
 else:
 return b + (a - b) / 2


def get_point(k):
 points = [k]
 while True:
 if k == 1:
 return points
 if k % 2 == 0:
 k /= 2
 points.append(k)
 else:
 k = k * 3 + 1
 points.append(k)


def solution(k, ranges):
 answer = []
 areas = []
 points = get_point(k)

 for i in range(len(points) - 1):
 areas.append(area(points[i], points[i + 1]))

 for a, b in ranges:
 b = len(points) - abs(b) - 1
 if a &gt; b:
 answer.append(-1)
 else:
 answer.append(sum(areas[a:b]))
 return answer</code></pre><h3>함수 설명</h3><h4>area(a, b)</h4><ul><li>면적을 구하는 함수 &lt;/br&gt;</li></ul><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>a</mi><mo separator="true">,</mo><mi>b</mi><mo stretchy="false">)</mo><mo>=</mo><mi>a</mi><mo>+</mo><mo stretchy="false">(</mo><mi>b</mi><mo>−</mo><mi>a</mi><mo stretchy="false">)</mo><mi mathvariant="normal">/</mi><mn>2</mn></mrow><annotation encoding="application/x-tex">f(a,b) = a + (b-a) / 2</annotation></semantics></math>f(a,b)=a+(b−a)/2 혹은 $f(a,b) = b + (a-a) / 2<img src="https://image.until.blog/jisoo/article/1726805600116.png" alt="until-1397"><h4>get_point(k)</h4><ul><li>k를 1로 만들기 위해 구하는 점들</li></ul><blockquote>1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.<ol start="2"><li>결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.</li></ol></blockquote>

문제 설명콜라츠 추측이란 로타르 콜라츠(Lothar Collatz)가 1937년에 제기한 추측으로 모든 자연수 k에 대해 다음 작업을 반복하면 항상 1로 만들 수 있다는 추측입니다.1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.2.결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.예를 들어 주어진