반응형 Programing23 [JavaScript] 배열에서 조건에 맞는 값만 추출하기! filter 함수 사용법 배열에서 특정 조건에 해당하는 값만 추출하고 싶을 때 filter 함수를 이용하면 조건에 충족하는 값만 추출할 수 있습니다. 사용방법이 그렇게 어렵지 않기 때문에 간단하게 사용할 수 있습니다. 예시를 몇가지를 들어서 사용방법에 대해서 알아보도록 하겠습니다. filter 함수 var arrays = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; arrays = arrays.filter(function(val, idx) { console.log(val); // 결과 : 1, 3, 5, 7, 9, 11, 13, 15 17, 19 배열안의 값 console.log(idx); // 결과 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 배열의 순번 return val; // 리턴 }); .. 2022. 9. 27. [Font Awesome] 5 & 6 cdn 및 사용법 FontAwesome은 CSS를 이용한 아이콘 툴킷으로 제공하는 css파일을 이용하면 제공하는 아이콘들을 간단하게 사용할 수 있습니다. 무료 버전과 프로 버전이 있어서 프로 버전에서 제공하는 아이콘이 훨씬 다양하지만 무료 버전으로도 개인 사이트에서는 충분하기 때문에 무료 버전 기준으로 확인해보겠습니다. FontAwesome 도 다양한 버전이 있지만 최근 버전인 5와 6버전을 기준으로 확인해보겠습니다. Font Awesome 5 CDN Font Awesome 6 CDN FontAwesome에서 제공하는 아이콘들은 해당 사이트에서 확인 할 수 있습니다. https://fontawesome.com/ 아니면 직접 검색포털에서 fontawesome으로 검색하여 접속하셔도 됩니다. FontAwesome의 사이트는 .. 2022. 9. 26. [JavaScript] 문자열 구분자로 자르기 split 특정 문자열을 기준으로 값을 구분 할 때가 있습니다. 구분자가 있다면 javascript에서는 특정 구분자를 이용하여 문자를 잘라 배열 형태로 받을 수 있습니다. javacript의 split 함수를 이용하면 되는데, 간단하하게 이용하는 방법에 대해서 알아보도록 하겠습니다. 구분자로 문자열 자르기 var animals = '강아지;사자;고양이;말;기린'; // 동물 목록 console.log(animals) // 결과 '강아지;사자;고양이;말;기린' var animal = animals.split(';'); // 동물들 구분자인 ;(세미콜론)으로 split console.log(animal) // 결과 ['강아지', '사자', '고양이', '말', '기린'] console.log(animal.length.. 2022. 9. 23. [JavaScript] 변수 타입 확인 방법 typeof JavaScript의 변수들의 타입을 확인이 필요할 때가 있습니다. 타입을 체크하여 특정 타입만 활용할 때 필요할 수 있습니다. JavaScript의 기본 함수로 간단하게 체크가 가능합니다. 사용 예제를 통해 간단하게 사용방법에 대해서 알아보도록 하겠습니다. 변수의 타입 확인하기 var typeA = [1, 2, 3]; var typeB = 123; var typeC = '123'; // typeof 함수로 변수의 타입 체크 console.log(typeA); // 결과 'object' console.log(typeB); // 결과 'number' console.log(typeC); // 결과 'string' // type 활용 예제 if (typeof(typeA) == 'object') { consol.. 2022. 9. 23. [JavaScript] 세자리 콤마 정규식으로 처리하기 숫자로 된 부분을 화폐로 표시하기 위해 일반적으로 3자리 마다 콤마를 표기해줘야 할 때가 있습니다. JavaScript의 정규식을 이용하면 간단하게 처리가 가능합니다. 간단하기 때문에 바로 확인 해보겠습니다. 정규식으로 세자리 숫자마다 콤마 var number = 10000000; // number 변수에 숫자 입력 console.log(number); // 결과 10000000 number = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 정규식으로 변환 console.log(number); // 결과 10,000,000 위의 예제와 같이 일반적인 숫자를 정규식으로 변환하면 3자리 숫자마다 ,(콤마)를 입력하여 화폐 단위처럼 변한 것을 확인할.. 2022. 9. 23. [JavaScript] 시간 지연 함수과 시간 반복 함수 setTimeout, setInterval Javascript에서는 특정 시간이 지난 후 이벤트가 호출되도록하는 함수와 특정 시간마다 반복이 되게하는 함수가 있습니다. 이벤트를 반복하거나 일정시간을 지연하고 실행해야 되는경우가 간혹 생기는데 이런 경우 사용할 수 있습니다. 각 함수는 setTimeout과 setInterval입니다. 해당 함수를 사용하는 방법에 대해서 간단하게 알아보도록 하겠습니다. 시간 지연 함수 setTimeout setTimeout(function() { // setTimeout 함수 console.log(1); // 실행 할 이벤트 }, 5000); // 5000ms -> 5초 // 5초 뒤 // 결과 1 setTimeout 함수는 일정 시간을 지연한 뒤 함수 안에 있는 이벤트를 실행하는 함수입니다. 위의 예제와 같이 사용.. 2022. 9. 23. [JavaScript] 삼항연산자란? 삼항연산자 조건문 사용방법 Javascript에서는 조건문 중에 삼항연산자라는 조건문이 존재합니다. 여러 조건문(If, Swich Case 등..) 이 있지만 삼항연산자에 대해서 간단히 알아보도록 하겠습니다. 삼항연산자의 형태는 아래와 같습니다. 조건 ? 참 : 거짓 굉장히 간단하며 소스 예제를 통해서 보겠습니다. var count = 1; // count에 1이라는 숫자 입력 console.log(count); // 출력 : 1 count = count == 1 ? '맞음' : '틀림'; // 삼항연산자로 비교, 조건 ? 참 : 거짓 console.log(count); // 출력 : 맞음 상단과 같이 조건에 맞으면 첫번째 값이 호출되며, 조건에 맞지 않으면 두번째 값이 호출되는 것을 확인할 수 있습니다. 삼항연산자는 if els.. 2022. 9. 20. [React-Native] 안드로이드 기본 텍스트 색상 지정하기 Android default font color React-Native 프로젝트에서 안드로이드로 앱 기동 시 텍스트들의 색상이 정상적으로 보이지 않아서 Text의 기본 색상을 설정하는 방법에 대해 알아보겠습니다. /android/app/src/main/res/values/styles.xml 상단 경로에 있는 styles.xml 파일을 열어줍니다. 그리고 아래와 같이 기본 색상 컬러 값을 지정합니다. ※ 관련 포스팅 2022.08.09 - [Programing/React-Native] - [React-Native] react-native-camera-kit Build failed with 2 errors 2022.08.09 - [Programing/React-Native] - [React-Native] Unable to load script. Make .. 2022. 8. 9. [React-Native] Unable to load script. Make sure you're either running Metro 오류 React-Native npx react-native run-android로 앱 실행 시 아래와 같은 오류가 발생할 때가 있습니다. Unable to load script. Make sure you're either running Metro (run 'npx react-natvie start') or that your bundle 'index.android.bundle' is packaged correctly for release. Metro가 정상적으로 켜지지 않았을 경우가 있음으로 1. 터미널에서 해당 프로젝트로 이동 2. npx react-native start 3. 에뮬레이터 화면에서 RR 입력 새로고침되면서 빌드됩니다. ※ 관련 포스팅 2022.08.09 - [Programing/React-Na.. 2022. 8. 9. [React-Native] react-native-camera-kit Build failed with 2 errors React-Native에서 카메라 기능을 사용하기 위해서 react-native-camera-kit를 설치 후 아래와 같은 오류 발생 Build failed with 2 errors react-native-camera-kit/android/build.gradle' line: 2 Plugin with id 'kotlin-android' not found. 환경 : project react-native version 0.69.1 - 해결 방법 - 1. /android/build.gradle에 kotlin_version 설정 buildscript { ext { ... kotlin_version = '1.5.10' } 2. buildscript.repositories와 allprojects.repositorie.. 2022. 8. 9. [JavaScript] 숫자, 문자 배열 간단하게 정렬하는 방법 Sort 자바스크립트의 배열에서 숫자나 문자를 가지고 있는 변수들이 있는데 순서가 뒤죽박죽일때, 정렬이 필요할 때가 있습니다. 간단하게 sort 함수를 이용하여 정렬을 할 수 있는데요. 간단하게 이 함수를 이용하여 정렬하는 방법에 대해서 알아보겠습니다. 상단의 예제와 같이 순서가 없이 숫자로 이루어진 배열(Array)이 존재합니다. 콘솔을 이용하여 출력해보면 입력 되어있는 순서대로 출력이 되는 것을 확인할 수 있습니다. 숫자 배열 정렬 방법 숫자로 되어있는 배열을 정렬하는 방법은 상단의 화면과 같습니다. 사용 방법은 [변수].sort(function(a, b) { return a - b; } ); 위와 같이 실행하면 정렬된 숫자들이 변수 array에 입력되어 출력되는 것을 확인할 수 있습니다. 숫자 배열 역순 정.. 2021. 8. 2. [Java] 프로그램 처리 시간 계산하는 방법 Java에서 코드를 실행할 때, 해당 코드들의 실행 시간을 측정할 때가 필요할 수 있는데요. 이 때 간단하게 처리 시간을 측정하는 방법에 대해 알아보겠습니다. 내용도 짧고 간단해서 하단의 예제를통해 적용하시면 되겠습니다. 처리 시간을 구하는 예제 // 처리 시작 시간 long startTime = System.currentTimeMillis(); /* 프로그램 처리 구문 */ ... ... ... /* 프로그램 처리 구문 */ // 처리 종료 시간 long endTime = System.currentTimeMillis(); // 처리 시간 표시 System.out.println("처리시간 : " + (endTime - startTime) / 1000.0 + "초"); 출력 결과 출력 결과 : 처리시간 :.. 2020. 12. 31. [JavaScript] 문자열 대문자 소문자 변환 하기 toUpperCase(), toLowerCase() 변수를 대문자나 소문자로 변환하는 방법은 아주 간단하기 때문에 바로 적용이 가능하고 확인하실 수 있습니다. 문자열 변환에 사용되는 함수 사용방법은 소문자 -> 대문자 "문자열".toUpperCase() 대문자 -> 소문자 "문자열".toLowerCase() 기억하면 됩니다. 아래에 예시를 통해 간단히 확인만 해보도록 하겠습니다. 변수 s에 입력된 소문자 "abcd"를 대문자로 변환하는 예시입니다. toUpperCase()를 이용하여 문자열이 모두 대문자로 출력되는 것을 상단의 출력 결과를 통하여 확인할 수 있습니다. 이번에는 반대로 변수 l에 입력된 대문자 "ABCD"를 소문자로 변환하는 예시입니다. toLowerCase()를 이용하여 모두 소문자로 변환되어 출력되는 것을 확인할 수 있습니다. 마지막으로.. 2020. 7. 27. [JavaScript] 특정 문자 또는 문자열 포함 여부 및 위치 찾기 indexOf() 스크립트의 변수에서 특정 문자나 문자열이 포함되었는지 확인하기 위해 자주 사용되는 방법인 indexOf의 사용방법에 대해 알아보겠습니다. indexOf는 해당 문자에 대한 위치의 값을 반환하고 일치하지 않을 때에 -1의 값을 반환합니다. 간단하게 사용방법을 통하여 알아보도록 하겠습니다. 변수 하나를 선언하여 "ABCD"라는 문자열을 입력했습니다. 이 변수에 특정 문자가 포함되어있는지 확인해보겠습니다. indexOf의 기본 사용 형태는 "문자열".indexOf("찾을 문자열"); 입니다. 위의 예시에서는 val 변수에 "B"라는 문자가 포함되어있는지 확인하는 예시입니다. "B"라는 문자가 포함되어있고 "ABCD"의 1번째 위치(0번 부터 시작)를 반환하여 1을 출력하는 것을 확인할 수 있습니다. 이번에는 .. 2020. 7. 27. [JavaScript/자바스크립트] Switch Case 문 예제로 배워보기 이번 포스팅에서는 자바스크립트의 제어문 중 하나인 Switch(스위치)문에 대해서 알아보겠습니다. Switch문도 일반적인 제어문과 같이 조건에 따라 실행하거나 실행하지 않는 제어문이며, 간단하게 사용할 수 있습니다. 기본형태는 아래와 같다고 할 수 있습니다. switch(값) { case 값1: 행위1; break; case 값2: 행위2; break; default: 행위3; break; } Switch 안에 값을 입력받고 그 안에서 Case 구문을 입력하여 Case에 맞는 값이 들어왔을 때 조건이 실행되는 구조입니다. Switch / Case / Default / Break 4가지의 구문입니다. 설명으로 하는 것보다 예제를 통하여 보도록 하겠습니다. 상단의 예제화면입니다. testSW라는 함수를 하.. 2020. 5. 2. JavaScript에서 Base64 Encode Decode 방법과 예제로 확인하기 Base64를 이용한 암호화를 할 때가 있는데 JavaScript에서도 간단히 사용할 수 있습니다. 바로 아래는 한글이 아닌 값을 base64로 암호화하거나 복호화 하는 방법입니다. /* 암호화 Encode */ btoa('12345'); // MTIzNDU= /* 복호화 Decode */ atob('MTIzNDU='); // 12345 한글을 포함한 경우에는 정상적으로 변환이 되지 않기때문에 encodeURI를 이용하여 데이터를 한번 감싸서 변환하셔야 합니다. 한글 데이터는 아래와 같이 암·복호화를 하시면 되겠습니다. /* 암호화 Encode */ btoa(encodeURIComponent('한글')); // JUVEJTk1JTlDJUVBJUI4JTgw /* 복호화 Decode */ decodeURIC.. 2019. 12. 9. java.lang.ClassNotFoundException: org.apache.tomcat.dbcp.dbcp.BasicDataSourceFactory 오류 해결 톰캣을 설치하여 기동 중 아래와 같은 에러가 발생하였습니다. Could not load resource factory class [Root exception is java.lang.ClassNotFoundException: org.apache.tomcat.dbcp.dbcp.BasicDataSourceFactory] 무슨 문제인지 인터넷 검색을 찾아보니 톰캣 8 버전이상과 톰캣 7 이하의 버전에서의 Factory 부분의설정이 달라져서 생긴 문제였습니다. org.apache.tomcat.dbcp.dbcp.BasicDataSourceFactory 오류 ▶ 톰캣을 설정하여 기동할 때 오류가 발생하였습니다. ▶ 오류가 발생한 Server.xml 파일입니다.▶ 톰캣 8 이상과 7 이하의 dbcp 부분이 변경되었습니.. 2019. 1. 11. 자바 구버전 / 자바 이전버전 다운로드 방법 프로젝트나 공부를 위해 자바를 설치할 때가 있습니다.자바는 오라클에서 다운로드를 제공하고 있지만, 자바 다운로드메뉴에 접속하여 보면늘 최신버전의 자바 버전을 메인에 노출하고 있습니다. 당연히 최신버전의 자바를 설치하는게 좋을 수도 있지만 이전 버전의 자바를 다운로드 받아야되는상황도 빈번히 발생할 수 있는 사항이며, 간단히 찾을 수 있는 내용이므로 이번 포스팅 내용을통하여 방법을 숙지하여 놓으시면 추후 같은 상황 발생 시 쉽게 다운로드 받으실 수 있을 것입니다. 자바 구 버전 / 자바 이전버전 다운로드 방법 https://www.oracle.com/kr/index.html 자바 다운로드를 위한 상단의 오라클 홈페이지로 이동하는 링크 클릭 메뉴 -> Java -> Java SE 순서대로 클릭 Java Pla.. 2018. 12. 18. css a 태그 링크 (link,visited,hover,active) 사용 방법 HTML에서 해당 페이지에서 다른 특정 페이지를 호출할 때 기본적으로 a태그를 이용합니다.a태그는 링크의 기능을 가지고 있는 태그이며, 많은 웹페이지에서 사용되고 있습니다.해당 태그를 사용하여 링크를 거는 것은 간단하지만 a태그에 몇가지 속성이 존재합니다.총 4개의 속성이 존재하는데 각 link, visited, hover, active가 존재하며, css에서 해당 속성을이용하여 링크에 특정 액션을 캐치할 수 있어, 이것을 응용하여 스타일을 지정할 수 있습니다. 이번 포스팅에서는 해당 속성들에 대한 기능과 예제로 화면으로 간단히 배워갈수 있도록 하겠습니다. a태그(Tag) a:link, a:visited, a:hover, a:active 사용 방법 a:link 해당 링크를 방문하기 전 상태 a:visit.. 2018. 12. 17. 자바스크립트 alert(경고창), confirm(선택창), prompt(입력창) 사용 방법 인터넷을 사용하다 보면 간혹 알림이나 경고의 메시지를 나타내는 작은 창을 접하신 적이있으실텐데, 자바스크립트를 이용하여 사용자들에게 무엇인가를 알려야 될 때 자주 사용하는기능입니다. 알림을 나타내는 스크립트는 alert , confirm , prompt 가 존재합니다.상단의 스크립트 모두 사용자들에게 텍스트를 출력해주는 스크립트지만 조금씩 기능이달라서 상황에 맞게 필요한 스크립트를 이용하면 됩니다.사용법이 간단하고 자바스크립트의 기본이지만, 많이 사용되는 스크립트이기 때문에이번 포스팅으로 알고가시게 되면 많은 도움이 되실거라 생각됩니다. JavaScript alert, confirm, prompt 사용 방법 alert(경고창) 사용 방법 alert을 호출하는 기본 스크립트 구성입니다. html을 호출하면.. 2018. 12. 16. 톰캣 이전 버전 다운로드 받는 방법 톰캣을 예전버전을 다운로드 받고 싶은데, 낮은버전을 어디서 받으셔야 되는지 찾는게어려우신 분들이 계셔서 간단히 톰캣 이전버전을 다운로드 받을 수 있는 방법에대하여 알아보겠습니다. Tomcat 이전 버전 다운로드 받는 방법 https://archive.apache.org/dist/tomcat 상단의 톰캣 아카이브 사이트로 접속합니다.이 포스팅에서는 예제로 톰캣 4.1.29 버전을 다운로드 받아 보겠습니다. 다운로드 받고 싶은 버전의 톰캣 디렉토리 클릭 다운로드 받을 톰캣 세부 버전의 디렉토리 클릭 톰캣을 다운받기 위해 bin 디렉토리 클릭 Windows 환경 : zip 파일 다운로드Linux 환경 : tar.gz 파일 다운로드 상단의 파일명에 LE가 붙은 파일과 LE라는 명칭이 붙지 않은 파일의 차이는 라.. 2018. 12. 5. 오류: 기본 클래스 을(를) 찾거나 로드할 수 없습니다. 해결 방법 명령프롬프트 화면에서 자바 파일을 컴파일하여 실행을 하려고 할 때 해당 오류가 발생되면서실행이 안될 때가 있습니다. 해당 문제의 원인은 ClassPath 가 정상적으로 잡혀있지 않아 오류가 발생될 수 있습니다.오류 해결 방안에 대하여 알아 보겠습니다. 오류: 기본 클래스 을(를) 찾거나 로드할 수 없습니다. 해결 방법 java 실행 시 해당 오류가 발생하는 화면 해결방법 1. 환경변수에 등록된 ClassPath 변경 변경 전 : 환경변수의 ClassPath에 등록된 내용 변경 후 : 환경변수의 ClassPath에 등록된 내용 제일 끝에 \; 문구 추가 해결방법 2. java 실행시 ClassPath 지정하여 실행 자바 실행 시 classpath를 직접 입력하여 실행 정상 동작 확인 2018. 5. 30. 자바 다운로드 및 자바 환경 변수 설정 방법 자바 프로그래밍을 하기 위해서는 JDK(Java Developerment Kit)이 설치가 되어야 하는데요. 자바는 썬 마이크로시스템즈에서 개발하였지만 2010년에 오라클에서 공식적으로 인수합병이 되어 오라클에서 다운로드 받을 수 있게 되었습니다. 윈도우 환경에서 자바를 사용하기 위한 설치 단계와 설치 후, 환경 변수 설정까지 하는 것에 대한 내용들을 알아보겠습니다. 자바 다운로드 및 자바 환경 변수 설정 방법 자바 다운로드 및 설치 방법 https://www.oracle.com/kr/index.html 상단의 이클립스 홈페이지로 이동하는 링크 클릭 메뉴 -> Java -> Java SE 순서대로 클릭 Java Platform Standard Edition 클릭 Downloads 탭의 Java Platf.. 2018. 5. 25. 이전 1 다음 반응형
