꿈많은 DEVELOPER

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, “..

개발작업을 할때 많이 활용되는 오늘은 JSON.parse() , JSON.stringfy()에 대해서 알아보겠습니다. JSON.parse()란? = JSON.parse()는 json문자열을 자바스크립트 객체로 변환 시켜주는 api입니다. 변수 stringify에 json문자열을 담아주고 stringify를 parse를 시켜서 json문자열을 javascript객체로 만들어줍니다. 위에가 json문자열 아래는 parse를 통해서 javascript 객체로 변환된 값입니다. JSON.stringfy()란? = JSON.stringfy()는 자바스크립트 객체를 json 문자열로 변환 시켜주는 api입니다. 변수 obj에 객체를 담아서 JSON.stringfy 자바스크립트 객체를 json문자열로 변환시킵니다. ..

javascript에서 배열에 활용할일이 많은것 같습니다. 그래서 배열에 api개념또한 잘안다면 더 쉽게 원하는 데이터를 가공할수 있다고 생각합니다. 배열에 전체 list 뽑는 api 부터 공부하겠습니다. 제가 가장 많이 활용하는 배열 api 입니다. 이렇게 원하는 list 뽑을수있습니다.

hasOwnProperty란? hasOwnProperty란 자바스크립트 객체의 네이티브 메소드 중 하나이다 hasOwnProperty 메소드를 쓰는 이유는 특정 Property를 가지고 있는지 없는지를 나타내서 블리언 값으로 반환하는것을 알기 위해서 사용합ㄴ디ㅏ. 즉 : hasOwnProperty() 메소드는 특정 프로퍼티가 해당 객체에 존재하는지를 검사합니다. Ex 조건문을 활용해봅니다! if(Obj.hasOwnProperty('1')) Obj에 1이 없기때문에 결과는 false로 뜹니다 if(Obj.hasOwnProperty('name')) 하면 Obj Property에는 name이 있기때문에 true를 반환 합니다! 저희 회사는 이 메소드를 활용해서 저 또한 공부를 해보았습니다! hasOwnProp..

class 정의? 객체를 생성하기 위한 템플렛입니다. ES2015에서 도입된 클래스는 생성자의 기능을 대체하기 위해 사용됩니다. 생성자와 같은 기능을 하는 함수를 훨씬더 깔끔한 문법으로 정의 할 수 있습니다. class 안에 생성자(constructor)는 property라 불리고 함수(function)는 method라 불릴수 있습니다 super 키워드는 부로 오브젝트의 함수를 호출 할때 사용됩니다 extends 키워드는 클래스 상속을해서 클래스를 다른클래스로 사용이 가능합니다. 예제 constructor 생성자를 선언하고 name , age 인자값을 주었습니다 new 새로운 객체를 만들고 값을 출력하면 이렇게 잘나옵니다. 이번에는 extends , super 활용해보겠습니다 class 선언하고 prop..

javascript에서 함수는 정말 중요한 부분인데요. javascript는 함수가 값으로 될수있습니다 그래서 함수를 활용하는방법은 아는것은 정말 중요합니다. function 이라는 함수 키워드로 ()중괄호 {}호로 함수 키워드를 선언할수있습니다 그리고 함수는 함수 선언식, 함수 표현식으로 나눠질수 있습니다. 함수 선언식은 function printFunc(){ console.log('hello') } 함수 표현식은 const func = function printFunc(){ console.log('hello') } 이렇게 사용할수 있습니다 그럼 vs코드를 켜서 볼께요 이렇게 함수에 중괄호는 매개변수가 들어가는자리이고요 대괄호 안에는 함수에 작동하는 값들이 들어가는곳입니다! 저렇게 함수안에 값을 con..

javascript를 공부하다보면은 자료형에 대해서 알게되는데요 그래서 오늘은 javascript 자료형에 대해서 공부를해봐요! 데이터는 값과 값의 유형으로 구분되어져있습니다. 자료형이란 즉 값의 유형입니다 값이 가질수있는 여러가지 유형의 개념을 말합니다 javascript 2가지로 나눠질수있는데요 원시 타입(primitive type) 참조 타입(reference type) 이렇게 2가지로 나눠질수있습니다. 원시타입은 기본 자료형입니다 이렇게 준비를 해보시면 typeof() 함수는 javascript에 타입을 알수있는 함수입니다. 이렇게 각각에 타입을 말해주고 있습니다! 이번엔 참조 타입 참조 자료형입니다. 참조타입은 배열 , 객체 , 함수를 말하는데요 이것또한 typeof를 활용해서 타입을 알아낼수있..

