꿈많은 DEVELOPER

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

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

이번엔 마지막 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문은 가장 기본적인 방식이고 배열 과 객체를 저런식으로 반복문을 활요해서 값을 뽑아올수 있습니다!!!!

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

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

항상 말하든 Jquery는 javascript라이브러리 이자 보다 편하고 짧은 코드로 강력한 기능을 구현할수 있는 라이브러리 입니다. 저도 jquery 자주 활용을 합니다. 오늘은 간단하고 기본적인 Tabmenu를 만들어보아요. jquery 쓰기 위해서는 jquery script 삽입을 해줘야되는데 저는 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-sou..

JavaScript & TypeScript Study 시작 최근에 IT기술이 빠르게 변하고 새로운 기술들도 많이 나오는거 같습니다. 그래서 기술에 변화의 3가지 유형에 대해서 공부를 해봤습니다 1. 변하지않는 기술 : 네트워크 , 운영체제 , 컴퓨터 시스템 2. 느리게 변하는 기술 : 프로그래밍 언어, 알고리즘, 보안, 프로그래밍 패러다임 3. 빠르게 변하는 기술 : 프레임워크, 라이브러리, 디자인패턴, UI UX 1번 기술과 2번기술은 3번기술에 비해 더많은 지식과 스터디 양이 필요하고 노력이 필요합니다. 3번기술에 노력과 지식이 필요없다는 말은 아니에^^ 3번기술은 우리가 많이 사용하는 프레임워크, 라이브러리이며 트렌드를 많이 타고 빠르게 변하는 기술이며 공부를 할때도 가장 접근해서 기술을 습득하기 ..

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다. javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다. 그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다. 기본적인 문법을 알아봐요! 저는 기본적으로 Jquery CDN 사용합니다! " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다. 이것을 다운받아서 사용하면 됩니다 Download the compressed, production jQuery 버전 이것을..

전역객체란? Window 객체는 식별자 Window를 통해서 얻을 수 있다. Window 최상위에 있고 DOM (Document Object Model)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스다 BOM (Browser Object Model) BOM은 전역객체인 window의 프토퍼티와 메소드를 제어할 수 있다. 현재 브라우저에 정보를 가르쳐주는 객체이다 JAVASCRIPT 객체지향언어이자 Window 객체안에있는 객체이다. vs 켜서 이코드를 작성해보자 그리고 chrom 개발자 모드를 켜고 f12 하지만 window.a 해도 값은 1입니다 그이유는 위에 설명했듯이 window 최상위 객체이기때문에 window 생략을하고 a값을 호출할수있습니다! Reference https://w..

개발 & 프로젝트를 진행할때 이메일 메신저를 통해서 협업을 하는것은 상당히 힘들고 어려운 일입니다. 그러한 상황을 개선하고나 쓰는 관리시스템중하나인 GIT에 대해서 알아보겠습니다! Git - 버전 관리 시스템의 종류 * 버전관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것입니다 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 - 하나의 중앙 서버로 여러 클라이언트들이 각자 필요한 데이터만 가져와서 작업을 하고, 다시 중앙 서버로 보내서 통합하는 방식 (CVS(Concurrent Versions System 동시버전관리) , SVN(SubVersion 형상관리)) 2. 분산 모델 - 하나의 중앙 서버가 존재하지만 여러 클라이언트들은 각자의 컴퓨터 저장소에 전세 사본을 가지고 작업하는 방식 Gi..

값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 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 처리 하고..

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

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