코딩하는 핑구

2021 데브매칭 백엔드 상반기 문제를 풀어봤다

※그냥.. 최적이고 간에 해결하는것에 의의를 둔 풀이임

늘 그렇듯 1번 문제부터 고전했다.,

고전하는 중 질문하기 페이지를 구경하다가 문제에 대해 화가난 유저도 보았다

문제 요약

민우가 구입한 로또 번호 6개 중 동생이 랜덤하게 덧칠을 해서 알수없는게 n개 있는데

이 n개가 로또 정답일 때, 정답이 아닐 때 를 각각 구하면 됨

처음에 생각했던 방식

default_num, : 민우의 로또 번호 중 정답 로또 번호와 일치하는 것

ran_num : 민우의 번호 중 0 인 것

for문을 돌려 lottos(민우 로또 번호), win_nums(정답 로또 번호)를 비교하여 위의 변수에 ++; 해줌

민우와 정답 로또번호를 모두 비교해서 ran_num, default_num을 구한 뒤

미리 지정해둔 정답과 등수의 map을 이용해

answer에 각각 map[default_num+ran_num]과, map[default_num]을 삽입하도록 하였는데

테스트 케이스에서 계속 3개만 맞고 나머지 11개정도를 죄다 틀려버리는 사태가 발생해서

중간 중간 출력을 해보며 확인한 결과,

로또 번호를 비교하는 반복문을 수행할 때, 이미 0(ran_num)을 찾은 뒤에 또다시 같은 값을 확인해버리는 상황이 발생해서 문제가 생기는걸 확인함

해결법으로 2가지 정도를 생각해봤는데

1) 각각의 벡터를 정렬 시킨다음, 위의 방법처럼 for문으로 비교를 하는것과

2) 민우의 로또 번호에서 0을 찾은 다음, 6에서 그 개수를 뺀 나머지만큼만 반복문을 돌려서 수를 비교하는것 중

후자를 선택했다

※ 1번이 맞는 방법이 아닐수도 있다

map에 지정해둔 등수와 개수

착오를 거쳐 수정한 방법

민우의 로또 번호 중 0의 갯수를 미리 모두 찾아 ran_num에 저장

그리고 민우의 번호인 lottos 벡터에서 0을 모두 지워버린 다음

그만큼 반복을 덜하도록 for문을 수정해주었다

#include<bits/stdc++.h>

using namespace std;

vector<int> solution(vector<int> lottos, vector<int> win_nums) {
    vector<int> answer;
    
    //최저 값, 랜덤 값 확인
    //default인 값 만큼은 갯수를 맞힐수있다
    //랜덤 값 만큼 디폴트 기준 위아래로 범위가 넓어짐    
    int default_num = 0;
    
    int ran_num = count(lottos.begin(), lottos.end(), 0);
    cout << "0의 값 : " << ran_num <<"\n";
    remove(lottos.begin(), lottos.end(), 0);
    
    //로또 번호 총 6개에서 민우 번호 중 0개인 만큼 제외하여
    //비교할 for문에 사용
    int len = lottos.size();
    int len1 = len-ran_num;
    int len2 = win_nums.size();
    
    //로또 정답과 민우 번호 비교에 사용
    int tmp;
    
    for(int i=0; i<len1; i++){
        tmp = lottos[i];      
        cout <<"\n tmp 값 : " << tmp << "\n";
        
        for(int j=0; j<len2; j++){            
            if(tmp == win_nums[j]){
                default_num++;
                cout <<"값이 같음, default 값 : " <<+ default_num << "\n";
                break;                
            }
        }
    }
       
    map<int,int> m;
    //맞은 갯수, 등수
    m[6] = 1;
    m[5] = 2;
    m[4] = 3;
    m[3] = 4;
    m[2] = 5;
    m[1] = 6;
    m[0] = 6;
           
    answer.push_back(m[default_num+ran_num]);    
    answer.push_back(m[default_num]);
    
    /* 맞게 들어갔는지 확인차 출력
    for(int i=0; i<2; i++){
        cout <<answer[i] << ", \n";
    }*/
    
    return answer;
}

최고 순위 : default_num + ran_num
> 맞은 로또 번호에 ran_num(0)이 추가로 정답일 경우
     
