1. 딥브레인AI 아카데미 수료 및 프로젝트 완료 🥛 내배캠을 수료한 후 지난 5주간 딥브레인AI 아카데미에서 웹어플리케이션을 만들기 위한 여러 기술들을 배웠다. 매주 토요일에 풀타임(9:30-18:00)으로 진행되긴 했지만, 깊게 배우기에는 너무 짧은 시간이였다. 박물관 AI 가이드는 , 와 딥브레인AI에서 제공한 를 활용한 프로젝트였다. 시간이 많지 않았기 때문에(같이하시는 분을 일하고 계시고, 나는 스파르타 공모전 프로젝트도 같이 진행했다) 완성도는 부족하지만 내게는 새로웠던 기술로 웹애플리케이션을 만들 수 있어서 재미있고, 뿌듯했다. 1-1 이번 프로젝트로 얻은 것 framework에서 웹애플리케이션 개발이 가능하다. 를 통해 컴포넌트를 만들고 화면 구성할 수 있다. 로 컴포넌트를 꾸밀 수 있다. 비디오 제작 프로세스를 일정한 주기로 API 요청 및 확인하여 진행상황을 화면에 표시할 수 있다. (요청마다 프로세스 진행상황을 응답해주는 경우) 1-2 내가 작업한 부분 살펴…

1. blank Final 팀프로젝트 완료! 🦚 우리 팀의 처음이자 마지막 팀프로젝트 무야호가 완료 되었다. 지금까지와 다르게 중간에 실제 유저들의 피드백을 받아 개선 시키는 기간도 있었다. 이를 통해 유저들의 생각도 엿볼 수 있었고, 완성도가 높은 프로젝트로 개선할 수가 있어서 좋은 경험이었다고 생각한다. 이번 프로젝트 때 새롭게 경험했던 것들을 나누고 싶다 :) 1-1 AWS의 다양한 서비스를 사용 를 사용하여 가지고 있는 도메인을 등록하고 AWS EB와 연결을 해보았다. 로부터 SSL인증서를 받아 HTTPS 사이트로 구성할 수 있었다. 을 우리 Github repository와 AWS EB 앱서버를 연결하여 자동 배포 할 수 있게 해 보았다. 1-2 프론트 개발 챌린지 회원가입 유효성 체크 회원가입 입력 필드에서 벗어나면 바로 유효성 체크를 하게 하였다. 이메일, 닉네임의 경우는 비동기로 서버 요청하여 중복체크도 하게 하였다. 중복체크는 서버 요청 및 응답을 함에도 빠르게…

1. 코스인함시 두번째 팀프로젝트 완료! 🦚 우리 팀의 2번째 팀프로젝트 미정의 스케치북가 완료 되었다. Pretrained 된 유화제작 모델을 가지고 웹어플리케이션을 만들어 보았다. 이번 프로젝트의 필수 포함은 아래와 같다. 인공지능 서버 / 앱 서버를 따로 구축해주세요. (Django, Flask, Django-Ninja 프레임워크 중 용도에 알맞은 프레임워크를 고민하셔서 구축해주세요. 다만 이전 프로젝트에서 아쉬웠던 부분은 개선하며, 한단계 성장한 개발자 다운 개발을 진행해 봅시다.) 인공지능 서버 / 앱 서버 모두 AWS 를 통해 배포해주세요. AWS S3 / RDS 를 사용해주세요. 유화제작 인공지능 기술 (NST) 을 사용해서, 사용자가 이미지를 넣으면 유화 스타일이 적용된 이미지로 변환되어 출력되는 서비스를 만들어주세요. 이번에 새롭게 도전되는 부분은 앱서버와 인공지능 서버를 2개 aws에 올려 어디서든 접속할 수 있는 어플리케이션을 만드는 것이였다. 학습기간에 새로…

