본문 바로가기

프로젝트

 (15)
알고리즘 - 프로젝트 1 - 레이튼 교수와 이상한 마을 135 유튜브를 보다가 오랜만에 레이튼 교수 시리즈를 다시 접하게 되었습니다. 모바일 버전이 있다는 걸 알게 되어 설치하고 플레이해봤는데, 마지막 문제가 정말 인상 깊었어요. 블럭을 움직여 빨간 사각형을 밖으로 빼내는 문제였습니다. 이건 누가 봐도 코딩으로 해결을 하라는 거죠. 바로 visual studio를 켜줍니다.알고리즘각 판의 상태를 정점으로, 한 상태에서 다른 상태로 이동할 수 있을 때 간선으로 연결을 해 주면 그래프가 만들어 집니다. 그럼 다익스트라나 BFS를 통해서 이 문제를 해결할 수 있습니다.정점빈 칸도 블럭이라 생각을 하고 각 블럭의 좌측 상단에 번호를 매깁니다. 빈칸은 0, 초록색은 1, 파란색은 2, 보라색은 3, 빨간색은 4로 번호를 매겨줍니다. 왼쪽 위부터 오른쪽으로 쭉 가면서 숫자를 ..
웹 개발 - 프로젝트 2 - 6. streak lover 로그인 유저가 여러 명 있다고 가정하고 로그인 기능을 개발할 것입니다.우선 데이터베이스와 백엔드를 연결해 주고 유저 정보를 담는 간단한 db를 만들었습니다. 로그인은 쿠키, 세션, 토큰 등 다양하게 있지만 저는 세션 인증을 이용해 로그인을 구현할 것입니다. 보통 다음 과정으로 이루어집니다.유저가 로그인을 합니다.서버에서 세션 ID를 발급합니다.클라이언트에서는 해당 정보를 쿠키에 저장합니다.다음에 요청할 때 쿠키에 저장된 정보를 같이 보냅니다. 이를 통해 이미 로그인한 유저임을 알 수 있습니다.백엔드부터 한번 진행해 보겠습니다.백엔드우선 아이디, 패스워드를 가져오면 해당 정보를 찾는 것까지 진행했습니다. 그럼 쿠키에 저장하는 것이 남았네요. 요청할 때 HttpSession을 가져오도록 합니다. 그리고 유저 정보가..
웹 개발 - 프로젝트 2 - 5. streak lover 백엔드 api 백엔드에 특정 자료를 요청하기 위해서는 api를 호출해야 합니다. 이런 것을 쉽게 하기 위해 talent api를 사용할 것입니다. 크롬 확장 프로그램으로 talent api를 추가합니다. 그런 다음 크롬 - 퍼즐 모양 - 핀을 클릭해서 상단에 고정하고 talent api를 눌러줍니다. 아래와 같은 화면에서 api를 호출할 수 있습니다. api 만들기intelliJ로 가서 health controller를 만듭니다.  해당 페이지에서 다음과 같이 입력해 health api를 호출할 수 있게 만듭니다. Slf4j는 로그 출력을 위한 것입니다. talent api에서 healthapi를 호출합니다.  이것을 실행하면 성공적으로 호출되는 것을 알 수 있습니다.
웹 개발 - 프로젝트 2 - 4. streak lover 백엔드 db 이제 백엔드 개발을 위해 스프링을 설치합니다. 우선 스프링을 설치하고(https://codestudycafe.tistory.com/98) spring initializr(https://start.spring.io/)로 갑니다. JPA, MySQL, Lombok, Spring Web를 설정해 주고 압축을 풀어줍니다.application.properties를 yaml로 바꿔주고 db 설정을 해줍니다. 그리고 workbench를 이용해 db 스키마를 만들어 줍니다. 이때, 문자는 utf8mb4를 사용합니다. 그럼 이제 db를 사용할 준비가 되었습니다.
웹 개발 - 프로젝트 2 - 3. streak lover 프론트 스트릭 부분을 계속 만들어 봅시다.7개의 가로줄과 약 50개의 세로줄을 만듭니다. 리액트는 이런게 되서 참 좋아요.적절한 디자인을 해 주면 다음처럼 나옵니다. 각 칸은 하루를 나타냅니다. 그럼 오늘에 해당하는 칸 까지만 나타내고 그 뒤는 나타내지 않을 것입니다. 만약 어제 백준 문제를 풀었다면 해당 칸은 색칠이 되어 있어야 합니다. 각 칸이 어떤 날짜를 나타내는지 알아냅니다.각 칸에 있는 숫자는 오늘로부터 며칠 전 일인지 나타냅니다.해당 날이 체크가 되어야 하는지 계산하고 해당 값에 따라 배경을 바꿔 줍니다. 그럼 아래와 같이 나옵니다. 생각해 보니 각 스트릭 마다 고유의 id를 넣어줘야 할 것 같습니다.id를 넘겨 주고 해당 id의 해당 날에 해결한 경우 체크해 줍니다.  지금은 백엔드가 없어서 이렇게..
웹 개발 - 프로젝트 2 - 2. streak lover 프론트 계속해서 프론트 디자인을 해봅시다. streak우선 nav bar부터 만들어 봅시다. 클릭했을 때 어떤 페이지로 이동할지 만들어 둔 것입니다. 하지만 지금은 페이지가 하나밖에 없으므로 그냥 형식만 만들어 줍니다. 그럼 아래와 같이 보입니다. 이제 스트릭의 틀을 만들어 줍니다. 아래는 깃허브에서 보여주는 streak입니다. 이 모양을 이용해 만들어 줄 것입니다. 하지만 지금 만들진 말고 틀만 잡아줍시다. 여기까지 하면 아래와 같이 나옵니다.title로 제목을 전달해 줄 수 있습니다. 인자를 받을 수 있으니 인자를 넘겨줄 수도 있어야 겠지요. 다음과 같이 넘겨줄 수 있습니다. 구조전체적인 구조는 아래와 같습니다. component에는 여러 곳에서 사용하는 요소들을, page에는 페이지 단위의 작업을 넣어두었..
웹 개발 - 프로젝트 2 - 1. streak lover 시작 저는 스트릭을 사랑합니다. 깃허브나 duolingo 같은 곳에서도 스트릭을 이용해서 활동을 유도하기도 하죠. 하지만 모든 곳에서 이런 기능을 제공해 주지는 않습니다. 다음과 같은 곳에서는 사용할 수 없습니다.월, 수, 금에 운동하기책 매일 1페이지씩 읽기달에 한번 등산하기매일 코딩 유튜브 영상 하나씩 보기이런 경우에도 스트릭이 있다면 인생을 조금 더 행복하게 살 수 있을 것 같습니다. 이걸 만들기 위한 준비를 해봅시다.프레임 워크 선정저는 밖에 있을 때는 휴대폰을 많이 사용하고 집에서는 컴퓨터를 많이 사용합니다. 그래서 양 쪽 모두 사용할 수 있는 웹앱으로 개발할 것입니다. 추후에 목표 달성 시 NFT토큰을 준다고 하면 react로 개발하는 것이 좋을 것 같습니다.백엔드는 익숙한 spring boot로 ..
java script - 프로젝트 1 - 3. 영어 한글 변환기 확장프로그램 세팅 이렇게 변환기를 만들긴 했는데 생각보다 사용하기가 불편했습니다. 그래서 크롬 확장 프로그램으로 만들어서 쉽게 쓸 수 있도록 해 볼 것입니다.크롬 공식 문서(https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ko)를 참조해 만들었습니다. 우선 로고부터 만들어야 겠네요로고를 만들어 주는 프로그램을 만들어 봅시다.numpy와 matplotlib, cv2를 인스톨해 줍니다.갑자기 파이썬이 나왔지만 원래 이것저것 바꿔 쓰는거죠 뭐. python logo.py로 실행하면 이런 화면이 나옵니다. 저는 흰 바탕에 검은 글씨로 TR이라고 쓸 것입니다.이 화면은 500*600 크기입니다. 이것을 100*100크기 칸으로 나눈 다..
java script - 프로젝트 1 - 4. 영어 한글 변환기 확장 프로그램 개시 확장 프로그램을 사용할 수 있게 할려면 개발자 등록을 해야 합니다.Chrome Web Store Developer Dashboard로 들어가고 개발자 등록을 해줍니다. 이때, 5달러 정도 비용이 발생합니다.잘 되었다면 이런 창이 나타날 것입니다. 프로젝트 폴더 압축한 다음 새 항목 추가를 해줍니다.2단계 인증해야 합니다 프로젝트를 올리면 뭔가 설정을 많이 해야 합니다. 안되어 있으면 뭔가 없다고 상세히 설명해 줍니다. 시키는 대로 다 작성하고 제출해 줍니다. 그럼 이렇게 검토 대기 중이라고 이야기 해 줍니다. 그 상태로 시간이 지나면 상태가 개시됨으로 바뀝니다. 이게 뭐 바뀌었다고 메일을 주거나 그런 건 없더라고요. 크롬 웹 스토어에서 잘 올라갔는지 확인할 수 있습니다.
opencv - 프로젝트 2 - 3. 카드 인식 이전 프로젝트(https://codestudycafe.tistory.com/51)에서 전처리를 했습니다. 이번에는 직접 학습을 시켜 줍시다.그전에생각해 보니 모델의 마지막 레이어는 (None, 200, 200, 1)이 됩니다. 이 형식에 train_label을 맞춰줍시다.모델 생성이제 모델을 만들어 봅시다.from keras.layers import Dense, Input, Conv2D, MaxPool2D, Conv2DTranspose, Cropping2D, Concatenatefrom keras.models import Modelfrom keras.activations import sigmoidinput = Input(shape=(200,200,3))c_1_1 = Conv2D(32,(3,3),paddi..

티스토리툴바