본문 바로가기

스크립트

JAVASCRIPT 2022. 1. 19.
니꼬샘 자바스크립트 강의 : padStart, padEnd (feat. 숫자채우기) 글자채우기의 혁명을 보았도다. 내가 이렇게 흥분하는 이유는 아래설명을 보면 이해할 것이다. 아래와 같이 지각생명단에 도착한 시간정보를 적게했다. 단 한글자인 경우에는 무조건 2자리수에 맞춰서 앞에 0이 들어가야한다. 지각생명단 1 보라돌이 08:45:07 2 뚜비 08:55:09 3 나나 08:57:59 4 뽀 09:05:19 기존의 나였다면, 1) 일단 글자를 자르고, 000000001) : padEnd() : 글자 뒤에 붙여줌 ( ex. 1 ----> 100000000) - 사용법 : 코드만 보면 무조건 알수 있기 때문에 예제로 바로 보여드림 const textpadStart =(text)=>{ return text.padStart(5,"*"); } const textpadEnd =(text)=>{ ..
오류분석 :a.k.a 삽질 2022. 1. 19.
무섭도록 못 찾는 오류 : 원인은 ( ) - feat.자바스크립트 간단한 스크립트 예제를 테스트 하는 도중 자주 실수하는 부분이 있어 정리해놓는다. 거두절미하고, 자바스크립트로 시계를 만드는 예제를 만들었다. const clock = document.querySelector("h2#clock"); const getTime = () => { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; }; getTime(); setInterval(getTime(), 1000); 소스를 보면 전혀 문제 없어보이는데 동작하지 않는다. 또 하나의 예제가 있다. 버튼을 클릭시, 멘트 안내하는 간단한 자바스크립트다. const loginBtn = do..
JAVASCRIPT 2022. 1. 14.
ES6 : 편한 arrow function 안에서도 쓰지 못하는 게 있다? 화살표 함수를 쓰면서 너무너무 재밌고, 간편하게 쓰고 있었는데 이런 함수에서도 사용할수 없는 문법이 있다. 신기하기도 하면서 잊어버리지 않기 위해서 정리해둔다. const test = (arg) =>{ const plusSum = arg + "님, 반가워요"; return plusSum; } [ 화살표함수의 예시 ] 바로 this 함수이다. 쓸수 없는 이유는 바로, 해당함수가 지정하는 범위가 달라지기 때문이다 . 예시를 보자. 버튼을 누르면 버튼글씨가 변경되는 간단한 예제다. const btn = document.querySelector("button"); btn.onclick = function () { this.innerText = "바뀌어요"; //여기서 this는 바로 상위의 버튼을 가리킴. };..
JAVASCRIPT 2022. 1. 12.
Conditionals 확실히 알고있어? : 헷갈리는 개념 복습! JS 챌린지 문제는 유출하지 못하게 명시되어 있으므로, 해당 개념과 비슷한 예제를 사용하여 설명드림을 양해바랍니다. * 강의 출처 및 MDN 출처, 예제출처는 하단에 표기합니다. 자바스크립트를 한다고 하는데도 아직 많이 부족한 걸 느껴서 그런지 여기저기 강의고 자료고 찾아보다가 재미삼아 챌린지 도전을 하고있는데... 내가 이렇게 빡세게 공부한적이 있었던가?? (국비교육과정마저도 널널했던 기억이 난다.) 아침마다 메일로 오는 과제 체크하고 강의 진도 확인하고 문제 풀고 (생각외로 기본지식이 있는건지 현재까지는 무난하게 통과중...) 너무재밌자냐 강의를 들으면서 if / elseif / else 문법을 설명하는게 아니라 기본 개념중에 헷갈리는 부분이 있어 정리한다. [예제] const test = () =>..
JAVASCRIPT 2022. 1. 10.
'use strict'을 발견했다면? : strict모드에 관하여 업무 배정 전에 기존 소스를 분석하는 시간을 가지는데 js 상단에 use strict 선언이 있었다. 처음에 1도 이해못하고 js에 이렇게 선언했는데 왜 오류를 안뱉지 하고 찾아보다가 strict 모드를 알게되었다. 1. use strict 가 뭐야? - strict 의 정의를 보면 '엄격한'이라는 뜻을 내포하고 있기때문에 쉽게 말하면 기존 자바스크립트보다 엄격하게 관리하겠다 하는 모드로써 기존에는 오류를 뱉지 않았던 예외처리등도 규칙에 따라 오류를 보여준다. - ES6에서는 default로 strict모드를 사용함. 2. 사용법 : 원하는 곳에 "use strict"; (또는 'use strict';) 를 선언 1] 함수내 선언 : 해당 함수블록만 strict 를 적용할 수 있음 function str..
나만또모르지 : 유용한 사이트 2022. 1. 10.
나만또 3탄 : ES6 -> ES5 소스변환이 가능하다고?ES6 console * 출처를 표기합니다!!! https://blackgoatdev.tistory.com/20 ES6 코드를 ES5 코드로 변환 ECMAScript 6 문법으로 작성한 코드를 ECMAScript 5 문법으로 변환해주는 사이트가 있습니다. 사이트 주소는 https://es6console.com/ 인데요. 공부에 많은 도움이 됩니다. 사이트에 연결하면 두 개의 패널로 blackgoatdev.tistory.com 이직한 곳에서 업무 배정 전 공부하면서 이리저리 보고있다가 유용한 사이트를 알게되었다. 아니, 나만또모르지 취지에 너무 적절하지 않은가 싶다. 우연찮게 검색하다가 발견한 블로거님의 2017년도 게시글 (2022년에 발견한 ...나는 처참한 심정) 진짜 이게된다고? 싶어서 부랴부랴 이것저것 테스트 했는데 ..
JAVASCRIPT 2022. 1. 7.
니꼬샘 ES6의 정석 강의 미리보기: var를 사용하면 안되는 이유(최종판) 그전에 썼던 글로만 하기엔 뭔가 알아먹기 어렵다 이거지..해서 이것저것 알아보다가 좋은강의를 찾게되었다. ㅠㅠ 아니 이렇게 너무 쉽게 설명을 해주시는데 영어로 들어도 귀에 쏙쏙들어옴... 번역도 너무 잘되어있고 https://nomadcoders.co/es6-once-and-for-all ES6의 정석 – 노마드 코더 Nomad Coders ES6, ES7, ES8 nomadcoders.co 강의를 보다가 이건 블로그에 정리를 한번더 해야겠다! 해서 강의를 정리해서 가지고 옴. ( 진짜 니꼬샘보면서 느끼는건데 이것저것 아시는게 많은데 그걸 또 쉽게 풀어서 설명해주는거 보면 대단하다고 느낌.) var name ='이름'; //선언 console.log(name); 보통은 자바스크립트는 위 ---> 아래 차..
JAVASCRIPT 2022. 1. 6.
.filter() 써봅니다... feat . MDN 아 어디서부터 여기까지 흘러왔는지 글을 정리하려고 쓰다보니 쓸게 한두개가 아님. 발단은 "두개의 배열 A , B 에서 A안에 없는 B값을 구하라" 요것이었지. 물론, 기반지식 1도 없는 나는 이리저리 찾아보다가 좋은 블로그를 하나 발견했는데 여기서 답을 찾다가 "으잉?" 하는 문법을 보게됨. (아직 부족한 코린이... 연차에 비해 지식이 낮아요) https://soft91.tistory.com/84 [Javascript] 두 배열의 대한 비교 방법 [Javascript] 두 배열의 대한 비교 방법 실무에서나 알고리즘의 대한 공부를 할 때 두 배열의 대한 비교나 교집합(Intersection), 차집합(Difference)은 정말 많이 사용되는 것 같다. 특히 알고리즘을 풀 soft91.tistory.co..
JAVASCRIPT 2022. 1. 6.
var를 쓰는것만 고집한다면? - const, let 자바스크립트를 사용하면서 그동안 var만 죽어라 고집했던 사람으로써, 처음 이직후 소스를 보고 충격을 받았던 기억은 아직도 생생함 ( 하긴, 이직한지 며칠밖에 안되서 ㅋㅋㅋㅋ충격은 여전) const 와 let 의 개념을 알지 못하니 계속 var로 쓰는데 문제가 없었기에 상관하지 않았는데 오히려 var를 쓰는게 지양하는 추세라니(그것도 한참전부터) 그저 우물안에서 얼마나 갇혀있었는지 경력이 아깝다 var 는 모든 변수를 아우르는 명칭이다. 재선언 재할당 가능, 모든 변수를 쉽게 설정할 수 있는 마법의 용어로 인식되어 자바스크립트가 쉽고 편하게 사용할 수 있다라는 인식에 큰 기여를 하였다. 하지만 var 변수 선언에는 문제가 있다. 상단에 정의한 것처럼 재선언이 가능하다는 것!! [예제] function t..
JAVASCRIPT 2022. 1. 5.
ES6 문법 익히기 프로젝트 - 문자열반복 자바스크립트를 그렇게 사용했건만, 여기와서 제대로 된 ES6문법을 사용하게 되었다. (물론, 제대로 된 소스를 보고있다는 말은 못하겠다만..) 그래도 새로운 문법을 보니 처음 자바스크립트를 배웠던 때가 생각이 났다. (와- 너.무.재.밌.다) * 간단한 문제임에도.. 그동안 코딩복사기만 한 느낌인지라 머리가 잘 안돌아가서 너무 버벅대면서 하고있는게 괜히 괘씸함.. *출처 : 백준코딩 - 문자열반복 https://www.acmicpc.net/problem/2675 첫째 줄에 테스트 케이스의 개수 T(1 ≤ T ≤ 1,000)가 주어진다. 각 테스트 케이스는 반복 횟수 R(1 ≤ R ≤ 8), 문자열 S가 공백으로 구분되어 주어진다. S의 길이는 적어도 1이며, 20글자를 넘지 않는다. (입력값 , 반복변수..

티스토리툴바