javascript(5)
-
[Windows] Node.js 설치 방법 안내
안녕하세요 코봉이입니다. 오늘은 Windows10에 Node.js 설치하는 방법을 공유하고자 합니다! 일전에 Apple 맥북에 설치하는 방법도 작성한 적이 있는데, 관심있으신 분들께서는 아래 게시물 참고 바랍니다^^ ↓↓↓↓↓↓↓↓↓↓↓↓ 2022.03.12 - [Apple 기기/MacBook Pro] - [Apple] Node.js Macbook 설치 방법 안내 [Apple] Node.js Macbook 설치 방법 안내 안녕하세요 코봉이입니다. node.js 설치에 조금 애를 먹어서 쉽게 하는 방법을 알려드리겠습니다. 저는 brew를 이용하여 다운로드 하였기 때문에 해당 방법으로 소개드릴게요. 먼저, 아래 링크 주 kobong.tistory.com Node.js 는 React를 시작하기 전에 꼭 필요한..
2022.05.12 -
Javascript Select 태그에 Option 추가 방법 (appendChild 이용)
안녕하세요 코봉이입니다. 오늘은 appendChild 함수를 이용하여 HTML Select 태그에 Option을 추가하는 방법에 대해 기록하겠습니다. 오늘의 목표에 대해 간략히 설명드리겠습니다. 기존의 Select 태그에 "이름"(disable, selected)과 "코봉이" 라는 Option이 이미 있고 "추가" 버튼을 누르면, 클릭 이벤트 리스너를 통해 (addEventListener → click) 3명에 해당하는 Option이 추가되는 컨셉입니다. 먼저 HTML 파일은 아래와 같이 준비해주세요. 이름 코봉이 추가 JavaScript source 파일은 위에서 확인 가능하듯이 "addOptionScript.js" 파일을 사용하겠습니다. 파일 경로에 대해서는 설명 안드려도 알아서 하실 수 있으시죠? ..
2022.04.09 -
JavaScript Array 배열 중복 제거 Set 구하는 방법
안녕하세요 코봉이입니다. 오늘은 JavaScript를 활용하여 배열(Array)의 요소들을 중복제거 Set 하는 방법을 알려드립니다. JavaScript에 기본으로 내장되어 있는 내장함수를 이용하는 방법인데요. 아래 예시를 참고하시기 바랍니다. let arr = ['A', 'B', 'C', 'D', 'A', 'E', 'C']; console.log(arr); // [ ‘A’, ‘B’, ‘C’, ‘D’, ‘A’, ‘E’, ‘C’ ] // Set 내장함수 활용하여 중복 제거하기 console.log(new Set(arr)); // Set { ‘A’, ‘B’, ‘C’, ‘D’, ‘E’ } // Set 이용하여 배열 만들기 let setArr; setArr = [... new Set(arr)]; console...
2022.04.09 -
JavaScript를 이용하여 Json File을 HTML에 삽입하는 방법
안녕하세요. 코봉이입니다. 오늘은 JavaScript 를 이용하여 HTML에 JSON File을 삽입하는 방법을 알려드리겠습니다. 그 비결은 바로 Fetch API에 있습니다! 지금부터 예시를 들어 한 번 보여드리겠습니다. // JSON 파일 생성 → /files/fileData.json {"name":"Kobong", "age":20, "city":"Dague"} files라는 폴더를 만들어 주고, fileData.json 파일을 생성 후 저장해주세요. index.html, script.js 파일 두 가지를 준비해 주셔야 하는데요. 우선 index.html 부터 아래와 같이 입력하세요! 위와 같이 index.html에 script.js 파일을 연결시켜 줍니다. .js 파일에서 Fetch Web API를..
2022.04.04 -
SweetAlert2 이용하여 HTML alert 창 꾸미기
HTML 삽입 미리보기할 수 없는 소스 안녕하세요 코봉이입니다. javascript 를 사용하여 alert 창을 띄우면 기본 style이 아래와 같이 심심한 모양이죠. 하지만, SweetAlert2.js를 연결하여 이용하면 더욱 더 예쁜 alert 창을 만날 수 있습니다. 아래 코드를 이용하면 위 캡쳐 사진처럼 Style이 더 예쁜 alert 창을 만나볼 수 있습니다. 추가 사용 방법에 대한 설명이나 예제는 아래 SweetAlert2 공식 홈페이지를 참고하시기 바랍니다. https://sweetalert2.github.io/#examples
2022.02.19