Programming ddozza

본문 바로가기

인기글

🫧 알고리즘 공부 [프로그래머스] 특별한 이차원 배열1 [문제]정수 n이 매개변수로 주어질 때, 다음과 같은 n × n 크기의 이차원 배열 arr를 return 하는 solution 함수를 작성해 주세요. arr[i][j] (0 ≤ i, j [내 코드]히히 다 0이 들어간 배열 만들고 0,0 / 1,1 / 2,2 이런 애들한테만 1을 넣어주면 되겠지?해서 아래처럼 했는데 function solution(n) { let arr = Array(n).fill(Array(n).fill(0)); console.log(arr) for(i=0; i 엥.. 왜 다 채워지는거지...?뭐지..!? 세상이 날 억까한다!!하고 찾아보니 fill 메서드에 대해 자세히 알지 못한 게 원인이었다.https://aeunhi99.tistory.com/257 [Js] ..
🫧 알고리즘 공부 [프로그래머스] 가까운 1 찾기 - IndexOf(찾을 element, 시작할 index) indexOf 메서드에 대해 기억하고 싶어서 기록!https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf Array.prototype.indexOf() - JavaScript | MDNArray 인스턴스의 indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.developer.mozilla.org매개변수searchElement배열에서 위치를 찾을 요소입니다.fromIndex Optional검색을 시작할 0 기반 인덱스로, 정수로 변환됩니다.음수 인덱스는 배열의 끝부터 거꾸로 셉니다. 즉, fromIndex fromInd..
🖼️ [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..
🫧 알고리즘 공부 [프로그래머스] 정수 제곱근 판별 - 거듭제곱(**), Number.isInteger() 메소드 https://school.programmers.co.kr/learn/courses/30/lessons/12934 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr☝️ 문제 출처 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다.n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. function solution(n) { return Number.isInteger(Math.sqrt(n)) ? (Math.sqrt(n) +1)**2 : -1}..
🖼️ [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 형식도..
🫧 알고리즘 공부 [프로그래머스] 문자열 내 p와 y의 개수 코테 문제 풀기 다시 시작! function solution(s){const chars = s.split('').map(v=> v.toLowerCase()); let countP = 0; let countY = 0; chars.map(v=> { v==='p' && countP++; v==='y' && countY++; } ) if(countP === 0 && countY === 0){ return true } else{ return countP===countY ? true :false }}대소문자를 통일해준 후 p 와 y 의 개수를 세줬는데, function numPY(s){ return s.toUpperCa..
🖼️ [3] 사용할 이미지 제작 & 캔버스에 이미지 넣는 버튼 만들기 본격적으로 사용할 이미지를 그려봤다. 이런 느낌으로 완성할 수 있게 다양한 요소와 캐릭터를 그렸다.구현 후 필요한 요소들이 있다면 더 그려서 추가해 볼 예정! 캐릭터와 노트북 버튼만 만들어봤다.각각의 버튼에 eventListener 로 click 시 이미지가 캔버스에 들어가게 된다. 같은 버튼을 다시 클릭 시 이미지가 사라진다.클릭한 버튼의 구분을 위해, 이미지가 들어간 버튼의 배경 컬러가 바뀌게 설정했다. 이슈 1. 동일한 캐릭터 클릭 시 img 와 button 의 크기가 맞지 않아 target을 찾기 어려운 점 버튼을 클릭하고 싶은데, 자꾸 이미지가 앞에 있어 이미지가 target 이 됐다. 어떻게 할지 고민하다가, 둘 중에 어떤게 클릭이 돼도 같은 className 이 들어온다면,해당하는..
🖼️ [2] Canvas API 활용하기 Canvas API 활용하기 canvas api 는 노마드코더 강의를 들으며 처음 접했는데, 사실 처음 들었을 땐 너무 복잡한 느낌이었고, 이해가 잘 되지 않았다.(정말 말 그대로 따라 치기만 했었다)초심자는 노마드코더 강의를 추천한다! 무료고 니꼬쌤이 설명도 잘해주심! 약 두달 간의 개발 공부 공백이 있었던 터라, 강의를 들으며 cavas api 에 대한 기본적인 내용을 복습하며 mdn 문서도 같이 봤는데, 예전의 기억이 무색하게 이해가 잘 됐고 재밌었다.단순하게 생각하면 되는 것들을 복잡하게만 생각한 것 아닌가 싶다. 참고 사이트👇 mdn 한국어 버전 (전부 다 번역이 되어있진 않다) HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를..

728x90

티스토리툴바