You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 모바일 / 태블릿 에서만 CSS 파일 로드 최적화
CSS 파일 로드 최적화 보통 태그의 css 파일 로드는 브라우저의 렌더링을 차단(blocking) 하기 때문에, css 파일이 크면 클수록 그만큼 웹페이지 속도에 영향을 미치게 된다. 따라서 왠만해선 css 파일의 용량을 최적화하여 줄이는 것이 좋으며 소스를 분리할 수 있는 것은 따로 분리하여 비동기 로드 시키는 것이 좋다. 예를들어 모바일 혹은 태블릿에서만 실행되는 미디어쿼리 선택자 부분은 메인 css 파일에 한꺼번에 때려넣기에는 약간 무리가 있다. 이때 모바일 소스를 다른 css 파일로 분리하고, 사용자의 화면 비율에 따라 선택적으로 css 파일을 로드하도록 하는 방법이 있는데, 이는 다음과 같다. css 파일을 분할하여 메인 css의 크기가 작아지는 효과도 있고 별도로 모바일, 태블릿 화면의 cs..
🚀 :before :after 에 text-decoration 효과 없애기
의사 클래스 선택자에 밑줄 효과 지우기 무색무취한 링크 태그를 꾸미기 위해 :before 나 :after 에 아이콘을 넣는 경우가 종종 있다. 이때 anchor 태그의 밑줄 효과인 text-decoration 속성을 텍스트에만 적용하고 content 속성의 아이콘 표시 부분은 적용하고 싶지 않을때가 있을텐데, 아무리 의사 선택자에 text-decoration 속성을 none으로 해도 밑줄이 지워지지 않은 현상 때문에 애로사항이 생겼을 것이다. 해결방법은 의사 선택자의 display 속성을 inline-block 으로 설정해주면 된다. My link My link a { text-decoration: underline; } a:before { content: "★"; } a.no-underline:befo..
🚀 텍스트 말줄임표(...) 간단 적용하기
글자 ellipsis 적용하기 일정한 영역 내에 문단을 넘치지 않으면서 생략 기호를 쓰고 싶어 말줄임표(...)를 적용하고 싶다면, CSS 속성의 text-overflow: ellipsis 를 적용하면 된다. 다만 이 속성을 적용하기 위해선 몇가지 사전 작업이 꼭 필요하다. 적용할 해당 요소는 display 속성이 block / inline-block 이어야 한다 (그래야 width를 적용할수가 있다) 적용할 해당 요소는 width를 지정해주어야 한다. (그래야 넘치는 기준을 정하기 때문이다) 적용할 해당 요소는 overflow가 hidden 이어야 한다. (그래야 넘치는 부분이 가려지기 때문이다) 마지막으로 text-overflow를 ellipsis 로 처리하면 된다 싱글 라인 말줄임표 적용 .elli..
🚀 마우스 wheel & scroll 이벤트 멈춤 감지하기
마우스 휠 & 스크롤 멈춤 감지 방법 사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있을 것이다. 마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 'scroll' 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 'wheel' 이벤트가 있다. 이 이벤트들에 setTimeout() 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다. let scrolling; // setTimeout() 메서드를 할당하는 전역 변수 window.addEventListener('scroll', (e) => { if (!scrolling) { console.log('start scrolling!'); } //..
![🚀 속성 선택자 not equal 구현하기 [attr!=value]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdavaD7%2FbtrY1mwyKiG%2Fh6xsx7J5jbAVuPaYifkkq0%2Fimg.jpg)
🚀 속성 선택자 not equal 구현하기 [attr!=value]
Attribute Selector not equal 구현 CSS 속성(Attribute) 선택자 문법에는 equal 연산자와 함께 다양한 기호 문법을 지원한다. [attr=value] : attr 속성이 정확히 value인 요소를 선택 [attr~=value] : attr 속성이 정확히 value인 요소를 선택 [attr|=value] : attr 속성을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택 [attr^=value] : attr 속성을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택 [attr$=value] : attr 속성을 가지고 있으며, 접미사로 value가 값에 포함되..
🚀 JAVA 변수의 타입 얻기 (typeof 구현)
자바 변수의 타입 얻기 만일 해당 변수의 타입을 비교하거나 변수의 타입 정보가 필요할 경우, 자바스크립트 진영에서는 typeof 연산자로 아주 간단하게 가져올 수 있다. 그러나 자바 진영에선 기본적으로 객체 지향 프로그래밍 언어이기 때문에 int형이나 double형 같은 primitive 타입은 Wrapper 클래스 타입으로 확인할 수 밖에 없다. Object 클래스의 getClass() 메서드를 이용하면 쉽게 가져올 수가 있다. public static void main(String[] args) { // 해당 변수 타입 출력 (Wrapper 클래스 타입으로) int pri_value = 1; System.out.println(((Integer) pri_value).getClass().getSimple..
🚀 자바스크립트 코드 실행 시간 측정 3가지 방법
console.time() 사용 자바스크립트에는 console.log() 외에도 여러가지 console 메소드들이 있다. 그중에 console.time() 과 console.timeEnd() 는 자바스크립트 코드 실행을 측정하는 함께 쌍을 이루는 함수이다. console.time(); // 측정 시작 for (let i = 0, sum = 0; i < 100000; i++) { sum += i; } console.timeEnd(); // 측정 종료 만일 측정하고자 하는 코드 부분이 여러가지 이면, console.time() 의 매개변수로 문자열을 주면, 어떠한 코드를 측정했는지 네이밍을 지정해줄 수 있다. console.time('반복문 한번 시간 측정'); // 측정 시작 console.time('반복..
🚀 JAVA 문자 ↔ 숫자 형변환 방법 모음
문자 → 숫자 형변환 String → Int Integer.parseInt() : 문자열 파싱하여 int 객체 생성 Integer.valueOf() : 문자열로 Integer 객체 생성. 따로 initValue() 로 int 형으로 형변환 필요 String str = "123456"; int num = Integer.parseInt(str); String str2 = "123456"; int num2 = Integer.valueOf(str).initValue(); // 원래는 initValue() 를 써야하지만 안써도 자동 형변환이 일어나기 때문에 상관없음 NumberFormatException 예외처리 만일 숫자 형태가 아닌 문자열을 숫자로 변환할 때, NumberFormatException이 발생하게..
🚀 자바스크립트 배열 동등 비교 방법
자바스크립트 배열 동등 비교 숫자나 문자열 비교할때는 == 이나 === 연산자를 이용하면 되지만, 배열이나 객체를 비교할때는 불가능하다. 왜냐하면 reference 타입으로써 값이 비교 되는 것이 아닌 주소값이 비교되기 때문이다. const a = [1, 2, 3]; const b = [1, 2, 3]; // 배열 구성을 비교하는게 아닌 배열 메모리 주소값 비교가 된다 a == b; // false a === b; // false 따라서 배열 구성 요소를 동등 비교하기 위해서는 직접 하드 코딩하여 비교하는 수밖에 없다. 여러가지 방법이 있는데 몇가지 사례를 소개해 본다. JSON.stringify JSON.stringify() 메소드로 배열을 직렬화(문자열) 하여 문자열 비교 const equals = ..
🚀 JAVA 코드 실행 시간 측정하기
자바 코드 실행 시간 측정하기 밀리 초 측정하기 Java에서 기본적으로 제공하는 메서드중 System.currentTimeMillis 메서드를 이용하면 현재 시간을 밀리세컨드 단위로 출력할 수 있다. 다음과 같이, long 타입 변수 startTime, endTime에 각각 currentTimeMillis() 값을 입력받도록 하고, 두 시간의 차이를 밀리 세컨드 단위로 구하면 곧 코드 실행 시간이 된다. public static void main(String[] args) { long startTime = System.currentTimeMillis(); // 코드 시작 시간 // 코드 ... long endTime = System.currentTimeMillis(); // 코드 끝난 시간 long du..
🚀 객체로 구성된 배열 정렬 방법
자바스크립트 객체 배열 정렬 배열의 객체 요소들을 정렬하기 위해서는 객체 내의 속성을 키(key)로서 잡고 기준으로 정렬할지를 지정해야 한다. const user = [ { name: '홍길동', age: 40 }, { name: '임꺽정', age: 12 }, { name: '주몽', age: 23 }, { name: '척준경', age: 88 }, ]; 다음 user 라는 객체 배열을 정렬할 것인데, 각 원소의 객체 속성들을 보면 age 라는 넘버 값과 name이라는 스트링값이 있다. 이 age 와 name 속성을 기준으로 각각 나이순, 이름순으로 객체들을 정렬할 수 가 있다. // 나이순 오름차순 const result1 = user.sort((a, b) => a.age - b.age); conso..
🚀 배열을 문자열로 변환하는 3가지 방법
자바스크립트 배열 → 문자열 변환 자바스크립트 배열 타입을 mysql 같이 외부에 저장하기 위해서는 따로 배열 자료형을 지원하지 않는한 문자열로 변환시켜 삽입하는 방법을 취해야 한다. JSON.stringfy() 사용 보통 자바스크립트 객체를 문자열로 변환할때 사용하는 api지만, 사실 자바스크립트 배열도 자바스크립트 객체의 일종이라 통한다. const arr = ['Apple', 'Banana', 'Orange']; JSON.stringify(arr); // '["Apple","Banana","Orange"]' join() 사용 배열의 원소들을 구분자(separator)로 나열된 문자열로 변환해서 저장하는 방법도 존재한다. const arr = ['Apple', 'Banana', 'Orange']; c..
