As I've always been

media쿼리를 이용하면 반응형 페이지를 만들수 있다. 반응형 페이지란 페이지 하나로 화면사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 반응형 사이즈들 디바이스별 사이즈 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 사용법 HTML head 부분에 아래의 코드를 넣어줍니다. 아래의 코드는 meta태그로 뷰포트를 사용함으로 장치의 크기에 따라서 크기를 바꿔주겠다는 명령어입니다. meta태그가 선언되어야지 반응형으로 만들수 있습니다. 방법 1. 모바일에서 PC로 커진다. /* 모바일 -> PC / 점점 커진다.. */ @media screen and ..

:hover란 :hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다. javascript 혹은 jquery의 조건으로도 사용가능한 요소이다. 마우스로 반응 하기에 모바일이나 테블릿에서는 효과를 적용하기가 쉽지 않다. :hover 적용 방법 css파일에서 이벤트를 적용하고 싶은 위치에 :hover를 선언해주고 나머지 코드를 작성하면 된다. 코드 [css] /*초기화*/ *{margin: 0 auto; padding: 0;} /*기본셋팅*/ h1, p, button, div{ border : 1px solid black; width : 300px; height : 70px; text-align : center; line-height : 70px; font-size : 15px; ..

데이터를 정렬된 상태로 저장하기 위해서 사용하는 파이썬의 heapq(힙큐) 내장 모듈에 대해서 알아보겠습니다. 힙 자료구조 heapq 모듈은 이진 트리(binary tree) 기반의 최소 힙(min heap) 자료구조를 제공합니다. 자바에 익숙하신 분이라면 PriorityQueue 클래스를 생각하시면 이해가 쉬우실 것 같습니다. min heap을 사용하면 원소들이 항상 정렬된 상태로 추가되고 삭제되며, min heap에서 가장 작은값은 언제나 인덱스 0, 즉, 이진 트리의 루트에 위치합니다. 내부적으로 min heap 내의 모든 원소(k)는 항상 자식 원소들(2k+1, 2k+2) 보다 크기가 작거나 같도록 원소가 추가되고 삭제됩니다. heap[k]

Base64란? Base64는 바이너리 데이터를 문자 코드에 영향을 받지 않는 ASCII 코드로만 이루어진 일련의 문자열로 변환하는 인코딩 기법이다. 원래 base64를 글자 그대로 번역하여 보면 64진법이란 뜻이다. 특별히 64진법이 컴퓨터에서 흥미로운 것은, 64가 2의 제곱수(64 = 26)이며, 2의 제곱수들에 기반한 진법들 중에서 화면에 표시되는 ASCII 문자들을 써서 표현할 수 있는 가장 큰 진법이기 때문이다. 왜냐하면, 다음 제곱수인 128진법에는 128개의 기호가 필요한데 화면에 표시되는 ASCII 문자들은 128개가 되지 않는다. 이 인코딩 방식은 전자 메일을 통한 이진 데이터 전송 등에 주로 쓰이고 있다. Base 64에는 어떤 문자와 기호를 쓰느냐에 따라 여러 변종이 있지만, 잘 알..

CORS 란? CORS는 Cross-Origin Resource Sharing의 약자이다. 브라우저에서 다른 출처의 리소스를 공유하는 방법이다. 아래의 CORS policy 오류 메시지는 CORS 정책을 위반할 때 발생한다. URL 구조 출처를 알기 위해선 URL 구조를 알아야한다. 프로토콜의 HTTP는 80번, HTTPS는 443번 포트를 사용하는데, 80번과 443번 포트는 생략이 가능하다. 출처(Origin) 란? 출처(Origin)란 URL 구조에서 살펴본 Protocol, Host, Port를 합친 것을 말한다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있다. 같은 출처 VS 다른 출처 같은 출처인지 다른 출처인지 확인하기 위해선 Protocol..

프론트엔드 코딩 중 audio 태그를 사용해서 알림음 혹은 BGM을 구현하고자 할 때, "DOMException: play() failed because the user didn't interact with the document first" 라는 에러 메세지를 마주하게 될 수 있다. 이는 바뀐 브라우저 정책에 의해서 브라우저들이 오디오나 비디오의 자동 재생 등을 막기 위해 사용자에게 오디오나 비디오의 기능을 허용할 것인지를 먼저 묻도록 바뀌었기 때문이다. 실제로 설문조사 결과 대다수의 웹 사용자들이 자동 재생되는 음악이 user experience에 안 좋은 영향을 끼친다고 답했다고 한다. 바뀐 정책에 대한 자세한 설명은 https://developer.chrome.com/blog/autoplay/#w..

torch.matmul vector 및 matrix 간의 다양한 곱을 수행한다. broadcast 기능을 제공하며 가장 일반적으로 사용되나, broadcast 기능이 도리어 debug point가 될 수 있다. broadcast 기능은 아래의 예제와 같이 T1(10, 3, 4) T2(4)을 곱할 때, 맨 앞의 dim이 3개 일 때는 첫 dim을 batch로 간주하고 T1 (3, 4) tensor의 10개의 batch와 각각 T2(4)랑 곱을 해주는 것이다. torch.matmul(input, other, *, out=None) → Tensor torch.mm torch.matmul과 차이점은 broadcast가 안 된다는 점이다. 즉 mm은 정확하게 matrix 곱의 사이즈가 맞아야 사용이 가능하다. 따..

Android HoneyComb 부터는 메인 스레드에서 네트워크 통신 처리를 하게 되면 "android.os.NetworkOnMainThreadException"이 발생하게 된다. 이를 해결하기 위해서 가장 먼저 고려해볼 해결 방법은 바로 AsyncTask를 사용하는 것이다. 이 AsyncTask는 새로운 스레드를 만들지 않아도 안드로이드 운영체제가 알아서 미리 준비된 스레드를 사용해서 비동기적으로 일을 처리한다. AsyncTask에 대한 자세한 설명은 아래의 링크를 참고하길 바란다. 대부분의 경우에는 이 AsyncTask를 사용해서 문제를 해결할 수 있을 것이다. 그러나, 일부 경우에는 시나리오 혹은 앱의 구조 상 이 네트워크 처리를 비동기적으로 수행하지 못하는 경우가 생길 수 있다. 이러한 경우에는 ..

Android OS 9 Pie 버전부터는 (tagetSdkVersion 28 이상일 경우) WebView에 일반적인 텍스트로 "http://" URL 접근이 막혔다. 따라서, 웹뷰에서 http를 통해서 웹페이지에 접근하려고 하면 "net::ERR_CLEARTEXT_NOT_PERMITTED" 에러가 발생하게 된다. 약 30분간의 검색 끝에 이 에러에 대한 3가지 해결책들을 찾을 수 있었다. 1) res/xml/network_security_config.xml 추가 먼저, res/xml/network_security_config.xml 을 만들고, 아래의 코드를 추가한다. ebookfrenzy.com amazon.com nytimes.com 위의 코드에서 ebookfrenzy.com 이나 amazon.com..

아두이노는 기본적으로 RTOS를 사용한다. 따라서, esp32에서 멀티 테스킹을 구현하기 위해서는 xtaskcreatepinnedtocore 메소드를 사용해서 원하는 메소드가 특정 코어에서 동시적으로 계속 동작하게 만들어야 한다. 아래의 코드는 xTaskCreatePinnedToCore 메소드를 사용해서 TASK_1 이라는 메소드를 0번 코어에서 동시적으로 작동하게 만든다. xTaskCreatePinnedToCore (TASK_1, "TASK_1", 4096, (void *)1, 1, NULL, 0); 이때, 3 번째 매개변수인 4096은 새로 만들어질 TASK_1에게 허용될 스택의 최대 크기라고 보면 된다. 그런데, 만약 TASK_1 프로세스가 동작 중에 스택이 너무 많이 쌓여서 허용된 메모리량을 초과..