꿈많은 DEVELOPER

예시 innerText 와 innerHtml 차이를 알아보겠습니다. innerText 같은 경우는 text만 적용시킬때 쓰면 좋은 property 입니다. 반면에 innerHtml은 html tag 와 함께 사용할시 좋은 property 입니다. 차례대로 1번, 2번, 3번, 4번 순서 입니다. innerText에 html tag 사용할시 문자열로 읽어서 그래로 적용시킵니다. 반면에 innerHtml은 html tag에 em을 적용시켜서 보입니다. 두개의 property 차이를 알아보았습니다.

Html 요소들마다 classList 작업해서 변화를 줘야 될떄마다 유용하게 쓸수있는 메소드입니다. classList.toggle() 토글이란? on/off switch의 개념으로 스위치를 켯다, 껏다 하는 기능을 가지고 있습니다. add() / remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다. 즉 click 이벤트에 classList.toggle() 추가시켜서 css에 style줘서 구현시킵니다. ex : add() classList.add() add란? 지정한 요소에 클래스 값을 추가시키는것입니다. ex : remove() classList.remove() remove란? 지정한 요소에 클래스 값을 제거시키는것입니다. ex : 전체적인 classList 예제는 https://cometr..

질문답변이 혹은 정보를 알려줄때 많이 사용되는 아코디언을 구현해봤습니다. See the Pen javascript 아코디언 by 유국현 (@yoogukhyeon) on CodePen.

비즈니스 업무 자동화를 위해서 스케줄링을 돌려서 로직을 실행할수있는 node_schedule 입니다. 자바스크립트에서 제공하는 setInterval을 사용하면 특정 시간마다 함수를 실행시킬수 있습니다. 하지만 실행시켜야하는 시간이 복잡해지고 비즈니즈 처리를 해야될경우 스케줄러를 활용하는것이 좋습니다. Cron 표기법 입니다 숙지하고 있으면 좋습니다. * * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ │ │ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun) │ │ │ │ └───── month (1 - 12) │ │ │ └────────── day of month (1 - 31) │ │ └─────────────── hour (0 - 23) │ └─────────..

실무에서 프로젝트를 하다보면 인증코드나 인증을 할때 시간제한을 주는 경우가 있습니다. 이런 방법으로 해보았습니다. See the Pen javascript timeout by 유국현 (@yoogukhyeon) on CodePen.

Github Authentication Failed Git을 사용하다 보면 push/pull을 했을 때 아래와 같이 메시지가 발생하면서 실패를 하는 현상이 발생하곤 한다. 나의 경우는 오랜만에 새로운 작업을 할때 생긴 이슈. 해결방법 Git terminal을 실행한 후에 아래와 같이 설정을 해주자. userName, passWord에는 본인의 Github 계정을 적어주고 @ 뒤에는 repository 경로를 적어주면 된다 이렇게 명령어를 쓰고 git remote url 받아 적으면 끝!! 저는 이렇게 해결은한후에 작업을 완료했습니다.

javascript 언어는 null , undefind , "" , empty 는 false로 변환이 됩니다***** 그래서 좋은코드로 예외처리하는 방법을 알아 보겠습니다. null,undefined,’‘,0 === false 로 반환됩니다! 그렇다면? 1) obj === 0은 false를 반환한다 그래서 !0은 true가 된다 obj === 0 보다는 더 짧은 !obj를 사용합니다 2) undefined , null , "" 공백문자를 판별하고 싶을때는 마찬가지로 하면 됩니다. undefined , null , "" , 0 false를 반환 하기 때문에 !obj를 하면 true면이 됩니다! 3) true인지 판별할때 4) false 인지 판별할때 이런식에 좋은 코드로 활용이 가능합니다! 참고로 0, “..

Node.js , React등등 프레임워크를 작업을 하다보면 다양한 Npm 모듈을 사용해야 합니다. 개발환경에 맞춘 버전 관리도 중요합니다. 그래서 Npm 설치 및 버전 다운그레이드 대해 알아보았습니다. 설치 방법 npm install 설치module ex : npm i(install 약자) express 이런식으로 설치를하고 사용이 가능합니다. 하지만 개발중 사용하던 npm module에 버전을 다운그레이드해야할 상황이 있습니다. 먼저 module 삭제 npm uninstall 설치module ex : npm uninstall express 현재 npm module을 삭제한후 원하는 버전을 뒤에 붙이고 다시 설치하면 됩니다. 다운그레이드 npm install 설치module@버전 ex : npm i e..

