https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 2022년 5월 8일 velog.io NL 조인 조인은 기본은 NL조인이다. NL조인은 인덱스를 이용한 조인이다. 소트 머지 조인, 해시 조인도 NL조인과 프로세싱 과정은 다르지 않다. 기본 메커니즘 아래 사원과 고객 테이블이있다. 이 두 테이블에서 1996년 1월 1일 이후 ..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 2022년 5월 8일 velog.io 테이블 랜덤 액세스 💡 인덱스로 검색해도 빠른데, 왜 굳이 파티셔닝? 인덱스로 검색하는데 왜 느림? 대량의 데이터를 조회하면 테이블 전체 스캔하는것보다 인덱스 사용하는것이 더 느리다. 인덱스 ROWID는 물리적 주소? 논리적 주소? 인덱스를..

이 글은 모던 자바스크립트 Deep Dive를 보고 공부한 내용입니다. 자바스크립트에서 객체는 복합적인 자료구조입니다. 객체 내부에 있는 property의 수는 개수가 정해지지 않아, 객체의 크기도 정해지지 않고 동적으로 property가 추가, 삭제가 될 수 있습니다. 그래서 객체는 리터럴처럼 메모리 공간에 크기를 사전에 정의할 수 없습니다. 객체의 구현 방식은 브라우저 제조사마다 다를 수 있습니다. 그리고 객체를 생성하고 프로퍼티에 접근하는 것도 리터럴을 이용하는 것보다 비용이 많이 들기 때문에, 괜히 깔끔하게 코딩하겠다고 적은 데이터를 객체를 이용하여 선언하고 사용하면 오히려 쓸데없이 비용을 많이 쓸 수 있습니다. (엄청 크게 차이나진 않지만..) 자바스크립트의 객체 특징 자바스크립트에서 객체는 프..

Map이란? Map객체는 Key와 Value로 이루어진 자료구조입니다. Key는 고유한 값을 가져야 하는 특징을 가지고 있습니다. 자바스크립트에서의 Map객체는 Key와 Value을 서로 매핑시켜 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 해줍니다. ES6부터 도입된 문법이며 ES5에서는 사용할 수 없습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections 키기반의 컬렉션 - JavaScript | MDN 이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. deve..

세 번째 아바타 라이브러리 소개입니다. 이번에는 리액트에서 사용할 수 있는 리액트용 라이브러리입니다. 저는 리액트를 사용하지 않지만, 그래도 좋은 라이브러리이고 디자인도 예뻐서 소개하고 싶었습니다. 리액트를 모르는 저도 알 정도로 사용법도 간단합니다. 필요한 분이 이 글을 보고 좋은 영향을 받았으면 하는 마음으로 이렇게 소개합니다. AVVVATARS avvvatars는 알파벳 글자와 도형으로 사용자의 프로필을 표현해줍니다. 40가지 색상과 60가지 모양의 조합이라 총 2400개의 개성 있는 프로필을 만들 수 있습니다. 사이즈는 가볍고 다양한 옵션도 있어서 예쁜 랜덤 프로필 만드는데 함께 사용하면 좋을 것 같습니다. 웹사이트 (website) https://avvvatars.com/ Avvvatars - ..

이전에 소개했던 DiceBear Avatars는 예쁜 그림이 별로 없어서 호불호가 많이 갈렸을 것 같습니다. 하지만 이번에는 좀 더 귀엽고 예쁜 아바타를 만들 수 있는 라이브러리를 소개하겠습니다. Boring Avatars https://boringavatars.com/ Avatar generator playground - Boring Avatars Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette. boringavatars.com https://github.com/boringdesigners/boring-avatar..

