데구리 블로그

개발 초보가 나름대로 오픈소스를 살펴보았습니다. 큰 그림만 따라가며 이해했고, 잘못되거나 생략된 정보가 많을 수 있습니다. 혹시라도 잘못된 부분을 댓글로 알려주시면 반영하도록 하겠습니다. 들어가며 요즘 자바스크립트를 더 깊게 공부하고 있습니다. 어제 공부한 부분은 이벤트와 관련된 부분인데요, 아시다시피 이벤트 핸들러를 등록하는 방법은 세 가지가 있습니다. HTML attribute로 등록 DOM property로 등록 addEventListener()를 이용한 등록 1, 2는 자바스크립트 레벨에서 눈에 보이는 뭔가가 있습니다. getAttribute(), 혹은 이벤트 관련 프로퍼티로 핸들러 함수를 직접 조회할 수 있거든요. 근데 addEventListener()는 좀 다릅니다. property, attr..

문제 프로젝트를 진행하던 중에 this와 관련된 문제를 맞닥뜨렸습니다. 공부를 해도 해도 모르는 게 또 나오네요... 🤮🤮🤮 map() 함수 내의 콜백에서 사용된 this가 계속 undefined가 되어 버그가 나는 상황이었습니다. 당시 상황을 간략하게 보여주자면, class T { constructor() { this.arr = [1, 2, 3]; }; printThis() { console.log(this); }; bug() { this.arr.map(this.printThis); }; } const obj = new T(); console.log('========= printThis() ========='); obj.printThis(); console.log('========= bug() ====..

가끔 상위 폴더에 package.json 하나를 두고 하위 폴더 파일을 기준으로 동일한 npm script를 실행해야 하는 경우가 있습니다. 예를 들면 간단한 프로젝트들을 여러 개 모아놨다던가, 책 예제들을 많이 짜 놓은 경우 등이 있겠죠? 사실 폴더마다 package.json을 작성하는 게 베스트지만 사람마다 귀찮음 포인트는 다르니까요... 폴더 구조가 다음과 같다고 합시다. Directory ├─ package.json ├─ SubDirectory1 │ ├─ index.html │ └─ index.js ├─ SubDirectory2 │ ├─ index.html │ └─ index.js ├─ SubDirectory3 │ ├─ index.html │ └─ index.js ├─ SubDirectory4 │..

문제 링크 programmers.co.kr/learn/courses/30/lessons/72410?language=javascript# 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 자바스크립트 연습 겸 프로그래머스 레벨 1 문제들을 풀어보고 있습니다. 이 문제를 C++로 풀 때는 몰랐는데 막상 풀어보니 정규표현식에 입문하기 너무 좋은 문제입니다. 이리저리 검색해보면서 정규표현식이 되게 친숙해졌습니다. 이게 복잡해 보여서 그렇지 정규식 생각보다 어렵지 않습니다.. 우선 전체적인 코드는 이렇습니다. f..

리액트 공부 중 웹팩 설정 부분을 자꾸 까먹어 내용을 따로 정리하게 되었습니다. 웹팩이 무엇이고 왜 사용하는지를 다루지 않습니다. 어떻게 웹팩을 설정하고 리액트와 함께 사용할 수 있는지에 대해 다룹니다. 초심자 입장에서 쓴 글이니 더 깊은 내용을 원하시는 분들은 다른 문서를 참조해주시면 감사하겠습니다. 해당 포스트는 조현영 님의 웹 게임을 만들며 배우는 리액트 강의와 webpack 공식 문서를 참고하여 작성했습니다. 1. npm 패키지 설치 우선 react, react-dom을 설치해 줍니다. npm i react react-dom webpack 관련 패키지를 개발용으로 설치해줍니다. npm i -D webpack webpack-cli ECMA2015 이후 문법과 jsx 문법을 사용하기 위해 babel ..

Syntax Highlighter 신택스 하이라이터는 개발 관련 블로그에서 꽤 중요한 역할을 합니다. 내가 작성한 코드를 이쁘게 보여주거든요. #include using namespace std; int main(){ cout