1. 코스인함시 첫번째 팀프로젝트 완료! 🤸 이하 코스인함시 의 첫번째 팀프로젝트 를 마쳤다. 세계적인 스트리밍 서비스 중 하나인 의 외모와 주요기능들을 클론하고 프로젝트를 진행하면서 배우게 된 을 적용해야하는 것이 주요 챌린지였다. 우선 을 살펴보자. Django / Tensorflow 를 사용해주세요. AWS S3 / RDS 를 사용해주세요. (사이트 구현에 필요한 이미지 등은 모두 S3 에 올린 것을 사용하는 방식으로 하셔야 하고, DB도 RDS 서버를 이용하셔야 합니다.) ㄴ현업에서 아주 많이 사용되는 방식! 로그인 / 회원가입 기능을 구현해주세요. 추천시스템을 활용해주세요. (코사인 유사도만 사용하셔도 괜찮습니다.) 넷플릭스와 비슷한 UI를 가지도록 만들되, 내부 콘텐츠는 팀에서 자유롭게 선정해주세요. (뉴스 기사 추천 사이트를 만들어도 좋고, 유튜브 영상을 추천하는 사이트를 만드셔도 좋습니다.) 넷플릭스처럼 사용자에 따라서 메인에 정렬되는 콘텐츠가 달라지도록 구현해주세…

1. 9velopment의 두번째(마지막) 팀프로젝트를 마쳤다.🥺 기존 1차 때 만든 을 업그레이드 하는 방향으로 진행하기로 했고, 또 이미 한 번 합을 맞춰 보았기 때문에 프로젝트 시작하기가 이전보다 훨씬 수월했다. 아래 구현 요구사항을 포함시켜 진행했다. Flask / Tensorflow 를 사용해주세요. CNN / 전이학습 등을 활용해주세요. 팀에서 자유롭게 이미지 데이터 및 카테고리를 선정하여, 이미지 분류 모델을 만들어주세요. (ex. 강아지/고양이 분류, 사람/동물 분류, 풍경 분류 등) 웹 상에서 사용자가 이미지를 올리면, 해당 이미지가 어떤 카테고리에 속하는지 재치있게 결과를 출력해주는 서비스를 만드시면 됩니다! (ex. 특정 스포츠 사진을 넣으면, 어떤 스포츠인지를 분류해주는 서비스 등) 1-1. 결과물 🕶 숫자 이미지 인식 모델(Neural Network) 신경망 네트워크 모델에 MNIST(숫자 손글씨 이미지) 데이터를 학습 시켜 Captcha 구현 정확도 - …

하루를 돌아보며 … 어제 못 다한 댓글페이지 완성!! 내가 쓴 댓글 삭제 가능합니다 미리 조금 작성 해 놓았던 좋아요 기능을 완성했다. 머신러닝 강의를 들으면서 숙제로 만들어놓았던 숫자인식 모델(pixel을 학습한, 이미지 아님)이 있었다. 강의 중 테스트 데이터를 넣어 숫자인식을 잘하는지 확인하는 실습은 없었다. 튜터님이 가이드 해 주신 것도 이미지 인식 관련 된 것 밖에 없었다. 실습했던 코랩 내용 + 튜터님 가이드 + 각종 커뮤니티 글 + 공식문서 등을 통해 해결했다! 여러자료를 통해 해냈다는 기쁨을 누릴 수 있었다. 개발의 묘미? 코드 정리 및 내가 쓴 코드를 확실히 머릿속에 넣어야 겠다. 1차때 짰던 나의 코드에서 버그가 발견됐다. 그 당시에도 조금 이상했지만 잘 동작하여 그냥 넘겼는데, 결국 팀원분이 다른 작업을 하다가 문제가 있다는 걸 확인했다. 그래서 버그를 수정할 수 밖에 없었고, 수정했다. 문제를 보았을 때, 대충 넘기지말고 바로 잘 고치는 습관을 들이자. 시간이…

