[TIL/51일차/10.17] 웹캠을 이용하여 프론트와 백엔드 데이터 주고 받기

js 주기적인 시간을 가지고 함수를 반복 실행, 중지, 지연하기

• 프론트(Js)에서 일정 주기로 함수를 실행하기 위해서 setinterval()을 사용했습니다.

setInterval(실행할 함수, 주기(밀리세컨드)) // 반복 실행
clearinterval(중지할 함수) // 반복 실행 종료 함수

• 일정 시간을 지연하여 함수를 실행하기 위해서 setTimeout()을 사용했습니다.

setTimeout(실행할 함수, 지연시간)

프론트에서 웹캠을 사용하기.

• 웹캠을 이용해야하는 서비스를 만들기 위해 Web API에서 MediaDevices를 사용하여 해결

<video id="video" width="320" height="240" style="border: 1px solid black;"  autoplay></video>

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {

	    video.srcObject = stream;
      localstream = stream;
	    video.play();

    });
  }

• 중지

video.pause();
video.src = "";
localstream.getTracks()[0].stop();

base64를 통해 이미지를 디코딩 인코딩 하기

• canvas API를 통해 이미지를 인코딩할 수 있었습니다.

<canvas id="canvas"></canvas>

const canvas = document.getElementById("canvas"); //그릴곳
const ctx = canvas.getContext("2d"); // 2d 인터페이스를 사용

ctx.drawImage(video, 0,0,960,720);
var drawCanvas = document.getElementById("canvas");
var data = drawCanvas.toURL('image/png'); // 타입을 지정하고 인코딩

• 장고에서 base64를 통해 디코딩할 수 있었습니다.

import base64
img = request.POST.get('imgUpload', '') # base64를 통한 정보 값 문자열
img_str = img.split(',')[1] # 이미지 문자열 추출
imgdata = base64.b64decode(img_str) # 이미지 문자열 디코딩
arr = np.fromstring(imgdata, np.uint8) # 디코딩된 문자열을 ndrray로 변환

[TIL/52일차/10.18] js,jquery로 데이터 다루기, git restore ft.내배캠

js로 input값을 가져오기

var input = document.getElementById(id); 

var value = input.value; //가져오기
input.value = null;  // 초기화

js로 attr의 값을 지정, 삭제, 가져오기

setAttribute('onclick','writeLED(1)') // 설정 예시
removeAttribute(속성명); // 지우기
getAttribute(속성명); //가져오기

python strftime()을 통해 원하는 형식의 시간 사용하기

from datetime import datetime

now = datetime.now() # current date and time

year = now.strftime("%Y")
print("year:", year)

month = now.strftime("%m")
print("month:", month)

day = now.strftime("%d")
print("day:", day)

time = now.strftime("%H:%M:%S")
print("time:", time)

date_time = now.strftime("%m/%d/%Y, %H:%M:%S")
print("date and time:",date_time)

jquery로 요소의 삭제의 종류

