<p></p><img src="https://image.until.blog/elicetrack/article/1727685175810.png" alt="until-1656"><h2>✨<strong>자율주행 로봇으로 실습까지 경험하는 22주 실무 트레이닝</strong></h2><p></p><p></p><p>🗓<strong>모집 기간</strong></p><p>24년 10월 2일(월) ~ 24년 11월 8일(금) 오후 6시까지</p><p></p><p></p><p>👫<strong> 모집 대상</strong></p><p><strong>30명</strong>(내일배움카드 발급이 가능한 분)</p><p></p><p></p><p>📚<strong> 교육 기간</strong></p><p>24년 11월 25일(월) ~ 25년 5월 9일(금)</p><p></p><p></p><p>📜<strong> 교육 커리큘럼</strong></p><p>Part1. Python 활용 데이터 처리 및 인공지능 기초&nbsp;</p><p>Part2. 인공지능 활용 이미지 처리 데이터&nbsp;</p><p>Part3. 자연어 처리 심화 학습, ROS 활용 실무 프로젝트&nbsp;</p><p>Part4. 자율주행 AI 엔지니어링</p><p></p><p></p><p>🎁<strong>교육 수강 혜택</strong></p><p>실무 팀 프로젝트 2회 진행&nbsp;</p><p>100% 실시간 온라인 수업 제공&nbsp;</p><p>분야별 전문 현직자 소수정예 코칭&nbsp;</p><p>매월 30만 원 학습 장려금 지급&nbsp;</p><p>실무 AI 자격증, TOPA 강의 &amp; 수험료 지원&nbsp;</p><p></p><p></p><p>✏️<strong> 접수 방법</strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://elice.training/track/ad?utm_medium=social&amp;utm_source=until&amp;utm_campaign=kdt_ad_poster&amp;utm_ad=ad2">사이트를 통해 접수</a></p><p></p><p></p><p>🚨<strong> 문의 사항</strong></p><p>메일: <a target="_blank" rel="noopener noreferrer nofollow" href="mailto:kdt@elice.io">kdt@elice.io</a></p><p>고객센터: <a target="_blank" rel="noopener noreferrer nofollow" href="https://elicetrack.channel.io/support-bots/69276">https://elicetrack.channel.io/support-bots/69276</a></p>

엘리스트랙의 수강료 0원의, 실무 역량을 높일 수 있는 자율주행 AI 부트캠프!!

[엘리스트랙] AI 융합 실무 부트캠프

⚛️ React

