# TOY

[Toy Project] 제품 재고 관리 시스템 ERD 설계
회사에서 솔루션을 개발하며 느낀 것은 설계의 중요성이다. 설계가 바뀌는 일이 많을수록 개발에 걸리는 시간은 점점 늘어난다. 하지만 회사에서 프로젝트 "전체"에 대한 설계를 진행할 일은 많지 않기에, 토이 프로젝트를 진행하면서 전체적인 설계를 해보는 일은 설레는 일이었다.😃 하지만 생각보다 설계에 많은 시간이 소요되었다,,, "확인"해 줄 사람이 있는 회사 업무와는 달리, 혼자서 ERD 설계를 하고 이 구조로 필요한 API들을 다 만들수 있을까를 고민하다보니 설계 결과에 대한 확신이 부족해 계속 고민하게 되었다 아직 완성된 ERD는 아니지만, 처음의 설계와 나중의 설계가 얼마나 달라질지를 기록하기 위해, 중간 단계에서 ERD를 기록하고자 한다 제품 재고 관리 시스템 ERD 가장 고민한 부분은

[Toy Project] 제품 재고 관리 시스템 만들기
회사에서 프로젝트를 진행하다보면 하나의 사이클을 처음부터 끝까지 돌리는게 쉽지 않다 😹 내가 처음부터 끝까지 담당할 수 있는 토이 프로젝트를 해보고 싶다,,! 라는 생각이 들던 중, 친구가 하나의 제안을 해왔다 누나가 아이디어스, 네이버 스토어 등에 직접 만든 제품을 판매하는 일을 하고 있는데, 규모가 점점 커지면서 이를 Excel 파일로 관리하는 것이 어려워졌다고 했다. 그래서 관리를 위한 사이트를 만들고 있는 데 그 중, Backend 부분을 담당해줄 수 있냐는 제안이었다 먼저 ~2023.09.23까지의 진행 상황을 파악하였다. UI 로그인 페이지 제품 조회/관리 페이지 카테고리 페이지 Backend 로그인 기능 그리고 추가로 설계 및 Backend

리그오브레전드 RP 변환기
RP 변환기 사이트 시즌2부터 시작해 지금까지 롤을 참 좋아합니다. 짠순이라 게임에 돈을 잘 쓰진 않지만 학생 때 몇 번 현질을 한 적이 있었지요. 김범수 베인, 폭풍의 잔나, 칼날폭풍 제드.. 그시절 추억 스킨도 구매했었습니다. 가장 최근에 구매한 스킨은 4월 나만의 상점에서 구매한 괴물 조련사 룰루네요 ㅎㅎ. 그런데 말입니다... 현질을 잘 안하는 우리같은 사람은 RP 시세를 모를 확률이 큽니다. 1350rp가 얼마지?.. RP 충전소에 가봐도 일정한 단위로만 적혀있을 뿐 정확히 1350rp가 얼마인지는 알 수 없습니다. 출시한지 10년이 넘은 게임인데 이런 간단한 사이트가 아직 없다는 것을 확인했습니다! 구글에 영어로 검색하니 사이트들이 나와서 내용을 참고하며 작업했습니다. 그런데 말입니다... 라이엇. 정확하게 계산할 수는 없게 만들어 놨더군요 RP는

풋살 예약 프로그램
프로젝트 설계 프로그램을 실행하면 회원가입, 로그인, 프로그램 종료가 나오고 각각 1번에서 3번을 선택하도록 만들었습니다. 1번 회원가입을 선택하면 아이디, 비밀번호를 입력하게 되고 가입이 완료되면 시작 화면으로 돌아갑니다. 2번 로그인을 선택하면 아이디, 비밀번호를 입력 받게 되고 둘 중 하나라도 틀리면 문구가 나오며 다시 입력 받도록 나옵니다. 로그인이 완료되면 날짜선택으로 바로 이동합니다. 날짜는 연도를 먼저 선택하고 달을 선택하면 달력이 출력됩니다. 그 후 일을 선택하면 시작 화면으로 되돌아갑니다. 3번을 선택하면 프로그램이 종료됩니다. 사용한 문법 각 클래스 마다 사용한 기능들 입니다. 
TodoList - userInfo > 😽 앞서 했던 userInfo의 css 와 js 작동들을 확인하고 sidebar를 하러 가보겠습니다. 이제 알아볼 것은 javascript를 통한 제어이다. > 이 userInfo에서의 기능은 photo를 바꿀 때 클릭되는 것과 이미지가 변경되는 것 그리고 아래의 정보들을 수정 버튼을 눌렀을 때 수정이 가능하게 하는 것 정도되겠다. 아래의 코드를 보면서 분석해보자 마치며... > js, css 를 다루고 side bar 까지 기록을 하려 했으나 내용이 꽤나 길었던 관계로 다음 챕터에서 기록을 할 예정입니다. 좀더 좋은 js 방식이 있을 것이고 jquery등 다른 방법도 있겠지만 순수 자바스크립트로 모든 것을 제어하는게 목표였기 때문에 코드가 많이 길고 이상할 수도 있습니다!!

