꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서본론에 앞서 리액트(react) 프로젝트를 진행 중에 쿼리 스트링 다루기 위해서 URLSearchParams API를 활용해 쿼리 스트링을 다루면서 겪은 저의 경험을 공유해 드립니다.  "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ URLSearchParams 개념URLSearchParams는 JavaScript 웹 API중 하나로 URL 주소에서 가장 다루기 까다로운 쿼리 스트링을 쉽게 다룰수 있도록 돕는 객체입니다. URLSearchParams MDNhttps://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams URLSearchParams - Web APIs | MDNThe URLSearchParams interface..

🤷‍♂️ 본론개발을 하다 보면 가격표, 금액을 표시해야 될 때가 있습니다.10000원 가격을 표시해야 된다고 가정하면 10000 보다 10,000 가격 표시가 가독성이 더 좋습니다.가격표와 금액은 개발을 하면서 자주 마주할수 있는 데이터이며 단순히 숫자 그대로 표시하는 것보다 콤마와 함께 표시해 주는 것이 좋습니다.사용자 편의성을 위해서 가격표, 금액을 표시할때 자바스크립트(javascript)에서 콤마를 표시하는 다양한 방법을 알아보겠습니다. "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 3자리마다 콤마를 추가하는 방법  1. toLocaleString() 메서드 사용toLocaleString() 메서드를 사용하면 숫자를 지역별 형식에 맞게 변환할 수 있습니다.이 방법은 가장 많이 쓰이는 방법..

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기  "> HTML 삽입미리보기할 수 없는 소스 가장 중요한 객체의 개념과 다루는 방법https://cometruedream.tistory.com/261 HTML 삽입미리보기할 수 없는 소스 배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/259 HTML 삽입미리보기할 수 없는 " data-og-host="cometruedream.tistory.com" data-og-source-url="https://cometruedream.tistory.com/261" data-og-url="https://cometruedream.tistory.com/261" data-og-image="https://scrap..

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기자바스크립트에서 객체와 배열은 가장 중요한 데이터 자료구조 입니다.javascript 객체(object)는 key와 value 형태로 이루어져 있으며 객체에는 많은 유용한 기능들이 있지만 객체를 읽고 key와 value 값에 대한 목록이 필요한 상황이 많습니다.자바스크립트에서는 이러한 경우를 위해서 Object.keys()와 Object.values() 함수를 사용하면 객체를 유용하게 활용할 수 있습니다.Object.keys()와 Object.values() 함수의 개념과 사용방법에 대한 예제를 알아보겠습니다. "> HTML 삽입미리보기할 수 없는 소스 가장 중요한 객체의 개념과 다루는 방법https://cometruedream.tistory.com/261..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개cometruedream.tistory.com  배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트]..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스 배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/259 HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) redu" data-og-host="cometruedream.tistory.com" data-og-source-url="https://cometruedream.tistory.com/259" data-og-url="https://cometruedream.tistory.com/259" data-og-image="h..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개cometruedream.tistory.com  배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트]..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법🤷‍♂️ 본론에 앞서배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합cometruedream.tistory.com  배열 map(), forEach() 인기있는 메서드 사용법에 대해 알아보기https://cometruedream.tistory.com/253 [자바스크립트] 배열(array)을 처리하는 인기있는 ..

🤷‍♂️ 본론에 앞서배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합치는 것에 가장 중요한 내장함수 중 하나입니다.join() 배열 메서드를 더 잘 활용할 수 있도록 알아보겠습니다. 배열(array)을 처리하는 인기 있는 메서드 map(), forEach() 개념과 차이점https://cometruedream.tistory.com/253 [자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점🤷‍♂️ 본론에 앞서자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다. 여러 아이템을 저장..

🤷‍♂️ 본론에 앞서자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다. 여러 아이템을 저장하는데 사용되는 배열과 이를 파싱하며 새로운 데이터를 생성하고 조작하는데 필요한 자바스크립트 내장함수인 map(), forEach()라는 두 가지 인기 있는 배열 메소드에 대해 알고 계실 겁니다. 이 두 배열 메소드는 배열에 루프를 처리하는 기능이 비슷하지만 중요한 차이점이 있습니다. 이 차이점을 공부하여 배열 메소드를 더 효율적으로 활용할 수 있도록 알아보겠습니다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 배열(array)이란?배열은 여러 개의 아이템을 순서대로 저장, 추가, 삭제할 수 있는 자료구조입니다. 배열은 각 요소에 인덱스..