최저 순위 : default_num
> ran_num(0)이 로또 정답이 아닐 경우

map의 value 값은 중복이 가능하므로

m[1]=6, m[0] =6을 넣어줌

https://programmers.co.kr/learn/courses/30/lessons/77484?language=cpp 

https://programmers.co.kr/learn/challenges

카카오맵 API를 연동해서 웹서비스를 개발하다 보면

f12 개발자도구 콘솔창에서 맞닥뜨리게되는 워닝이 있는데

그냥 궁금해서 찾아본 파서 블로킹 경고창에 대한 위험도를 기록해봄

sdk.js?appkey=AppKey&libraries=services:4 A parser-blocking,
cross site (i.e. different eTLD+1) script,
http://t1.daumcdn.net/mapjsapi/js/main/4.4.1/kakao.js, is invoked via document.write.
The network request for this script MAY be blocked by the browser in this or
a future page load due to poor network connectivity.
If blocked in this page load, it will be confirmed in a subsequent console message.
See https://www.chromestatus.com/feature/5718547946799104 for more details.

(가독성을 위해 줄바꿈으로 출력함)

카카오 답변

- 지도가 로드되지 않는게 아니라면, 무시해도 됨

- document.write로 스크립트를 생성하는것은 피하는게 좋다

참고 :

https://devtalk.kakao.com/t/gatsby-map/103810/2

https://devtalk.kakao.com/t/parser-blocking/115430

document.write로 스크립트 렌더링 시 발생하는 문제 관련

https://www.cosmosfarm.com/threads/document/21729

버튼 ui를 수정하려는 참에 기존에 퍼블리싱을 외주로 맡겼던 곳에서 버튼을 a태그로 사용하길래

궁금해서 찾아본 내용

버튼과 a 태그 중 어느것을 클릭용 버튼으로 사용하는게 더 나을까?

w3schools 사이트의 html 튜토리얼과 다른 사이트를 참고한 내용 간단 정리

<a> a태그의 경우 anchor(앵커, 닻)의 a로,

현재 페이지에서 다른 페이지로의 이동이 있을 경우, 외부 요소에 접근하는 경우 사용하는걸 추천

<div> 간단한 컨테이너 태그로, 특별한 기능을 사용하는게 아닌

스타일적으로 커스터마이징이 필요할 때 주로 사용 (애니메이션, 모달, 트랜지션)

<button> 버튼 태그의 경우, html 페이지에 버튼을 만드는 가장 기본적인 사용법으로,

onClick 액션을 사용하고자 할때 사용하면 된다

<input type="button"> 인풋 타입 버튼 태그, 위의 버튼 태그와 동일한 버튼 태그이지만,

일반적으로 폼 데이터 제출 시, 사용하는것이 좋다

참고 : 

w3schools

stackoverflow

정독하기 좋은 내용

처음 aws에 웹서버를 돌리는데

연결했던 ssh 터미널만 종료하면 프로그램이 계속 다운돼서 방법을 찾아보았더니

터미널이 종료되어도 서버가 돌아갈수있게 하는 자바스크립트 라이브러리들이 몇가지 있었다

이런걸 모니터링 관리라고 하는데

그 중 pm2, forever 2가지가 제일 많이 사용되는 방법인듯했다

일단 pm2를 사용하려고했는데

예전에 설치하고 실행해도 서버 실행이 되지않길래 급하게 찾은 대체법을 기록해본다

nohup이라는 명령어이며 간단하게 실행이 가능하다

nohup sudo node main.js &

뒤에 붙은 & 는 백그라운드로 실행해준다는 의미이다

nohup은 터미널이 종료된다는 신호를 받아도 종료되지 않고 계속 수행하며

screen이나 tmux 기능과 유사하다함

nohup을 사용해 프로세스를 실행하면,

실행한 프로세스에서 입출력이 발생할 경우 nohup.out 이라는 파일에 기록된다고 한다

어차피 나중에는 pm2를 사용할거긴 하지만 테스트용으로 급하게 대체해보았다

참고 

Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

현재 크롬 쿠키 설정이 쿠키차단이라 그런지