TodoList - UserInfo
앞서 소개 했던 UserInfo를 만들어 보려고 한다. >🐥 마치는 글에 밝혔던 것과 같이 우리는 현재 페이지 / 주소에 대한 개념이 없는 상황이라고 판단하고 만들 생각입니다. 1. index. html 파일 생성 기본적으로 html 파일 하나를 생성 해봅니다. 그리고 추가적으로 우리는 font-awesome의 아이콘들을 가져다 쓸 생각이니 추가로 등록해주어야 합니다. > 간단하게 cdn을 가지고 써보도록 하겠습니다. 여러가지 방법이 있습니다만 가장 편하고 간단하기 때문에 이 방법을 주로 쓰는 것 같습니다. * 구글에 fontawesome cdn* 이라고 검색을 해봅니다. 검색을 하면 아래와 같은 화면이 뜹니다. 가장 상단의 홈페이지에 들어가줍니다. 해당 주소는 https://cdn

나만의 아고라 스테이츠 만들기
드디어 부트캠프 시작하고 첫 솔로 프로젝트...! 멋지고 세련된 아고라 스테이츠 만들어보자! 🔥🔥🔥 🌱목업 대충 요런 느낌으로 만들고 싶었다. 포인트는 새로 질문 생성 시 창을 '모달'로 띄우는 것! 결과적으로 디자인이 많이 바뀌긴 했지만... 큰 틀은 목업에서 벗어나지 않도록 하려고 했다. 🍀JS 포인트는 json 파일에서 데이터를 불러와서 활용하는 것! 기억하고 싶은 부분은 처음 구현해 본 모달창 > > 모달창은 위 그림과 같이 화면 전체를 덮는

[스프링 게시판 팀 프로젝트] - 2. 기획
팀 배정 및 역할 분담 팀 배정 하루 전날 팀 인원이 공개되고 월요일에 zoom 소회의실에서 서로 모여서 서로 인사를 나눴다. 한 분은 이전에 스터디를 같이 해본 분 이여서 상당히 반가웠다. 서로 간의 프로젝트에 대해서 어떻게 생각하는지 가벼운 얘기를 나누고 본 주제로 넘어갔다. 역할 분담 각자 팀원들이 맡고 싶어하는 역할에 대해 얘기를 나눴다. 나는 개인적으로 로그인과 회원 가입을 맡고 싶었는데 아쉽게도 사다리의 운이 따라주지 않아서 게시판을 담당하게 되었다. 그리고 각자 스프링 부트 이외의 부분도 맡기로 했다. 민장규 : 조장, 로그인 강민호 : Git, 자유게시판 민장규 : 화면, 로그인 이호승 : DB, 공지사항 대략적인 계획 긴

[toy project] 투두리스트_TodoList
노마드코더의 무료 강의 크롬 앱 만들기를 수강하고 간단하게 만들어 보는 투두리스트 바닐라 JS로 크롬 앱 만들기 > 기능 투두리스트 작성 및 삭제 투두 데이터 저장 dark, light 모드 제공 체크박스 > 추후 업데이트 할 기능 달력 제공 날짜별 저장 완료된 투두 체크 (새로고침하면 전부 체크해제로 돌아감) 폰트 크기 및 여백 조정 보러가기 투두리스트

