꿈많은 DEVELOPER

사이트를 보시다보면 자주 볼수있는 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 이후로 대부분 개..

항상 말하든 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..

제가 다니는회사에서 프론트단에서 관리하는 큰규모에 사이트가 있었습니다. 그 사이트를 유지보수를 하다보면 여러가지 이슈들이 있었지만 그중에서도 캐시(cache)문제 트래픽(traffic)문제가 있었다. 나도 이해를 잘못하고 기획팀 디자이팀에게도 설명할 정도에 수준이 안되어서 다같이 힘들었던 기억이 있습니다........그래서 cache & traffic 대해서 알아봅시다! 캐시 & 쿠키를 사용 하는 이유? 쿠키를 사용 하는 이유? 쿠키와 캐시를 사용하는 가장큰이유는 서버가 사용자에게 빠른 검색 결과와 정보를 제공하기 위함 입니다. 웹 사이트를 돌아다니다보면 아이디를 기억하고 있는 사이트 또는 전에 검색한 키워드 들이 저장되어 있는 경험을 해본신적이 있을겁니다. 그럴수 있었던 이유는 본의 즉 client 컴..

개발 & 프로젝트를 진행할때 이메일 메신저를 통해서 협업을 하는것은 상당히 힘들고 어려운 일입니다. 그러한 상황을 개선하고나 쓰는 관리시스템중하나인 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 처리 하고..

제이쿼리(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 값만 가져올수 있습니다 ㅎㅎ  부족한 정보지만 감사합니다~^^

요즘 개발에서 JavaScript 활용도가 높아지면서 Node.js를 활용하는곳이 점차 늘고 있습니다! 저또한 Node.js를 Study하는 중입니다!!ㅎ 그렇다면 Node.js란 무엇일까요???? 웹어플리케이션을 개발할때 JavaScript를 사용하게 되는데 모든 브라우저는 JavaScript 코드를 해석하기위해서 자바스크립트 엔진을 내장하고 있습니다!ㅎ 쉽게 설명하자면 - 백엔드 개발자가 사용하는 언어 - 서버에서 실행되는 자바스크립트 언어 (브라우저에서쓰는 자바스크립트 언어하고는 달라요!) - Google V8 JavaScript 엔진을 사용하여 코드를 실행하고 기본 모듈로 자바스크립트로 사용됩니다. - Node.js는 웹서버(Apache, IIS, Zeus ..)과 같은 소프트웨어가 필요없이 웹 ..