꿈많은 DEVELOPER

오늘은 URL에 대해서 알아보겠습니다.도메인(Domain) ?도메인은 IP 주소를 갖는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어준 서비스 입니다. 실제 컴퓨터와의 통신에서는 숫자로 표현된 주소를 사용하기 때문에 이를 변환시켜 줄 네임 서버가 필요합니다.  즉 우리가 기억하기 쉽게 만들어주는 것이라고 생각하면 됩니다. 대표적으로 naver , daum 우리가 모두 기억하는 도메인 이지만 실제 고유 IP번호를 가지고도 있습니다. URL(Uniform Resource Locator) ?URL은 도메인을 포함한 경로 입니다 사용자가 도메인 서버로 접속 할 떄 , 프로토콜과 서비스 타입을 통합적으로 적어준 것이라고 볼수있다.  예를 들어 이렇게 분류 될수 있습니다.https://www.naver.co..

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뒤에추가 추가해줘 이런 문법입니다 결..

오늘은 개발자의 필수인 git에 대해서 공부해요 말그대로 git은 소프트웨어 개발에서 소스 코드를 효과적으로 관리할 수 있도록 하는 무료 , 공개 소프트웨어로 많은 개발자들이 개발을 할때 사용 합니다 그래서 저또한 많이 공부 합니다! 오늘은 github에 만들 저장소에 이름을 바꾸고 티미널에 remote에 바뀐저장소 주소로 remote 해보겠습니다! 저기서 저장소에 이름을 바꾸면 새로운 url 주소를 복사합니다 그리고 cmd창을 틀고 터미널에 git remote set-url origin " 주소 " (쌍다운표안에) 치시고 git remote -v로 바뀐 원격 저장소를 확인 할수 있습니다! 이게 제가 바꾼 새로운 저장소에 remote 입니다! 위에 heroku는 따른 remote한 저장소입니다!

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

오랜만에 jquery 이용한 기능 구현을 해보네요!! 오늘은 일정 스크롤이 되면 gnb가 나타나는 코드를 짜보아요 여기서 써야되는 메소드는 offset 입니다 그리도 addClass and removeClass 기능 입니다! 그리고 scroll 이벤트 또한 ui구현할때 많이 쓰는 이벤트 입니다 click , mouseover , mouseout 등등처럼요 CodePen See the Pen gnbFloating by 유국현 (@yoogukhyeon) on CodePen. 한번씩 따라해주시면 더 도움이 되겠죠?ㅎㅎ 감사합니다!

오늘로서 Haker News Part API를 가져오고 UI를 구현하는 어플리케이션 마무리를 해봅니다 전체 코드는 저의 git에 있습니다! https://github.com/yoogukhyeon/FrontendProject1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com 저번에 말한 replace() 메소드를 활용해서 key value 값을 교체하는 javascript 메소드를 활용해봤습니다 댓글도 구현을했습니다! 이번..

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

이번 part 빈 template에 ui를 구현 해보겠습니다. 그리고 replace 써서 값을 넣어줘서 ui를 구현하는 문법을 사용해보겠습니다 그리고 댓글 ui 를 구현하는 로직을 짜보겠습니다 여기서 재귀함수라는 기술을 사용 해보겠습니다 저의 git에서 코드를 확인하실수 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code7 그리고 replace('a' , 'b') a에 값을 b로 바꾼다 라는 뜻입니다!!!! 여기서 replace 에대해서 공부할수있는 좋은 예시 였습니다! 댓글 함수도 만들어 보겠습니다. 인자값으로 comments 주고 스스로 comments값을 불러온다해서 재귀함수라고 합니다 빈 배열을 만들어서 push로 댓글에 대한 값과 u..

part 4 6 7은 코드 양이 별로 없어서 같이 업로드 하겠습니다! 일단 Element 요소로 UI를 만드는 것은 비효율적이기 떄문에 문자열을 통해서 UI를 구현하고 라우터만들어 페이지 이동을하고 메인에 paging 을 구현했습니다! 제 git에서 코드를 보실수 있습니다!!! https://github.com/yoogukhyeon/FrontendProject1/tree/code6 NewsList 빈 배열을 만들어서 push로 문자열을 구현했습니다! 그리고 라우터 부분에 hash를 통해서 페이지 이동을 구현했습니다! paging을 구현해보겠습니다 가장먼저 store에 currentPage 저장소를 만들어 줍니다 그리고 페이지 이동을 UI를 만들고 속성에 저장된페이지 이동 값을 넣습니다 결과물이 잘나오네요..

이번 part3는 코드 리팩터리를 했습니다.. 개발자의 숙명이죠...중복코드를 줄이는것이요..... 저도 한번 리팩터리 작업을 했습니다ㅎㅎ 여기서 중요한것은 함수에 인자를넣고 인자값을 바뀌면 값을 주는 그런 형태입니다!! 자 그럼 시작해보죠ㅎㅎ 제 git의 part3 코드입니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code3/part03_2%EA%B0%9C%ED%99%94%EB%A9%B4%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A6%AC ajax 중복 코드이기떄문에 함수로 묶어서 뿌려 주겠습니다! function getDate(인자){ ajax.open('get' , 인자값 , false) } 저자리는 url이 들어가는 자리입니다 ..

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

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 사용한다면 변수에 이름에 바꼇을때도 결과 값..

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

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

Haker News Api를 Ajax 활용해서 어플리케이션을 개발해 보겠습니다! Haker News Project 기본적인 어플리케이션 개발을 위한 기본 연습입니다! part1 부터 단계별로 나아가며 마지막에 기본적인 typescript 활용해보겠습니다! 다같이 공부해봐요!! Part1 = 12줄 Ajax 코드 짜기 코드참고는 저의 git에 올려두었습니다 https://github.com/yoogukhyeon/FrontendProject1/tree/code1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 developm..

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

사이트를 보시다보면 자주 볼수있는 floating 메뉴바죠ㅎㅎ 이것또한 jquery로 간단하게 만들수있습니다 scrollTop 기능만 잘 활용한다면 간단하고 쉬운코드로 만들수있습니다 Code Pen See the Pen floating by 유국현 (@yoogukhyeon) on CodePen. 이렇게 쉬운 코드롤 floating menu bar 완성입니다!

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

요즘 웹사이트보시면 go-top이라고 window 스크롤 내리면 나오고 클릭을 하면 최상단으로 올라가는 화살표를 보실수 있었죠? 이것또한 쉬운 jquery 코드로 만들수 있습니다. 다같이 해보죠! 시작하기전에 Jquery cdn 코드에디터에 삽입하겠습니다! https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries. developers.google.com Code &n..

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

요즘 프론트엔드 개발환경은 굉장히 복잡하게 이루어져 있고 프론트엔드 개발환경은 제공되는 tool 과 tool 때문에 빠르게 변화합니다. 이러한 이유는 웹앱에 규모가 굉장히 커지고 있기 때문입니다. 또한 웹개발을 하면서 javascript 얼마나 큰 영향력을 가지고 있는지 알수있습니다. javascript 사용하는 개발자라면 ES6 표준 , ES5 , ES2020 등 단어들을 들어본적 있으실 겁니다 ES = ECMAScript 약자 입니다 ECMAScript 란? ECMAScript는 말 그대로 Ecma라는 기관이 만든 script 언어 이며, ECMA-262 표준를 따르고 있다. ECMAScript는 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름이다. 보편적으로 ES2015 이후로 대부분 개..