개발하는 너구리

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

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

프로그래머스 3진법 뒤집기 알고리즘 문제 문제점JS number타입의 MAX_SAFE_INTEGER를 고려하지 않은점알고리즘 문제의 제한사항에 입력값 n은 100,000,000까지 들어올수있다고 표기되어있다. 그동안 알고리즘 문제를 풀면서 숫자크기에 대한 제한사항으로 인해 에러를 접해본적이 없기에 이걸 간과했었다 const solution = (n) => { let ternary = n.toString(3); let reverseTernary = Number(ternary.toString().split('').reverse().join('')); return Number.parseInt(reverseTernary.toString().split('').reverse().join(''), 3); ..

문제점이벤트 버블링이벤트 버블링에 대해서 다시 한번 생각해보려한다. 일단, 이벤트 버블링이란 내부요소에서 발생한 이벤트가 부모요소에까지 이벤트가 전달되는현상이다. 상속관계에 따라서 이벤트가 계속 전파되는 현상을 말한다.그동안 이벤트버블링으로 인해 원치않는 이벤트가 실제로 이벤트가 발생하지 않은 곳에서 발생하는것이 싫어 대부분 stopPropagation( ),혹은 애초에 그 곳에서만 이벤트가 발생할수 있게 stopImmediatePropagation( ) 등의 메소드를 사용해 버블링 자체를 막아버리곤했다.오늘도 여전히 해당 메소드를 사용해 이벤트 버블링을 막고있던차에 문뜩 다른 생각이 들었다.자식요소에서 발생한 이벤트를 상위요소에서 무조건 막아야하나? 이 이벤트를 이용해서 부모요소에서도 효율적으로 이용할..

문제점 & 해결방법    2. DOMContentLoaded 이벤트 사용: 이벤트 핸들러를 등록하여 문서의 DOM이 완전히 로드될 때까지 기다립니다.       3.     알게된점 HTML파일을 HTML파싱과 스크립트실행 간의 순서에 대해 고민하며 코딩하는 능력을 얻게되었다.

문제점 css로 html요소들을 스타일링 하던 중 태그에 margin-top 값을 주어도 적용이 되지않는 것을 발견. 또한, padding-top 값을 주었더니 위의 를 덮어버리는 현상이 발생했다. 태그와 같은 block 요소에는 정상적으로 margin-top 값이 적용되었기에, 원인이 태그가 inline속성이기 때문일까? 생각하고 구글링을 했다. 인라인 요소는 비대체 인라인요소, 대체 인라인요소 2가지로 분류된다는 사실이다. 이건 그동안 내가 몰랐던 사실이다. 그동안 인라인요소는 단순히 나란히 위치할수있는 요소 정도로만 생각했었다.. 1. 비대체 인라인 요소 - 비대체 인라인 요소에 세로 마진(margin)을 적용 할 수 없는 이유는 이들 요소가 문서의 텍스트흐름과 직접적으로 연관되어 있기 때문. 이 ..

문제점 반복문을 사용하여 코드의 흐름을 제어할때 주의할점을 발견했다. 보통 반복문은 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파일을 작성 중, 함수를 선언하고 선언한 함수를 이곳저곳에서 실행하고, 변수도 선언하고 이곳저곳에서 사용하고, 클래스도 선언하고 이곳저곳에서 인스턴스를 생성하고 등등 지금껏 해왔던 습관대로 코드들을 작성했다. 작..