🤷‍♂️ 자바스크립트 내장 함수란?자바스크립트를 효율적으로 활용하려면 내장 함수를 잘 사용해야 합니다.내장 함수는 자바스크립트에서 미리 선언된 함수로, 호출만으로 사용할 수 있습니다.자바스크립트 언어를 사용한다면 기본적으로 제공하는 함수들을 활용해서 다양한 작업을 쉽고 효율적인 코드로 사용할 수있게 도와줍니다. javascript map() 함수 알아보자!https://cometruedream.tistory.com/7 javascript map() 함수 알아보자값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다  vs코드를 여시고 let getStartedarr 배열에cometruedream.tisto..

🤷‍♂️ replaceAll is not a function 오류? 제가 운영하는 커뮤니티에 크롤링 로직에서 replaceAll is not a function 오류가 발생하면서 크롤링이 제대로 되지 않고 있었다. 오류 로그를 확인했는데도 정확한 원인을 파악하지 못했다. 본론에 들어가기 앞서 NODE.JS 무엇인가? https://cometruedream.tistory.com/2 Node.js 는 무엇인가? 요즘 개발에서 JavaScript 활용도가 높아지면서 Node.js를 활용하는곳이 점차 늘고 있습니다! 저또한 Node.js를 Study하는 중입니다!!ㅎ 그렇다면 Node.js란 무엇일까요???? 웹어플리케이션을 개발할때 JavaS cometruedream.tistory.com replaceAll ..

🤷‍♂️ 본론에 들어가기 앞서 웹 개발을 하다 보면 B 위 HTML 문서는 브라우저에서 다음과 같이 순차적으로 처리가 됩니다. A가 화면에 출력됨 script.js 파일을 내려받아 자바스립트 코드가 실행됨 B 가 화면에 출력 * HTML은 동기식으로 한줄한줄 읽어나가는 특징을 가지고 있다. HTML 삽입 미리보기할 수 없는 소스 🤷‍♂️ defer vs async 속성? 전통적으로 script 요소를 head 요소 안에 넣도록 배우는 경우가 많지만 실제 프로젝트 or UI & UX 측면에서 body 요소 제일 마지막에 script를 넣어서 사용자에게 최적화된 웹페이지 경험을 줄 수 있다. 미리 HTML 그려주고 script를 렌더 하는 방식이다. Defer 속성 정의 요소에 defer 속성의 정의 def..

🤷‍♂️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해 자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를..

javascript 활용해서 carousel 구현 했다. 웹페이지에서 자주 볼수있는 swiper를 라이브러리가 아닌 javascript로 구현했다. 커스터마이징으로 기능 & 코드를 개선한다면 실무에서도 적용이 가능할꺼 같다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript/blob/main/carousel.html GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 가장 기본적인 HTML, CSS 구축..

javascript 활용해서 더미 문단을 만드는 기능을 구현했다. 프로젝트시 무작위 문단 or 문장이 필요할 경우에 활용하면 좋다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 필요한 dom 찾는다. 2. form submit event 만든다. 3. input 값을 parseInt 숫자로 변환 4. switch문을 활용해서 예외처리 5. text..

javascript 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. ex: 강의에 자주묻는 질문들을 정리, 비즈니스 정보를 쉽게 제공 등등... Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 질문 dom을 찾는다. 2. 찾아온 dom을 순회해서 각..

카운트다운 시계를 javascript 메소드를 활용해서 구현했다. 새로운 제품이 출시되거나 이벤트 상품이 출시되면 할인 or 각종 카운트다운 이벤트가 종료될때 사용될 수 있는 기능이다. 비즈니스에서 유용하게 사용될 수 있는 기능이다. ex: 할인 기간동안은 구매 가능 기간 종료우 구매 불가능 등등... Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. ..

랜덤으로 배열에 데이터를 변경시켜 데이터를 변경하는 경우에 Math.random() & Math.floor 사용해서 구현했다. 이 기능뿐만 아니라 가격, 숫자등등 다양하게 값을 구하는데 활용성이 좋은 함수다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. quotes 배열에 데이터를 만들어준다. 2. quoteFun 함수를 선언한다. 3. 보여줄 t..