[스프링 게시판 팀 프로젝트] - 1. 준비
📁프로젝트 개요 현재 진행중인 부트캠프에서 같이 수업을 듣고 있는 수강생분들과 토이 프로젝트를 진행하게 되었습니다. 지금까지 공부한 내용을 바탕으로 CRUD 기능을 가진 게시판을 가진 개발자 커뮤니티 웹사이트를 구축한다는 가정하에 토이 프로젝트를 진행하게 되었습니다. ✅스토리 보드 > A라는 개발자가 커뮤니티 사이트에 접속해서 글을 남길려고하는데 회원가입과 로그인이 된 상태이어야 글을 남길 수 있다. 결국 A회원은 회원가입 페이지(아이디/비밀번호/이름/휴대폰번호/약관)을 통해 회원가입을 해야하고, 로그인(아이디/비밀번호) 페이지에서 로그인을 성공한다면, 공지사항, 자유게시판, FAQ 등에 글을 등록할 수 있게 된다. 공지사항/자유게시판에서는 상세 페이지에서 댓글 기능도 제공이

[Toy] 이미지 세그멘테이션 (U-Net)
1. U-Net이란? U-Net은 그 형태가 U자 형태로 이루어진 모델로, 인코더-디코더 형태를 가지고 있다. 인코더: 입력받은 이미지를 CNN을 이용해 특징 추출 이미지의 크기는 축소 + 정보 압축 디코더: 압축된 정보가 복원되어 입력과 같은 크기의 출력을 가짐 업샘플링 과정(Transeposed CNN): 커널을 이용해 특징으로 이미지를 복원하는 연산 ➡️ 이미지의 크기를 키움 업샘플링은 (하나의 픽셀 * 커널의 가중치)의 합으로 이루어짐 업샘플링 할 때 겹치는 영역은 더해주면서 최종 출력을 계산함 복원된 특징은 합성곱을 통해 추출된 특징과 합쳐짐 > - 이미지의 특징을 뽑아내자! = Convolution 이미지를 복원하자! = Upsampling U-Net의 활용 이미지 깊이 추정 Segmentation Denosing 2. 데이터를 살펴보자 이번에 사용할 데이터는 O
20230113 [토이프로젝트] - 등록한 것을 취소해보자!
문제 기록하여 코멘트를 등록하고, 그 코멘트 옆 완료 버튼을 누르게 되면 줄이 그어진다. 그런데 이것을 취소하고 싶다면? 시도 python과 js를 나눠서 작업을 한다. python : 코멘트를 등록하면 done:요소가 0에서 1로 바뀌게 설정해놓았다. 이것을 다시 취소하면 1에서 다시 0으로 바뀌도록 함수를 설정한다. js : 코멘트 등록과 똑같이 POST 방식으로 cancel 함수를 만들어주고, temp_html에서 button에 onclick 함수로 넣어준다. 해결 학습 코드를 차근차근 js와 python이 어떻게 연결되어 있는지 보는 것이 중요하다는 것을 알았다. 코드를 차근차근 이해하는 것!
20230112 [토이프로젝트] - 상세페이지로 넘어가자!
문제 음원 차트를 크롤링한 3페이지에서, 각 앨범을 누르면 상세페이지로 들어가게끔 만들고자 하였으나, 데이터 하나하나를 잡지 못하고 계속 전체 데이터만 불러오게 되었다. 시도 자바스크립트 강의를 다시 꺼내어보며, 함수에 매개변수를 고유한 값으로 주어야 한다는 것을 알았다 -> id를 넣으니 자꾸 undefined가 떴다. id로 가능하다는 것은 알지만, 또 다른 고유 값인 rank를 활용해보았다. -> 처음 시도해보는 거라 그런지 코드가 쉽게 짜여지지 않았다. 해결 함께하는 팀원분께서 코드를 완성해주셨다! 비록 내가 해결한 건 아니었지만, 중간까지는 갔다고 생각하며 .. 짜주신 코드를 보고 열심히 해독했다. 학습 사실 답지 없이 계속 해결해나가는 것은 너무 어려웠다. 하지만 그렇게
20230111 [토이프로젝트] - 로그인을 해보자!
문제 로그인 창이 제대로 작동되지 않았다. 회원가입까지는 잘 되었으나, 로그인 버튼을 눌렀을 때 '로그인 성공' 혹은 '로그인 실패' 문구가 아무것도 나오지 않았다. 시도 개발자 도구로 검사해보며 오류 문구를 자세히 보았더니, ajax에 대한 접근이 안 되고 있다는 문구를 발견했다 -> jQuery CDN이 빠졌던 것! 그 다음에는 서버 500 오류만 계속 떠서 파이참에서 실행 후 나오는 오류 문구를 살펴보았다 -> 로그인 과정에서는 '암호화 된' 비밀번호를 찾는다 였지만, 회원가입 과정에서는 '암호화'를 하지 않았던 것! 암호화에 성공 후, 지연시간을 설정했던 exp에서 오류가 발생한다는 문구를 발견했다 -> 오타 수정 해결 차례차례 jQuery CDN을 넣어주었고, 로그인에 맞
20230110 [토이프로젝트] - 파일을 연결해보자!
문제 두 작업 파일을 연결하던 와중에, 연결은 되었지만 localhost:5000에 접속되지 않는 오류가 발생하게 되었다. 시도 연결에 성공한 팀원의 코드를 그대로 복사하여 붙여 넣기 하였다. -> 그래도 되지 않았음 복사 도중 발생할 수 있는 오타나, 띄어쓰기를 더 꼼꼼하게 검토하였다. -> 오류를 찾을 수 없었음 클론코딩을 통해 다른 작업물들은 어떻게 작업물을 연결하였는지 참고하였다. -> 크게 도움이 되지 않았음 해결 결국 몇시간 동안 헤맨 끝에 기술매니저님께 도움을 요청했다..! localhost:

