전체 글61 [211004] glowing effect, guidelines glowing effect box-shadow와 text-shadow로 구현한 것 같은데, 현실의 어떤 물리적인 사물을 이렇게 웹에서 구현할 때 너무 짜릿함... awesome guidelines 가이드라인 같은 단어만 보면 게걸스럽게 북마크에 담는 사람(주니어) 작은 글씨에 안티앨리어스 효과 transform: rotate(0.03deg) 놀랍도다 2021. 10. 4. [211004] 차별방지법, 능력주의, 운 🍠 "어떤 사람의 삶을 감히 부정할 수 있다고 생각하는 사람들에게" 왜냐하면 어떤 사람의 삶과 선택 이야기는 누군가의 승인이 필요 없기 때문입니다. 용기와 신념, 유머를 우리에게 건네준 은용과 함께 하겠습니다. 마지막으로, 어떤 사람의 존재는 누군가의 승인이 필요하지 않습니다. 어떤 사람의 삶을 감히 부정할 수 있다고 생각하는 사람들과 나중에라는 합리화로 혐오와 차별을 방관하는 정권이 부끄러워 하셨으면 좋겠습니다. 구자혜 : 죽음 자체를 부정적으로 보는 건 아니고, 누구나 죽는다. 다만 '왜 죽었어야 했나'에 대해 생각한다. 죽을 수밖에 없었던 사람들에 대해. 지금 만들고 있는 연극이 동시대에서 작동하지만, 내가 만드는 연극이 영원히 남기보다는 가장 빨리 휘발되기를 기대한다. 즉, 동시대가 아니면 유효하.. 2021. 10. 4. [211003] 기사, 블로그 글들 🦴 가습기 살균제로 인한 폐손상 환자를 치료하고 그 원인을 밝힌 홍수종 교수 인터뷰 https://www.khan.co.kr/article/201307262341045 첫 해의 무기력함을 잊지 않고 그 이듬 해에 끝까지 원인을 추적하고 도움을 요청하고 협력함으로써 가치 있는 결과를 만들어낸 것이 인상적이었다. 그리고 그 결과에 대한 공을 환자에게 돌리는 것까지. 특별한 사명감 없이 총대를 매는 일. “앞서 세상을 떠난 환자들의 희생이 없었으면 지금도 답이 안 나왔을 수 있어요. 젊은 시절엔 제가 환자를 고친다고 생각하고 목이 빳빳했죠. 하지만 지금은 달라요. 환자가 선생님이에요.” 🦴 기업들이 신입개발자를 뽑지 않는 이유 https://subokim.wordpress.com/2021/09/15/why_d.. 2021. 10. 3. [210520] Starline Google Starline 화면 너머 상대방을 마치 실제로 내 앞에 있는 것처럼 보여주는 기술이라고 한다. 일반적인 화상 통화와 얼마나 다를까 싶었는데 블로그에 올라온 이미지와 영상만 보면-3D 캐릭터 같은 느낌이 전혀 없는 것은 아니지만-얼핏 둘 중 어느 쪽이 화면 속에 앉아있는지 헷갈릴 정도. computer vision, machine learning, spatial audio, real-time compression에 관한 연구를 적용하고, 추가적인 안경이나 헤드셋 없이 감각의 깊이와 볼륨을 만들어내는 breakthrough light field display system을 개발했다고 한다. 그 글에서 인상적이었던 대목은 We asked ourselves: could we use technolo.. 2021. 5. 20. SPA 유저 네비게이션에 서버 요청이 필요하지 않다. 초기 렌더링에 필요한 파일들을 제공할 서버가 필요하긴 하다. 웹 서버는 정적 컨텐츠를 제공하고, 어플리케이션 서버는 새로운 컨텐츠를 생성한다. 정적 파일 요청된 위치에 리소스가 있을 경우에 성공적으로 응답. static host(깃헙 페이지, 아마존 S3)에 해당. 동적 파일 이를테면 Express 같은 프레임워크는 요청에 일치하는 응답을 동적으로 만들어낸다. 어플리케이션 서버는 웹 서버의 프록시처럼 작동하는데, 웹 서버는 어플리케이션에 비정적 요청을 넘겨줄 뿐이다. "Many static file hosts allow you to set a "fallback" page to serve when there is a request for a page that .. 2021. 5. 19. Node.js 공식 홈페이지 방문 면접 준비하는 김에 계속 미뤄왔던 Node.js를 알아보기로 했다. 몇달 전 1장을 읽으면서 머리를 쥐어뜯은 이후로 오랜만. 공식 홈페이지부터 순회했다. Node.js "비동기 이벤트 주도(asynchronous event-driven) JavaScript 런타임으로써 Node.js 는 확장성 있는 네트워크 애플리케이션(scalable network application)을 만들 수 있도록 설계"되었다. "이는 오늘날 OS 스레드가 일반적으로 사용하는 동시성 모델과는 대조적"이다. "스레드 기반의 네트워크(Thread-based networking)는 상대적으로 비효율적이고 사용하기가 몹시 어렵"다고 한다. - Node.js의 가장 큰 특징은 동시성 모델을 따르지 않는, 비동기 이벤트 주도 JS 런타임이.. 2021. 5. 11. 브라우저 렌더링, 렌더러 프로세스, requestAnimationFrame 웹의 기능과 역할이 확대되고 universal platform이 되리라는 전망도 커지고 있다. 브라우저의 렌더링 파이프라인을 제대로 이해하는 것에서 시작. 페이지 렌더링 웹 페이지 로드는 주소창에 URL을 입력하는 것부터 시작. (사실 HTML 요청이 있기 전에도 많은 일들이 일어나긴 함) HTML 파일이 로드 되었을 때 발생하는 일 (픽셀-화면 파이프라인): 1. HTML 파싱 HTML 문서가 파싱되고, DOM 트리 생성 HTML 데이터 받기 시작하면서 메인 스레드가 텍스트 문자열(HTML)을 파싱하고 이를 DOM으로 변환 (페이지에 대한 브라우저의 내부 표현이자 웹 개발자가 JS 통해 상호 작용할 수 있는 데이터 구조 및 API) 사전 로드 스캐너는 외부 리소스(이미지나 CSS, JS 등)가 요청되면.. 2021. 5. 8. Lazy-loading 이미지가 주된 컨텐츠인 프로젝트(갈피)를 진행하면서도 이미지 최적화와 퍼포먼스는 크게 신경쓰지 못한 것 같아서 이와 관련된 글들을 찾아보게 되었다. 우선, 리액트에서 lazy-loading이 일반적으로 어떻게 구현되는지 알아보았다. 첫번째 :: Deepak Vishwakarma, React lazy image loading and TypeScript — No more slow and broken images (201016) // components/Image/index.tsx import React from "react"; interface ImageProps extends React.ImgHTMLAttributes {} export default ({ ...props }: ImageProps) => {.. 2021. 5. 8. dom-to-image 작동 원리 갈피 프로젝트에서 캔버스로 만든 엘리먼트를 이미지화하는 데 dom-to-image 패키지를 썼다. 그 동안 어떤 원리로 이미지 화하는건지 알아봐야겠다고 생각만 하다가 드디어 정리해본다. 우선 깃허브 레포에는 다음과 같이 설명되어있다. 오리지널 DOM 노드를 재귀적으로 클론 노드와 서브노드의 스타일을 계산해서 상응하는 클론에 카피 + pseudo element 재생성(얘네는 클론되지 않으니까) 웹 폰트 임베드 모든 @font-face 선언 찾기 file URLs 파싱해서 다운로드 base64 인코드와 인라인 컨텐츠를 data: 로 가져오기 모든 CSS 규칙을 이어붙여서 하나의 엘리먼트에 얹기, 클론에 붙이기 이미지 임베드 에 이미지 url 임베드 background css 프로퍼티에 쓰인 이미지를 인라인으.. 2021. 5. 5. 웹 페이지 로드 이후 HTML 엘리먼트의 위치가 바뀔 때 개츠비로 포트폴리오를 만들다가 메인이 좀 심심해보여서 이미지를 추가했다. 그런데 웹 페이지가 로딩 되는 동안 (1) 우선 이미지가 보이고, 웹 페이지가 전부 로드된 이후에야 (2) 그 이미지가 제 자리를 찾아가는 현상이 발생했다. div_1 position: relative; div_2 img position: absoulte; 알고보니 img가 두 단계로 중첩돼서 그런 거였다. 내 코드를 보면 중첩된 대로 div_1 → div_2 → img 가 차례대로 렌더링이 되고 나서 img의 position: absolute가 적용된다. (div_2는 div의 default position인 static이 적용되기 때문. 이 경우 엘리먼트는 순서대로 렌더링 된다.) 그러면 img는 div_2를 뛰어넘고 posit.. 2021. 5. 2. [galpi-note] DB 모델링 어렵다 어려워 아주 잠깐 MongoDB modelling 검색해보고 우선 하던대로 오랜만에 짜봤는데 거의 무슨 지푸라기 엮은 모양새. +) Embedded와 Reference의 차이에 대해서 알게 되었다. 사실 예전에 프로젝트 할 때 고민하던 부분이긴 했는데 이런 명칭이 있는지는 몰랐다. 우선 전부 Reference로 콜렉션 간에 연결을 만들 예정이지만 계속해서 어떤 것이 더 효율적일지 고민해봐야 할 것 같다. 2021. 4. 27. 킨더구리 v2 프로젝트 후기 인생 첫 프로젝트였던 킨더구리를 약 한 달에 거쳐 개선했다. 사실상 새로운 프로젝트에 가깝기 때문에 개선이라고 하기에는 어폐가 있다. 프로젝트를 어느 정도 마무리했으므로 작업 과정과 이전 버전과의 차이점을 정리해보려고 한다. 킨더구리 작년 5월 즈음에 경기도 구리 소재의 유치원과 어린이집을 지도로 볼 수 있는 간단한 웹 어플리케이션을 제작하였다. 유저는 이 웹 어플리케이션을 통해 유치원과 어린이집을 각각의 민간, 공립 등의 유형에 따라 검색하고 리스트와 지도로 확인할 수 있다. 리액트로 클라이언트 단을 구성했다. 카카오맵 API를 사용하여 지도 조작을 하였고 경기도에서 제공하는 Open API로 데이터를 가져왔다. 서버 단은 서버라고 하기도 민망한데, 정적 파일을 내보내는 기능이 전부였다. 작년 말에 반.. 2021. 4. 13. 이전 1 2 3 4 5 6 다음
