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

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

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

⚛️ React

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<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>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<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>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<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>

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

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

CodingTest

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

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

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

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

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

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

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

🧑‍💻 Develop

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

firebase init</code></pre>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. <img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960">프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.<img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.<img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963">리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964">Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965">기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.<img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966">그러면 아래와 같이 설정파일들이 생성돼요.<img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.이후 아래와 같이 deploy 스크립트를 추가해주었어요.<img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968">이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. <h1>*.web.app 도메인 주소 변경하기</h1>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.<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>응시 사이트 :<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></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/1845">폰켓몬</a></li><li>사용언어 : C++</li><li>난이도 : 극하 ( Lv 0.5 )</li><li>풀이시간 : 10m 미만</li><li>유형 : 해시?</li></ul><h6>문제 설명</h6>당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다.<ol><li>첫 번째(3번), 두 번째(1번) 폰켓몬을 선택</li><li>첫 번째(3번), 세 번째(2번) 폰켓몬을 선택</li><li>첫 번째(3번), 네 번째(3번) 폰켓몬을 선택</li><li>두 번째(1번), 세 번째(2번) 폰켓몬을 선택</li><li>두 번째(1번), 네 번째(3번) 폰켓몬을 선택</li><li>세 번째(2번), 네 번째(3번) 폰켓몬을 선택</li></ol>이때, 첫 번째(3번) 폰켓몬과 네 번째(3번) 폰켓몬을 선택하는 방법은 한 종류(3번 폰켓몬 두 마리)의 폰켓몬만 가질 수 있지만, 다른 방법들은 모두 두 종류의 폰켓몬을 가질 수 있습니다. 따라서 위 예시에서 가질 수 있는 폰켓몬 종류 수의 최댓값은 2가 됩니다. 당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.<h5>제한사항</h5><ul><li>nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다.</li><li>nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다.</li><li>폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다.</li><li>가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다.</li></ul><hr><h5>입출력 예</h5>numsresult[3,1,2,3]2[3,3,3,2,2,4]3[3,3,3,2,2,2]2<h5>입출력 예 설명</h5>입출력 예 #1 문제의 예시와 같습니다.입출력 예 #2 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리, 2번 폰켓몬 한 마리, 4번 폰켓몬 한 마리를 고르면 되며, 따라서 3을 return 합니다.입출력 예 #3 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리와 2번 폰켓몬 두 마리를 고르거나, 혹은 3번 폰켓몬 두 마리와 2번 폰켓몬 한 마리를 고르면 됩니다. 따라서 최대 고를 수 있는 폰켓몬 종류의 수는 2입니다.<h3>문제 풀이 접근</h3>이 문제는, 별다른 풀이가 필요없는 문제고, 하나의 개념만 알면 된다고 생각한다. N 개의 갯수를 가진 nums 데이터가 들어오는데, 여기서 최대 몇가지를 뽑을 수 있는지라는 것인데, 예를 들면, nums.size = 4인 데이터가 1,2,3,4 로 구성되어 있으면 최대로 많이 뽑을 수 있는 구성은 (1,2),(2,3),(3,4),(4,1) 와 같은 같은 종류를 뽑는 구성밖에 없다. 이럴 경우 최대 종류수는 2개이다. 하지만, 1,2,3,4 와 같이 데이터가 다양하지 않은 경우도 있을 것이다. 1,1,1,1 와 같은 경우다. 이런 경우는, 아무리 뽑아도 자리의 순서만 다를뿐 결국 뽑는 종류는 (1,1) 1종류 밖에 못뽑는다.그럼 개념은 잡힌것 같고, 이 두가지 케이스를 가지고 연산하면 된다. 최대로 내가 뽑을 수 있는 가짓수가 몇개 인지 리스트에 담는다. 있다면 담을 필요 없고, 없으면 담는다. 이 리스트의 size()는 결국 최대 뽑을 수 있는 가짓 수가 된다. 그리고, 내가 뽑을 수 있는 drawCount = N*0.5f 는 종류보다 많다면, 최대로 뽑을 수 있는 종류를 Answer에 넣어서 ret 한다.왜? 앞에 말했듯이, 내가 1,1,1,1 에서 (1, ?) 뽑았다고 할때, drawCount가 하나 있다고 해도, 결국 내가 뽑을 수 있는 선택지는(1,1)이다. 결국 내가 뽑은것에서 가질 수 있는 최대 종류의 수는 1이다. 그렇기 때문에 종류가 drawCount 보다 작다면 drawCount 는 결국 몇백번을 뽑던 종류의 보다 많이 뽑을 수 없다. 이 상황에서 결국 최대값은 종류의 수와 다르지 않다.<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">

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