스마트스타일

에러가 발생하면 기록을 남겨야지 해놓고, 막상 에러가 생기면 핸들링하기에만 급급해서 기록할 생각을 못했는데, 이번에는 같이 프로젝트를 진행중인 팀원분께서 궁금해하셔서 좋은기회에 첫 에러핸들 포스팅을 작성해봅니다. 이글을 작성하는 지금 아직 에러핸들링 시작하지 않았고 어떤 문제인지 차근차근 살펴보려 합니다. 근데 왠지 좀 보니까 제가 작성한 코드로 인하여 발생한 문제인 것 같습니다. 제 실수중에서도 너무 보잘것 없다고 말할 수 있는 실수로 생긴 에러라고 생각되며 금방 해결할 수도 있을 것 같아서 글을 쓰면서 해결해보려합니다. 에러가 생긴 근본이유는 조금 하찮다고 말할 수 있겠지만, 이런 메시지를 내 뿜는 에러는 어떤에러인지 공부가 될 것같다고 생각 하였습니다. 에러 이름은 Payload too large라..

자바스크립트 클래스 (javascript class) 상속 대부분의 프로그래밍 언어에는 클래스라던가 상속의 개념이 있다고 합니다. 클래스나 상속을 하는 이유는 여러가지가 있겠지만, 제생각엔 결국 귀찮은것을 줄이고 편리하게 일하기 위해서 하는것이라 생각합니다. 예를 들어 요즘 유행하는 게임인 리그오브레전드(이하 롤 이라고 부르겠습니다)에는 우리가 골라서 할수있는 케릭터가 150개 가까이됩니다. 롤에서는 우리가 골라서 게임할수 있는 아바타인 캐릭터를 챔피언이라고 부르는데요. 이름순으로 정렬해보자면 가렌, 갈리오, 갱플랭크, 그라가스, 그레이브 ..,...,.., 하이머딩거,헤카림 이렇게 아마 세보진 않았지만 150개가까이 될것입니다. 게다가 이 챔피언을 2~3개월에 1번씩 찍어내고 있죠. 우리가 이 챔피언을..

자바스크립트 javascript 프로토타입 prototype 프로토타입은 너무 어려워서 자료를 많이 찾아봐도, 온전하게 이해가 안되고 있습니다. 심지어 무엇을 말하고 있는지, 무엇을 알고 무엇을 모르는지 조차도 이해가 잘안됩니다. 그래서 이글은 다소 정확하지 않을 확률이 있습니다. 다만 최대한 이해를 돕기 위해 글쓴이가 다시 찾아보기 위핸 기록용 블로그 임을 밝히며 참고해서 읽기바랍니다. 프로토타입 mdn에서 설명하면 기본 예시를 들어보겠습니다. function Person(first, last, age, gender, interests) { // 속성과 메소드 정의 this.first = first; this.last = last; //... } 이것을 함수명대로 Person함수라고 하겠습니다. 여기서..

자바스크립트 javascript Dom children 와 childNodes 차이 children와 childNodes가 헷갈려서 정리합니다. 위와 같은 html코드가 있습니다. body태그 안에 다양한 종류의 태그들이 있습니다. 1.children 콘솔로그창에 document.body.children 코드를 찍어봅시다. 위와 같이 body태그 안에 있는 모든 node를 배열로 보여줍니다. document.body.children[0] document.body.children[1] document.body.children[2] document.body.children[3] document.body.children[4] 이렇게 배열의 인덱스를 사용하는 방식으로 사용가능합니다. 2.childNodes 마찬..

Dom조작을 할때 비슷비슷한 녀석들이 많아서 잘모르기도하고 헷갈리기도 해서 글쓴이가 이해하기 위해 정리하는 블로그를 써봅니다. remove로 노드삭제도 해보고 domtag도 삭제 해보고 console.log를 찍어보며 차이점을 눈으로 보려고 하였는데, 삭제해서 없는것을 console.log로 찍어볼수가 없어서 사용법과 차이점을 남깁니다. append와는 다르게 메소드 모양이 약간 다르답니다. 1.remove() 1)사용법 삭제할노드.remove() // ()안에 인자를 받지 않습니다. 2)하는일 노드자체를 메모리에서 삭제하고, 실행되고 있는 노드를 종료시켜준다고 합니다. removeChild와 비교하면 진정한 의미의 삭제입니다. 2.removeChild() 1)사용법 부모노드.removeChild(삭제할..