.remove()	선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다
.detach()	선택한 요소를 DOM 트리에서 삭제한다. (삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다.
.empty()	선택한 요소의 자식 요소를 모두 삭제한다.
.unwrap()	선택한 요소의 부모 요소를 삭제한다

git에서 스테이지에서 제외 하고 싶은 파일이 있어 unstaged를 활하였습니다.

git restore --staged 파일이름
git restore --staged test.txt

맥 숨김 파일은 cmd+shift+ . (커멘드,쉬프트,점)

[TIL/53일차/10.19] js 현재 날짜 가져오기 ft.내배캠

const date = new Date();

[TIL/54일차/10.20] 프로젝트 에러 해결 ft.내배캠

에러 1.

캡쳐한 사진을 보내고 모델이 분석하는 과정에서 사용자가 종료 버튼을 눌렀을 때,

기존의 공부 시간이 종료되고 새로운 공부로그가 시작돼는 에러.

해결.

is_running 플래그를 생성하여, start버튼을 누르면 true 반대로 false버튼을 누르면 true로 변환하고

이미지를 보내주는 uploadImage함수에서 ajax통신을 성공하였을 때, is_running의 값을 판단하여 false이면 다시 ajax통신으로 최근 생성된 공부로그를 지워준다.

에러 2.

clearInterval()함수를 통해 루프를 종료 시켜줬음에도 루프가 도는 에러.

해결.

정확한 원인은 파악을 못햇으나 에러1과 같이 is_running 플래그를 통해서 확인하여 false값일 때 다시한 번 clearInterval을 실행하여 해결

[TIL/55일차/10.21] KPT 프로젝트 회고 ft.내배캠

느낀점

• 경민 : 모델을 직접 학습시켜서 사용한 것이 아닌 기존의 모델을 가져와 사용한 부분은 아쉽다. 아직 머신러닝에 대해 기초가 잘 쌓이지 않은 상태에서 프로젝트를 하는 것이 좀 아쉬웠다. 다음 머신러닝 프로젝트에는 추천 시스템 활용을 위해 공부 필요. 저번 프로젝트에서 시도하면 좋을 부분들을 익숙하지 않기도 하며, 프로젝트를 짧은 시간 내에 완성해야하다 보니 잘 시도를 못 한 부분이 아쉬워서, 프로젝트 기간이 아닐 경우에 시도를 미리해봐야겠다.
• 원채 : 머신러닝을 이용해서 프로젝트를 기획한다는것에 어려움이 있었지만 팀원들의 도움으로 좋은 프로젝트를 기획하고 만들어 본 것 같아 좋았다. 팀프로젝트를 할 때마다 흐름을 정확히 이해하지 못해 무엇을 해야할지 모를때가 많다. 그것에 대해 어떻게 하면 좋을지 팀원들과 이야기를 나눠보면 좋을 것 같다.
• 민수 : 돌아보면 한게 없는 것 같다. 다른사람의 코드를 볼 생각을 못했다. 오히려 다른사람들의 코드를 보는게 나에게 도움이 되는 것 같다.
• 준호 : 프로젝트 기획이 좋았다. 팀원들과 대화를 통해 프로젝트를 개선하는 점이 너무 좋았고 즐거웠다. 아직도 코드를 보면 생각하지 않고 고치려고 하는 습관이 많이 남아 있었다. 천천히 고민하고 코드를 수정해야하는데 이해하지 못한 상태로 코드 변경을 시도해 간단한 문제도 3~4시간씩 걸려 해결했던 점이 아쉬웠다.
• 기훈 : 기획단계에서 아이디어는 좋았지만 실현이 가능할까 의문점이 있었었다. 튜터님과 상의하여 가능여부를 확인했고 실제로 발표날까지 완성된걸보니 처음 회의때 괜한 염려를 했다고 생각했다. 아이디어가 괜찮다면 한번쯤 구현이 가능할지 여부먼저 다같이 생각해보는 자세를 갖는게 좋을것 같다.

KEEP

• 경민 : 각자의 하고 싶은 부분에 대해서 맡아서 열심히 임하는 것. 노션을 활용하는 것(미흡하지만 발전해 나가면 될 것). 브레인 스토밍(자기 생각 머뭇거리지 않고 말하기)
• 준호 : 프로젝트 발전을 위한 대화와 수정. Github commit 컨벤션 지키려고 노력한 점. github 와 live share 적절한 사용
• 민수 : 여러가지 아이디어를 합쳐서 프로젝트 체급을 키우기
• 기훈 : 부족한점을 서로 보완하여 기능 완성. 프로젝트 시작 전 튜터님과 상의하여 실현가능 여부와 방법 확인. READ.MD ERD와 다이어그램을 구체적으로 작성. 코드 주석을 잘 작성하였음. 구현한 부분에 대해서 오류를 끝까지 붙들고 해결하였음.

PROBLEM

• 준호 : 카카오 소셜로그인에서 닉네임을 User모델의 유니크 값으로 받아와서 이름때문에 중복가입이 안되는 문제. Github private 에서 public 으로 변경시 포크 사라지는 것?
• 경민 : 저번 프로젝트의 피드백이 꽤 많이 들어가지 않은 것. 원하는 api를 써보면서 백엔드 기능에 좀 소홀해진 것
• 민수 : 회원가입 이메일 인증을 만들지 못했다.

TRY

• 원채 : Git add시 필요하고 사용한 부분만 올리기. 다른 팀이 사용했던 노션 체크박스를 이용한 진행사항 정리. 초기 모델링 작업과 프로젝트 계획 시 혼란이 없게 구체적으로 작성하기. 모든 팀원들이 다 이해했는지 확인하기. 다른 팀이 사용했던 노션 체크박스를 이용한 진행사항 정리.
• 민수 : 무엇을 하고 싶은지 무엇을 할 수 있는지 합의점을 찾고 잘 실행하기.
• 경민 : 노션의 유용한 템플릿을 찾아서 적용해 보기
• 준호 : 프로젝트 진행 시 구현 우선순위를 잘 정하지 못했던 것 같다(개인적으로). git에서 Django app migrations 폴더를 어떻게 관리 적용해야 할 지 고민. mysql 활용하고 보안유지 코드들 분리(.env)

[TIL/58일차/10.24] 팀원 자체 프로젝트 계획 ft.내배캠

장고 심화를 들어가기 전에 팀의 장고에 대한 이해를 돋우기 위해서 팀 개별로 기능을 추가하면서 함수형 뷰를 연습하기로 하였습니다. 이 기능하나가 프로젝트의 메인이 될수 있을 만큼 많은 기능이 있어야 하지만 우리가 목표한 3일 동안 하지 못한다면 장고 심화 프로젝트 기간에 할 수 있지 않을까 싶습니다.

새로운 기능을 추가하니 만큼 각자의 아이디어도 모두가 이해한 상태에서 출발하면 좋기에 시간이 오래 걸렸지만 모두 의욕있게 할 수 있지 않을까 싶습니다.

[TIL/59일차/10.25] Dajango circluar import err, duplecate err ft.내배캠

django circluar import error 해결

• 두 개의 파일이 서로를 import하여 생긴 에러를 to=인자를 앱.모델로 import하지 않고 해결하였습니다.

컬럼 = models.ForiegnKey(to='앱.모델')

Duplicate column name user_id

• 동일한 컬럼의 이름이 있는 경우 발생할 수 있는 에러이다.
• 하지만 나는 동일한 컬럼의 이름이 없는 경우에 발생한 에러였다.
• 모든 앱에 대해 migrate를 동시에 하다보면 이전의 컬럼의 영향을 받아서 발생할 수 있다고 하였다.
• 그래서 migrate를 하나씩 진행하고 안된다면 —fake를 써보고 된다면 migrate를 진행하면 된다.

python manage.py migrate 앱
# 그래도 오류가 난다면
python manage.py migrate 앱 --fake # 성공했다면 아래 진행
python manage.py migrate 앱

--fake는 기존 컬럼들을 없던 셈 치고 만들어 보는 것이다.

[TIL/60일차/10.26] git fetch & serializer에 데이터 넘겨주기 ft.내배캠

git commit --amend 마지막 커밋 내용 변경하기

git commit --amend

로컬에서 풀 리퀘스트를 미리 가져오기

• .git/config 파일에 경로 추가후 git fetch ‘원격 저장소’

fetch = +refs/heads/*:refs/remotes/origin/* origin은 원격 저장소 이름

git fetch ‘원격 저장소’
git merge origin/pr/숫자

serializer에 필요한 데이터 값 넘겨주기

serializer = MySerializer(study, context = {'request' : request})

[TIL/61일차/10.27] SerializerMethodField() ft.내배캠

SerializerMethodField()를 통해 원하는 필드를 커스텀할 수 있다.

필드 = serializers.SerializerMethodField()

def get_필드(self, obj):
	return 원하는 값

Bootstrap 모달 제어하기

$('#id').modal('show')

[TIL/62일차/10.28] Algorithm & DRF ft.내배캠

cors 설치에 대한 의문 사항

1. 프론트와 백엔드 데이터 통신에 있어, 머신러닝 프로젝트를 했을 때 jquery를 통해 ajax통신을 하였고, js를 사용했을 때는 왜 cors를 설치하고 설정해줘야 했나 -> jquery는 js를 기반으로 만든 것인데 왜 뜨지 않았나.

• 같은 서버에서 돌아갔기 때문이다. (장고에서 프론트와 백엔드를 관리했기 때문)
• cors는 외부의 요청들에 대해 보안을 위해서 설치&설정을 해줘야하는 것
• 참고할 사이트

프로그래머스 알고리즘 문제 생각 노트-깃헙

( 비밀지도, 완주하지 못한 선수, 체육복, 약수의 개수와 덧셈, 숫자 문자열과 영단어, 없는 숫자 더하기, 자릿수 더하기, 자연수 뒤집어 배열로 만들기, 짝수와 홀수, 평균 구하기 )

비밀 지도

초기 설계

1. 각 정수의 숫자들을 2진수 비트열로 바꿔준다 -> 2진수로 변환하기

2. 두 개의 배열에서 인덱스가 맞는 것끼리 비트연산 해준다(하나라도 1이면 1) -> 비트연산

3. 빈문자열에 1이면 # 0이면 공백을 채워준다.

변화된 설계

• 비트연산을 찾는 도중 두 정수를 넣으면 알아서 비트연산이 되는 것을 찾아서 변경

1. 두 개의 배열에서 인덱스가 맞는 것끼리 비트연산을 해준다.(or연산 : a|b )
2. 각 정수의 숫자들을 2진수 비트열로 바꿔준다.(format(숫자, 타입))
3. 빈 문자열에 1이면 # 0이면 공백을 채워준다.

에러 사항

1. 1번의 비트연산 후 2진수로 바꿔줄 때 앞 자리가 0일 경우 자리수가 줄어듦
   • zfill(원하는 자리수)를 통해서 해결

완주하지 못한 선수

초기 설계

1. 완주하지 못한 사람은 1명이기 때문에 집합으로 빼서 한명이 나온다면 정답
2. 그렇다면 동명이인이 있어서 집합으로 뺐을 때 None값이 나온다면?
3. set으로 정답을 돌면서 각각 count를 써서 개수가 다르면 정답

에러 사항

1. count()함수는 O(n)의 시간이 걸린다.
2. 최악의 상황 10만명 중 동명이인이 2명이고 완주자에서 마지막에 배치되어 모두 돌아야할 경우 - 약 100억 번의 연산 필요 예상 $\frac{n(n+1)}{2}*2$ >>>> O($n^2$)

변화된 설계

1. 초기 설계와 같이 먼저 집합으로 빼주고 값이 있다면 정답을 출력
2. 동명이인이 있는 경우.
   1. 참여자 배열을 돌면서 {'이름' : 사람수}를 구해준다.
   2. 완주자 배열을 돌면서 딕셔너리['이름'] -= 1 을 해주고 값이 0이면 삭제한다.
   3. 키 값들의 첫 번째 데이터를 뽑는다

체육복

초기 설계

1. 도난 배열과 여벌이 배열의 교집합을 각각 빼준다.
2. 전체 수에서 갱신된 도난 배열의 길이를 빼주고 시작한다.
3. 갱신된 여벌 배열의 각각의 값에서 -1 또는 +1 의 값이 갱신 도난 배열에 있는지 확인
   • 있다면 정답 +1, 갱신 도난 배열에서 제외

약수의 개수와 덧셈

초기 설계

• 약수의 개수가 홀수인 경우를 좀 생각해 보니 어떤 수의 제곱인 경우 홀수가 됨
• 제곱근이 정수 값과 같은지 판단하면 끝

숫자 문자열과 영단어

초기 설계

1. 영단어에 해당하는 "숫자"를 딕셔너리로 만든다
2. replace()로 바꿔준다. (에러 사항 - int로 변환해 주어야함)

[TIL/63일차/10.29] Testing, TDD 간단 개념 ft.내배캠

The field 'comment_set' was declared on serializer ArticleDetailSerializer, but has not been included in the 'fields' option. - fields 추가

테스팅이란

• 작성한 코드에 대해 직접 확인을 하는 경우에는 시간 낭비, 복잡도 증가, 허점과 같은 단점이 있으나 테스트 코드를 작성함으로써 다음과 같은 이점들이 있다.

1. 어떠한 버그를 쉽고 빠르게 찾을 수 있다(돈과 시간을 절약할 수 있다)
2. 테스팅 자체가 문서가 될 수 있다.
3. 신뢰도가 높아집니다.
4. 퍼포먼스를 확인할 수 있습니다.
5. 코드의 안정성을 높여줍니다.
6. 코드의 복잡도를 낮출 수 있습니다.

TDD 개발 순서

1. 개발에 대한 테스트 코드를 만들고
2. 테스트를 통과할 수 있는 코드를 만든다
3. 리팩토링 → 1번

[TIL/63일차/10.29] Practice Testing Code ft.내배캠

testing코드를 작성하는 것을 연습하는 날이었습니다.

setUp메서드를 오버라이딩하여 각 test_메서드에 필요한 설정을 할 수 있었습니다.

setUpData를 클래스 메서드로 지정하여 testing에 필요한 데이터를 클래스가 끝나기 전까지 저장을 하고 메서드가 실행될 때마다 만드는 것을 방지하여 효율적으로 testing을 가능하게 해줍니다.

class SetUpTestView(APITestCase):

    @classmethod
    def setUpTestData(cls):
        cls.article_data = {
            "title" : "test",
            "content" : "test",
        }
        cls.data = {
            "email" : "test100@naver.com",
            "password" : "123"
        }
        cls.user = User.objects.create_user("test100@naver.com", "123")
        cls.article = Article.objects.create(author = cls.user, title = "test", content = "test")
        cls.comment = Comment.objects.create(author = cls.user, article_id = cls.article.id ,content = "test")

    def setUp(self):
        self.access_token = self.client.post(reverse('token_obtain_pair'), self.data).data["access"]

[WIL/9주차]

이번 주에 대표적으로 한것

• 팀원들과 프로젝트 연장하여 기능 추가 & 나타내기
  • 완성도가 높지는 않지만 리팩토링&기능추가를 하면서 완성도를 높여가면 될것, 또한 팀원들의 연습과 실력 향상에 도움이 되지 않았을까 싶다.
• drf공부
• 토끼반 알고리즘

회고

나의 개인적인 공부도 좋지만 팀원들과 같이 성장할 수 있는 부분을 찾아내고 연습과 실전을 동시에 할 수 있어서 꽤나 좋았다. 팀원분들이 나의 의견을 잘 들어주시는 것 같았고 애정이 더욱가지 않나 싶다.

다음 주에 할 것

drf 프로젝트, aws강의