도메인으로 접속하면 localstorage 기능이 차단되어 에러가 발생하는 문제가 생겼다

모바일 사파리에서는 자동으로 쿠키를 허용해줘서 그런지 이러한 문제가 발생하지않았고,

데스크탑 크롬으로 접속 시, 도메인이 아닌 아이피로 접속한 경우에도 문제는 없었다

이런 경우, 코드에서의 수정이 아니라

쿠키차단이 되어있어서 자바스크립트에서 사용한 스토리지 API기능을 블락 당한것이므로

크롬 설정에서 바꾸어주고 테스트를 진행하면 된다

크롬 설정 > 개인정보 및 보안 > 쿠키 및 기타 사이트 데이터 > 모든쿠키허용 하면 해결됨

참고 : 

https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

wpf에서 특정 버튼 클릭 시,

외부 프로그램을 실행하는게 필요해서

현재 진행되고있는 프로그램에서 외부의 특정 프로그램, 프로세스를 호출하는법을 찾아보았다

방법은 생각보다 간단한데 관련된 옵션에대한 이해가 조금 부족해서 초반에 힘들었다

지금도 낯설긴 함

Process ps = new Process();
ps.StartInfo.FileName = "VideoRecorder.exe";
ps.StartInfo.WorkingDirectory = "c:\\pingu";
ps.StartInfo.WindowStyle = ProcessWindowStyle.Normal;
ps.Start();

만약 내가 c드라이브의 pingu라는 폴더에 있는 VideoRecorder.exe라는 프로그램을

현재 실행중인 프로그램에서 불러오고 싶다면 위와같이 코드를 작성해주면 된다

c:\\에서

\가 하나 더있는 이유는 \문자 escape 때문임

windowstyle의 경우 호출한 외부의 프로그램이 나타나게될 형태이다

최소화, 최대화, 정도가 있고

그냥 보통 창이 열리듯 윈도우화면에 보이는게 위에 내가 사용한 Normal 값이다

나는 딱 필요한 옵션만을 사용하였고 아래 사이트를 참고하면

더 다양한 옵션들이 많으니 필요에 따라 취사선택하자

참고 : https://docs.microsoft.com/ko-kr/dotnet/api/system.diagnostics.processstartinfo?view=net-5.0 

학교다닐때는 putty를 사용해서 접속했는데

생활코딩에서 본 aws 강의에서는 xshell을 사용하길래 xshell을 이용한 접속방법을 기록해봄

확실히 기록이 좋은게 기초 환경을 세팅하고난 다음에 개발을 하면 되지만

기본 세팅하는법을 자주안하면 까먹다보니 기록으로 남겨둬야됨

aws EC2 우분투 터미널 접속을 위한 세팅

그림대로 하나하나 따라하면 바로 연결이 저장되며 접속이 가능하다

위 또는 아래처럼 세션에서 새로만들기를 눌러 새로운 ssh 등록을 시작한다

이름은 자유롭게 정하면됨

호스트에는 aws에 나와있는 퍼블릭 IP 주소를 입력한다

aws의 퍼블릭 IP주소는

위 사진처럼 생성한 인스턴스를 클릭하면 알수있다

그러고 세션 등록 왼쪽 탭에서

사용자 인증으로 넘어감

그럼 기본으로 사용자인증 방식이 Password로 지정되어 있는데

이때, public key를 더블클릭하여 활성화 시키고 옆에있는 설정을 눌러준다

아직 퍼블릭 키를 설정한게 아니라 현재 사용자 키가 없다고 뜨는데

aws EC2 인스턴스를 생성하면 마지막단계에서 저장한 .pem 키가 있다

이 키를 저장한 위치로 가서 추가해주면 되는것

가져오기를 누르고 .pem 키를 선택해주면됨

그러면 이렇게 세션이 추가된것을 확인할수있다

연결을 누르면 위와같은 화면이 나오며

한번 수락할것인지 수락과 동시에 키를 저장할것인지 물어본다

해당 키를 xshell에 저장하여

앞으로 확인절차를 묻지않는다는 뜻인것과 같은듯하다

수락 및 저장을 누르면 연결이 완료되며

