본문 바로가기

전체 글

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..
오류분석 :a.k.a 삽질 2022. 1. 17.
if/else 지옥(feat.스파게티)에서 벗어나 보려고 한번 수정해봤습니다. 간단한 예제 하나를 만들려고 하다가 if/else 지옥이 생겨버렸음.. 그냥 무작정 내가 원하는 결과를 만들면서 앞 뒤 생각없이 코드를 막짜다보니, 얽히고 섥힌 그런 스파게티 소스코드 완성 (^^) 아주 전형적인 사례라 들고 올 수 밖에 없었다. (의외로 만들때 쉽다고 느낀 이런 소스가 나중에 if/else안에서 복잡하게 얽힐때 유지보수 안됨..) ㅎㅎ 이걸 어떻게 바꿀수 있을까? if (standardNumVal) { if (userNumVal) { if (userNumVal machineNumVal) { resultMsg.innerHTML += "222"; } else { resultMsg.innerHTML += "3333"; } resultMsg.classList.remove("hidden"); }..
JAVASCRIPT 2022. 1. 17.
서버에 데이터를 꼭 저장해야 할 필요가 없다면? : webStorage 오늘도 니꼬샘 강의를 듣다가 평소 써본적없던 것이 나오길래 겸사겸사 정리해본다. 프로그램개발을 하면서 서버와의 통신을 통해 데이터 저장 및 변경, 삭제를 진행해왔기에 데이터 저장 = 서버통신 필수 라고만 인식했던 시절이 있었다. 하지만, 웹브라우저에서도 간단한 데이터를 저장해주는 API를 제공하고있었으니!!!! 바로 Web Storage ( 내가 듣고도 흘려보냈을거야... 몰랐을리가 없어... 분명 기억이 날거야..) 니꼬샘 예제에서는 localStorage만 사용했지만 sessionStorage 도 있다. localStorage sessionStorage 공통점 브라우저 내 간단데이터 제공 용량 : 5MB 문자열데이터만 저장가능 차이점 브라우저를 껐다가 세션이 종료되어도 유지됨 (여러세션에도 확인가능)..
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 = () =>..
blahblahblah 2022. 1. 11.
2021년의 회고 블로그 검색을 하다보니, 연말에 한해를 돌아보는 회고록을 쓰더라. 작년에는 블로그는 전혀 하지 않아서 그동안 내가 공부했던 흔적이나 그동안 느꼈던 걸 볼수 없어서 아쉬울뿐이지만 큰사건이 유난히 많던 한 해길래 나도 한번 소소하게나마 정리하고자 한다 내년회고에는 더욱더 알찬 한해를 보내고 뿌듯한 마음으로 썼으면 좋겠다. 번아웃증후군 +우울증 발발.(2021.03) 그동안 너무 혹독하게 나를 몰아세우며 회사일에 집중하던 순간에 감정을 주체하지 못하기 시작했다. 예민했고, 신경이 날카로웠으며 쉽게 화를 냈다. 그렇게한다고 붙잡고 있는 일은 절대 앞으로 가지 않았으며 그에따라 더욱더 예민해지는 악순환이 반복되었다. 여유를 느낄만한 상황에도 항상 불안해했으며 그때부터 잠을 자지 못했다. 결국, 나는 회사일을 좀 ..
나만또모르지 : 유용한 사이트 2022. 1. 10.
나만또 4탄 : git 배우려는 사람 여기모여라! -learn git branching https://learngitbranching.js.org/?locale=ko Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org 책을 봐도 모르겠고, 실습을 위해 환경을 만들기에는 내가 너무 모른다 싶을때 나만또시리즈4탄이 등장합니다~~ (사실, 이번에 검색해보다가 흥분해서 들고옴) 일단 설명이 너무 간단하다.. 그리고 시각적으로 표현을 너무 잘해서 원리를 머리로 그리기 어려울때 눈앞에서 트리형태를 간단하게 확인하면서 명령어들의 역할을 이해하면서 정리할 수 있다. 강력추천하고 싶은이유는 1. 내가 직접 명령어를 쳐가며 2.현재 위치에서 어떻게 트리가 만들어지고 ..
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년에 발견한 ...나는 처참한 심정) 진짜 이게된다고? 싶어서 부랴부랴 이것저것 테스트 했는데 ..

티스토리툴바