회원 시스템이 있는 서비스를 만들면, 보통 회원의 프로필 이미지를 설정할 수 있는 기능이 있습니다. 프로필 이미지 기능을 만들면, 프로필 사진이 없을 때, 보통 아래와 같은 이미지로 보여주도록 만들죠. 해외에서는 이것을 아바타라고 합니다. 그런데 혹시 Github 계정을 만들면 처음에 설정되는 아바타를 보신 적 있으신가요? Github는 이 초기 아바타를 계정 ID를 Seed로 랜덤한 이미지를 등록해 놓습니다. 이런 아바타는 Github에서 직접 만들어서 등록해주는 것일까요? 아닙니다. 이러한 랜덤 아바타를 만들어주는 API가 따로 있고 Github는 이것을 이용했습니다. 이렇게 ID를 넣고 랜덤 아바타를 만들어주는 API를 다양하게 소개해 드리겠습니다. DiceBear Avatars https://av..

웹 개발을 하면서 가끔 더미 텍스트가 필요할 때, 로렘 입숨(Lorem Ipsum)을 사용해 보셨을 겁니다. 로렘 입숨(Lorem Ipsum)은 문서나 웹 퍼블리싱, 프론트개발을 할 때 더미 글이 필요할 경우 자주 사용합니다. 글은 그렇다 쳐도, 만약 더미 이미지가 필요할 경우는 어떻게 할까요? 주로 저작권 없는 사진을 다운 받을 수 있는 사이트에서 다운 받아서 사용하곤 합니다. 보통 'unsplash'나 'pixabay'를 사용하곤 합니다. 그런데 이렇게 다운 받아서 사용하는 것은 귀찮지 않나요? 그리고 다운받은 후 사진 크기를 조정하는 작업이 필요하면 정말 귀찮아집니다. 로렘 픽숨 (Lorem Picsum) https://picsum.photos/ Lorem Picsum Lorem Ipsum... b..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 3일 전 velog.io 인덱스 구조 및 탐색 인덱스 튜닝 데이터베이스 테이블에서 데이터를 찾는 방법은 크게 2가지이다. 테이블 전체 스캔 인덱스를 이용한 스캔 인덱스 튜닝의 2가지 핵심 요소 인덱스는 큰 테이블에서 소량의 데이터를 검색할 때 사용함. 온라인 트랜잭션 처리 시스..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 SQL 파싱과 최적화 SQL 최적화란 무엇인가 SQL 이란? SQL은 Structured Query Language 라고 구조적 질의 언어. 구조적이고 집합적이고 선언적인 질의 언어 쿼리를 실행하면서 원하는 결과를 만들때, 절차를 만들고 그 절차대로 결과를 만든다. 여기서 특정한 업무를 수행하기 위한 절차를 '프로시저'라 한다. 쿼리를 실행할 때, 그 프로시저를 만들어내는 DBMS 내부 엔진이 'SQL 옵티마이저' 이다. SQL이라는 질의 언어를 옵티마이저에게 던져주면 그 옵티마이저가 프로그래밍을 대신 ..

사용하고 있는 DB는 postgreSQL이지만, 다른 DB에서도 다 똑같이 적용된다고 생각합니다. 문제 ORDER BY와 LIMIT를 함께 사용했을 때, LIMIT의 수가 바뀌면 ORDER BY 정렬 결과도 함께 달라지는 현상이 있었습니다. 예를 들어, LIMIT 30과 LIMIT 31의 ORDER BY 결과가 달라지는 것입니다. 실행계획의 차이도 없고 문제의 원인을 알 수 없어서, 구글에서 검색하다가 레딧에서 같은 현상을 겪는 사람을 발견했습니다. 그래서 레딧의 질문을 기준으로 이 현상에 대해 이야기해 보겠습니다. 레딧에서 발견한 동일한 문제 https://www.reddit.com/r/PostgreSQL/comments/ni2l9u/why_is_a_query_with_limit_returning_re..