생성한 EC2 인스턴스의 우분투 터미널로 접속이 가능해서 개발을 시작할수있다

윈도우에서 리눅스 인스턴스 접속하는법 끝

참고 : https://opentutorials.org/course/2717/11280

https://www.netsarang.com/ko/xshell-download/

웹에서 가볍게 사용해보려고 이용한 MongoDB

nosql의 대표주자이며 json을 데이터베이스로 취급할수있어서 사용해보았다

맨땅에 헤딩하듯 기초 명령어를 찾아가며 적용해본거라

굉장히 단순하게 이용해봄

Express 모듈을 사용하여 Node.js와 MongoDB를 연동하는 법과

DB에 컬렉션 추가하는법, 저장된 DB를 조회하는법과 컬렉션을 제거하는법을 기록해본다

※ mongoDB 버전 확인하는법

커맨드 창에 아래의 명령어 입력

mongod --version

아래 예시는 몽고디비 v5.0.2를 기준으로 작성되었다

버전별로 명령어가 조금 다를수있어서 본인의 버전을 숙지하는게 좋다

Node.js MongoDB 연결

var fs = require('fs');
var express = require('express')
var app = express()

//인덱스 페이지
app.get('/', function(request, response) { 	
	fs.readFile('index.html', function (error, data) {
		response.writeHead(200, { 'Content-Type': 'text/html' });
		response.end(data);
		console.log('메인페이지');
    });	
});

//===== 데이터베이스 연결 =====//

var MongoClient = require('mongodb').MongoClient;

//데이터베이스 객체를 위한 변수 선언
var database;

//데이터베이스에 연결
function connectDB() {
	
	var databaseUrl = 'mongodb://localhost:27017/DB';
	
	MongoClient.connect(databaseUrl, function(err, db) {
		if (err) throw err;
		
		console.log('데이터베이스에 연결되었습니다. : ' + databaseUrl);
		
		// database 변수에 할당
		database = db;
		
		//database.collection is not a function 오류나서 추가해봄
		database = db.db('DB');

	});
}


app.listen(80, function() {
  console.log('Example app listening on port 80!')
  connectDB();
});

처음 디비 연동할 때, connectDB함수에서 database.collection is not a function이라는 오류를 맞닥뜨려서

추가한 내용 :  database = db.db('DB');

몽고디비 버전마다 디비 연결 시 방법 차이가 있는것같은데 일단 나는 저방식으로 해결이 됐다

다른 방식은 나에게 적용되지않았음

여기까지가 서버실행 시, 몽고디비 연동하는 법

아래에는 연동후 데이터를 저장하고 조회, 삭제하는법을 기록해본다

Node.js MongoDB에 데이터베이스 컬렉션 추가 (일회성)

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  database = db.db("gansik");
  database.createCollection("gansik", function(err, res) {
    if (err) throw err;
    console.log("Collection created!");
    db.close();
  });
});

처음은 이렇게 컬렉션을 만들어주고

그다음부터 컬렉션에 데이터를 넣어야 조회가 되는 과정인듯하다

같은 이름의 컬렉션을 반복해서 추가할 경우, 에러가 발생하니 한번 생성한 컬렉션 이름은 잘 숙지하고

컬렉션을 추가할경우, 겹치지 않게 지정하자

Node.js MongoDB 컬렉션에 데이터 추가 (1개 일 때)

//DB에 등록
app.post('/register',function(request, response){	

	var body = request.body;
	
	console.log('saveDB 호출');
	saveDB(body.gansik);
	
	response.end();
});

//데이터베이스 등록
function saveDB(body){
	var databaseUrl = 'mongodb://localhost:27017/DB';
	MongoClient.connect(databaseUrl, function(err, db) {
	if (err) throw err;

	database = db.db("gansik");

	database.collection("gansik").insertOne(body, function(err, res) {
			if (err) throw err;
			console.log("등록이 완료되었습니다.");
			db.close();
		});
	});	
}

아직 1개씩만 저장하는 단계라 insertOne을 사용함

2개 이상의 데이터를 한번에 저장할 경우, insertMany 메서드를 사용한다

2개이상 저장 예시는 아래 사이트 참고

Node.js MongoDB 컬렉션에 저장된 DB 조회하기