OOP라 불리며 object oriented programing 객체지향 이라고 부릅니다! 객체 프로그래밍 방식 OOP는 객체들의 유기적인 관계를 통해서 프로세스가 진행이 됩니다. 즉, 어플리케이션을 구성하는 요소들을 객체로 바라보고, 객체들을 유기적으로 연결하여 프로그래밍 하는 것을 말합니다. OOP 장점은 코드 재사용이 높아지고 유지보수가 쉽고 크도가 간결해집니다! 단점은 처리 시간이 비교적 오래 걸리고 프로그램을 설계할때 많은 고민과 시간을 투자해야합니다 OOP의 특징 4가지 추상화 : 추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념입니다 즉 인터페이스로 클래스들의 공통적인 특성들을 묶어 표현한것 캡슐화 : 실제로 구현 부분을 외부에 드러나지 않도록 하는것 , 변수와..

작업을 준비하다 보면 작업을 하다보면 Script위치를 어디에 놓는게 좋을까요? 제일 좋은 방법은 body 태그 최하단에 놓는것이 가장 좋습니다! 일단 브라우저의 동작 방식은 1. Html을 읽기 시작합니다 2. Html을 파싱합니다 3. DOM 트리를 생성합니다 4. DOM 트리 + CSS을 생성되고 로드가됩니다 여기서 우리가 스크립트를 중간이나 최상위에 놓는다면 Html 읽는 과정에서 중간에 스크립트를 만난다면 파싱을 하는데 지연이 될것이고 스크립트를 못읽는 현상이 발생할수도 있습니다 그래서 저희는 가장좋은 방법은 body 최하단에 script을 넣는것이 가장 좋습니다. 그럼 스크립트 로딩 순서를 제어해보죠 async 방식은 비동기 방식으로 html 중단되지 않고 진행이 됩니다 defer 문서가 다 ..

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

geolocation API는 사용자의 현재위치 정보를 가져올때 사용하는 javascript API 입니다 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다! 저는 여기서 geolocationAPI에 메소드인 getCurrentPosition()을 써서 메소드의 반환값인 coords.latitude 와 coords.longitude를 활용해서 값을 가져와 볼께요! 각각에 메소드는 어떤건가요? getCurrentPosition() : 사용자의 현재 위치를 가져오는 겁니다 coords.latitude : 소수로 표현된 위도 값 coords.longitude : 소수로 표현된 경도 값 그럼 한번 코드를 작성해 보겠습니다! html 을 작성해주시고! DOM으로 값을 변수로 담고 f..

javascript 배열 객체에서 제공되는 함수인 splice() 함수를 이용하면 위치에 요소 추가 or 삭제를 유용하게 할수있습니다. 즉 Array.splice() 함수는 원하는 위치의 요소를 추가 or 삭제를 합니다! 문법또한 이해하기 쉽습니다! Array.splice(시작점 , 길이 , 배열추가 , 배열추가) 이런식인데 아마도 코드를 보시면 훨씬 이해하기가 쉬울꺼 같습니다! vs 코드를 켜주시고 배열 안에 값을들 넣어주시고 배열을 담고있는 m 안에 배열함수 splice()에 5번째에 길이는 0이고 추가1 추가2 를 추가해줘 이런 문법입니다! 역시 결과물은 잘나왔네요!!! 5번째 index가 5번 이니까요ㅎㅎ 다른 방식으로 해보죠 index 1번 뒤에 1뒤에추가 2뒤에추가 추가해줘 이런 문법입니다 결..

함수안에 this라는 것을 정의할수 있고 this를 활용해서 bind를 써보겠습니다 먼저 함수안에 this를 담을 객체가 필요해서 먼저 객체를 생성하고 객체 안에 name에 값을 넣습니다 그리고 showIntorduce 함수를 만들어서 파라미터값에 here , home , phone 넣고 console.log() 안에 값들을 넣어보겠습니다! 그리고 함수.bind(생성한 객체를 넣습니다); bind 함수를 변수 값에 넣고 boundsay라는 그리고 거기에 인자값을 넘겨 주면 됩니다! call , apply 방식은 조금 다릅니다! 결과값이 잘나오네요!

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

이번엔 마지막 part3로 ajax 이용해서 서버에 데이터를 통신해서 받은 데이터값을 UI단에 출력해보겠습니다. 먼저 Html에 표시에줄 테그를 만듭니다! DOM 으로 movieList 값을 가져오고 tag 빈 문자열을 만듭니다! 그리고 tag안에 데이터 값을 출력해주는 겁니다! 그리고 마지막으로 innerHtml = tag 넣어주면 !!! api 호출을 해서 브라우저에 뿌려준 기본적인 ajax 비동기통시을 활용했습니다! 다음번에는 다른 형태에 api 가져와서 뿌려보겠습니다!

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

자바스크립트를 쓰다보면 객체 , 배열은 항상 필요한 존재죠! 그래서 반복문 또한 중요한 부분중 하나입니다! 오늘은 배열에 반복문과 객체에 반복문을 다뤄 보겠습니다! 지금 제가쓴 for문은 가장 기본적인 방식이고 배열 과 객체를 저런식으로 반복문을 활요해서 값을 뽑아올수 있습니다!!!!