이번에 운쿠 사이트 개발하면서 AWS Lightsail이라는 사이트를 알게 되었습니다. 그동안 EC2를 사용하기 부담스러웠던 저는 가볍고 가격이 싸면서 쉽게 만들 수 있는 VPS가 필요했습니다. https://aws.amazon.com/ko/lightsail/ 가상 프라이빗 서버 및 웹 호스팅–Amazon Lightsail—Amazon Web Services WordPress, Magento, Prestashop, Joomla와 같은 사전 구성된 애플리케이션을 통해 단 몇 번의 클릭으로 블로그, 전자 상거래 또는 개인 웹 사이트를 구축합니다. aws.amazon.com Lightsail은 AWS에서 만든 가상 프라이빗 서버 (VPS)입니다. Lightsail은 복잡한 EC2에 비해 간편하고 싸게 인스턴스..

해당 사이트는 서비스를 종료하여, 사이트에 접속할 수 없습니다. 1달간 작은 쿠팡 파트너스 사이트인 '운쿠'를 만들고 간단한 소개와 회고를 적어보려고 합니다. 회고 적는 것은 사실상 처음이라서 부족한 글이지만, 한번 적어보았습니다. 운쿠! 앞으로 제 역할을 할지 의문인 사이트지만, Vue와 Nodejs를 공부하는데 의미를 둔 사이트입니다. 들어가면 쿠팡 파트너스 링크로 가득 찬 게시글밖에 없지만, 그 게시글도 정말 내용이 성의가 없습니다. ㅎㅎ http://wooncou.com/ 운쿠 :: 추천 & 가이드 & 팁 컬렉션 운쿠의 추천, 팁, 가이드 컬렉션 wooncou.com 주제 사이드 프로젝트로 그동안 배우고 싶었던 것을 이용하여 수익을 얻을 수 있는 작은 무언가를 만들어보고 싶었습니다. 첫 번째로 배..

console.log()는 자바스크립트로 개발하면서 아주 다양하게 사용됩니다. 개발자나 사용자에게 여러 정보를 알리는 수단이 되거나 디버깅에 사용되는 용도가 되곤 합니다. 그런데 혹시 console.log()만 사용하고 계신가요? console 객체는 log 함수만 아니라 다양한 함수를 가지고 있습니다. 많은 사람들이 알고 있지만, 모르는 사람은 모르는 console 객체의 함수들을 살펴보겠습니다. ※ 참고로 웹 콘솔 기반의 포스팅입니다. nodejs나 다른 경우는 제외했습니다. 1. console.log(), console.info(), console.warn(), console.error() 처음부터 간단하고 쉬운 것부터 다루겠습니다. 익숙한 console.log()는 매개변수의 문자열을 콘솔에 출력..

첫 자바스크립트 공부 시작은 노마드 코더의 "바닐라 JS로 크롬 앱 만들기" 강의를 본 것이었습니다. 그래도 일하면서 자바스크립트는 많이 사용했으니 이 정도는 다 알겠지? 하면서 저의 전투력을 측정하는 느낌으로 강의를 들었습니다. 하지만 은근 저도 어이없게 모르는 것도 있고, 원래 몰랐던 것들도 있었습니다. 강의에 대해 이 강의는 momentum이라는 크롬 앱의 기능을 일부 구현해보는 강의로 클론까지는 아니고 기능 구현하기 강의입니다. 제목에서 알 수 있듯이 vanilla js를 배우고 코딩해보는 실습을 가집니다. 배우면서 몰랐던 것 요소 탐색 DOM 탐색은 가장 기초 중에 기초인데, 저는 jQuery에 의존했습니다. 하지만 document.getElementById, document.getElement..

2022년 첫 블로그 포스팅입니다. 2022년 기념으로 앞으로 더 나은 개발자가 되기 위해 나아가는 한 걸음에 대해서 이야기해볼까 합니다. 저는 직장에서 풀스택 개발을 하고 있습니다. 하지만 이번에 일을 하나 하면서 자바스크립트에 대해 모르는 것이 많고 부족하다는 생각을 했습니다. 그래서 이번 기회에 자바스크립트를 제대로 기초부터 차근차근 공부해 나아가 보려고 합니다. 사실 지금 이미 공부를 하고 있었는데, 2022년도 첫 포스팅이라 새해 다짐인 느낌으로 말해봤습니다 ㅎㅎ. jQuery는 이제 사용할 필요가 없다. 프론트엔드에서 개발을 쉽고 용이하게 도와줬던 jQuery가 오랫동안 자리를 잡고 있었습니다. 다양한 라이브러리도 jQuery의 도움을 받아 제작되고 그 유명한 부트스트랩도 버전4까지 jQuer..

