웹 개발

MySQL의 InnoDB 엔진은 SQL 표준에 정의된 4가지 트랜잭션 격리 수준(transaction isolation level)을 모두 제공한다. InnoDB 엔진의 트랜잭션 격리 수준 기본값은 REPEATABLE READ이다. MySQL client는 SET TRANSACTION 구문을 실행해서 격리 수준을 변경할 수 있고, server 자체에 옵션을 줘서 모든 client 연결에 대해 동일한 격리 수준을 적용하는 방법도 있다. 그러면 각각의 트랜잭션 격리 수준을 제공하기위해서 MySQL의 InnoDB 엔진이 어떤 방식을 사용하고있는지 가장 많이 사용되는 격리 수준 순으로 각각 알아보도록 하자. 1. REPEATABLE READ 앞서 언급했듯이 REPEATABLE READ 레벨의 경우 InnoDB 엔진에서 사용하는 디폴트 트랜잭션 격리 수준이고 특별한 성능 이슈가 없다면 잘 변경하지 않기때문에 가장 많이 사용된다. REPEATABLE READ를 만족시키기 위해서 MySQL InnoDB 엔진은 아래 두가지 방식을 사용한다. ...

대규모의 많은 요청이 동시에 들어오는 데이터베이스(Database, DB) 어플리케이션의 경우 데이터의 정합성을 유지하면서 최대한 동시성을 높이는 것이 매우 중요한 포인트이다. MySQL InnoDB 엔진의 경우 상황에 따른 여러가지 락(Lock)을 통해서 동시성을 제어하며 이를 통해서 사용자가 설정한 대로 원하는 수준의 트랜잭션 격리 수준(Transaction Isolation level)을 유지해준다. MySQL InnoDB 엔진은 사용자가 필요에 따라 명시적으로 locking read를 할 수 있도록 두가지 쿼리를 제공한다. 한 트랜잭션에서 읽어간 데이터를 다른 트랜잭션에서 배타적으로 수정하기 위해 락을 획득하려 할때 (읽어가는 것은 허용) 기다리게 만들고 싶다면 SELECT ... LOCK IN SHARE MODE 사용 한 트랜잭션에서 읽어간 데이터를 다른 트랜잭션에서 배타적으로 읽거나, 수정하기 위해 락을 획득하려할 때 기다리게 만들고 싶다면 SELECT ... FOR UPDATE 사용 예) 특정 필드의 값을 읽어온 후 (SELECT), 해당 값을 1 증가시켜서 저장 (UPDATE)하고 싶을때 이 경우 SELECT .. FOR UPDATE를 사용하지 않으면, 여러 트랜잭션이 동시에 접근할 경우 정상 동작 하지 않을 수 있다. 즉, 트랜잭션 2개가 실행되었는데 값이 2만큼 증가되지 않고 1만 증가되어있을 가능성 존재. 먼저 이러한 locking 구문들이 실제 어떤 lock들을 통해서 내부적으로 구현되는지 좀더 자세히 알아보도록 하자. ...

웹사이트 상에서 미리 제작된 영상 템플릿을 제공하고 이에 맞게 사용자가 이미지나 텍스트만 바꿀 수 있도록 툴을 제공한 후 사용자가 만들어낸 데이터 모델을 기반으로 영상을 만들어내는 video generator 기능을 구현하려면 어떻게 해야할까? 일단 웹사이트 프론트엔드에서 이미지를 업로드하고, 텍스트를 입력하고 배치하는 일들은 일반적인 웹사이트 제작에 사용되는 Vue.js나 React 등을 사용해서 빠르게 만들 수 있다. 이렇게 사용자에게 영상을 구성할 수 있는 툴을 제공하고, 해당 툴을 이용해서 생성된 모델을 백엔드 서버에 저장하는 일까지는 일반적인 웹 개발 방식을 이용하면 어렵지 않게 만들어 낼 수 있다. ...

스팀잇 사이트의 경우 영문 포스트는 그나마 이쁘게 설정되어있는데, 한글의 경우 폰트 설정도 엉망이고 줄간격, 자간 등이 전혀 한글 읽기에 최적화가 되어있지 않습니다. 특히 윈도우 환경에서 볼때 포스트 본문에 대해 OS 기본 폰트가 로딩되지 않도록 개발이 되어있어서 정말 안타까웠습니다. 그래서 결국 답답한 마음에 크롬 브라우저 사용자들을 위해서 크롬 확장 프로그램을 개발해 보았습니다. 스팀잇 폰트 체인저 소개 “스팀잇 폰트 체인저” 크롬 확장 프로그램을 설치하면 무엇이 바뀌는지는 다음 스크린샷을 참고해주시면 한눈에 이해하실 수 있습니다. ...