1. 거만 했다(?) 완전하게 한 것은 아니었지만, ‘좋아요’기능 구현과 회원가입 페이지에 넣을 Canvas(숫자 그리기)에서 서버에 이미지 파일로 저장하는 것까지 테스트를 하여 생각보다 많은 진척을 이루어냈다고 착각을 한 것 같다. 그래서 주말이 되기전에 어느정도 완성할 수 있겠구나 생각이 들었는데, 오늘 나에게 할당된 작업을 하면서 이 마음은 곧 사라지고 말았다. 나는 오늘 를 담당하게 되었다. 물론 프론트만 말이다. 그런데 이것이 생각만큼 쉽지가 않았다. 여러 포스트가 있는 메인페이지에서 특정 포스트에 대한 댓글페이지(댓글 div)를 모달로 띄우고 또 그 포스트의 내용과 달린 댓글들을 보여줘야 했다. 포스트를 생성할 때 필요한 데이터들을 자바스크립트에서 잘 받을 수 있게끔 작업이 되어 있지 않으면 해당 내용을 구현하기 어렵다 생각했다. (다른 더 쉬운 방법이 있다면 알려주세요..ㅠ-ㅠ) 그런데 더 쉽지 않은건 css 였다. 브라우저의 크기에 따라 계속 변하는 html요소들의 …

1. 2차 팀프젝트 시작 이번 프로젝트는 지난 1주간 배운 머신러닝 기술을 녹여서 만들어야 한다. 아예 새로운 프로젝트에 다시 만들어도 되지만, 우리조는 1차 때 만든 에 배운 기술을 넣어 업그레이드 하기로 하였다. 1차와 다르게 멤버 1명이 빠졌지만, 이미 한 번 손발을 맞추어 봤기 때문에 진행이 수월하였다. 기존 프로젝트를 업그레이드 하는 방향으로 갔기 때문에 이전보다 상대적으로 쉽게 된 것 같기도 하다. 2. 어떻게 업그레이드? 우리는 우선 필수포함사항인 을 만들어 글을 쓸 때 이미지 파일이 선택되면 그 이미지가 어떤 음식인지 인식하고 자동으로 하는 기능을 넣기로 하였다. 그리고 가능하다면(지금 구현 관련 자료 검색중), 회원가입 할 때 임의의 숫자를 제시하고, 사용자가 그 숫자를 직접 마우스로 쓰면 그 이미지를 모델이 바르게 숫자로 인식하고 제시한 숫자와 같으면 이라 판단하고 회원가입을 가능케 하는 기능을 넣으려고 한다. 머신러닝 외 개선되는 부분은 댓글, 좋아요, 스크랩 …

1. 드디어 9velopment의 첫번째 팀프로젝트를 마쳤다. 💪 아직 배운게 익숙하지 않고, 기간도 길지 않은 시간에 팀이 하나가 되어 아래의 필수 포함 사항을 잘 녹여 프로젝트를 잘 완성한 것 같다. 기술 선택은 배운 내용 안에서 할 것 기본 CRUD 포함 로그인(JWT), 마이페이지(자기가 쓴 글) 포함 GIT 코드, 이슈, 프로젝트, 위키 기능 사용 AWS EC2 업로드 후 도메인 붙일 것 1-1. 결과물 🎬 사진 2. 발표 이후 팀원들과 KPT회고를 진행하였다. ✍️ K (Keep) 잘하고 있는점. 계속 했으면 좋겠다 싶은 점 P (Problem) 뭔가 문제가 있다 싶은 점. 변화가 필요한 점 T (Try) 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 우리가 시도해 볼 것들 참고: https://techblog.woowahan.com/2677/ 2-1. 9K밥 프로젝트 KPT 회고록 🍚 Keep 코드를 이해하고 응용 하려는 노력을 계속 하자! 아침…