20230109 [토이프로젝트] - css inline의 중요성
문제 : 로그인 페이지를 만들던 중, 팀원분께 ID라벨과 PW라벨의 크기가 같았으면 좋겠다는 피드백을 받고 수정하려 했으나 쉽게 수정이 되지 않았다 ..! 시도 : 둘다 라벨 태그로 묶여있기 때문에 두 태그 모두 class를 동일한 이름으로 넣어 width 조절을 하려고 했다. - 아예 적용이 되지 않았다. label을 다시 div로 묶어 라벨만 따로 크기를 조절하려 했다. - 그럼 다시 flex를 적용하고 번거롭게 css를 설정해야했다. 개발자 도구로 검사를 하며 자체 padding값이 적용되어 있다는 것을 알게 되었다. 부트스트랩으로 만들었기 때문에 내 css가 우선적으로 먹히지 않는 것 같았다 -> inline으로 더 강하게 스타일을 줘보자! 해결 : 아예 스타일을 인라인

싱글톤과 상속
이번에 내가 토이 프로젝트를 진행하며 생각하게 된 싱글톤과 상속에 대한 부분을 다룰려고 한다. 🤔 내가 생각한 싱글톤 싱글톤이란 위키의 말을 빌려보자면 '생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴한다.' 이다. 하나의 객체를 호출하는 방법을 만들고 객체가 만들어지는 과정을 한번만 겪게 만드는 방식을 가장 많이 이용한다. 처음 생각한 싱글톤 아마 대부분의 사람들이 '싱글톤이 중요하다', '대부분 싱글톤으로 만들어진다'라는 말을

토이 - 스마트 스토어 - 1
📁 프로젝트 시작 깃허브 주소 토이 프로젝트 개요 시작 부트 캠프 훈련을 받은지 6주차에 접어들었고 나름 자바는 잘 다룬다는 생각을 가진 상황에서 토이프로젝트를 시작했다. 물론 이런 생각은 코드 3줄 쓰자마자 '어? 음... 이걸 어떻게 해야할까?'라는 생각이 수십 번도 더 들었던 것 같다. 너무 처음부터 완벽하게 잘 만들어야지라는 생각에 시작 못하다가 그냥 일단 한줄이라도 쓰자 라는 생각으로 시작했기에 미비한 부분이 너무 많았다. 깃 개인적으로 이번에 활용하지 못한게 아쉽다. 협업에서 사용한다 라는 생각이 강했던 걸까 버젼을 관리하는 것이 git인데 중간에 한번 엎었던 거를 생각하면 git으로 했다면 어땟을까 싶다. 다음번에 프로젝트를 하게 된다면 무조건 git을 이용해서 작업을 해야겠다. 이름 클래스, 변수, 메서드...