<p>개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.</p><p>https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.</p><p>해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.</p><h1>mkcert?</h1><p>레포에서는 아래와 같이 설명하고 있다.</p><blockquote><p>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</p></blockquote><p>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.</p><h1>mkcert 설치</h1><h2>window</h2><p><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.</p><p>아래 명령어를 입력해주자.</p><pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2><p>homebrew로 설치해주면 된다.</p><pre spellcheck="false"><code>brew install mkcert</code></pre><hr><p>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.</p><pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2><p>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.</p><p>본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.</p><p>나는 dev.until.blog를 적용했다.</p><pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
localhost name resolution is handled within DNS itself.127.0.0.1       localhost::1             localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2><p>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.</p><pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.</p><pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre><p>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.</p><pre spellcheck="false"><code>  ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre><p></p>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> LeetCode</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/problems/maximum-product-of-two-elements-in-an-array/">Maximum Product of Two Elements in an Array</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 최하</p></li><li><p>풀이시간 : 6m</p></li><li><p>유형 : 정렬, 시간복잡도, 배열</p></li></ul><p>1464. Maximum Product of Two Elements in an Array</p><p>Given the array of integers <code spellcheck="false">nums</code>, you will choose two different indices <code spellcheck="false">i</code> and <code spellcheck="false">j</code> of that array. <em>Return the maximum value of</em> <code spellcheck="false">(nums[i]-1)*(nums[j]-1)</code>.</p><p><strong>Example 1:</strong></p><pre spellcheck="false"><code>Input: nums = [3,4,5,2]
Output: 12 
Explanation: If you choose the indices i=1 and j=2 (indexed from 0), you will get the maximum value, that is, (nums[1]-1)*(nums[2]-1) = (4-1)*(5-1) = 3*4 = 12. 
</code></pre><p><strong>Example 2:</strong></p><pre spellcheck="false"><code>Input: nums = [1,5,4,5]
Output: 16
Explanation: Choosing the indices i=1 and j=3 (indexed from 0), you will get the maximum value of (5-1)*(5-1) = 16.
</code></pre><p><strong>Example 3:</strong></p><pre spellcheck="false"><code>Input: nums = [3,7]
Output: 12
</code></pre><p>&nbsp;<strong>Constraints:</strong></p><ul><li><p><code spellcheck="false">2 &lt;= nums.length &lt;= 500</code></p></li><li><p><code spellcheck="false">1 &lt;= nums[i] &lt;= 10^3</code></p><p></p></li></ul><h3>문제 풀이 접근</h3><p>이 문제에 대한 접근 방법은 2가지가 생각났다. <br>1번. 리스트 돌면서 가장 큰 두개의 수를 찾아서 그 값을 -1 해서 곱한다.<br>2번. 어떤 리스트가 들어오던지 일단 정렬해서 2개를 찾는다.<br>(2번 일때, 오름차순 내림차순 상관없다. 그거에 맞게 인덱스를 뽑아오면 되기 때문)<br><br>그런데, 여태까지 풀어왔던 코딩테스트에서는 이런 문제가 주어질 때, 효율성까지 테스트하면 1번의 방법은 효율성에서 패스 못하는 경우가 많았던 것으로 기억해서 2번으로 방향을 잡았다.<br><br>이 문제의 플로우<br>1. 들어온 배열을 정렬한다. ( 오름차순으로 가정 )<br>2. 2개 이상은 꼭 들어온다는 것이 문제에 보장되어 있다. 그렇기 때문에,<br>(arr[arr.Length-2] -1) * (arr[arr.Length-1]-1); 을 연산해서 반환한다.</p><h3>정답 작성 코드 (C#) - 오름차순</h3><pre spellcheck="false"><code>using System;
using System.Collections;

public class Solution {
    public int MaxProduct(int[] nums) {
        int answer = 0;

        Array.Sort(nums);
        answer = (nums[nums.Length-1]-1 ) * (nums[nums.Length-2]-1 );
        return answer;
    }
}</code></pre><h3>정답 작성 코드 (C#) - 내림차순</h3><pre spellcheck="false"><code>using System;
using System.Collections;

public class Solution {
    public int MaxProduct(int[] nums) {
        int answer = 0;

        Array.Sort(nums, (num1,num2) =&gt; num2.CompareTo(num1));
        answer = (nums[0]-1 ) * (nums[1]-1 );
        return answer;
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722783174683" alt="until-1179">

혼자서 다시푸는 코딩테스트 준비 일지 - 10

코딩테스트 준비 - Maximum Product of Two Elements in an Array

🍎 Mac

<p>프론트엔드 개발을 하다보면 다양한 크로스 브라우징 이슈가 발생한다.</p><p>대부분의 이슈는 맥북의 사파리로도 해결이 디버깅이 가능하지만 간혹 실제 기기에서 테스트 해보거나 디버깅이 필요한 경우들이 존재한다. (키보드 관련이슈... 등)</p><p>이럴 때 XCode의 Simulator 를 사용하면 디버깅도 할 수 있고, 아이폰에서 어떻게 표시되는지도 기기별로 그리고 버전별로 확인이 가능하다.</p><h2>XCode 설치</h2><p>우선 앱스토어에 접속해서 XCode를 설치해주자.</p><p>또는 공식 홈페이지에서 다운로드 받을 수 있다. 시간이 꽤 걸린다.</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.apple.com/xcode/">https://developer.apple.com/xcode/</a></p></li></ul><img src="https://image.until.blog/morethanmin/article/1729175662365.png" data-width="100%" data-align="center"><h2>Simulator 사용</h2><p>설치가 끝났다면 <code spellcheck="false">Xcode -&gt; Open Developer Tool -&gt; Simulator</code> 를 통해 시뮬레이터를 실행할 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729175802671.png" data-width="100%" data-align="center"><p>그럼 아래와 같이 iOS기기에서 safari를 돌려볼 수 있게 된다.</p><p>만약 모바일 기기 또는 iOS 버전을 바꾸고 시다면 <code spellcheck="false">File -&gt; New Simulator</code> 에서 바꿀 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729175905830.png" data-width="50%" data-align="center"><h2>개발자 도구 사용하기</h2><p>실제 디버깅까지 해보기 위해서는 개발자도구를 사용할 수 있어야한다.</p><p>시뮬레이터에서 개발자도구를 사용하려면 safari technology preview를 설치하면 된다. 직접 검색하거나 아래 링크에서 다운로드 받자</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.apple.com/safari/technology-preview/">https://developer.apple.com/safari/technology-preview/</a></p></li></ul><p>이제 <code spellcheck="false">Develop -&gt; 시뮬레이터 -&gt; 디버깅할 사이트</code> 를 선택하여 개발자 도구를 켤 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729176074625.png" data-width="100%" data-align="center"><p>결과적으로 아래와 같이 세팅할 수 있게 된다. 개발서버를 켜두고 한쪽에 이렇게 켜두고 작업하면 편하게 작업할 수있다.</p><img src="https://image.until.blog/morethanmin/article/1729176151467.png" data-width="100%" data-align="center"><p></p>

프론트엔드 개발을 하다보면 다양한 크로스 브라우징 이슈가 발생한다.대부분의 이슈는 맥북의 사파리로도 해결이 디버깅이 가능하지만 간혹 실제 기기에서 테스트 해보거나 디버깅이 필요한 경우들이 존재한다. (키보드 관련이슈... 등)이럴 때 XCode의 Simulator 를 사용하면 디버깅도 할 수 있고, 아이폰에서 어떻게 표시되는지도 기기별로 그리고 버전별로 확

맥북에서 모바일 사파리 디버깅하기 (XCode Simulator)

<p>결제모듈 도입하기는 상용 서비스 웹 개발자라면 뗄레야 뗄 수가 없는 개발 소요이다. <s>이걸 할 수 있어야 돈을 벌 수 있거든</s> 이 개발자에게 피와 살<s>과 돈</s>이 되는 덕목을 자세히 한번 알아보자.</p><h2>카카오페이의 단순성(과 안전성)</h2><p>일단 카카오페이를 찬양하면서 시작해야 한다. 우리나라에는 반올림해서 100개의 PG(Payment Gateway)사가 있고, 쉽게 접하지 못하는 솔루션을 제외하더라도 유명한 솔루션만 10가지 정도가 된다. 그런데 그 중에서도 카카오페이는 구현이 압도적으로 쉬운 편이다.</p><ol><li><p>카카오톡 앱을 대한민국 사람 누구나 깔아서 쓰고 있다.</p></li><li><p>따라서 카카오톡 앱을 통해서 실질적 결제 프로세스를 진행시키면 우리나라가 그토록 신뢰하는 "휴대폰 인증"만큼의 안전성이 확보되면서 보안상 중요한 부분, 노출되지 않는 로직이 필요한 부분은 몽땅 카카오톡 앱으로 넘겨버릴 수 있다.</p></li><li><p>즉 개발자는 보안에 신경을 안 쓰고 굿이나 보고 떡이나 먹으면 된다.</p></li></ol><p>예를 들어보자. 토스페이먼츠 결제모듈의 경우에는 결제창을 사용자 디바이스에 그대로 띄운다.</p><img src="https://image.until.blog/mushroombud/article/1728572108827.png" data-width="75%" data-align="center"><p><em>이런 창이 내 디바이스에 뜬다는 말이다</em></p><p>그러면 항상 조심해야 할 것은 이 결제창에서 들어오고 나가는 데이터가 가로채지지 않도록 (Intercept), 혹은 변조되지 않도록 (Counterfeit) 보안 솔루션을 구축해야 하고, 이 때문에 결제모듈은 특정 방식으로만 띄울 수 있게 하며 앱의 경우에는 App Sign을 도입해서 앱 설치파일이 변조되었는지 해시 인증서 체킹으로 검증을 한다.</p><p>그럼에도 불구하고 변조를 100% 막을 방법은 없는 것으로 알고 있다.ㅠㅠ 힘들게 할 뿐임.</p><p>그런데 카카오페이는 무엇이 혁명적이냐? 바로 실질적 결제 프로세스가 전부 "사용자 핸드폰 위의 카카오페이/카카오톡 앱 안"에서 일어난다는 점이다. 보안상으로 기가 맥힌 이득이고, 개발자 입장에서도 할 일이 없어진다.</p><h2>카카오페이 기본 결제 로직</h2><img src="https://image.until.blog/mushroombud/article/1728572390059.png" data-width="100%" data-align="center"><p>복잡해 보이지만 이것만 기억하자. "로그인이랑 똑같은데, 1. 인증과정 하나가 더 붙었고 2. Client-Server-PG사 서버 대신에 중간 Server역할을 핸드폰이 수행한다."</p><ol><li><p>먼저 결제요청을 보내면, 카카오페이 서버에서 redirect URL과 함께 결제코드를 발급한다.</p></li><li><p>URL을 받으면 컴퓨터는 QR을 띄우고 그걸 폰으로 촬영해서 카카오페이 앱으로 가고, 폰은 카카오페이 앱을 바로 띄운다.</p></li><li><p>앱에서 인증이 완료되면 해당 결제코드가 "승인" 된다. 그러면 진짜 결제가 완료되는 Flow.</p></li></ol><h2>진짜 구현하기</h2><p>한번 코드를 보자. 이건 Graduart에 실제 적용된 코드이다. <s>좀 더러움 주의</s></p><pre spellcheck="false"><code>      const paymentResponse = await fetch('https://open-api.kakaopay.com/online/v1/payment/ready', {
        method: 'POST',
        headers: {
          Authorization : `SECRET_KEY ${Deno.env.get('KAKAO_API_KEY')}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          cid: Deno.env.get('KAKAO_CID'),
          partner_order_id: orderId,
          partner_user_id: user_id,
          item_name: itemNames,
          item_code: itemCodes,
          quantity: item_ids.length,
          total_amount: totalPrice,
          tax_free_amount: totalPrice,
          approval_url: `${Deno.env.get('FRONT_URL')}/purchaseApprove?oid=${orderId}`, //
          fail_url: `${Deno.env.get('FRONT_URL')}/purchaseFail`,
          cancel_url: `${Deno.env.get('FRONT_URL')}/purchaseFail`,
        }),
      });</code></pre><p>요렇게 구성되어 있다. 참 쉽죠? 그냥 카카오 서버에 토큰과 파라미터만 맞게 넘겨주면 알아서 응답이 잘 온다.</p><p></p><p>요청을 잘 보냈으면 이제 승인도 해야 한다.</p><pre spellcheck="false"><code>  const approvalRequest = await fetch('https://open-api.kakaopay.com/online/v1/payment/approve', {
      method: 'POST',
      headers: {
        Authorization : `SECRET_KEY ${Deno.env.get('KAKAO_API_KEY')}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        cid: Deno.env.get('KAKAO_CID'),
        tid: tid,
        partner_order_id: oid,
        partner_user_id: user_id,
        pg_token: pgToken
      }),
    });</code></pre><p>이것도 잘 보내면 되는데, 특이사항으로 tid, oid, user_id, pgToken등등의 파라미터가 있다. 이건 최대한 유저에게 노출이 안 될수록 좋다. (변조 방지) 특히 cid와 tid는 정말 위험하다. 그래서 중간에 프록시 서버를 껴서 구현한다던지, 세션 기반으로 코드를 매치한다던지, Cloud Function (AWS Lambda 등)을 이용해서라도 숨겨야 한다.</p>

PG사 결제 구현하기 feat.카카오페이

PG사 결제모듈 도입하기 feat.카카오페이

🧑‍💻 Develop

<blockquote><p>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</p></blockquote><p>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)</p><p>언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.</p><p>위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.</p><h1>배포하기</h1><h2>프로젝트 생성</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. </p><p>애널리틱스 연동은 필요에 따라 선택해주시면 돼요.</p><p>생성해주셨다면 <strong>빌드 &gt; 호스팅</strong> 메뉴를 선택해 시작하기를 눌러주세요.</p><img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2><p>가이드에 따라 firebase-cli를 설치해주세요.</p><pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><p><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.</p><h2>firebase init</h2><p>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.</p><pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre><p>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. </p><img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960"><p>프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.</p><img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><p><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963"><p>리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964"><p>Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965"><p>기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.</p><img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966"><p>그러면 아래와 같이 설정파일들이 생성돼요.</p><img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2><p>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.</p><p>우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.</p><p>이후 아래와 같이 deploy 스크립트를 추가해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968"><p>이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. </p><h1>*.web.app 도메인 주소 변경하기</h1><p>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/1845">폰켓몬</a></p></li><li><p>사용언어 : C++</p></li><li><p>난이도 : 극하 ( Lv 0.5 )</p></li><li><p>풀이시간 : 10m 미만</p></li><li><p>유형 : 해시?</p></li></ul><h6><strong>문제 설명</strong></h6><p>당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다.<br>홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다.</p><ol><li><p>첫 번째(3번), 두 번째(1번) 폰켓몬을 선택</p></li><li><p>첫 번째(3번), 세 번째(2번) 폰켓몬을 선택</p></li><li><p>첫 번째(3번), 네 번째(3번) 폰켓몬을 선택</p></li><li><p>두 번째(1번), 세 번째(2번) 폰켓몬을 선택</p></li><li><p>두 번째(1번), 네 번째(3번) 폰켓몬을 선택</p></li><li><p>세 번째(2번), 네 번째(3번) 폰켓몬을 선택</p></li></ol><p>이때, 첫 번째(3번) 폰켓몬과 네 번째(3번) 폰켓몬을 선택하는 방법은 한 종류(3번 폰켓몬 두 마리)의 폰켓몬만 가질 수 있지만, 다른 방법들은 모두 두 종류의 폰켓몬을 가질 수 있습니다. 따라서 위 예시에서 가질 수 있는 폰켓몬 종류 수의 최댓값은 2가 됩니다.<br>당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.</p><h5>제한사항</h5><ul><li><p>nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다.</p></li><li><p>nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다.</p></li><li><p>폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다.</p></li><li><p>가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다.</p></li></ul><hr><h5>입출력 예</h5><p>numsresult[3,1,2,3]2[3,3,3,2,2,4]3[3,3,3,2,2,2]2</p><h5>입출력 예 설명</h5><p>입출력 예 #1<br>문제의 예시와 같습니다.</p><p>입출력 예 #2<br>6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다.<br>가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리, 2번 폰켓몬 한 마리, 4번 폰켓몬 한 마리를 고르면 되며, 따라서 3을 return 합니다.</p><p>입출력 예 #3<br>6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다.<br>가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리와 2번 폰켓몬 두 마리를 고르거나, 혹은 3번 폰켓몬 두 마리와 2번 폰켓몬 한 마리를 고르면 됩니다. 따라서 최대 고를 수 있는 폰켓몬 종류의 수는 2입니다.</p><h3>문제 풀이 접근</h3><p>이 문제는, 별다른 풀이가 필요없는 문제고, 하나의 개념만 알면 된다고 생각한다.<br>N 개의 갯수를 가진 nums 데이터가 들어오는데, 여기서 최대 몇가지를 뽑을 수 있는지라는 것인데, 예를 들면, nums.size = 4인 데이터가 1,2,3,4 로 구성되어 있으면 최대로 많이 뽑을 수 있는 구성은 (1,2),(2,3),(3,4),(4,1) 와 같은 같은 종류를 뽑는 구성밖에 없다. 이럴 경우 최대 종류수는 <strong>2개이다.</strong><br>하지만, 1,2,3,4 와 같이 데이터가 다양하지 않은 경우도 있을 것이다. 1,1,1,1 와 같은 경우다.<br>이런 경우는, 아무리 뽑아도 자리의 순서만 다를뿐 결국 뽑는 종류는 (1,1) 1종류 밖에 못뽑는다.</p><p>그럼 개념은 잡힌것 같고, 이 두가지 케이스를 가지고 연산하면 된다.<br>최대로 내가 뽑을 수 있는 가짓수가 몇개 인지 리스트에 담는다. <br>있다면 담을 필요 없고, 없으면 담는다. 이 리스트의 size()는 결국 최대 뽑을 수 있는 가짓 수가 된다. <br>그리고, 내가 뽑을 수 있는 drawCount = N*0.5f 는 종류보다 많다면, 최대로 뽑을 수 있는 종류를 Answer에 넣어서 ret 한다.</p><p>왜? 앞에 말했듯이, 내가 1,1,1,1 에서 (1, ?) 뽑았다고 할때, drawCount가 하나 있다고 해도, 결국 내가 뽑을 수 있는 선택지는(1,1)이다. 결국 내가 뽑은것에서 가질 수 있는 최대 종류의 수는 1이다. <br>그렇기 때문에 종류가 drawCount 보다 작다면 drawCount 는 결국 몇백번을 뽑던 종류의 보다 많이 뽑을 수 없다. 이 상황에서 결국 최대값은 종류의 수와 다르지 않다.</p><h3>정답 작성 코드 (C++) - 문제가 C# 지원 안한다.</h3><pre spellcheck="false"><code>#include &lt;algorithm&gt;
#include &lt;list&gt;
#include &lt;iostream&gt;

using namespace std;

int solution(vector&lt;int&gt; nums)
{
    int answer = 0;
    list&lt;int&gt; lt;
    std::list&lt;int&gt;::iterator it;
    
    for(int i = 0; i &lt; nums.size(); ++i)
    {
        int element = nums[i];
        it = std::find(lt.begin(),lt.end(),element);
        if(it == lt.end())
        {
            lt.push_back(element);
        }
    }
    
    int drawCount = nums.size() * 0.5f;
    
    if(drawCount &gt; lt.size())
        answer = lt.size();
    else
        answer = drawCount;
    
    return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721354761693" alt="until-881"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 1

코딩테스트 준비 - 폰켓몬

AI/LLM

<h2>서론</h2><p>출석체크 애플리케이션 프로젝트에 이메일 인증 시스템을 도입하기로 결졍했습니다.</p><p>목표는 대학교 교직원과 학생만 참여하도록 제한해서 외부 인원의 참여를 막고, </p><p>대학교 학생들만이 서비스를 이용하게 만드는 것이었습니다.</p><h2>UnivCert API의 한계</h2><h3>대학교 이메일 인증 API, UnivCert</h3><img src="https://image.until.blog/hwangjeyeon/article/1734680217119.png" data-width="100%" data-align="center" alt="2593"><p>대학교 이메일 인증을 위해 관련 API를 탐색하던 중, UnivCert라는 서비스를 발견했습니다.</p><p></p><a data-type="bookmark" href="https://univcert.com/" target="_blank"><div class="content"><div><div class="title">메일 및 대학 인증</div><div class="description">단 한 줄의 코드로, 사용자의 메일과 대학 재학 여부까지 인증해 보세요.</div></div><div class="href">https://univcert.com/</div></div><img src="/opengraph-image.png"></a><p>간단한 사용법 덕분에 인증을 쉽게 구현할 수 있어 해당 API를 선택했습니다.</p><h3>하루 API 호출 제한 문제 발생</h3><p>하지만 이후 구현 과정에서 생각하지 못한 문제를 발견했습니다</p><img src="https://image.until.blog/hwangjeyeon/article/1734680300755.png" data-width="100%" data-align="center" alt="2595"><p>하루 API 호출량이 200회로 제한되어 있다는 것입니다!</p><p>해당 프로젝트의 행사기간 예상 API 호출 수는 5000회 이상입니다.</p><p>따라서 하루 200회 제한으로는 서비스 운영을 진행할 수 없습니다</p><h2>대안 고민</h2><p>현재 문제상황을 팀원에게 전달하였고, 대안을 고민하였습니다.</p><p>먼저 생각한 대안은 메일서버를 직접 구축하는 방법과 </p><p>개인 이메일을 활용하여, SMTP 서버를 연결한 뒤 발송하는 방법이었습니다</p><p>하지만 해당 방식은 모두 무산되었습니다. </p><p>팀원이 준 피드백을 요약하면 다음과 같습니다.</p><blockquote><ul><li><p>메일 발송에는 평판시스템이 적용됩니다.</p></li></ul><p>메일 서버를 직접 개발한다면, 평판시스템 때문에 차단될 가능성이 존재합니다.</p><ul><li><p>개인 이메일을 이용하는 방식은 계정 정지 위험과 메일 발송 한도량 제한이 있습니다.</p></li></ul><p>따라서 두가지 방법 모두 리스크가 너무 크기 떄문에 다른 대안을 찾아야 할 것 같습니다.</p></blockquote><h4>이메일 평판 시스템</h4><p>팀원의 피드백 덕분에 평판시스템이라는 개념을 처음알게 되었습니다. </p><p>이메일 평판 시스템이란, ISP가 발송자의 이메일 품질을 평가하는 지표입니다.</p><p>발신자의 평판 점수에 영향을 미치는 대표적인 요소는 다음과 같습니다.</p><ul><li><p>이메일 발송량</p></li><li><p>이메일 반송률</p></li><li><p>수신자의 스팸처리율</p></li><li><p>이메일 열람률</p></li></ul><p>이외 많은 요소가 있지만, 발신자가 고려해야할 대표적인 요소로는 위와 같습니다</p><p>평판이 낮으면 스팸메일로 분류되거나 다른 서비스에서 차단될 가능성이 존재합니다.</p><p>또한 이메일 서버를 직접 구축하려면 개발 및 관리에 많은 시간이 필요합니다</p><p>따라서 이메일 서버를 직접 구축하는 방법은 선택지에서 제외했습니다</p><h4>개인 이메일을 이용한다면?</h4><p>Spring boot의 <strong>'spring-boot-starter-mail'</strong> 을 이용하면, </p><p>SMTP 메일 서버와 연결해서 메일을 발송할 수 있습니다.</p><p></p><p>즉, 개인 Gmail 계정을 연결하거나 다른 사이트의 개인 이메일 계정을 이용해서</p><p>이메일을 발송할 수 있습니다.</p><p>구현방법도 어렵지 않고, 서버에서 발송방법을 관리할 수 있기 때문에 </p><p>기능 확장성도 고려할 수 있는 좋은 방법이라 생각했습니다.</p><p></p><p>하지만 해당 방법은 <strong>매우매우매우</strong> 위험합니다!</p><p>앞서 살펴본 평판시스템과 비슷하게 스팸 메일로 분류되고 </p><p>이런 악영향이 누적된다면 개인 메일 계정이 정지될 수도 있기 때문입니다</p><p>또한 하루 메일 전송 한도량이 매우 적다는 문제도 겪고 있습니다.</p><h4>Gmail 전송한도</h4><p>Gmail은 하루에 최대 500개 메세지를 보낼 수 있으며, </p><p>유료 Google Workspace 계정을 사용하여 최대 2천개까지 메세지를 보낼 수 있습니다.</p><p>메일 발송 한도에 도달하면, 당일 발송이 차단되며 다음날 다시 발송할 수 있습니다.</p><p></p><a data-type="bookmark" href="https://support.google.com/mail/answer/22839?sjid=4694522073317355891-AP" target="_blank"><div class="content"><div><div class="title">Limits for sending &amp; getting mail - Gmail Help</div><div class="description">To help prevent spam and keep accounts safe, Gmail limits the number of emails you can send or get per day, and the number of peopl</div></div><div class="href">https://support.google.com/mail/answer/22839?sjid=4694522073317355891-AP</div></div></a><h4>Gmail 이용약관</h4><p>전송한도를 초과하거나 스팸 메일로 인식될 경우, 계정이 정지될 수 있습니다</p><a data-type="bookmark" href="https://support.google.com/a/answer/166852?sjid=4694522073317355891-AP" target="_blank"><div class="content"><div><div class="title">Gmail sending limits in Google Workspace - Google Workspace Admin Help</div><div class="description">To keep systems healthy and accounts safe, Google limits the</div></div><div class="href">https://support.google.com/a/answer/166852?sjid=4694522073317355891-AP</div></div></a><h4> 네이버 이메일 전송한도</h4><p>하루 발송 한도는 정확히 알 수 없으나, Gmail과 비슷할 것으로 예상됩니다.</p><p>또한 스팸 메일로 분류될 경우 이용제한될 수 있습니다</p><a data-type="bookmark" href="https://help.naver.com/service/30029/contents/21159?lang=ko" target="_blank"><div class="content"><div><div class="title">메일 발송 제한 및 한 번에 보낼 수 있는 수신인 수 : 메일 고객센터</div><div class="description">                                                                                                                                            네이버 메일에서는 안정적인 메일 송/수신 서비스 제공을 위해 메일 발송에 제한을 두고 있습니다.​​네이버 메일이 스팸메일 발송 창구로 이용되는 것을 막기 위해 너무 짧은 간격으로 메일을 보낼 경우, 메일 발송이 제한되거나 한 번에 많은 수신자를 지정하지 못하는 등 여러 정책을 시행하고 있습니다.​​1. 짧은 간격으로 메일 발송을 시도하는 경우, 이전 메일 처리로 인해 발송되지 못하고 임시 보관함에 저장될 수 있습니다.2. 1회에 받는 이, 참조, 숨은 참조를 포함하여 100명까지 발송할 수 있습니다.​구체적인 발송 제한 정책은 스팸 대응을 위해 공개하지 않는 점 양해 바랍니다.​​최대 메일 발송 통수를 초과하는 경우 발송 가능 상태까지 최대 24시간이 소요될 수 있습니다.​또한, 네이버 스팸메일 정책상 스팸메일 기준에 해당하는 경우, 발송자에 대해 추가적인 이용 제한 조치를 취할 수 있습니다.​​네이버 스팸 메일 방지 정책​                                                                                            </div></div><div class="href">https://help.naver.com/service/30029/contents/21159?lang=ko</div></div><img src="https://ssl.pstatic.net/static/help/new_help/img/og_image.png"></a><a data-type="bookmark" href="https://policy.naver.com/rules/spamcheck.html" target="_blank"><div class="content"><div><div class="title">스팸메일정책</div><div class="description"></div></div><div class="href">https://policy.naver.com/rules/spamcheck.html</div></div></a><h4> 다음 이메일 전송한도</h4><p>다음 이메일은 조금 예외입니다. 하루 전송한도가 1만명입니다</p><p>하지만 스패머로 추정되는 경우, 이용이 제한되거나 하루 전송 한도가 다르게 적용될 수 있습니다.</p><a data-type="bookmark" href="https://cs.daum.net/faq/43/4592.html?page=1#35864" target="_blank"><div class="content"><div><div class="title">Daum 고객센터</div><div class="description">서비스 이용에 필요한 도움말을 찾거나 직접 문의하실 수 있습니다.</div></div><div class="href">https://cs.daum.net/faq/43/4592.html?page=1#35864</div></div><img src="http://icon.daumcdn.net/w/icon/1312/19/152729032.png"></a><a data-type="bookmark" href="https://cs.daum.net/faq/43/4592.html?page=4#35976" target="_blank"><div class="content"><div><div class="title">Daum 고객센터</div><div class="description">서비스 이용에 필요한 도움말을 찾거나 직접 문의하실 수 있습니다.</div></div><div class="href">https://cs.daum.net/faq/43/4592.html?page=4#35976</div></div><img src="http://icon.daumcdn.net/w/icon/1312/19/152729032.png"></a><h4>종합</h4><p>다음을 제외한 구글과 네이버는 하루 전송한도량이 매우 적으며,</p><p>스팸메일로 분류될 경우, 계정이 차단될 위험이 있습니다</p><p>개발자의 개인 이메일 계정이 차단되는 것은 원하치 않습니다.</p><p>따라서 개인 이메일로 발송하는 방법도 선택지에서 제외했습니다</p><h3>이메일 발송 서비스의 발견</h3><p>앞서 생각한 대안이 모두 무산되었기에 다시 새로운 해결책을 고민했습니다.</p><p>다음과 같은 도움으로 이메일 발송 서비스라는 키워드를 찾을 수 있었습니다.</p><ul><li><p>팀원의 Firebase Authentication 사용 언급</p></li><li><p>Google Workspace 전송 한도 우회방법</p></li></ul><p>두 과정에서 공통으로 외부 이메일 발송 서비스를 언급하고 있습니다.</p><p>따라서 외부 이메일 발송 서비스에 대해 탐색하였고,</p><p>앞선 대안의 문제점을 해결할 수 있는 최적의 선택지라고 판단하였습니다.</p><h4>발송 한도해제 가능</h4><p>개인 이메일 발송 방식의 문제점은 발송 한도량이 존재한다는 것이었습니다.</p><p>하지만 외부 이메일 발송 서비스는 비용만 부담한다면 발송한도 제한을 해제할 수 있습니다</p><h4>효율적인 평판시스템 관리 지원</h4><p>외부 이메일 발송 서비스에서는 대부분 반송메일, 스팸처리된 메일에 대한 분석 기능을 </p><p>제공해주기 때문에, 평판 시스템에 대한 부담을 줄일 수 있습니다.</p><h2>개인 이메일 차단 대처 방법 미존재</h2><p>하지만 이메일 발송 서비스에서 개인 이메일을 사용한다면</p><p>스팸 계정으로 분류되어 차단될 가능성이 여전히 존재합니다.</p><p>따라서 개인 이메일에 의존하지 않는 방법을 고려할 필요가 있습니다.</p><h3>도메인 이메일 사용</h3><p>새롭게 발견한 방법은 개인 이메일로 발송하는 방법이 아닌,</p><p>도메인을 등록하여 이메일을 발송하는 것입니다.</p><p>이 방법을 사용할 경우, 개발자 개인에게 부담되는 리스크가 줄어듭니다</p><p>또한 확장성에서도 효과적인 방법입니다. </p><p>개인 이메일 계정이 정지될 경우 확장의 한계가 존재하며, 리스크 부담도 커집니다</p><p>하지만 도메인의 경우, 서브 도메인을 이용하여 쉽게 확장 가능하므로 유연하게 대처할 수 있습니다</p><h3>이메일 발송 ip 확대 가능</h3><p>만약 IP가 차단된다면 어떻게 대처할 수 있을까요?</p><p>IP Pool 방식을 이용하여, </p><p>사용중인 IP가 차단되었을 때 대체할 수 있는 전용 IP를 등록하여 대처할 수 있습니다</p><p>IP Pool도 많은 이메일 발송 서비스에서 제공해주는 방식입니다</p><h2>AWS SES 선택</h2><img src="https://image.until.blog/hwangjeyeon/article/1734680594274.png" data-width="100%" data-align="center" alt="2596"><p>결과적으로 이메일 발송 서비스를 사용하여, </p><p>대학교 이메일 인증 시스템을 개발하는 것으로 결정되었습니다</p><p></p><p>남은 과제는 어떤 이메일 발송 서비스를 이용할 것인가 입니다.</p><p>가장 최적의 선택은 적은 비용으로 많은 이메일을 발송할 수 있으면서 </p><p>평판 시스템을 관리할 수 있는 환경을 제공하는 서비스일 것입니다.</p><p>이 점을 고려했을 때, AWS SES가 가장 합리적이라고 판단했습니다.</p><p></p><p>AWS 프리티어인 경우 이메일 3천건 발송까지 무료이고 </p><p>추가 이메일 발송도 1천건당 0.1$라는 합리적인 비용으로 이용할 수 있습니다.</p><a data-type="bookmark" href="https://aws.amazon.com/ko/ses/pricing/" target="_blank"><div class="content"><div><div class="title">Amazon Simple Email Service 요금 | Cloud Email Service | Amazon Web Services</div><div class="description">Amazon Simple Email Service(SES)는 발신 및 수신 이메일 볼륨 기준의 종량과금제 서비스입니다. 구독이나 계약 협상, 최소 비용이 없습니다.</div></div><div class="href">https://aws.amazon.com/ko/ses/pricing/</div></div><img src="https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png"></a><p>또한 통계시스템과 평판지표를 제공해주기 때문에 평판시스템 관리도 용이하다는 장점이 있습니다.</p><p>유일한 문제점이 샌드박스 환경에서 프로덕션 환경으로 전환하는데 승인을 받아야한다는 점인데,</p><p>일단 개발환경은 샌드박스 환경만으로 큰 문제가 없기 때문에</p><p>프로덕션 환경 전환과정에서 문제가 생길 경우, 다시 대안을 찾는 방향으로 정리하였습니다.</p><p></p><p>종합하여, AWS SES를 현재 프로젝트의 이메일 발송 서비스로 선택하였습니다</p><h3>개발 과정</h3><p>AWS SDK를 이용하면, 쉽게 이메일 발송 서비스를 개발할 수 있습니다.</p><p>샌드박스 환경에서는 등록된 이메일로만 테스트할 수 있었기 때문에, </p><p>다중 사용자를 받는 환경은 프로덕션 전환 이후로 생각하고 일단 기능 구현에 집중했습니다</p><img src="https://image.until.blog/hwangjeyeon/article/1734680657882.png" data-width="100%" data-align="center" alt="2597"><p>그 결과 AWS SES를 이용하여, 정상 작동하는 대학교 이메일 인증 시스템을 개발하였습니다</p><h2>하지만... </h2><p>우려했던 샌드박스 환경에서 프로덕션 환경으로 전환하는 과정에서 문제가 발생하였고...</p><p>다시 새로운 대안을 찾아야했습니다.</p><p></p><h2>참고</h2><a data-type="bookmark" href="https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EB%A7%88%EC%BC%80%ED%8C%85%EC%97%90%EC%84%9C-%ED%8F%89%ED%8C%90%EC%9D%98-%EC%A4%91%EC%9A%94%EC%84%B1/" target="_blank"><div class="content"><div><div class="title">이메일 평판: 평판의 정의와 확인 및 개선 방법</div><div class="description">이메일 평판은 이메일 캠페인의 성공 여부를 결정할 수 있습니다. 이메일 평판이란 무엇이며 어떻게 확인하고 개선할 수 있는지 알아보세요.</div></div><div class="href">https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EB%A7%88%EC%BC%80%ED%8C%85%EC%97%90%EC%84%9C-%ED%8F%89%ED%8C%90%EC%9D%98-%EC%A4%91%EC%9A%94%EC%84%B1/</div></div><img src="https://www.usebouncer.com/wp-content/uploads/2024/08/The-Importance-of-Reputation-in-Email-Marketing-–-1-7.png"></a><a data-type="bookmark" href="https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EB%8F%84%EB%A9%94%EC%9D%B8-%ED%8F%89%ED%8C%90/" target="_blank"><div class="content"><div><div class="title">이메일 도메인 평판: 평판이란 무엇이며 어떻게 확인할 수 있나요?</div><div class="description">긍정적인 이메일 도메인 평판을 유지하세요! 이를 확인할 수 있는 도구와 몇 가지 유용한 팁을 알려드립니다.</div></div><div class="href">https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EB%8F%84%EB%A9%94%EC%9D%B8-%ED%8F%89%ED%8C%90/</div></div><img src="https://www.usebouncer.com/wp-content/uploads/2024/08/June-2024-Email-Domain-Reputation-9.png"></a><a data-type="bookmark" href="https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EC%A0%84%EC%86%A1%EC%97%90-%EC%A0%9C%ED%95%9C%EC%9D%B4-%EC%9E%88%EB%82%98%EC%9A%94/" target="_blank"><div class="content"><div><div class="title">Gmail 전송 한도란 무엇인가요? 모든 질문에 대한 답변 - Usebouncer</div><div class="description">이메일 마케팅에 Gmail을 사용하는 경우 하루에 몇 개의 이메일을 보낼 수 있는지 궁금할 수 있습니다. 다음은 정확한 Gmail 전송 한도입니다.</div></div><div class="href">https://www.usebouncer.com/ko/%EC%9D%B4%EB%A9%94%EC%9D%BC-%EC%A0%84%EC%86%A1%EC%97%90-%EC%A0%9C%ED%95%9C%EC%9D%B4-%EC%9E%88%EB%82%98%EC%9A%94/</div></div><img src="https://www.usebouncer.com/wp-content/uploads/2024/08/416594210-is-there-a-limit-on-sending-emails-in-gmail-7.png"></a><p></p><p></p>

메일 발송 서비스 선택 과정에 대한 이야기

[1부] "내 메일계정이 정지될 수 있다고?" - 이메일 발송 서비스를 선택하게된 과정

nextjs

저의 경우에는 그래도 결국  useSearchParams을 사용하는 부분을 따로 분리해서 Suspense로 감싸주지 않으면 의도는 서버 컴포넌트로 동작하도록 설계했는데, 빌드해보니 클라이언트로 동작하게 돼서 예상치 못한 동작이 일어나더라구요

https://nextjs.org/docs/messages/deopted-into-client-rendering

📚 BOOK

<blockquote><p>책 내용을 정리하는 것이 아니라, 해당 범위에서 <strong>특별히 정리하고 싶은 내용</strong>이나 책을 읽으면서 들었던 <strong>궁금한 부분</strong>을 작성한다.</p><blockquote><p>읽다가 갑자기 정리하고 싶은 내용을적기도 한다. 꼬꼬무,,,(꼬리에 꼬리를 무는 공부)</p></blockquote><p>궁금한 부분에 대한 답변은 의문이 해소된 후에 작성한다 (영원히 작성되지 않을수도..)</p></blockquote><h2><strong>정리</strong></h2><h3><strong>팩토리 패턴이란?</strong></h3><ul><li><p>객체를 사용하는 코드에서 객체 생성 부분을 따로 떼어내 추상화한 패턴</p></li><li><p>상속관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴</p></li></ul><pre spellcheck="false"><code class="language-javascript">class CoffeeFactory {
    static createCoffee(type) {
        const factory = factoryList[type]
        return factory.createCoffee()
    }
}   
class Latte {
    constructor() {
        this.name = "latte"
    }
}
class Espresso {
    constructor() {
        this.name = "Espresso"
    }
} 
 
class LatteFactory extends CoffeeFactory{
    static createCoffee() {
        return new Latte()
    }
}
class EspressoFactory extends CoffeeFactory{
    static createCoffee() {
        return new Espresso()
    }
}
const factoryList = { LatteFactory, EspressoFactory } 
 
 
const main = () =&gt; {
    // 라떼 커피를 주문한다.  
    const coffee = CoffeeFactory.createCoffee("LatteFactory")  
    // 커피 이름을 부른다.  
    console.log(coffee.name) // latte
}
main()</code></pre><h3><strong>팩토리 패턴의 장점</strong></h3><ul><li><p>느슨한 결합을 가진다</p><ul><li><p>상위 클래스와 하위 클래스가 <code spellcheck="false">분리</code>되기 때문</p></li></ul></li><li><p>유연성이 좋다</p><ul><li><p>인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문</p></li></ul></li><li><p>유지보수성이 증가한다</p><ul><li><p><code spellcheck="false">객체 생성 로직이 따로 떼어져 있어</code> 코드를 리팩터링하더라도 한 곳만 고칠 수 있기 때문</p></li></ul></li></ul><h2><strong>고민하고 기억하기</strong></h2><blockquote><p><em>p. 24</em></p></blockquote><h3><strong>Q. 팩토리 패턴이 등장하게 된 이유가 뭘까?</strong></h3><ul><li><p>객체 생성 로직의 복잡성과 유연성을 관리하고, 코드의 유지보수성을 높이기 위해</p></li></ul><p>(팩토리 패턴이 등장하게 된 이유는, 어떤 상황에서 사용하는 것이 좋을까 와 같다고 생각함)</p><blockquote><p><em>자바스크립트 + 리액트 디자인 패턴</em></p></blockquote><h3><strong>Q. 팩토리 패턴은 어떤 상황에서 사용하는 것이 좋을까?</strong></h3><ul><li><p>객체나 컴포넌트의 생성 과정이 높은 복잡성을 가지고 있을 때</p></li><li><p>상황에 맞춰 다양한 객체 인스턴스를 편리하게 생성할 수 있는 방법이 필요할 때</p></li><li><p>같은 속성을 공유하는 여러 개의 작은 객체 또는 컴포넌트를 다뤄야 할 때</p></li><li><p>덕 타이핑 같은 API 규칙만 충족하면 되는 다른 객체의 인스턴스와 함께 객체를 구성할 때</p></li><li><p>디커플링 상황</p></li></ul><p><strong>Q. 덕타이핑과 구조적 타이핑, 동적 타이핑</strong></p><ul><li><p>동적 타이핑은, 값이 담길 때 타입이 정해지기 때문에, <code spellcheck="false">동적으로 변한다</code></p></li><li><p>덕 타이핑은, 객체의 변수, 메소드의 집합이 객체의 타입을 결정한다</p></li></ul><img src="https://image.until.blog/fc0o0ce/article/1733820853066.png" data-width="100%" data-align="center" alt="2527"><ul><li><p>구조적 타이핑은, 구조 안에 같은 속성의 타입이 있는지를 체크하는 것이다.</p><ul><li><p>때문에, 의도하지 않았지만 동일한 타입을 가지는 경우 <code spellcheck="false">동일한 유형으로 간주될 수 있다</code></p></li></ul></li></ul><img src="https://image.until.blog/fc0o0ce/article/1733820892623.png" data-width="100%" data-align="center" alt="2528"><p>둘 다 객체의 변수, 메소드 같은 필드를 기반으로 타입을 체크(혹은 안할수도)하지만,</p><p><strong>덕 타이핑</strong>은 '런타임'에 체크하기 때문에 <strong>동적 타이핑</strong>에서, <strong>구조적 타이핑</strong>은 '타입 체커'에서 체크하기 때문에 <strong>정적 타이핑</strong>에서 쓰인다.</p><p><strong>Q. JS는 왜 동적 타입 언어로 설계된 것일까?</strong></p><p>주로 <strong>유연성</strong>과 <strong>간편성</strong>을 제공하기 위해서이다</p><ul><li><p><code spellcheck="false">동적 타입 언어</code>란, 변수에 타입을 지정하지 않고 코드가 실행되는 런타임에 변수 값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정되는 언어이다</p></li><li><p>자바스크립트는 원래 웹 브라우저 내에서 동적으로 실행되는 스크립트 언어로 설계되었는데, 웹 페이지는 빠른 속도로 변화하는 동적 콘텐츠를 처리해야 했다</p></li><li><p>동적 타이핑으로 설계된 자바스크립트는 <code spellcheck="false">유연성</code> 덕분에 복잡한 설정 없이 다양한 데이터 타입을 처리할 수 있으며, 다양한 웹 브라우저 환경에서 원활하게 작동할 수 있다</p></li></ul><p><strong>Q. TS는 왜 등장한걸까?</strong></p><ul><li><p>JS는 <strong>동적 타입 언어</strong>로, <code spellcheck="false">런타임에 실제 코드의 값이 평가될 시점에서야</code> 변수에 들어올 값과 타입을 알 수 있다</p></li><li><p>때문에, 개발자의 의도와 다르게 동작할 수 있다. (ex: 숫자 a,b의 합을 구하는 함수에서 문자열의 합을 구할 수 있음)</p></li><li><p>TS는 <strong>정적 타입 언어</strong>로, <code spellcheck="false">컴파일 타임에 변수의 타입을 결정</code>한다</p></li><li><p>이로써 TS는 타입 에러를 사전에 방지해 안정성을 보장한다</p></li></ul><p><strong>Q. JS는 왜 싱글스레드를 사용할까?</strong></p><ul><li><p>JS는 원래 <strong>웹 브라우저에서 동적 동작을 위해</strong> 설계되었기 때문이다</p></li><li><p>주로 DOM을 조작하는 데 주로 사용되는데, 여러 스레드가 동시에 DOM을 수정한다면 충돌이 발생할 수 있다</p></li><li><p>싱글 스레드에서는 한 번에 하나의 작업만 수행하므로, DOM 업데이트가 안전하게 순차적으로 이루어진다 (비동기)</p></li><li><p>그러나 <strong>이벤트 루프</strong>를 통한 비동기 처리로 <strong>동시성을 지원</strong>한다.</p></li><li><p>이벤트 루프는 <code spellcheck="false">콜 스택</code>과 <code spellcheck="false">태스크 큐</code>를 사용해, 비동기 작업이 완료되면 해당 콜백 함수를 콜 스택으로 보내 실행한다</p></li></ul><p><strong>Q. 이벤트 루프의 동작 과정은 어떻게 진행되나?</strong></p><ol><li><p>콜 스택에 현재 실행 중인 컨텍스트가 있는지, 테스크 큐에 대기 중인 함수가 있는지 반복하며 확인</p></li><li><p>만약 콜 스택이 비어있고, 테스크 큐에 대기중인 함수가 있다면 순차적으로 콜스택으로 이동 후 실행</p></li><li><p>태스크 큐와 마이크로 태스크 큐에 대기 중인 함수가 있다면, 마이크로 테스크 큐를 우선적으로 처리 후 테스크 큐 처리</p></li></ol><h3><strong>Q. 팩토리 패턴을 사용하면 안되는 상황은 뭘까?</strong></h3><p>객체 생성 인터페이스 제공이 작업 중인 라이브러리나 프레임워크의 설계 목표가 아닐 때</p><ul><li><p>잘못된 상황에 팩토리 패턴을 적용하면 <code spellcheck="false">애플리케이션의 복잡도</code>가 크게 증가할 수 있다</p></li><li><p>객체 생성 과정이 복잡할 경우 <code spellcheck="false">단위 테스트의 복잡성</code> 또한 증가시킬 수 있다</p><ul><li><p>팩토리 패턴은 객체 생성 과정을 인터페이스 뒤에 추상화하기 때문</p></li></ul></li></ul>

면접을 위한 CS 전공지식 노트 / 1장. 디자인 패턴과 프로그래밍 패러다임

면접을 위한 CS 전공지식 노트: 디자인 패턴: 팩토리 패턴

vscode

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote><p>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</p></blockquote><p>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)</p><p>react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.</p><h2>watch API</h2><p>watch란 무엇일까? 공식문서를 확인해보자.</p><blockquote><p>This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.</p></blockquote><p>아래와 같이 사용할 수 있다.</p><pre spellcheck="false"><code class="language-typescript">// ...
const Summary: FC = () =&gt; {
  const { watch } = useFormContext&lt;Values&gt;();

  const value = watch();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};

export default Summary;
</code></pre><p>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.</p><blockquote><ul><li><p>This API will trigger re-render at the root of your app or form, consider using a callback or the <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-hook-form.com/docs/usewatch">useWatch</a> api if you are experiencing performance issues.</p></li><li><p><code spellcheck="false">watch</code> result is optimised for render phase instead of <code spellcheck="false">useEffect</code>'s deps, to detect value update you may want to use an external custom hook for value comparison.</p></li></ul></blockquote><p>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.</p><p>그럼 문서에 나와있는 useWatch를 알아보자.</p><h2>useWatch API</h2><p>문서를 읽어보면 다음과 같이 설명하고 있다.</p><blockquote><p>Behaves similarly to the <code spellcheck="false">watch</code> API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application.</p></blockquote><p>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.</p><pre spellcheck="false"><code class="language-typescript">// ...

const Summary: FC = () =&gt; {
  const values = useWatch&lt;Values&gt;();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};
export default Summary; 

// ...</code></pre><p>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍</p><h2>useWatch의 deep partial type 이슈</h2><p>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.</p><p>이 문제는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/orgs/react-hook-form/discussions/10610">해당 논의</a>와 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/react-hook-form/react-hook-form/issues/9954">이슈</a>에서도 확인해보면 알 수 있다.</p><p>결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.</p><h3>그럼 지금은 어떻게 대응해야할까?</h3><p>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.</p><pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><p><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.</p><p></p><p></p><p></p>

이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 

react-hook-form의 useWatch와 watch의 차이점

<img src="https://image.until.blog/steady/article/1729767435080.jpeg" data-width="100%" data-align="center" alt="1874"><p></p><h2>어디에 쓰이나?</h2><hr><p>서버 내에서 <u>동영상과 이미지 파일들을 처리</u>하다보니 메모리를 많이 사용해서 그런지 <u>응답시간이 눈에 띄게 느려진 것</u>을 느끼게 되었다. <u>서버의 메모리는 충분</u>했지만 내가 잘못 사용하고 있는건 아닌가 싶어 <strong>자바 애플리케이션 튜닝</strong>에 대해 알아보게 되었다.</p><p></p><h2>자바 튜닝에 쓰이는 주요 조정 항목</h2><hr><h3>1. 힙 메모리</h3><p>: <strong>힙 메모리</strong>는 자바 애플리케이션이 실행되는 동안 <u>동적으로 생성되는 객체를 저장하는 영역</u>으로 코드를 수행시 필요한 따라 메모리를 할당해 이용하게된다.</p><ul><li><p>힙 메모리 증가의 장점</p><ul><li><p>더 <u>많은 객체를 한 번에 생성하고 유지</u>할 수 있다.</p></li><li><p>힙 메모리가 가득 차면 <strong>GC</strong>(가비지 컬렉터)가 실행되는데, 힙 크기를 적절히 설정하면 잦은 GC 호출로 인한 <u>응답 지연을 줄일 수 있다</u>.</p></li><li><p>메모리 부족으로 인한 <u>OutOfMemoryError 발생 가능성을 낮춘다</u>.</p></li></ul></li></ul><p></p><ul><li><p>힙 메모리 설정하여 Java 파일 실행</p></li></ul><pre spellcheck="false"><code>//초기 힙메모리(Xms, 4GB), 최대 힙메모리(Xmx, 8GB)로 설정함
java -Xms4g -Xmx8g -jar application.jar        </code></pre><p>: 설정하지 않을 경우 Xms(256MB 또는 512MB), Xmx(1GB) 정도로 설정되기 때문에</p><p>RAM에 여유가 있다면 자바 파일을 실행할때 적당히 설정해주는것이 좋다.</p><blockquote><p>Tip: <u>초기 메모리와 최대 메모리를 동일하게 설정</u>하면, 메모리 확장 과정에서 발생할 수 있는 <u>불필요한 메모리 낭비를 방지</u>할 수 있다.</p></blockquote><p></p><h2>2. 가비지 컬렉터(GC)</h2><p>: <strong>가비지 컬렉터</strong>(GC)는 힙 메모리를 차지하고 있는 <u>불필요한 객체를 자동으로 식별에 메모리를 회수</u>하는 역할을 하며, 개발자가 메모리를 직접 관리하지 않아도 되어서 <u>메모리 누수를 예방</u>해준다.</p><blockquote><p><strong>청소부(GC)</strong>가 쓰레기를 치우는 동안 <strong>길가(서버)</strong>가 통제되니 일 잘하는 청소부로 잘 고르는 것이 좋다.</p></blockquote><p></p><ul><li><p>GC 알고리즘 종류와 특징</p><ul><li><p>Serial GC (단일 가비지컬렉터)</p><ul><li><p>단일 스레드를 사용하여 GC를 수행한다.</p></li><li><p>적은 메모리와 CPU 코어를 가진 애플리케이션에 적합하다.</p></li><li><p>GC 수행 시 <u>지연 시간이 긴 편</u>이다.</p><p></p></li></ul></li><li><p>Parallel GC (병렬 가비지컬렉터)</p><ul><li><p>여러 스레드를 사용해 GC를 병렬로 수행한다.</p></li><li><p>멀티코어 환경에서 성능이 좋지만, STW(Stop-The-World) 시간이 상대적으로 길 수 있다.</p><p></p></li></ul></li><li><p>G1 GC (Garbage First GC) : <u>Java 9 이상에서 기본</u>으로 사용됨</p><ul><li><p>Young과 Old 영역을 조각내어 관리하고, 각 조각을 효율적으로 청소한다.</p></li><li><p>큰 힙을 사용하는 애플리케이션에 적합하며, 응답 지연을 최소화하도록 설계되었다.</p><p></p></li></ul></li><li><p>ZGC (Z Garbage Collector)</p><ul><li><p>매우 짧은 지연 시간을 목표로 설계된 GC.</p></li><li><p><u>큰 용량의 메모리를 처리하는 데 장점</u>을 가졌다.</p></li><li><p>자바 JDK 11 이상에서 사용 가능하며, <u>Generational ZGC가 추가되어 개선</u>되었다.</p><p></p></li></ul></li><li><p>Shenandoah GC</p><ul><li><p>비슷한 수준의 저지연 시간을 제공하며, ZGC와 유사함.</p></li><li><p><u>메모리 해제를 비동기적으로 수행</u>해 메모리 사용률이 높더라도 효율적으로 회수한다.</p></li><li><p>자바 JDK 12 이상에서 사용 가능하며, JDK 14에서 안정적으로 구현되었다.</p></li></ul></li></ul></li></ul><p></p><ul><li><p>가비지 컬렉터 설정하여 Java 파일 실행</p></li></ul><pre spellcheck="false"><code class="language-java">// GC를 Generational ZGC로 설정함.
java -XX:+UseZGC -XX:+ZGenerational -jar application.jar  </code></pre><p>: 설정하지 않으면 <strong>Parrallel GC</strong>를 사용하고 <u>Java 9 이후에는 기본값</u>으로 <strong>G1 GC</strong>를 사용하게 된다.</p><p><u>G1 GC도 일반적인 서버에서는 충분</u>하지만 GC 로그를 모니터링해 <u>지연 시간이 늘어나는 구간이 많다면 변경</u>해 주는 것이 좋다.</p><p></p><h2>돌아보며</h2><hr><blockquote><p>사실 오늘 서버 튜닝에 대해 찾아보다 보니 지금 작성한 글은 너무 간단한 내용이구나 싶어 적을까 말까 고민하긴했다.</p><p>하지만 이런 별거 아닌것 같은 내용도 몰랐던 나를 반성하며 다음에는 다른 방법의 튜닝들도 더 자세히 다루어 볼까 한다.</p></blockquote><p></p><p></p><p></p><p></p>

어디에 쓰이나?서버 내에서 동영상과 이미지 파일들을 처리하다보니 메모리를 많이 사용해서 그런지 응답시간이 눈에 띄게 느려진 것을 느끼게 되었다. 서버의 메모리는 충분했지만 내가 잘못 사용하고 있는건 아닌가 싶어 자바 애플리케이션 튜닝에 대해 알아보게 되었다.자바 튜닝에 쓰이는 주요 조정 항목1. 힙 메모리: 힙 메모리는 자바 애플리케이션이 실행되는 동안 동