1. 부딪히며 배우다 보고 듣는 것은 그래도 쉬운 편이다. 내 안에 있는 것들을 밖으로 끄집어 내는 것과 비교하면 말이다. 지금 있는 것 없는 것 다 끄집어 내서 프로젝트를 진행 중이다. 중간 중간에 텀이 길게 쉰 적이 있긴 하지만 그래도 나름 계속 에 있었는데도 내게는 가진 경력에 비해 쌓인 노하우가 많지는 않은 것 같다는 생각이 좀 든다. 스스로 돌아볼 때도 그런 부족함을 느끼기에 이 과정에 있긴 하지만 말이다. 그래도 기대가 되는 부분은 내가 가진 열정과 노력이 이전과는 다르다고 생각하기 때문이다. 크고 작은 프로젝트 및 과제를 내주어 학습에 대한 긴장의 끈을 놓지 않게 하고, 계속 하게 만든다. 그리고 나도 모르는 사이에 실력이 늘거라고 생각한다. 앉아서 듣기만 하는 수업보다 이렇게 프로젝트를 통해 계속 부딪히며 배우는 이 방법이 나는 너무 좋다. 2. 팀원들의 성장을 돕다 서당개 삼년이면 풍월을 읊는다 처럼 그래도 나는 경험이 있는 편이라 개발에 이제 밟을 담근 지 얼마 …

어제 보다 나은 오늘 너무 좋은 말이지 아니한가. 어제 보다 나은 오늘. 오늘이 딱 그러한 날인 것 같다. 어제 우리가 프로젝트 작업한 진행도를 보고 사실 조금 암울했는데, 다들 열심히 해서 오늘 프론트, 백엔드 다 껴 맞추니까 그래도 설계한대로 잘 동작한다. 물론 로그인, 회원가입 2페이지 밖에 되지 않지만 말이다. 오늘은 그래도 어제 와 다르게 페이지 하나 (글쓰기) 맡아서 앞, 뒤단 다 구현했다. 관리만 하는건 나의 너무 안일한 생각이였다. 협업을 하면서 가장 어렵게 느끼는 건 개개인의 실력이 다르다는 것도 있지만, 하나의 어플리케이션을 만드는데 한 명이 정성껏 여기저기 섬세하게 만든 것과 같이 만드는 게 쉽지 않다는 거다. 사실 백엔드 쪽은 눈에 보이는 부분은 아니다 보니 크게 걱정은 되지 않지만, 프론트는 얘기가 다르다. 처음부터 모든 페이지를 일관성있게 미리 디자인 하고 개발을 들어간게 아니여서, 지금 담당하신 분들의 각 페이지를 보면 그냥 다른 어플리케이션 같다. 그래…

1. 뭘 모르겠는데 일단 해보자 모든 프로젝트과정을 에 담아내고 싶었다. 그래서 한번 더 써보지 않은 라든지 , 등을 사용 해 보기로 했다. 우선 Wiki에는 우리가 구현 해야 할 기능 리스트를 담은 페이지, 프로젝트 진행 시 어려운 부분 팀 내에서 해결 못할 경우 튜터님께 묻는 질문 리스트 페이지, 그리고 commit 메시지 규칙도 간단히 올려보았다. 에는 대략 적인 큰 틀에서 우리가 해야할 것 들을 적고 하위로 조금은 더 세분화 된 (일감)를 등록했다. 나도 이렇게 하는 게 잘 모르겠지만, 최대한 Github이 제공하는 협업 툴로 이번 프로젝트를 진행 해 보고 싶어서 한 번 해보았다. 모두 Github에 익숙 해지면 좋겠다. 2. 내 역할 이렇게 하는 거 맞아? 우선 이번 프로젝트의 주 개발업무는 나 외에 나머지 4분에게 담당시켰다. 나는 팀장으로 개발과 협업을 할 수 있는 환경 세팅 위주로 하고, 팀원 분들이 잘 모르고 어려워하는 부분들을 알려주고 있다. 이렇게만 하는 건 …