처음에는 스마트워치 있어서 뭐해?라는 생각을 하고 구매하지 않았습니다. 막상 있으니까 휴대폰으로 어떤 알림이 왔다는 걸 더 쉽게 알 수 있고, 날씨도 쉽게 알 수 있고 편한 기능이 좀 있더라고요. 약간 일상의 보조적인 편리함을 주는 느낌? 엄청 삶이 달라지는 느낌을 받을 순 없습니다. 디자인이 좋아서 일상생활에 소소한 만족을 줍니다. 특히 잘 마감된 다이아몬드 컷팅이 너무 마음에 듭니다. 원래 사용하고 장단점을 생각해서 포스팅할 계획이었습니다. 사용하면서 장점에 대해 많이 찾아볼 수 있었습니다. 하지만 기존에 스마트워치를 사용해본적이 없어서 비교대상이 없으니 단점은 잘 모르겠더라고요. 사용하면서 안 좋은 부분은 단점보단 아쉬웠던 부분이 더 정확한 표현인 것 같았습니다. 그래서 이번 포스팅에서 그동안 갤럭..

안녕하세요. 이번에 갤럭시워치4 를 구매하고 첫인상 리뷰와 언박싱 포스팅을 해보려고 합니다. 이번에 제가 구입한 제품은 갤럭시워치4 입니다. 갤럭시워치4 클래식과 갤럭시워치4가 있는데, 기존의 워치 액티브 라인이 갤럭시워치4로 나온것 같습니다. 갤럭시워치4가 구매 전 디자인이 예쁘게 나와서 굳이 스마트워치를 사야 하나 생각했던 저의 생각을 바꾸게 해 준 것 같습니다. 구입 모델 제가 구입한 모델은 "갤럭시 워치4 44 mm (블루투스)" 입니다. 색상은 올 블랙입니다! https://www.samsung.com/sec/watches/galaxy-watch4-r870/SM-R870NZKAKOO/ 갤럭시 워치4 44 mm (블루투스) (블랙) | Samsung 대한민국 www.samsung.com https..

이 포스팅은 인프런의 김영한 님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 보다가 좋은 내용인 것 같아서 참고하여 포스팅했습니다. Autowired 하는 방법은 아마 대략적으로 3가지가 있을 것입니다. 그냥 멤버 필드에 @Autowired 하는 방법 생성자에 @Autowired 하는 방법 Setter에 @Autowired 하는 방법 이 3가지 방법 중, 어떤 방법이 좋은 방법일지, 이번 포스트로 다루어 보겠습니다. 시나리오 package com.min.edu.controller; import com.min.edu.service.MemberService; import org.springframework.stereotype.Controller; @Controller..

1. 스킨을 바꾼 이유 정규표현식 포스팅을 하다가 태그를 사용을 많이 했습니다. 그런데 code 태그를 기존에 쓰던 스킨에서 지원하지 않았습니다. 안 그래도 스킨에 만족도가 안 좋았는데, 이번에 트리거가 되어 스킨을 바꾸게 된 계기가 됐습니다. 좀 더 개발자 블로그에 어울리는 티스토리 스킨이 없나 찾다가 바로 좋은 스킨을 찾았습니다. https://pronist.tistory.com/5?category=844785 hELLO. 티스토리 스킨을 소개합니다. hELLO 스킨은 본래 기능의 많이 없었다가, 최근 반응이 나쁘지 않아서 여러 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기능과 품질 pronist.tistory.com 2. 스킨 ..