자바스크립트 javascript Dom append() 와 appendChild() 차이 자바스크립트를 배우면서 배우는 강의내용에서 사용하는 코드에 따라서 append()를 사용하기도 하고, 다른 경우에는 append()를 사용해왔었다. 그러다보니 2종류가 있는지도 몰랐고 나중에 가서야 2종류를 혼용하여 사용하였다는 것을 알게 되었다. 또한 appned()라고 해보사자 appendChild()의 생략 버전쯤 되겠거니, 기능은 같을 거라 생각했던것 같다. 하지만 미묘한 차이가 있었고 내가 모르는 것을 오늘 공부하여 블로그해보려한다. 1.append()알아보기 위와 같은 html div 태그가 있습니다. html렌더링은 이렇게 됩니다. const div = document.querySelector("div"..

자바스크립트 javascript Dom querySelector(), querySelectorAll() 차이 자바스크립트에서 Dom으로 Html을 조작할때 필수적으로 써야하는 코드중 하나는 querySelector이다. html의 class나 id, 특정node들에 접근하기 위해 처음배울시기에 잘모를때부터 그 의미도 정확하게 알지도 못하고 실습으로 먼저 체득했던 기억이 있다. 그렇게 코드를 해오다가 querySelectorAll이라는 녀석이 있다는 것도 떠올리게 되었고, 어떤 기능일지 잠시 상상해보았으나 전혀 감이 잡히지 않는 것이었다. querySelector는 내가 필요한 것만 집어서 사용하게 해주는 것이라는것을 알고 있는데 거기에 겨우 All을 붙인다고해봤자 전체를 어떻게 하겠다는 것인지.. 이런 ..

개발이나 코드에있어서 버그나 문제, 이슈를 고치는 행위를 디버깅이라고 한다. 생각해보면 디버그가 곧 실력인셈이다. 나는 여러가지 실력 포인트들 중에서 디버깅이라는 것도 많이 어려워했던 것 같다. 그래서 디버깅과 관련있는 아래 유튜브 영상을 참고하고 나에게 부족한점이 무엇인지 고찰하는 til을 작성해보았다. 코드에서 문제가 발생할때, 꽤나 자주 어디에서 문제가 발생하는지 파악하는게 어려웠었다. 그래서 여기저기 나름 의심이 가는 부분이라고 생각하고 코드를 수정하며 문제를 해결했던 것 같다. 문제를 정의하고 어떤문제가 문제인지를 인지하지 못하는게 가장 큰 문제라고 생각한다. 그래서 어려운 디버깅을 잘하기위해 장비빨이라도 세우기위해 vscode안에 있는 디버깅툴을 사용해 보았다. 사용해보니 참어색하고 어떤식으로..

체감상 클로저 함수라는 것은 자주 언급되지는 않았었다. 그래서 블로그를 써야하나 말아야 하나 고민했는데, 생각해보면 한번씩 클로저라는게 언급될때마다 그게뭐지? 하면서 클로저가 언급되고 전후로 5분씩은 맥락이해가 안되기 일쑤 였던 것 같다. 클로저가 없어도 나름 맥락을 짚고 넘어갔다고 생각하며 자기합리화를 하였었던것 같다. 클로저를 모르는사람이 클로저가 맥락상 중요했는지, 중요하지 않았었는지 판단하는것 자체가 개오바도 이런 오바가 없다는것을 알고 짚고넘어가기로 했다. 역시 다시 짚고 넘어가려고 찾아보니, 클로저라는 말자체가 생소하기에 단어의 뜻부터 알고 넘어간다. 클로저(closure):폐쇄, 종지,폐점,종결 단어의 흐름을 느껴보니 대략 폐쇄, 종료등 무엇인가 폐쇄적이거나 끝남을 의미하는 것 같다. 그냥 ..

나를 두고두고 괴롭힌 것들중 하나인 this이다. 아마 블로그를 작성한다고해서 this가 내것이 되진 못하겠지만, 기억이 안나거나, 가끔 헷갈릴때, this가 필요할 것 같을때에 찾아보기위해 정리글을 써본다. this의 여러가지 사용법들 중 모든 것을 정리한게 아닌, 아직 내가 그나마 이해하고있는 용법만 몇가지 정리해본다. (내가 이해를 조금이라도 하지 못한것들은 정리도 제대로 하지못할 뿐더러, this에 대한 거부감만 키운다) 1.일반적인 this 일반적인 함수 호출, 실행 방식으로 실행될때 this는 최상위 객체를 가르킨다. 브라우저에서는 window객체를 가리키고, node안에서는 global객체를 가리키고 있다. 구글 크롬 브라우져에서 실제로, 콘솔로그에서 this를 처보면 this자체가 wind..