1. 대격변 지난 2주간 함께 했던 분들과 안녕을 하고 새로운 분들을 만나게 되었다. 서로 알아가기도 바쁜 첫 만남에서 우리는 바로 팀프로젝트 이야기를 하게 되었다. 우리에게 주어진 시간은 ! 이 곳 스파르타코딩클럽 내배캠에 와서 처음 하는 팀프로젝트이다. 지금까지 배운 기술을 총 동원하여 인스타그램을 클론 코딩하는 것이다. 이전과 다르게 백엔드(Flask, Mongo DB) + AWS + 도메인 연결 까지 다 해야 하는 프로젝트이다. 우리가 함께 만들어갈 것이 기대가 되면서도 잘 할 수 있을까 걱정도 된다. 2. 와이어프레임 이런 팀프로젝트는 당연히 역할을 나누어서 하는 게 맞다. 그래도 초기 기획단계에서는 어떻게 화면을 구성하고, 기능은 무엇을 넣을지 각 자 고민해보는 것도 필요하다는 생각을 했다. 그래서 시간을 주고 각자 와이어프레임 작성도 해보고, 기능 및 API 설계도 해 보았다. 이 작업을 하면서 느낀 것은 우리가 가진 실력에 비해 우리가 너무나 큰 것을 만드려고 하…

인스타그램 모바일 화면 만들기 1. 개요 어제에 이어 오늘도 소셜미디어 클론하기 이다. 더 많은 오브젝트들이 화면에 있어 시간이 꽤 걸렸다.(기한 내에 제출하기 위해 점심도 안 먹고 했다는 건 안 비밀..) 그리고 px를 사용하지 않고 상대적 크기 단위인 %, vh, vw, em, rem 등만 사용해서 레이아웃을 잡아야 했다. (나중에 안 사실이지만 모바일용 페이지라 max-width는 px로 고정해도 된다고 하셨다) 2. 구현 1️⃣ 우선 레이아웃을 잡았다. header, content, footer 로 잡았다. content 안에는 내용이 많아 더 쪼개야 했다. 2️⃣ header와 footer는 position:fixed로 고정을 했다. 안에 content 내용만 스크롤이 된다. 3️⃣ 예제 화면을 보고 수치를 계속 조정 해가면서 비슷하게 만들었다. 4️⃣ width 를 %로 잡아 브라우저 크기에 따라 화면도 같이 변화도록 했다. 5️⃣ 폰트는 구글폰트 ‘주아체’를 사용했다. 3. 코드 코드줄…

카카오톡 프로필 클론하기 1. 개요 대한민국에서 가장 많이 사용하는 메신저는 무엇일까? 나는 이라 생각한다. 친구 목록에서 친구들을 누르면 를 볼 수가 있다. 오늘은 그 페이지를 html과 css를 가지고 그대로 구현 해 보는 시간을 가졌다. 2. 구현 1️⃣ 처음 클론 하라는 이미지를 보았을 때 크게 세 부분으로 나누어야겠다 생각했다. 상단부(상태글), 중간부(프로필사진 및 이름), 하단부(3개의 버튼) 이렇게 말이다. 2️⃣ 1번에서 언급한 세 div를 한 div에 담아 display:flex로 세로로 정렬 시켰다. 그 중 중간부(프로필 사진 및 이름) 부분은 위,아래 사이에 겹쳐서 있어야 했기에, position:absolute를 사용했다. 3️⃣ 상단부 작은 회색 선(물체)은 button으로 구현했다. (튜터님을 통해 hr태그 있다는 걸 나중에 알았다.) 4️⃣ 하단부 버튼 3개 역시 display:flex로 가로로 정렬 5️⃣ (추가조건) em, rem, % 등 상대적 수치는 사용 불가,…