JavaScript 프로젝트를 진행하다보면 코드양이 많아지고 복잡해집니다! 그래서 코드의 복잡성을 단순하게 만드는 여러가지도구중 객체라는 도구를 활용해서 코드의 복잡성을 줄이는 기술입니다. 객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것이라고 이해하시면 됩니다! 저는 node.js 기반으로 작업을해서 터미널에서 확인이 가능합니다! node.js 아니더라고 스크립트에서 브라우저 단에서 연습이 가능합니다! 배열에 형태 var 변수이름 = [' ',' ',' ']; 배열에 index 순서는 0 1 2 3 .... 이런식으로 읽습니다! 객체에 형태는 var 변수이름 = { key : value} 이번엔 객체를 수정하고 삭제 해보겠습니다 잘 수정되고 삭제 되었습니다!!! 출처 생활코딩

part1에서 기본적인 Ajax 원리를 알아보았다면 오늘은 실제 Api를 활용해봐요! 외부데이터를 받아노는 fetch API를 활용해서 받오겠습니다! PART1 참고해주세요 ㅎ API를 깊에 정의하면 어렵지만 저는 API를 정의한다면 잘만들어진 API에 사용방법을 알려줄께 그방법대로 우리의 API를 잘활용해봐 이렇게 이해해를 합니다 그럼 실제 API를 활용해보겠습니다 사이트는 https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx Eedpoint는 Api 접속하기위한 url ..

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 활용해서 마지막자식으로 추가하는것이..

태그에 속성을 다룰수 있는 Element 속성에 대해서 알아봐요! Element 속성 값을 제어 하는 기능들은 다음과 같습니다! - getAttribute(' 속성 ') - setAttribute (' 속성 ' , ' value ') - hasAttribute (' 속성 ') - removeAttribute(' 속성 ') 이렇게 4가지 있습니다! 한번 코딩으로 더 알아가봐요ㅎㅎ vs 코드를 켜고 아 참고로 t.id , t.getAttribute 같은 의미 입니다 방식이 다를뿐ㅎㅎ a에 href 속성 값을 바꾸고 싶다면 setAttribute로 속성 , 값으로 주시면 속성값은 바뀝니다! a에 title 추가 하고싶을때도 똑같은 방식입니다. 지우고 싶다면 removeAttribute 속성으로 지울수 있고 h..

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

AJAX (Asynchronous Javascript and XML) 저도 이기술을 공부할떄 조금 힘들었지만 언제가는 공부를 해야되고 알아야되는 분야이므로 오늘은 AJAX(Asynchronous Javascript and XML) 에 대해서 알아봐요! AJAX (Asynchronous Javascript and XML) 비동기 통신 이므로 웹페이지의 이동없이 필요한 데이터만 전송하는 기술이다 일반적인 경우 데이터 처리는 요청 순서대로 하지만 AJAX경우 순차적그로 진행하지않는다 비동기 통신의 여러방법 1.XML HttpRequest 객체 2.fetch Api 3.Axios 라이브러리 4.제이쿼리 동기 vs 비동기 동기는 순서대로 실행한다는 의미인데 ex: 1 2 3 4 있다면 1 처리 하고 2 처리 하고..

제이쿼리(jQuery)란? 제이쿼리는 오픈 소스 기반에 자바스크립트 라이브러리로 자바스크립트를 더욱 쉽고 편리하게 이해하고 사용할수있게 해주는 라이브러리 입니다!! 코드 자체가 이해하기 쉽고 사용하기 편리하기 떄문에 짧고 단순한 코더로 웹 페이지에 다양한 효과를 적용시킬수 있습니다!! 사용하기 쉽기 떄문에 인기가 있는 라이브러리 중하나입니다! 제이쿼리 더알아보기! jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simp..

filter 함수는 간다한게 요약하자면 조건에 맞는 요소들을 모아서 새로운 배열을 생성한다 라고 이해하시면 됩니다! 그럼 바로 예제로 들어가볼께요 vs를 켜고 그리고 나서 aaa배열에 12 이상에 숫자들을 출력해보자ㅎㅎ 번외로 요런 형태로도 출력이 가능해요!!!^^ 감사합니다!!ㅎ

안녕하세요!오늘은 Foreach 대해서 알아보겠습니다! ForEach 메서드는 무엇인가? forEach는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 값을 배열요소로 각각에 대해 값을 출력하는 형태입니다!forEach는 return 하는 값을 따로 모아서 어떤 처리를 하는 과정이 없기 때문에 변수에 할당하기 보다는 if , 반복문으로 바로 호출되는것이 일반적입니다!!   이해를 하기위해서 코드를 짜보았습니다! vs 켜주시고! 첫번쨰로배열을 만들고 ForEach 메서드를 사용 해보겠습니다! 그리고 나서 결과를 보면!!! 하나더 추가한다면!! 결과를보면 이렇게 name 값만 가져올수 있습니다 ㅎㅎ  부족한 정보지만 감사합니다~^^