분류 전체보기
-
배열의 중복 다루기Web/자바스크립트 2020. 10. 30. 20:41
1. 배열의 중복 검사 [1, 2, 3].every((el, idx, arr) => arr.indexOf(el) === idx); // true [1, 2, 1].every((el, idx, arr) => arr.indexOf(el) === idx); // false indexOf는 인자로 들어가는 값과 동일한 첫 번째 원소의 index를 찾아준다. 그래서, 첫 번째 원소와 중복되는 이후 원소들의 idx는 indexOf(el)과 다르게 된다. (el은 같아서 indexOf(el)이 계속 동일하게 나오는데, idx는 달라지기 때문) 그래서 두, 세번째로 나오는 중복 원소들은 false를 return하게 된다. 2. 배열의 중복 제거 [1, 2, 2, 4, 3, 4].filter((e, i, a) => a...
-
Array Cardio Day 2 🎈Web/JS30 2020. 10. 30. 17:09
배열 메소드 두 번째 시간. 이번에는 some(), every(), find(), findIndex() 메서드를 다뤄봤다. 사실 알고리즘 문제를 풀면서 수도 없이 다뤘던 메서드들이라 별로 새롭진 않았지만 그냥 다시 한 번 되새긴다는 마인드로.. 데이터는 다음과 같다. const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the ..
-
JS로 CSS 스타일 값 다루기Web/자바스크립트 2020. 10. 30. 13:49
이때까지 JS로 CSS 속성값을 가져올 일이 딱히 없어서 몰랐는데 현재 element의 CSS 속성값을 가져오려고 할 때 style property를 사용하면 올바르게 동작하지 않는다. // 요렇게 하면 안된다. const buttonDisplay = document.querySelector('#example').style.display; 이 style 이라는 property는 해당 element의 'inline CSS'를 의미한다. 근데 태그에서 적용한 CSS나, 외부 파일로 적용한 CSS랑 inline CSS는 따로 동작하는 것 같더라. function toggleButton() { const button = document.querySelector('#example'); if(button.style..
-
실전적인 AJAXWeb/자바스크립트 2020. 10. 30. 06:04
1. jQuery를 이용한 AJAX jQuery의 $.ajax() 메서드를 활용하면 손쉽게 AJAX 요청을 보내는 것이 가능하다. // jQuery import 기본 골격은 다음과 같다. $.ajax({ type: "GET", // GET 방식으로 요청한다. url: "URL을 입력하는 곳", // 해당 URL에 요청을 보낸다. data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다) success: function(response){ // 서버에서 준 결과를 response라는 변수에 담는다. // response가 왔을 때 실행될 함수를 작성해준다. } }); - type : "GET" or "POST" - url : HTTP 요청을 보낼 URL - data : 요청하면서 함께 ..
-
Pure Javascript의 AJAXWeb/자바스크립트 2020. 10. 30. 04:28
Asynchronous Javascript and XML. 비동기 웹 애플리케이션 제작에 사용되는 웹 개발 기법. 웹 페이지 전체를 새로고침하지 않고도 필요한 데이터만 받아 갱신 가능. 그만큼 자원과 시간을 아낄 수 있고, 속도 향상에 도움이 된다. 1. 클라이언트에서 XMLHttpRequest 객체를 생성하여 서버로 보낸다. 2. 서버에서 받은 메시지에 해당하는 정보를 클라이언트로 다시 보낸다. 3. 클라이언트에서 서버로부터 응답 받은 정보를 특정 영역에 뿌려준다. 가장 핵심은 서버로부터 데이터를 전송받을 때 사용되는 XMLHttpRequest 객체. XMLHttpRequest 객체 생성하기 let xhttp; if(window.XMLHttpRequest) { xhttp = new XMLHttpRequ..
-
다시 포스팅 시작Diary 2020. 10. 24. 01:20
사실 추석 이후로도 코딩을 계속 했지만 하고싶은 웹 코딩만 하고 알고리즘 문제는 잘 안풀었어서 딱히 포스팅을 할 거리가 없었다. 원래 알고리즘 공부한 내용 정리하려고 포스팅을 시작했기 때문에. 하지만 웹 코딩을 하면서도 새로 알게되는 내용들이 너무 많았다. 이런 것들은 그냥 넘어가면 금방 잊어버리니까 다시 상기시킨다는 마음가짐으로 포스팅을 좀 해야될 것 같다. 이번에 Firebase를 써봤는데, 사용법이 조금 낯설고 어렵긴 하지만 그래도 Authentification과 Database를 Firebase 하나로 해결할 수 있다는 게 생각보다 매력적이었다. 초기 세팅도 크게 귀찮지 않은 것 같고. 앞으로 혼자서 뭔가 만들고싶은 게 있을 때 자주 애용할 것 같다. Firebase를 사용해서 만든 토이프로젝트도..
-
[백준] 0927 오늘의 문제 풀이📚Algorithm 2020. 9. 27. 03:36
대망의 백트래킹 문제를 풀어봤다.. 일단 뭔가 백트래킹도 기초 문제를 보니 어느 정도 정해진 틀을 지켜가면서 응용이 될 것 같은 느낌. 일단 기초 문제들을 열심히 풀면서(풀이를 보면서 ㅎㅎ;) 기본 틀이 되는 코드를 좀 체화시켜야겠다. 1. N과 M (1) 문제 링크 a. 풀이 1 var input = []; const readline = require('readline'); const fs = require('fs'); const r = readline.createInterface({ input: process.stdin }); r.on('line', function(line) { input.push(line.trim()); }); r.on('close', function() { const line =..
-
[백준] 0926 오늘의 문제 풀이📚Algorithm 2020. 9. 26. 23:01
최근 공채 시즌을 거치면서 보기 싫어서 미뤄뒀던 코딩테스트 알고리즘들을 공부하고있다. BFS, 그리디, 스택 등등 뭐 사실 공부한다고 하기도 애매한 것들이지만.. 재귀는 증말 너무 싫어서 DP랑 백트래킹은 최대한 미뤄두고 있는데 그것들도 뭐 언젠간 풀어야겠지.. 1. ATM 문제 링크 var input = []; const readline = require('readline'); const fs = require('fs'); const r = readline.createInterface({ input: process.stdin }); r.on('line', function(line) { input.push(line.trim()); }); r.on('close', function() { const N = ..