Encoding 개념과 유니코드 , UTF-8에 대해서 알아봤습니다! Encoding 이란? - 정보의 형태나 형식을 다른 형태나 형식으로 변환하는 처리 혹은 처리방식 이라고 이해를 합니다. === 즉, 컴퓨터가 이해할 수 있는 형식으로 바꾸어주는것 - 인코딩의 종류에는 ASCLL,URL,HTML,BASE64,MS Script 등이 있다. === (이부분은 나중에 더 자세히 알아보겠습니다!) Unicode(유니코드)란? - 즉 네트워크가 인터넷이 발전하면서 다른외국 사이트에 들어가는 일이 잦아졌고 언어가 깨진 상태로 나오는 일이 빈번하게 일어나서 국제적으로 전세계 언어를 모두 표시할 수 있는 표존 코드를 만들기로 했고 그것이 바로 Unicode입니다. 유니코드 약속된 코드 표기법이 있다. unicode ..

simple한 plus and minus 만들어 봐요 여기서 배울 javascript 문법은 Dom 과 innerText 그리고 parseInt 와 삼합연산자 입니다! Dom은 HTML 테그를 가져와서 활용할수있고 innerText는 텍스트 노드를 추가할수있습니다 parselnt 소수점을 없애고 정수로 바꾸는 함수 입니다 codePen See the Pen plusandminus by 유국현 (@yoogukhyeon) on CodePen.

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다! 바로 예제로 확인해봐요! arr = [] 배열을 만들어주고 arr.join() 메서드로 배열에 index 합쳐춥니다! 추가적으로 배열.push() 맨뒤에 배열 추가입니다 배열.unshift() 앞에 맨앞에 배열추가합니다 join() 메소드를 알아봤습니다!

Haker News Api를 Ajax 비동기 통신을 이용해서 어플리케이션을 개발해 보겠습니다. part2를 작업하면서 substr() 메소드 replace() 메소드를 활용해 보았습니다. part2 소스코드는 제 git올려져 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code2 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com part2 작업은 hash값으로 a..

객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙치는 것입니다. 또한 이것을 지칭하는 this 예약어도 있습니다 자바스크립트에서 중요한 부분중 하나입니다! 객체는 { } 안에 key 와 value 이뤄지는 형식 입니다! student 객체 안에 sum 함수도 넣을수있습니다 이런식으로 객체를 쓸수 있지만 불편한 점이 많습니다. 이미 student 객체는 내부적으로 math , science 점수를 알고있습니다. 하지만 저값을 받기위해서 또 다시 언급을 해야되는 번거로움이 있습니다 여기서 this 사용해서 더 편하리하게 만들수 있습니다! this 약속된 키워드 의미 입니다 this가 속해있는 메소드가 속해있는 객체를 가르키도록 하는 특수한 약속입니다 this 사용한다면 변수에 이름에 바꼇을때도 결과 값..

addEventListener는 event 방식으로 가장 권장되는 이벤트 핸들러 입니다 사용방식문법또한 어렵지 않습니다! 객체.addEventListener('이벤트 종류' , 함수) or 객체.addEventListener('이벤트 종류' , function(){ }) 이런한 형태로 사용을 합니다 바로 예제 들어가보죠 브라우저를 열고 확인을 하시면 잘나옵니다! 이번엔 조금더 다양하게 해보겠습니다 문법을 이해해보면 onclick 이벤트 실행 if(document.getElementById('prevent').checked) checked property가 체크가 되어있다면 return false 실행시키지 마 이런뜻입니다! 참고로 target="_blank" 새창을 열겠다라는 속성 입니다. 이거는 pro..

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다. Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다. 프론트 작업중 유용하게 활용할수 있는 기술 입니다 저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 먼저 Node 객체를 추가해보겠습니다. = createElement() 엘리먼트 노드를 추가하고 = createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다 = 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이..

값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다  vs코드를 여시고 let getStartedarr 배열에 값을 꺼내고 싶을때 for문이 가장먼저 생각이 나는데 한번 만들어보겠습니다.   이거는 가장많이 쓰니는 for문 이였습니다 map() 함수를 써볼께요  map() 함수란?즉 map() 함수를 활용해서 인덱스 인자와 for문에 방식을 같이 활용해서 쓸수 있는 함수입니다. 바로 예제로 let's get started  그럼 결과값은?마지막으로 map() 함수를 활용해서 여러개 배열문에 값들을 뽑아 볼께요  오늘은 map() 함수를 공부해보았습니다감사합니다!