min

나는 오늘 바닐라 js로 SPA(single page application)을 구현하였다. 오늘은 이를 구현하면서 내가 느꼈던 어려움들 중에 event.preventDefault() vs event.stopPropagation() 정리를 할까 생각중이다. 1. event.preventDefault() event.preventDefault()는 현재의 동작을 중단 시킨다. 이를 구체적으로 말하자면 예를 들어 a태그 form태그 등은 이벤트 처리시 다른 화면을 이동하는 경우가 빈번하다. 이때 event.preventDefault()는 다른 페이지로 이동하는 것을 막는 역할을 하게 된다. 따라서 event.preventDefault()는 해당 이벤트가 발생하는 것을 막고 싶을 때 사용된다. 이를 이벤트 버블링..

오늘은 이벤트 버블링에 대해서 다룰려고 한다. 여기서 의문이 1가지 정도 들 수 있다. 바로 왜 이벤트 버블링에 대해서 조사하느냐다. 나는 이벤트 버블링을 조사하는 이유는 2가지가 있다. 1. 면접에 자주 나오는 개념이기에 2. 개발하면서 왜 이렇게 동작하는 지를 찾고 싶어서 그럼 이번에는 2가지 이유를 토대로 한번 이벤트 버블링에 대해서 설명하겠다. 1. 이벤트 버블링 도대체 왜 면접에서 많이 물어보는가? 이 이유를 알기 위해서는 먼저 이벤트 버블링이 무엇인지 부터 확인해야 한다. 이벤트 버블링은 말 그대로 이벤트가 점차 버블링한다는 것을 의미한다. 하지만 이렇게 집고 넘어가면 나중에 실전에서 이벤트 버블링을 사용하기가 매우 곤란해진다. 그래서 이 개념에 대해서 구체적으로 집고 넘어가겠다. EM을 클릭..

오늘 나는 하루님과 함께 페어프로그래밍을 진행했다. 페어프로그래밍을 하기 앞서서 한가지 룰을 만들었다. 1. 내가 혼자 힘으로 풀 수 있는 문제는 혼자서 풀고 자신이 이 문제를 풀기 위한 실마리를 공유하는 것 2. 내가 혼자 힘으로 풀 수 없는 문제는 같이 페어프로그래밍으로 문제를 푸는 것 실제로 이 규칙을 가지고 문제를 푸니 진행 속도도 빨라지고 얻는 이익은 많았다. 즉 레버리지 포인트가 높아졌다. (만약 레버리지 포인트가 모르신다면 제 블로그를 봐주시면 감사하겠습니다 ㅎㅎ) https://minprogramming.tistory.com/entry/%EB%A0%88%EB%B2%84%EB%A6%AC%EC%A7%80-%ED%8F%AC%EC%9D%B8%ED%8A%B8%EC%97%90-%EB%8C%80%ED%..

https://school.programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(new_id) { var answer = ''; //1. new_id = new_id.toLowerCase() //2. new_id = new_id.replace(/[^\w\-\.]/g , "") //3. new_id = new_id.replace(/\.{2,}/g,".") //4. new_id = new_id.replace(/^\./,"") new_id = new..

https://school.programmers.co.kr/learn/courses/30/lessons/81301 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { const arr = ["zero","one","two","three","four","five","six","seven","eight","nine"] for(let i = 0; i { const..

https://school.programmers.co.kr/learn/courses/30/lessons/12917 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(answers) { const one = [1,2,3,4,5] const two = [2, 1, 2, 3, 2, 4, 2, 5] const thr = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5] const answer = [0,0,0] const result = [] for(i in answers) { if(answers[i] === one[i % one..

https://school.programmers.co.kr/learn/courses/30/lessons/12926 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s, n) { var chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXY"; return s .split("") .map((e) => {return (e===" ") ? " " : chars[chars.indexOf(e..

오늘은 팀원들과 함께 각각 async,await과 RESTful api에 대해서 발표하는 시간을 가졌다. 나는 RESTful api에 대해서 다뤘으며 다른팀은 async,await에 대해 다뤘다. 나는 오늘 async, await에 대한 발표를 들으면서 몰랐던 것들 질문했던 것들에 대해서 다룰려고 한다. 1. 비동기 함수와 이벤트루프 비동기함수의 동작원리를 이해하기 위해서는 이벤트루프라는 개념은 빠질 수가 없는 내용이다. 이벤트루프는 내가 따로 정리한 블로그가 있으니 그것을 참고하겠다. https://minprogramming.tistory.com/entry/%EC%8B%A4%ED%96%89%EC%BB%A8%ED%83%9D%EC%8A%A4%ED%8A%B8%EC%99%80-%EC%9D%B4%EB%B2%A4..