도메인 레코드를 추가한다거나, 네임서버 주소를 바꾼다거나 하는 등 도메인 관련 설정을 변경하고나면 제대로 설정이 전파되었는지 확인하기 위해 지루하게 기다리는 시간이 이어진다. 도메인 설정이 모든 DNS들에게 전파되는데는 최대 1~2일까지 걸린다고 하지만 요즘은 refresh time이 빨라서 그런지 느낌상 대다수가 거의 1시간이내로 변경되긴 하는 듯 하고, 특히나 국내에서만 보면 10분내로도 변경된 설정이 바로바로 반영이되는듯 하다. Tip: 해외에서 웹사이트가 잘 접속되는지 확인하려면 https://pulse.turbobytes.com 사이트를 추천한다. DNS 변경내역 확인을 위한 더 정확한 방법 A레코드 같은것들이야 변경되면 웹브라우저를 열어 해당 도메인에 요청을 계속 보내거나 ping을 해서 IP주소가 잘 변경되었는지 확인하면 되지만 그외 레코드들은 확인할 방법이 마땅치 않아서 이것저것 찾아보던 중 다음 명령어를 발견했다. ...

Emoji같은 글자들은 utf8 인코딩 되는경우 글자당 최대 4bytes까지 필요하다. 하지만 기존 MySQL의 utf8 필드의 경우 글자당 최대 3bytes 까지만 지원하는 한계점이 있었다. 때문에 MySql database에서 utf8mb4 설정을 해두지 않으면 해당 글자들이 포함된 텍스트가 입력되었을때 제대로 저장을 하지못하고 문자가 깨져버리는 사태가 발생하게 된다. 최근들어 이러한 글자들의 사용이 보편화 되고있기 때문에 이러한 문제를 막기 위해서 서버 환경변수와 데이터베이스 테이블 스킴을 utf8mb4를 지원하도록 어서 변경을 해두는 것이 좋다. 😁😂😃😄😅😆💩 주의: 항상 그렇듯이 모든 변경 전에는 DB를 백업해두자! ...

plain http 통신을 사용하는 경우 로그인 등의 인증 요청을 할때 plain text가 바로 노출이 되기때문에 항상 보안위험이 존재한다. 이를 막기 위해서 SSL이 적용된 https 통신을 하게되는데, 이를 위해서는 SSL 인증서가 필요하다. 일반적으로 여러 인증기관에서 웹서버용 SSL 인증서를 판매하고있는데 비용이 꽤 들다보니 기업들은 많이들 구입하여 사용했지만, 소규모 웹사이트나 개인 웹사이트들의 경우 비용 문제로 인증서를 구입하지 않고 대다수가 http를 사용하고 있는 상황이다. 하지만 Let’s Encrypt 서비스를 이용하면 비싼 돈을주고 SSL용 인증서를 구입하지 않고도 무료로 SSL인증서를 발급 받을 수 있으며, 심지어 자동화된 툴을 이용하여 더욱 편리하게 인증서 발급 및 서버 설정까지 가능하다. ...

IE8의 경우 css 파일하나당 셀렉터 4095개 갯수제한이 들어가있다. css 파일 내에 셀렉터의 총 갯수가 4095개가 넘는 순간 해당 css파일은 IE8에의해 로딩되지 않고, 렌더링에 사용되지 못하기때문에 페이지 레이아웃이 전부 깨지게 된다. 일반적으로 파일하나에 4095개가 넘는 css를 정의하는 경우는 많지 않지만, grunt나 gulp등의 빌드 엔진의 플러그인들을 통해 여러개의 css파일들을 하나로 병합(merge)해서 사용하는 경우 문제가 될 소지가 다분하다. 많이 쓰이는 bootstrap의 css 셀렉터 갯수만 해도 약 3000개가 넘어가기때문에, bootstrap과 다른 몇몇 css만 병합해도 바로 문제가 발생하니 주의해서 사용해야 한다. ...

웹사이트를 운영하는 사람이라면 SEO(Search Engine Optimization)에 대해서 한번쯤은 들어보았을 것이다. 하지만 말로만 들어보았지 어떻게 해야 SEO가 되는지 막연하게만 생각이 떠오르고 구체적으로 어떤 부분에 어떤 액션을 취해야하는지 감이 잘 잡히지 않는 경우가 많다. 필자의 경우도 그랬기 때문에 웹사이트 검색엔진 최적화를 실제로 진행하면서 맞닥뜨렸던 궁금증이나 팁을 위주로 Best Practices를 정리해보았다. 더 많은 공부를 원하시는 분들은 구글 웹마스터 센트럴 블로그에 있는 글을 모두 읽어보길 권하고, 구글의 검색 가이드라인 문서들도 꼭 읽어봐야 할것이며, 이 포스팅에 언급된 다양한 주제들에 대해 추가적으로 더 검색을 해서 공부하시면 큰 도움이 될 것이다. ...

구글 태그매니저란? GTM(Google Tag Manager)은 GA(Google Analytics)를 비롯한 여러 모니터링/마케팅 플랫폼들과 연동할 수 있는 중간자 적인 역할을 하는 플랫폼이다. 바로가기: https://developers.google.com/tag-manager/ 앱/웹을 재배포 하지 않고도 태그매니저내부의 설정값 변경 만으로 이미 배포되어있는 앱/웹의 설정 또는 조건식 들을 동적으로 변경할 수 있도록 기능을 지원하기때문에 사용자 액션에 따라서 좀더 유연한 마케팅/로깅을 할 수 있다.(ex: 200달러 이상 구매 고객일 경우에만 리마케팅을 수행 등) 용어 정리 GTM의 가장 작은 구성단위부터 점점 큰 순서대로 설명하면 다음과 같다. ...