//DB에서 가져오기
app.post('/find',function(request, response){		
	var body = request.body;
	
	console.log('findDB 호출');
	
	findDB();
});


function findDB(){	
	var url = "mongodb://localhost:27017/DB";

	MongoClient.connect(url, function(err, db) {
		if (err) throw err;
		  
		database = db.db("gansik");
		
		//모든 db 조회 가능
		database.collection("gansik").find({}).toArray(function(err, result) {
			if (err) throw err;
			console.log('DB에서 가져온 결과 : ');
			console.log(result);
			db.close();
		});
	});
	
}

콜백으로 받은 result를 출력해보면 여태까지 DB에 저장된 모든값들이 find().pretty() 양식으로 출력된다

Node.js 특정 키의 값만 출력하고 싶은 경우

MongoClient.connect(url, function(err, db) {
		if (err) throw err;
		  
		database = db.db("gansik");		
     
		//특정 db 조회 가능 - 이 예시는 _id랑 price값 출력 - find.pretty 양식으로 출력안되고 그냥 출력됨
		database.collection("gansik").find({}, { projection: { price:1} }).toArray(function(err, result) {
			if (err) throw err;
			console.log('DB에서 가져온 결과 : lat long menu');
			// console.log(' : '+result.lat_ +', '+result.long_+', '+result.menu);
			console.log(result);
			response.send(JSON.stringify(result));
			
			db.close();
            });
	});

price 키에 해당하는 값과 디폴트로 정해진 _id의 값만이 출력됨

만약 price에 0 값을 주거나 아예 입력을 하지 않는다면 price의 값은 출력이 되지않는다

따라서 특정 필드를 unique로 정해준 상태가 아니어서

_id가 디폴트로 정해진 경우,  {projection:{ _id: 0} } 을 입력한다면 _id 값은 출력되지 않음

특정 필드에 해당하는 값만 출력하고 싶을 때 사용하면 유용하겠다

Node.js 특정 키의 값만 출력하는 법 적용 예제

MongoClient.connect(url, function(err, db) {
		if (err) throw err;
		  
		database = db.db("gansik");		
     
		//0이면 그 필드값은 안보이고 필드 값이 1일경우의 값만 보임
		// _id 제외, name, menu, loc, price 출력 가능 - find.pretty 양식으로 출력됨
		database.collection("gansik").find({}, { projection: { _id:0, name:1, menu:1, loc:1, price:1} }).toArray(function(err, result) {
			if (err) throw err;
			console.log(result);
			response.send(JSON.stringify(result));
			
			db.close();
		});
	});

_id는 출력되지 않으며 저장된 디비에서 모든 name, menu, loc, price의 값들만 출력이 가능하다

Node.js MongoDB 특정 값을 가진 데이터 조회하기

MongoClient.connect(url, function(err, db) {
		if (err) throw err;
		  
		database = db.db("gansik");
		
		var findDB_ = menu;

		//쿼리 = 필터 사용해서 특정 값 조회 price가 2000원인 값의 모든 필드 조회 가능
		var query = { menu: findDB_ };
		
		database.collection("gansik").find(query).toArray(function(err, result) {
			if (err) throw err;

			console.log(result);
			response.send(JSON.stringify(result));
			
			db.close();
		});
	});

query에는 위에 적힌것처럼 저장된 DB에서

menu라는 키(key) 중에서 findDB_의 값을 가진 메뉴를 찾도록 한다

문자열을 검색해도 되고 나의 경우는 클라이언트가 요청한 정보를 검색하는걸 해보고싶어서

파라미터로 전달받은 변수 findDB_를 사용했다

Node.js DB에 있는 컬렉션 제거하기

	var databaseUrl = 'mongodb://localhost:27017/gansikDB';
	
	console.log('drop the db');
	
	MongoClient.connect(databaseUrl, function(err, db) {
		if (err) throw err;
		database = db.db("gansik");
		database.collection("gansik").drop(function(err, delOK) {
			if (err) throw err;
			if (delOK) console.log("Collection deleted");
			db.close();
		});
	});

이미 적용해본 코드와 추가해본 코드가 있어서

오타가 있을수있으니 혹시라도 에러가 발생한다면 알려주세요

