본문 바로가기

🪀 토이 프로젝트/🖼️

(7)

[7] 기술 스택을 바꾸기 앞서 정해야 할 것들 핵심이 되는 기능을 개발하는 데 성공했으니, 이제 서브 기능인 자랑하기 페이지를 만들어야 했다.바닐라JS로 만들면 필요없는 렌더링이 생기고, 렌더링될 때 깜박임이 생기기 때문에,그리고 지금보다 더 길어질 코드가 예상되어 리액트로 스택을 바꾸려고 생각하고는 있었다. 원했던 기능 1. CRUD 가 가능한 자랑하기 페이지를 만들고 싶었기에 (인스타처럼 각자 만든 이미지를 공유할 수 있도록)2. 프로필 그림 1차 완성 후 -> 페이지 이동해서 2차 가공 (그리기, 글씨 쓰기) 가 가능하게 하고 싶음이렇게 두가지 기능을 원했기에 서버가 필요했다. 주변 개발자 분들께 여쭤봤는데 지금 할 수 있는 건1. React + express2. Next JS 사용하기 이렇게 두가지였는데 이 두가지 중에 어떤 스택으로 할 ..

[6] 캐릭터만 바꾸기 성공 + 아이템 변경 시 그림들 순서대로 배치하기 + 배경 컬러 유지하기 캐릭터를 바꾸면 모든 게 초기화 되고 모든 요소를 다시 선택해야 했던 오류를 해결하기 위해 몇 가지의 해결책을 생각해봤었다. https://mayongee.tistory.com/626 [5] Canvas Api 는 한겹이야 - 이미지 교체 버튼 수정하기☝️문제점 : 캐릭터 버튼 클릭 시 모든 요소 초기화 이전에 만든 버튼이 작동하는 모습을 보면 가장 큰 문제점이 있었는데, 바로 캔버스 내에 이미지가 있는 경우 취소 버튼 (없애기 버튼)을mayongee.tistory.com 2. 버튼을 클릭해서 canvas 가 변경될 때마다 배경 색과 별개로 이미지 url 을 변수로 가지고 있기 이전 단계의 이미지를 가지고 있다가 (배경은 투명으로)=> 배경이 변경 될 때 -> 배경 깔고 다시 로드=> 다른 버튼 누를 ..

[5] Canvas Api 는 한겹이야 - 이미지 교체 버튼 수정하기 ☝️문제점 : 캐릭터 버튼 클릭 시 모든 요소 초기화 이전에 만든 버튼이 작동하는 모습을 보면 가장 큰 문제점이 있었는데, 바로 캔버스 내에 이미지가 있는 경우 취소 버튼 (없애기 버튼)을 누르면해당 요소 뿐만 아니라 모든 요소가 지워지는 점이었다. 가령 캐릭터를 클릭 & 노트북 클릭 해서 노트북이 있는 이미지를 만든 후, 책상을 변경하고 싶어 책상 버튼을 누르면흰색으로 모든 요소가 사라지게 된다.즉, 처음부터 새로 프로필을 만들어야 한다. 🍀원인 : canvas api 는 한겹!I think maybe you misunderstand what a Canvas is.A canvas is essentially a 2 dimensional grid of pixels along an 'X' axis..

[4] 이미지 저장하는 버튼 만들기 저장하기 이렇게 버튼 요소를 만들어준 후, JS 로 버튼을 클릭했을 때의 이벤트 함수를 만들어준다.const onSaveButtonClick = () => { const image = canvas.toDataURL('image/jpeg'); const link = document.createElement('a'); link.href = image; link.download = 'ProfileByDDOZZA'; link.click(); alert('save!');}; canva.toDataUrl() : 이미지 표현을 포함하는 데이터 URL을 반환한다. 파일 형식을 지정할 수 있는데, 따로 지정하지 않으면 PNG 형식으로 내보내진다. 많은 경우에 image/jpeg 혹은 image/webp 형식도..

[3] 사용할 이미지 제작 & 캔버스에 이미지 넣는 버튼 만들기 본격적으로 사용할 이미지를 그려봤다. 이런 느낌으로 완성할 수 있게 다양한 요소와 캐릭터를 그렸다.구현 후 필요한 요소들이 있다면 더 그려서 추가해 볼 예정! 캐릭터와 노트북 버튼만 만들어봤다.각각의 버튼에 eventListener 로 click 시 이미지가 캔버스에 들어가게 된다. 같은 버튼을 다시 클릭 시 이미지가 사라진다.클릭한 버튼의 구분을 위해, 이미지가 들어간 버튼의 배경 컬러가 바뀌게 설정했다. 이슈 1. 동일한 캐릭터 클릭 시 img 와 button 의 크기가 맞지 않아 target을 찾기 어려운 점 버튼을 클릭하고 싶은데, 자꾸 이미지가 앞에 있어 이미지가 target 이 됐다. 어떻게 할지 고민하다가, 둘 중에 어떤게 클릭이 돼도 같은 className 이 들어온다면,해당하는..

[2] Canvas API 활용하기 Canvas API 활용하기 canvas api 는 노마드코더 강의를 들으며 처음 접했는데, 사실 처음 들었을 땐 너무 복잡한 느낌이었고, 이해가 잘 되지 않았다.(정말 말 그대로 따라 치기만 했었다)초심자는 노마드코더 강의를 추천한다! 무료고 니꼬쌤이 설명도 잘해주심! 약 두달 간의 개발 공부 공백이 있었던 터라, 강의를 들으며 cavas api 에 대한 기본적인 내용을 복습하며 mdn 문서도 같이 봤는데, 예전의 기억이 무색하게 이해가 잘 됐고 재밌었다.단순하게 생각하면 되는 것들을 복잡하게만 생각한 것 아닌가 싶다. 참고 사이트👇 mdn 한국어 버전 (전부 다 번역이 되어있진 않다) HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를..

[1] 프로젝트 아이디어와 배경 & 프로젝트 목표 1. 프로젝트 아이디어와 배경 최근 배달의민족 송요창님의 취업 설명회에서 "1명이라도 누군가의 문제를 해결해주기 위한 프로젝트를 해본 적 있나요?"라는 질문을 받았다. 물론 처음 받아본 질문은 아니였다. '사람들이 정말로 사용할 만한 프로젝트를 해보세요' 등과 같은 취지니까. 하지만 약 2달 간의 긴 여행을 마치고 온 후, 나는 어떤 개발자가 되고 싶은지, 내가 즐겁게 만들 수 있는 프로젝트는 뭐가 있는지 고민하던 차에 이 질문을 받게 됐고, 이를 통해 개발자를 위한 프로필 생성 앱을 만들면 되겠다는 아이디어가 떠올랐다.어릴 때부터 그림을 좋아했고, 디자인 전공을 선택한 후에도 꾸준히 그림을 그려왔다. 이후 개발 공부를 위해 노마드코더 디스코드에 참여하게 되었고, 이 곳에서도 조금씩 그림을 그리기 시작했..

이전 1 다음

728x90

티스토리툴바