프로젝트48 [노마드스터디] 주간회고록 5주차 이번 주 목표 [x] 유튜브 클론 코딩 시작 [x] 그림 앱 강의 수강 완료 [ ] 그림 앱 css 설정 완료 [x] 크롬 앱 졸업 작품 설명 완료 [ ] 졸업 작품 디버깅 필요한 점 모아 정리하기 [x] 교환 학생 정보 찾기 이번 주 결과 나만의 홈페이지 정리 후 공개 완료 디버깅 필요한 부분 메모 중 그림 앱 css 설정 중 교환 학생 지원 준비 중 😭 버리거나 고쳐야하는 것 블로그에서 나도 정보를 찾을 수 없을 만큼 간소하게 기록하지 말자 망설이며 시작을 늦추지 말자 숙제를 미루다 뒤늦게 코딩하며 고민을 충분히 하지 못하는 일을 만들지 말자 😎 계속 해야 할 것 코드들 따라 하지 않고 내가 생각한 논리로 알고리즘을 구현하자 블로그에 가볍게 기록하자 코드에 대해 고민하자 💬 공유하고 싶은 고민이나 질.. 2023. 2. 2. [그림 앱 만들기] 이미지, 텍스트 첨부, 저장하기 이미지 첨부 기능 파일 선택을 클릭하여 원하는 이미지를 캔버스 사이즈에 맞추어 업로드할 수 있다. 기술 - 다음 코드를 통해 이미지 파일을 입력받을 수 있도록 했다. (multiple 속성을 추가하여 여러 개 입력받을 수도 있다.) - 해당 파일의 정보를 불러와서 url(해당 브라우저에서만 유효하다)을 생성한다. - img tag를 생성하여 src를 url로 설정한다. // 이미지 파일을 선택하는 event가 발생했을 때 const file = event.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src = url; - 이미지 파일을 캔버스에 나타내고, input의 value는 초기화한다... 2023. 2. 1. [그림 앱 만들기] 툴(색상 선택, 채우기, 버리기, 지우기) 만들기 색상 선택 기능 색상 네모를 선택하여 선의 색을 선택할 수 있다. 기술 - 색상의 div는 data-color:값으로 설정되어 있다. - 특정 색(div)이 클릭되면 해당 요소의 정보를 불러온다. const chosenColor = event.target.dataset.color; - 이미 설정된 네모를 선택하면 input(type="color")의 색도 함께 바뀌도록 설정한다. data attributes 참고 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 채우기 기능 버튼 Fill을 클릭하고 캔버스에 클릭하면 색상이 채워진다. 기술 - isFilling이라는 변수를 만들어 Fill 버튼을 누르면 값을 true.. 2023. 2. 1. [나만의 Home Page] 바로 가기 만들기 링크와 링크의 별명을 입력하면 바로가기 목록에 추가되도록 만들었다. 만들어진 목록을 클릭하면 새 창을 열어 해당 링크로 이동한다. 그리고 삭제 버튼을 눌러 링크를 삭제할 수도 있다. 기술 알고리즘이 할 일 목록과 거의 동일하다. - 링크와 별명을 입력받으면 myLinks 배열에 저장한다. - 이를 localStorage에서도 저장한다. - localStorage에서 myLinks를 불러와 해당 목록을 화면에 나타낸다. - 목록을 화면에 나타낼 때는 createElement(), appendChild()를 활용한다. - 각각의 버튼은 eventListner이고, 클릭되었을 때 li 태그의 정보를 가지고 온다. - 가지고 온 정보를 바탕으로 해당 링크를 삭제한다. localStorage에 저장된 myLink.. 2023. 1. 29. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