참고 :

https://www.w3schools.com/nodejs/nodejs_mongodb_create_db.asp

자바스크립트 json 데이터 서버로 보내는법

Node.js express 모듈과 fetch 방식을 사용하면

POST 방식으로 보낸 데이터를 처리하는 방법이 기존의 ajax, xhr과 차이가 있다

fetch API

xhr, ajax 방식과 유사한데 가장 최근에 생겼고 최근 추세는 fetch api를 사용하는 듯함

아래는 사용 예시와 적용해본 방법

HTML

<form method="post" action="/">
    <input type="text" name="user[name]">
    <input type="text" name="user[email]">
    <input type="submit" value="Submit">
</form>

Javascript

function postTest(){
  fetch('/', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({
          user: {
              name: "John",
              email: "john@example.com"
          }
      })
  });
}

Node.js Express v4.16 이후

// Parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded());

// Parse JSON bodies (as sent by API clients)
app.use(express.json());

// Access the parse results as request.body
app.post('/', function(request, response){
    console.log(request.body.user.name);
    console.log(request.body.user.email);
});

자바스크립트 JSON 데이터 POST로 서버에 전달해본 사용예시

function register(){
	var menu = document.getElementById("menu").value;
	var price = document.getElementById("price").value;
	var pay = document.getElementById("pay").value;
	
    var obj={"menu":menu,"price":price,"pay":pay};
    
    //POST 데이터를 보낼 url - ex) localhost/register
	fetch('/register', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({
			data:obj			
		})
	});
}

이렇게하면 json 구조는 { data : {"menu": menu, "price": price, "pay": pay} }가 된다

app.post('/registerAddr',function(request, response){	
	var body = request.body;
	
	console.log('body : ' + body.data.menu);
    //input으로 받은 menu 값 출력 확인
});

클라이언트에서 보낸 menu의 값을 확인할 수 있다

출처 : 

https://stackoverflow.com/questions/4295782/how-to-process-post-data-in-node-js

입력된 문자열 2개를 같은 문자열로 만들기 위해 제거해야할 최소의 문자의 수를 구하는문제

예제를 보면 aabbcc와 xxyybb는 공통된 bb만을 갖고있으므로 나머지 aacc와 xxyy는 제거되어야한다

따라서 총 8개의 문자를 제거해야하므로 출력값은 8이 나오는것

풀이를 위해 생각한 과정

문자열 str1, str2를 각각 입력받은 다음, a부터 z까지의 크기를 갖는 배열 arr1, arr2를 만든다

str1에서 나온 문자를 arr1의 알파벳 문자에 해당하는 인덱스 값을 증가시켜주어

str1에 해당하는 문자의 개수를 기록한다

그렇게 str2도 동일한 과정을 거쳐

arr1과 arr2와의 차이를 모두 더한 값을 출력하도록했다

이때, 차이는 음수가 될수있으므로 음수인경우는 -부호를 붙여 양수로 만들어 계산을 했다

문제 - str1과 str2의 사이즈가 다르다는 생각을 못해서 런타임 에러가 났다

런타임 에러가 났길래 자세히 봤더니 배열 범위에 문제가 생긴듯해서 처음에는 알파벳개수에 문제가 생긴줄알았는데

입력받는 문자열의 개수가 다를수있다는걸 간과해서

각각의 개수를 반복하는 반복문으로 수정해서 오류 해결완료함

#include <bits/stdc++.h>
using namespace std;

int main() {	
	string str1;
	string str2;	
	cin >> str1;
	cin >> str2;
	
	int arr1[27]={0};
	int arr2[27]={0};
	
	for(int i=0; i<str1.size();i++){		
		arr1[str1[i]-'a']++;	
	}
    
	for(int i=0; i<str2.size();i++){		
		arr2[str2[i]-'a']++;
	}
    
	int ans=0;
	int tmp;
	
	for(int i=0; i<26; i++){
		tmp = arr1[i]-arr2[i];		
		if(tmp >0){
			ans+=tmp;
		}else{
			ans+=(-tmp);
		}
	}
	cout << ans;
	return 0;
}

출처 : https://www.acmicpc.net/problem/1919