분류 전체보기

Android Studio 가상 디바이스 (AVD) 설치하기

설치하기 아래 아이콘을 찾아 클릭해 AVD Manager를 실행하여 안드로이드 가상 디바이스의 목록을 확인할 수 있습니다. Create Virtual Device 클릭해 사용할 SDK를 만들어줍니다. 리스트에서 원하는 것 디바이스를 선택하고 Next를 클릭합니다. Pixel 3a로 진행해 보겠습니다. 해당 화면은 간단히 설명하면 아키텍처용 이미지를 다운로드하는 곳입니다. Q 옆에서 있는 Download 링크를 클릭해줍니다. 약관 동의 창이 열립니다. 동의 후 Next를 눌러 다운로드해줍니다. 다운로드가 완료되면 Finish버튼이 활성화됩니다. 클릭 후 다시 아키텍처 선택창에서 Next를 눌러줍니다. 기기의 대한 설정을 한 후 Finish를 눌러줍니다. 이제 실행을 하려고 하면 아래와 같은 에러가 뜹니다...

Android Studio 설치하기

1. Android Studio 다운로드와 설치하기 구글에서 제공하는 안드로이드 스튜디오는 IntelliJ IDEA를 기반으로 하고 있습니다. https://developer.android.com/studio?hl=ko로 이동하여 약관 동의 후 다운로드하고 설치합니다. Android Virtual Device를 선택되어 있는지 확인을 하고 Next를 클릭한 후 Install 합니다. 설치 후 실행시키면 아래와 같은 창이 뜹니다. 이전에 설치한 적이 있는 분들이 아닐 시 아래 Do not import settings를 클릭 후 OK 버튼을 클릭해 다음으로 넘어갑니다. 안드로이드 스튜디오의 관련 기능을 사용하는 것에 대해서 구글에서 수집할 수 있도록 허용할지 설정을 합니다 구글에 정보를 전송해도 상관없다면 ..

[티스토리] JavaScript 소스코드 하이라이트 추가하기

문제점 해당 블로그는 티스토리에서 제공해주는 플러그인 코드 테마를 사용하고 있습니다. 하지만 JavaScript 코드 블록에 소스코드를 입력하면 메서드 부분이 똑같은 검은색이어서 가독성을 해치는 것 같았습니다. highlight.js를 사용해보기도 하였고 다른 방법을 찾아보았지만 만족하는 코드 하이라이트를 찾지 못하였습니다. 결국 나온 결론이 " 구현되어있는 하이라이트 원하는 기능에 추가를 시키자! "였습니다. 해결 먼저 하이라이트 된 코드의 색깔 스타일을 추가했습니다. 그 후 선언된 하이라이트 코드 블록 모두를 가져와 정규식으로 메서드인 코드만을 구분했고 스타일을 적용시켰습니다. $target .html(html.replace(/(\.[A-z]+\()/g, `$1`)) .html(html .replac..

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24)); // 밀리세컨 * 초 * 분 * 시 = 일 } getDateDiff("2021-09-01", "2021-10-01"); // 30 코드 풀이 두 날짜의 밀리초의 차이(date1 - date2 수식)를 통해서 두 날짜의 차이 값을 계산해 주는 방법입니다. 차이 값을 하루의 밀리초인(1000 * 60 * 60 * 24)으로 나눠주면 밀리초가 아닌 일 단위 값을 얻..

[JS] 연속된 순서를 가진 숫자, 영문 체크하기

A가 3번 들어간 문자를 찾는 방법은 정규식을 이용하면 간단한 코드로 체크할 수 있습니다. const a = "AAAbbCC"; a.match(/[A-z]{3}/); // AAA 하지만 ABC 처럼 연속되는 순서를 가진 영문을 체크할 수 없습니다. const str = "1234"; // 예시 const chrStr = [...str].map(v => v.charCodeAt()); let preStr = 0; let chr = 0; chrStr.forEach(s => { if (Math.abs(preStr - s) == 1) { chr++; } preStr = s; }) console.log(chr); // 3 문자의 unicode 코드로 이전의 문자값의 차로 구분하는 코드입니다. 함수화 시킨 코드 파라..

[PHP] 다차원 배열 1차원 배열로 바꾸기

코드 $multiArr = [['a', 'b', 'c'], [1, 2, 3]]; $arr = array_merge(...$multiArr); // ['a', 'b', 'c', 1, 2, 3]; 하위 배열 요소를 묶어 새로운 배열을 만드는 방법입니다. PHP 5.6 이상에서 array_merge 함수로 간단하게 2차원 배열을 병합할 수 있습니다. 해당 코드는 키가 적용된 배열에서도 정상 작동되며 안될 시 아래 코드를 사용해보세요. $arr = array_merge(...array_values($multiArr));

[React] 컴포넌트(Component) 에 대해

컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만드는 가장 최소한의 단위 모듈을 의미합니다. 독립적이며, 재사용 가능하게 만든 부품 조각들을 의미하며 리액트로 만들어진 홈페이지는 즉 컴포넌트의 조합입니다. 근본적으로 컴포넌트는 데이터를 입력받아 DOM Node를 출력하는 함수를 뜻합니다. Props를 받아 Node를 랜더 하는 함수에 가까운 개념입니다. props React에서 props는 변하지 않는 데이터입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 컴포넌트에 props로 전달하는 방식은 아래와 같이 사용합니다. // const Modal = (props) => { return ( { props.name } ); } 컴포넌트에 전달되는 props는 객체 형태로 전달되며..

[JS] 체크박스 전체 선택 , 해제

코드 See the Pen Untitled by 장혁수 (@hyukson) on CodePen. 코드 풀이 전체 선택, 해제 기능을 추가할 input에 change 이벤트를 걸어 해당 element를 받아옵니다. target으로 받아온 input element의 체크상태를 checked로 접근이 가능합니다. 리스트에 있는 input들을 모두 해당 checked 속성 값과 같게 만들어 주면 됩니다.

[JS] 개행문자 제거하기

코드 // 줄바꿈 제거 str.replace(/\n/g, ""); // 엔터 제거 str.replace(/\r/g, ""); // 공백 제거 str.replace(/\s*/g, ""); // 개행문자 모두 제거 str.replace(/\n|\r|\s*/g, "");

[JS] 줄바꿈, 공백 제거하기

replace로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.replace(/\n/g, ""); // 공백 제거 str.replace(/\s*/g, ""); str.replaceAll(" ", ""); 개행 문자를 사용하여 제거하는 방법과 replaceAll 메서드를 이용하는 방법입니다. split 메서드로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.split("\n").join(""); // 공백 제거 str.split(" ").join(""); 줄 바꿈은 개행 문자 \n을 기준으로 자르는 방식을 사용했습니다.

[CSS] checkbox 둥글게 만들기

코드 input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #999; appearance: none; cursor: pointer; transition: background 0.2s; } input[type="checkbox"]:checked { background: #32e732; border: none; } 코드 풀이 해당 코드의 핵심은 appearance 속성입니다. 그냥 border-radius 속성을 적용할 시 checkbox 타입을 가진 input은 모양이 바뀌지 않습니다. 위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시..

[JS] 대문자, 소문자로 변환하기

const str = "abcDEF"; // 대문자 const upper = str.toUpperCase(); // ABCDEF // 소문자 const lower = str.toLowerCase(); // abcdef 대문자와 소문자로 변환시키는 메서드는 각 toUpperCase과 toLowerCase입니다. 문자열 -> 대문자는 String.toUpperCase메서드를 사용하며, 문자열 -> 소문자는 String.toLowerCase메서드를 사용하여 변환 할 수 있습니다.