다양한 사이트에서 버튼을 클릭하면 텍스트를 복사해서 copy할 수 있는 기능을 사용한다. 복사기능을 구현하는데는 execCommand API를 사용하거나 clipboard API를 사용하는 두 가지 방법이 있다.* clipboard API 최신 스펙으로 지원하지 않는 브라우저가 많습니다.  저는 execCommand API를 활용해서 클릭시 복사기능을 구현했다.  Github Source ☝ 구현 소스를 보실수 있습니다.https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascriptContribute to yoogukhyeon/vanilla_javascript development by creating an ..

🤷‍♂️ 화살표 함수? 화살표 함수는 ES6에 도입된 새로운 기능으로 일함 함수보다 간결하고 짧게 작성할 수 있다. 일반 함수와 화살표 함수는 동작 방식은 비슷하지만 몇가지 차이점이 있다. 🤷‍♂️ 구문? 더짧은 코드로 함수를 선언할 수 있다. 일반함수 function addFunc(x, y) { return x + y; }; 화살표 함수 let addFunc = (x, y) => { return x + y }; 가장 중요하면서 간결하게 사용할 수 있는 방법으로 return문을 생략할 수 있다. 화살표 함수는 본문이 짧은 경우 중괄호와 return문을 생략할 수 있습니다. 생략 전 let addFunc = (x, y) => { return x + y } 생략 후 let addFunc = (x, y) =>..

🤷‍♂️ FormData란?FormData 알아보기 앞서 먼저 파일이나 이미지를 서버에 전송하는 경우에 중요한 개념인 multipart/form-data 알아야한다.multipart/form-data 간략한 정리: http 메시지에 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다. 즉 이미지, 파일 등이 png,  jpg 파일 자체가 전송되는 것이 아니고 인코딩된 데이터로 전송된다. 이미지, 파일 등을 서버로 보내줄때 FormData 객체가 많이 사용이 된다.  // FormData 기본 문법// 자바스크립트로 직접 form 태그를 생성let formData = new FormData(); // 새로운 폼 객체 생성formDa..

🤦‍♀️ Javascript 공부전에 알면 좋은것 자바스크립트는 두 가지 종류의 값이 있다. 하나는 Primitive Value(원시값)이고, 다른 하나는 Reference Value(참조값)입니다. 원시값: number, string, boolean, null, undefined 참조값: array, function, object 🤳 Javascript 에서 boolen 결과가 false로 판명되는 것들은? undefined, null NaN 0, -0 " " false 다음과 같이 7가지 정도의 boolen 결과값은 false로 판명이 된다. 🤳 주의할점? 주의할 점은 빈 문자열은 false 이지만 빈 배열, 빈 객체는 true라는 것이다. > Boolean( "" ) false > Boolean( ..

🤳 ESLint & Prettier 정확한 차이? ESLint 와 Prettier는 둘다 코드 컨벤션을 도와주는 역활을 한다. 둘중에 하나만 써도 되는데 왜 둘을 같이 사용하는 경우가 많다. ESLint 와 Prettier 다른 차이가 있기 때문에 둘을 같이 사용한다. "eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다." 그 차이에 대해서 알아보자. ⌨ ESLint 개발중 기능을 구현 할때, 한개의 기능을 구현하기 위한 엄청나게 많은 방식들이 있다. // function 키워드 사용 function foo() { ... } // arrow function 사용 const foo = () => { ... } const Temps = [1,..

자바스크립트로 개발하던중 selector로 html 요소들을 다뤄야 할때가 있을때 마다 getElemetById 와 querySelector의 차이에 대해서 잘 몰랐습니다. 두개의 selector에 차이를 알아보았습니다. getElemetById() 란? getElemetById(id) element = document.getElementById(id); id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다. querySelector() 란? querySelector(selector) element = document.querySelector(selectors); selector의 요소와 일치하는 document안에 첫번째 엘리먼트를 반환한다. 일..

요즘 많은 WEB에서 볼수 있는 기능입니다. See the Pen progress bar by 유국현 (@yoogukhyeon) on CodePen.

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

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