Bleeding edge

1. extends HTMLElement with click 음.. 요기서 시간을 엄청 먹을줄은 몰랐는데.. custom element 에서, addeventlisener을 넣는데 자꾸 parameter 2에 대한 에러가 계속 떴다. 그래서 지금 내가 사용하고 있는 extends HTMLElement에 다른 적용법이 있나 검색하다가 connetedcallback에 onclick을 넣은 예제를 발견했다. export default class Login extends HTMLElement { connectedCallback() { this.innerHTML = ` `; this.querySelector('.remove').onclick = e => this.classList.toggle('closed'); ..

https://programmers.co.kr/learn/courses/30/lessons/76502 코딩테스트 연습 - 괄호 회전하기 programmers.co.kr 한가지 사항을 기억하는데 시간이 좀 걸렸었다. 바로 이스케이프 코드를 정규식에 사용하는 방법. const regex = /[\(\)]/g 다음과 같이, 각 이스케이프마다 한번씩 쓰는걸 깜빡해서.. 5분정도 regex match에 시간을 섰다.. regex를 처음 쓸때는 ()와 []많이 헷갈렸었는데 이제는 쓰다보니 연상 암기를 할 수 있게 된거같다 []의 괄호 []는 array와 같으니, 각 개체를 split해서 구분한다. ()의 괄호는, function의 var을 담는 괄호와 같으니 join해서 구분한다!로 연상하니 납득이 됬다. 아참. ..

https://programmers.co.kr/learn/courses/30/lessons/12913 코딩테스트 연습 - 땅따먹기 땅따먹기 게임을 하려고 합니다. 땅따먹기 게임의 땅(land)은 총 N행 4열로 이루어져 있고, 모든 칸에는 점수가 쓰여 있습니다. 1행부터 땅을 밟으며 한 행씩 내려올 때, 각 행의 4칸 중 한 칸만 밟 programmers.co.kr 이렇게 풀어도 되겠지? 하고 고집부리다가 문제 풀이에 시간을 너무 많이 썼던 문제.. dp를 활용하면 금새 풀었을 꺼같지만 이번 기회에 dp에 대해서 공부할 수 있는 기회가 되서 좋았다. 간만에 풀이 감이 안잡혀서 검색을 해봤었는데 https://onlydev.tistory.com/71 [프로그래머스] 땅따먹기 | JavaScript 땅따먹기..

메인페이지 CSS를 어느정도 세팅을 다했다. 중간에 만든걸 주변사람에게 보여줬는데, 주소 설정은 되니?! 라고 이야기를 듣자말자 카카오에 있는 주소 api를 붙여야지 하고 했었는데, 작업을 before, after 을 두개 나누다보니 카카오에서 기존에 주던 예제들과는 다르게 id가 충돌이나서 살짝 애먹었다.. 흑.. 그리고 아무래도 parentElement를 사용을 하려고해도, 너무 상위쪽이라.. 쓰기도 어려워서 className을 넘겨줘도 되는 위치에서 값을 이동해서 마무리를 했다. 이전에, z-index가 높고 낮을때 문제가 생기던 것도 해결 할 수 있어서 좋았다.

https://programmers.co.kr/learn/courses/30/lessons/17683 코딩테스트 연습 - [3차] 방금그곡 방금그곡 라디오를 자주 듣는 네오는 라디오에서 방금 나왔던 음악이 무슨 음악인지 궁금해질 때가 많다. 그럴 때 네오는 다음 포털의 '방금그곡' 서비스를 이용하곤 한다. 방금그곡에서는 TV, programmers.co.kr 카카오 문제라 그런지 정렬 문자를 다루는 문제가 나왔다. 개인적으로는, bfs나 dfs와 같은걸 사용하진 않았지만, 차례차례로 논리를 전개하면서 풀었더니, 1트라이에 풀어서 기분이 좋았다. function solution(m, musicinfos) { var answer = []; let listen = convert(m) for(let i =0; i

https://programmers.co.kr/learn/courses/30/lessons/70129 코딩테스트 연습 - 이진 변환 반복하기 programmers.co.kr 문제가 어렵다기보다는.. 문제를 좀 잘읽자. 라고 반성하기 위해서 남기는 글. Boundary condition을 고려할 것도 없이 while이 1이 될때, stop만 넣으면 되는 문제다. 코딩 테스트 최근에는, 너무 문제를 잘못읽어서 시간을 보내는 경향이 있는거같다. 반성하자. function solution(s) { let answer = [s, 0, 0] while(answer[0]!=1){ process(answer) answer[1] = answer[1]+1 } return [...answer.slice(1)] } funct..

를 사용하였을 때, auth.currentUser에 대한 값이 null이 나와서 계속 순서가 잘못됬나 하고 script의 순서를 바꾸다가 우연히 script app의 type을 module로 했다는 것을 보고 혹시나 몰라서 type="module"을 추가로 넣었더니 null로 잡히던 user가 제대로 작동했다 그래서 script type module이 뭔지 알아봤더니 브라우저가 모듈로 인식해야 import / export 를 사용할 수 있습니다. 라는 글을 읽게 되었다. https://2dubbing.tistory.com/83 javascript ES6 모듈(Module) # 모듈 ES6 에서 처음으로 모듈에 대한 표준이 도입되었습니다. ES5 까지 javascript 에는 모듈에 대한 표준이 없었습니다..

프로젝트에서 해보고픈 기술들과, 어떤걸 넣을지 방황을 살짝 하다보니, 어디에 뭘쓰는지 계획하는데 PUSH를 많이쓰는것 같다. 이건 아직 좀 무지해서 생기는 일에, 계획이 부족했다고도 반성할 수 있지만.. 아직 뭐에 뭘쓰는지 잘모르니까, 이번 기회에 언제 뭘 쓸 수 있는지 공부해 보면서 만들어 봐야겠다 이전에 사용한다고 했었던 COMPONENT는 황준일님의 것을 본따서 할까 했는데, 그냥 그파일 자체를 너무 쓰는 것 같아서.. 뭔가 react.js를 호출하는 느낌이 들다보니 차라리 js에서 제공해주는 것들을 모아서 만드는게 나을 꺼같다고 생각했다. shadow dom이라던지 아니면 다른 compnent 대체가 가능한 것들로 만들것 (메모오..) 그리고 황준일 님의 블로그에서는 component에 대해서도 ..

https://programmers.co.kr/learn/courses/30/lessons/49993 코딩테스트 연습 - 스킬트리 programmers.co.kr 예전에 이건 어떻게 풀지?! 하고 미뤄덨던 문제. skill과 skill_trees를 각자 split으로 쪼갠 후, skill에 있는 item들만 남긴뒤에 모두 없앤 후, array를 join시킨 뒤에, indexOf가 0인 것의 갯수를 카운트했다. function solution(skill, skill_trees) { let answer = 0; const trees = skill_trees.map((v)=>v.split('')); const sk = skill.split(''); const result = [] for(i=0;i