You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리
Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이 가능하여, 보다 자신의 웹사이트 돋보일 수 있게 하여 방문자에게 조금 더 기억에 남게 만들 수 있다. 다만 스크롤바 요소는 웹 콘텐츠가 아닌 브라우저 내부 인터페이스로 취급되기 때문에 일반적인 css 사용에 있어 기능이 제한적인 것이 많다. 우리가 브라우저의 alert 창을 스타일링 할수 없듯이 말이다. 즉, css를 사용하여 브라우저 스크롤바 색깔이나 두께를 바꿀 수는 있으나 이외의 복잡한 스타일링에는 제한적이라고 보면 된다. 특히 유의해야 할 점은 CSS scrollbar 관련 선택자들은 표준이 아니..
🔎 Bing 웹 마스터 도구 - SEO 사이트 스캔 사용법
Bing 웹 마스터 도구로 SEO 검사하기 마이크로소프트 빙 웹 마스터 도구를 이용하여 내 블로그의 몇 백개의 포스팅들의 SEO 사이트 검사할 수 있다. 우선 검색 사이트에서 빙 웹마스터 도구 페이지에 들어가준다. Bing 웹 마스터 도구 www.bing.com 좌측의 URL 검사탭으로 각 페이지에 대한 SEO 검사를 할 수 있다. 하지만 수십 수백개에 달하는 포스팅들을 일일히 검사하기에는 수가 많다. 사이트 전체 스캔 등록하기 사이트 스캔 기능을 이용하면 블로그 도메인의 페이지들을 한꺼번에 검사가 가능하다. 웹사이트에 어떤 문제가 있는지, 개선할 점은 무엇인지 한꺼번에 분석해준다. 스캔 등록 방법은 아래와 같다. 스캔 이름 : 스캔 프로필 이름으로서 아무거나 입력하면 된다. 범위 : 스캔할 웹 사이트 ..
![🚀 속성 선택자 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가 값에 포함되..
🕹️ CSS 요소 수평/수직 정렬 기법 모음
수평 중앙 정렬 📢 inline / inline-block 요소 정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다. inline, inline-block, inline-table, inline-flex, 기타 등등에 적용된다. One Two Three Four 자식요소가 block요소이면, 강제로 자식요소를 inline-block요소로 만들어주는 방법도 있다. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I h..
♻️ 제이쿼리 함수를 → 자바스크립트로 구현 (모음집)
제이쿼리를 자바스크립트로 제이쿼리는 무겁고 느리다. 그리고 요즘에는 리액트, 뷰를 쓰지 제이쿼리는 레거시 프로젝트에만 잔존하는 구시대적 유물이 되어 버렸다. 그렇지만 이전에는 전세계에서 가장 많이 사용된 웹라이브러리라는 명성이 있었는데, 그 이유는 기존 자바스크립트에 없는 여러 편리한 전용 선택자나 메서드를 지원해 주었기 때문이다. 또한 제이쿼리를 이용한 파생 여러 스타일리쉬 라이브러리 숫자도 한몫했다. 하지만 퍼포먼스 문제 때문에 가능한 한 제이쿼리 사용을 지양해야 되지만, DOM을 다루는데 있어 압도적인 편리함은 포기하기엔 너무 달콤하다. 따라서 이번 포스팅에선 몇가지 자주 애용되는 제이쿼리 메서드를 바닐라 자바스크립트로 구현해보아 웹 코딩에 있어 좀 더 편하게 이용해보도록 하자. You might ..
🎨 fslightbox - 성능 좋은 이미지 라이트박스 라이브러리
fslightbox.js 티스토리에 기본으로 내장되어있는 라이트박스 라이브러리는 lightbox2.js 로서 무겁고 느리다. 반면, fslightbox.js 라이브러리는 이미지, 비디오 또는 사용자 지정 소스를 통해 원하는 모든 것을 깔끔한 오버레이 상자에 표시하는 종속성이 없는 바닐라 자바스크립트 플러그인이다. 사용하기 쉬우면서도 가벼우며 이미지, HTML 동영상, YouTube 동영상 등 다양한 유형의 소스를 깔끔한 오버라이팅 박스에 표시할 수 있다. Chrome, Firefox, Edge, Opera, IE 브라우저 모두 사용이 가능하며, 또한 리액트와 뷰 프레임워크에 대해서도 지원한다. 다만 몇가지 애니메이션이나 상위 기능은 Pro 라이센스를 써야해서 유료화가 필요하다. 그래도 기본적인 라이트박스..
🛠️ Stack 자료구조 실전 구현 강의 (JAVA)
Stack 자료구조 Stack 특징으론 다음과 같이 요약이 가능하다. LIFO(Last In First Out), 후입선출(後入先出) 구조이다. 마지막에 들어온게 첫번째로 빠져나간다. 그래서 직전의 데이터를 빠르게 갖고 올 수 있다. 뒤로 가기, 실행 취소(redo/undo), 그리고 컴퓨터 구조에서의 스택 메모리가 대표적이다. 균형성 검사를 할 수 있기 때문에 수식, 괄호 등의 검사에서도 쓰인다. [JCF] 🧱 Stack 구조 & 사용법 정리 Stack 컬렉션 스택(Stack)의 사전적 정의는 '쌓다', '더미' 로서 접시 스택처럼 접시를 쌓아놓은 것을 말한다. 즉, 상자에 물건을 쌓아 올리듯이 데이터를 쌓는 자료 구조라고 할 수 있다. 아래 그림 inpa.tistory.com Stack 실전 구현하기..
🧱 자바 Stack 구조 & 사용법 정리
Stack 컬렉션 스택(Stack)의 사전적 정의는 '쌓다', '더미' 로서 접시 스택처럼 접시를 쌓아놓은 것을 말한다. 즉, 상자에 물건을 쌓아 올리듯이 데이터를 쌓는 자료 구조라고 할 수 있다. 아래 그림과 같이 스택은 마지막에 저장한 데이터를 가장 먼저 꺼내게 되는 구조 특징이 있는데, 이러한 자료의 구조를 LIFO(Last In First Out) 구조라고 말한다. 함께 많이 사용되는 Queue(큐)의 경우 먼저 추가된 데이터가 먼저 나오는 FIFO(First In First Out) 동작을 갖는것과 비교된다. Stack 사용처 스택의 쓰임새의 대표적인 예로 총기류의 탄창을 들 수 있다. 마지막에 넣은 탄알이 가장 먼저에 발사되어 꺼내어지며, 결국에는 맨 처음에 넣은 탄환이 마지막에 발사되는 걸 ..
🛠️ Circular Doubly LinkedList 실전 구현 강의 (JAVA)
Circular Doubly LinkedList 자료구조 기존 Doubly LinkedList의 첫번째 노드와 마지막 노드 끼리 서로 연결 시켜, 원형 리스트 처럼 구성한 자료 구조 이러한 순환 구조는 티비 채널을 순회하거나 오디오 플레이어와 같이 데이터를 순차적 방식으로 처리하다 마지막 요소를 만나면 다시 처음 요소로 되돌아가는 애플리케이션에서 사용된다. 단일 연결 리스트를 원형으로 연결한 Circular Singly linkedList도 있다. Circular Doubly LinkedList 구현하기 (JAVA) 우선 양방향 이중 연결 리스트를 구현하기 앞서 먼저 Doubly LinkedList 자료구조 구현을 연습 해보고 오는 것을 권장한다. Circular Doubly LinkedList는 기존 ..
🛠️ Doubly LinkedList 실전 구현 강의 (JAVA)
Doubly LinkedList 자료구조 노드(객체)를 연결하여 리스트 처럼 만든 컬렉션 (배열이 아님) 노드들을 연결하여 목록을 구성하기에 용량(capacity) 개념이 없다. (무한정 저장 가능) 데이터의 저장순서가 유지되고 중복을 허용한다. ArrayList 처럼 인덱스로 요소를 접근하지만, 배열이 아니기 때문에 별도로 탐색시간이 걸려 임의의 요소에 대한 접근 성능은 좋지 않다. 대신 데이터의 중간 삽입, 삭제가 빈번할 경우 빠른 성능을 보장한다. 하지만 노드에 들어있는 게 많은 만큼 메모리의 사용량이 많아진다는 단점이 있다. Singly LinkedList는 단방향 연결 리스트이기 때문에 만일 리스트의 끝 요소를 탐색하려면, 처음(head)부터 끝까지 순회하며 탐색해야 하지만, Doubly Lin..
☕ 싱글톤 객체가 깨져버리는 경우 (역직렬화 / 리플렉션)
싱글톤 객체 싱글톤 객체는 단 하나의 유일한 객체를 의미 한다. 해당 인스턴스가 리소스를 많이 차지하는 무거운 인스턴스일때, 메모리 절약을 위해 인스턴스가 필요할 때 똑같은 인스턴스를 새로 만들지 않고 기존의 인스턴스를 가져와 활용하는 기법이다. 아래는 싱글톤 디자인 패턴을 구현하는 방법중 멀티쓰레드 환경에서 안전하고 검증된 방법인 Bill Pugh Solution 방법으로 구현한 싱글톤 객체이다. [GOF] 💠 싱글톤(Singleton) 패턴 - 꼼꼼하게 알아보자 Singleton Pattern 싱글톤 패턴은 디자인 패턴들 중에서 가장 개념적으로 간단한 패턴이다. 하지만 간단한 만큼 이 패턴에 대해 코드만 던져주고 끝내버리는 경우가 있어, 어디에 쓰이는지 어떠한 문 inpa.tistory.com cla..
☕ 자바 역직렬화 방어 기법 - 총정리 모음
Serializable 구현은 보안에 구멍이 생길 수 있다 보통 자바에서 인스턴스는 생성자를 이용해 만든는 것이 기본이다. 하지만 역직렬화는 언어의 기본 메커니즘을 우회하여 객체를 바로 생성하도록 한다. 직렬화된 파일이나 데이터만 있다면 readObject() 를 통해 생성자 없이 곧바로 인스턴스를 만들수 있기 때문이다. 즉, 역직렬화는 보이지 않은 생성자 이기도 한 것이다. 문제는 만일 어느 객체가 생성자를 통해 인스턴스화 할때 불변식이나 허가되지 않은 접근을 설정하였을 경우 이를 무시하고 생성된다는 점이다. 예를들어 아래 Member 클래스는 생성자로 나이 입력값을 음수를 넣으면 이를 걸러내는 로직이 있다고 한다. class Member implements Serializable { private s..
