개발하는 너구리

문제점input 태그에 넣은 이미지 파일 분석하기// html// JSconst fileInput = document.querySelector('#file');fileInput.addEventListener('change', onFileChange);function onFileChange(e) { const file = e.target.files[0]; const url = URL.createObjectURL(file); const image = new Image(); image.src = url; image.onload = () => { ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); fileInput.value = null; ..

문제점클래스 아직 클래스를 작성해 이를 템플릿처럼 활용하는 습관이 제대로 들지않았다. 내가 작성한 코드들을 보면 인라인스타일로 위부터 아래로 주르륵 작성된 코드들이 여전히 많은데, 이러한 코드는 유지보수 뿐만 아니라 안정성에서도 좋지 않다는 것을 알고있다. 따라서 앞으로 클래스를 자주 사용하려는 습관을 들일건데, 그전에 클래스에 대한 기본 개념정도는 리마인드하려한다.JavaScript의 클래스(Class)는 ES6(ES2015)부터 도입되었으며, 객체지향 프로그래밍을 지원하기 위한 구문이다. 클래스는 객체를 생성하기 위한 템플릿이며, 속성(멤버 변수)과 메서드(멤버 함수)를 포함할 수 있다다음은 클래스의 주요 특징과 사용 방법이다. 1. 클래스 선언:class MyClass { constructor(p..

문제점공통적으로 함수의 인자로 들어가는 요소를 객체화 시키기 프로젝트 작성 중 함수의 인자로 들어가는 string때문에 수많은 에러 경험을 했다. 오타때문이다. 또 수많은 함수들의 인자로 들어가는 string의 값이 변경된다면 꼭 한두개 쯤은 빼먹고 수정하여 에러를 경험하기도 한다.그래서 이를 해결하고자 함수의 인자로 들어가는 string을 오브젝트로 관리하는 법을 익혔다. 오브젝트의 키로 접근하기때문에 오타 발생률이 현저히 적어질것이라는 생각과, 내용 변경시 한곳에 모아 관리하기때문에 수정사항을 빼먹을 염려도 적어지겠다는 생각에 실행해보았다.    export const ItemType = Object.freeze({ read: 'read', sit: 'sit',}); onClick(even..

문제점 반복문을 사용하여 코드의 흐름을 제어할때 주의할점을 발견했다. 보통 반복문은 for문 혹은 map( ), forEach( ) 등을 사용하여 코드의 흐름을 제어하는데, 반복 중간에 반복을 중단하고 그때까지 변수에 담겨있는 값을 꺼내와야하는 경우가 있다. 예를 들면, 정수로 이루어진 문자열 n_str이 주어질 때, n_str의 가장 왼쪽에 처음으로 등장하는 0들을 뗀 문자열을 return하도록 solution 함수를 완성해주세요. function solution(n_star) { let array = n_star.split('') array.map((value,index) => { if(v==='0'){ array.shift() }else { break; } }) return array.join(''..

문제점 프레임워크의 도움없이 순수 자바스크립트로만 작성하는 프로젝트 하나를 구상중이다. 내 깃허브를 봤을때 모든 프로젝트들이 리액트를 사용한 프로젝트였기에, 순수 바닐라로 작성된 프로젝트가 있으면 좋겠다는 생각에서이다. 물론 막상 JS로만 코딩을 하면, 리액트의 위대함과 편리함을 더 크게 느끼겠지만... 하지만 결국 리액트도 JS라는 프로그래밍 언어를 기반으로 한 프레임워크이고, 프론트엔드 개발자로서 근본인 JS를 더 능숙하게 , 더 깊게 다룰수있다면 좋지 않을 이유가 없다. 어찌됐든 오늘도 JS파일을 작성 중, 함수를 선언하고 선언한 함수를 이곳저곳에서 실행하고, 변수도 선언하고 이곳저곳에서 사용하고, 클래스도 선언하고 이곳저곳에서 인스턴스를 생성하고 등등 지금껏 해왔던 습관대로 코드들을 작성했다. 작..

문제점 구글링을 하던 중 navigator 객체의 존재를 알았다. 브라우저와 관련된 정보를 컨트롤하는 객체. 처음보는 객체이기에 조금 더 알아보던 차 navigator 객체에 속해있는 geolocation API의 존재를 알게되었고, 이를 이용하면 현재 사용자의 현재위치를 가져올수 있다는 신기한 사실 또한 알게되었다. 현재 위치 정보를 얻기위한 코드 navigator.geolocation.getCurrentPosition(success, error) 위의 코드처럼 getCurrentPosition( ) 메소드를 호출해서 사용자의 현재 위치를 얻을 수있다. 이 함수는 두개의 콜백함수를 인자로 받는데, 첫번째는 성공했을때의 콜백, 두번째 인자는 실패했을때의 콜백이다 function success(positi..

문제점 를 이용해 백그라운드이미지로 채우는 단순한 과정 중, 문뜩 이런 생각이 들었다. 하나의 백그라운드 이미지만으로 고정하지말고, 일정한 간격으로 여러개의 이미지가 무작위하게 나타나는 코드를 한번 작성해볼까 라는 생각. 보통 오전에 일어나서 알고리즘 문제부터 푸는걸 습관화시키고 있는데, 마침 오늘 풀었던 알고리즘 문제 중 난수 관련 문제가 있어서, 그런 생각이 들었는지도 모르겠다. 문제 해결방법 정수 min부터 max(포함) 사이에 난수를 생성하는 코드다. Math.floor(Math.random() * (max-min + 1)) + min 이 난수를 생성하는 코드를 이용해, 여러개의 이미지를 하나의 배열에 담아 난수를 배열의 인덱스로 사용했다. const images = ['0.jpeg', '1.av..

프로그래머스 소수 찾기 문제점 알고리즘 문제의 제한 조건인 숫자n의 범위가 1,000,000 이라는 것때문에 테스트 결과 중 시간초과가 나옴 const solution = (n) => { let answer = 0; for (let i = 1; i { if (num < 2) return false; for (let i = 2; i { let answer = 0; for (let i = 1; i { if (num < 2) return false; for (let i = 2; i