본 포스트는 프로그래머스 정규표현식 강의를 참조하여 정리한 글입니다. 그래서 프로그래머스 강의에서 나오는 예제 코드와 같습니다. https://programmers.co.kr/learn/courses/11 정규표현식 문법 \d 숫자를 대표하는 글자들(d 는 digit의 약자) \D 숫자를 제외한 문자 \w 글자를 대표하는 글자들 (w는 word의 약자) \W 글자 대표 문자를 제외한 글자들 (특수문자, 공백 등) \s 공백 문자 (스페이스, 탭, 뉴라인) \S 공백 문자를 제외한 문자 + '하나 혹은 그 이상 연결된' 라는 뜻. - \d+ : 연결된 숫자들만 ['02', '123', '4567', '070', '9999', '9999', '010', '2454', '3457'] - \w+ : 연결된 글자..

라인, 카카오 신입 공채 코딩 테스트를 쳤습니다. 무려 같은 날에 시험 봤습니다. 2021.09.11에 둘 다 봤습니다. 라인은 오전에, 카카오는 오후에 둘 다 합해서 총 8시간 봤는데 죽을 맛이네요. ㅎㅎ 블로그에 문제를 올리는 건 금지되어 있어서 간단하게 두 회사 문제의 차이점이랑 느낀 점, 간단한 정보만 알려드릴게요. 두 회사 모두 화면 공유나 휴대폰 카메라 연동은 없었습니다. 1. 2022 라인 신입 공채 코딩 테스트 라인 신입 공채 코딩 테스트는 6문제에 3시간을 줍니다. 한 문제당 30분이라니, 문제가 좀 쉬운가? 생각했는데.. 그런 건 아니었습니다. 정말 잘하는 사람을 뽑겠다는 의지가 보였습니다. ㅎㅎ 다양한 알고리즘을 사용해서 해결한다기보다 최소한 알아야 하는 알고리즘으로 구현을 잘해야 한..

프로그래머스 관한 후기를 올리는 것은 이번이 처음이네요. 이번에 JetBrains과 프로그래머스가 콜라보해서 코드 챌린지를 열었습니다. 후기 09/09(목) 19:30 - 22:30 일자 테스트를 쳤습니다. 솔직히 저는 아직 프로그래머스에서 알고리즘 실력을 키우는 중이라 좋은 실력은 아닙니다. 하지만 앞으로 꾸준히 실력을 키우고자 한번 참여해봤습니다. 저는 JAVA로 참여했습니다. 그렇습니다. 저는 4문제 중 달랑 1문제 풀었습니다. 제게 문제가 많이 어렵더라고요. 1번 문제는 빠르게 쉽게 풀었는데, 2번부터 문제의 내용은 알겠지만 어떻게 풀어야 할지 감이 오지 않았습니다. 아무래도 이런 문제를 많이 경험해봐야 할 것 같습니다. 클리어 도장을 4개 모아야 한다는데.. 저는 잘 모르겠네요 ㅎㅎㅎ 문제를 모..

많은 사람들이 진로, 직업 때문에 걱정하다가 돈을 벌기 위해 어쩔 수 없이 전공을 포기하고 기술을 배워 직업을 구하는 방법을 택하곤 합니다. 프로그래머도 많은 사람들이 선택하는 직업 중 하나입니다. 프로그래머는 비전공자의 비율이 많고 많이 전향하는 직업 중 하나입니다. 코딩을 도전하고 싶은데 막상 그러지 못하거나, 프로그래머가 되고 싶은 사람들에게 프로그래머를 선택하기에 어떤지 몇 가지 이야기해 드리고자 합니다. 코딩은 어렵지 않을까? 프로그래밍은 얼핏 보면 어려워 보일 수 있습니다. 알 수 없는 영어들이 엄청나게 많고 수학적인 계산을 해야 할 것 같다고 생각할 수 있습니다. 하지만 생각과는 다릅니다. 알파벳만 알면 되고 수학적인 계산은 거의 없습니다. 만약 알고리즘 공부까지 해야 한다면 수학적인 생각을..