턴제 RPG 게임 만들기 1. 개요 드디어! 어릴 적 부터 좋아했던 이다. 물론 내가 지금까지 해 온 것과 비교해서는 초라한 것이지만, 어떻게 몬스터와 전투를 하는 지 내가 직접 개발을 하며 들여다 볼 수가 있다. 이번 프로젝트에 주요 키는 를 사용하는 것이다. 사용자와 몬스터간 1:3 대결이고, 사용자는 자신의 턴에 일반 공격과 마법공격 2가지 행동을 할 수가 있고, 몬스터는 회복, 대기, 공격 3가지 행동을 할 수 있다. 턴제 방식으로 전투가 진행되며 사용자가 먼저 행동 할 수 있다. 모든 몬스터의 체력이 0 이면 반대의 경우 이다. 2. 로직 1️⃣ 먼저 이름, 체력, 공격력을 멤버변수로, 상대방 공격 하는 함수를 멤버함수로 갖는 부모 클래스 Object를 만든다. 참, 현재 자신의 체력을 보여주는 클래스 내장함수 도 써보았다. 2️⃣ Object클래스를 상속받고 마법 공격을 하는 멤버 함수를 갖는 Player클래스, 마찬가지로 Object를 부모로 상속받고 대기, 회복을 멤버 …

베스킨라빈스 31 게임 만들기 1. 개요 “베스킨~ 라빈스~ 31!“. 좀 놀아보았다 하신 분들은 모를 수가 없는 게임. 각 게임 플레이어가 차례로 1~3 중의 수를 외쳐서 계속 수를 더하고, 마지막 31을 외치는 플레이어가 지는 게임이다. 컴퓨터와 사용자가 1:1 대결을 한다. 2. 로직 1️⃣ Random.randrange() 를 사용하여 누가 먼저 시작할지 정한다. 2️⃣ 컴퓨터가 말하는 함수를 만든다. 컴퓨터는 random 함수를 이용하여 1과 3 사이를 말하게 한다. 현재 숫자가 어떻게 변화 되고 있는 지는 한 변수를 정하여 누적하여 값을 더하며 확인한다. 3️⃣ 사용자가 말하는 함수를 만든다. 사용자의 숫자는 input()을 이용하여 받는다. 입력 예외처리 해준다. (1~3외에 값을 받지 못하게 한다) 4️⃣ 사용자 친화적으로 게임 진행상황을 출력해주는 함수를 만든다. 5️⃣ 누군가 31을 말하게 되면 상대방이 승리 했음을 알린다. 3. 코드 베스킨라빈스 31 인공지능 만들기 1. 개요 …

업다운 게임 만들기 1. 개요 오늘부터 매일 개인프로젝트를 과제를 준다고 한다. 오늘은 으로 만들기 이다. 컴퓨터가 1~100 범위에서 랜덤으로 정한 수를 맞추면 된다. 기회는 총 5번이 있고, 만약 컴퓨터가 정한 수 보다 낮게 추측할 경우 , 그 반대의 경우 이라고 힌트를 출력 해줘야 한다. 2. 로직 1️⃣ random.randrange 함수를 사용하여 1~100 사이 랜덤 수를 생성 2️⃣ input()으로 사용자 추측 숫자를 입력 받는다. 3️⃣ 5번 안에 랜덤으로 생성 된 수와 사용자가 추측한 숫자가 맞다면 “성공”을 출력한다. 그렇지 못할 경우 “실패”를 출력한다. 4️⃣ 예외처리) 정수외 입력 값(소수, 문자열 등)을 받을 경우 다시 입력 값을 받게 한다. 3. 코드 업다운 인공지능 만들기 1. 개요 이번에는 컴퓨터가 사용자가 입력한 값을 맞출 차례이다. 몇 개의 차이점을 빼고는 모든 것은 위에 프로그램과 동일하다. 그 차이점이란 컴퓨터는 random 함수를 이용하여 답을 추측할…