Glassmorphism
개요 유리의 디자인적인 특성을 이용하는 스타일. 오브젝트에 반투명, 또는 투명한 느낌을 주어 유리에 비치는 듯하게 하는 디자인 스타일을 말한다. Window Vista와 macOS에서 Acrylic 이라는 이름으로 사용되어 많은 인기를 끌게 되었다. 당장 mac의 아래 부분도 글래스모피즘이 적용되었다. Acrylic material - Window...
개요 유리의 디자인적인 특성을 이용하는 스타일. 오브젝트에 반투명, 또는 투명한 느낌을 주어 유리에 비치는 듯하게 하는 디자인 스타일을 말한다. Window Vista와 macOS에서 Acrylic 이라는 이름으로 사용되어 많은 인기를 끌게 되었다. 당장 mac의 아래 부분도 글래스모피즘이 적용되었다. Acrylic material - Window...
찾아보거나 알게된 배경 다음 TIL에서 알아보겠다고 했기 때문에 내 자신과의 약속을 지키기 위해서. 기존에는 border-radius가 어떤 값을 넣어야 어떻게 표시되는지에 대해서만 알아보았고, 각 숫자가 어떻게 계산되어 화면에 그려지는지 알아보도록 하자 요약 SkVector fRadii[4] = {0, 0}, {0, 0}, {0,0}, ...
배경 커밋을 했는데 깃헙에서 표시된 커밋 해시의 앞의 첫 8자리가 모두 숫자였다! 흔치 않은 일이었던 것 같은데 실제 확률은 얼마나 될까 요약 git commit hash는 SHA1 을 사용한다. 변경사항에 따라서, unique한 string을 뱉는 것이다. 문자열은 16진수로, 0~9와 a~f까지로 표현되어있다. 구하고자 하는 ...
배경 내가 짠 코드들을 둘러보면서 회고를 하던 도중, ‘이때 이런 것 했었지, 개선해보면 좋겠다’ 라고 생각되는 코드가 있었던 한편, ‘내가 이런 코드를 짰었나’ 라는 코드도 있었다. 진행했던 프로젝트마다 기억나는 정도가 달랐는데, 단순히 시간의 문제는 아닌 것 같았다. 작성한 코드의 오너십의 차이가 나는 것이었다. 과연 오너십은 어디에서 ...
TCP(Transmission Control Protocol)는 네트워크 표준 모델링 중, 전송 계층에서 사용하는 프로토콜이다. ISO에서 만든 OSI model에서 표준이 되는 프로토콜입니다. TCP protocol은 연결 지향 방식 으로 패킷 을 지향하며 3-way handshaking 과정으로 목적지/수신지 간 정확한 전송을 보장한다. → 무...
Redis는 메모리 기반 key-value store 입니다. NoSQL: key-value 먼저, SQL과 NoSQL에 대해서 알아보았습니다. 위와 같이 row와 column으로 이루어진 데이터베이스를 관계형 데이터베이스(Relational Database)라고 합니다. 이 데이터베이스를 관리하기 위한 언어가 SQL (structured qu...
port는 항구라는 뜻입니다. 대한민국이라는 나라에 여러가지 항구가 있어 여러방향에서 들어올 수 있듯이, port는 한 IP 내에서 프로세스 구분을 위해 사용하는 번호입니다. 예를 들어, 동일한 IP 주소인 1.1.1.1 이라도, 다른 port를 이용하면 각기 다른 프로세스를 돌릴 수 있고 접근할 수 있습니다. React를 이용한 프론트엔드 서버는 :...
찾아보거나 알게된 배경 개발 중, yarn start 로 로컬 서버를 돌리려고 했다. 그런데, 이미 port 3000이 있다면서 3001에 돌릴 것인지 물어보는 메시지가 나왔다. 어떻게하면 3000 포트의 프로세스를 죽일 수 있을까? 요약 $ lsof -i tcp:3000 $ kill -9 PID 상세 설명 lsof ...
찾아보거나 알게된 배경 Next.js를 사용하는데, URL params에 들어있는 값을 가져와야하는 경우가 생겼다. Next.js는 디렉토리 구조가 곧 라우터인데 modusign/document/{id} 형식의 경우에는 파일을 일일이 만들어 줄 수 없는 노릇이다. 파일구조는 정적일 수 밖에 없는데 어떻게 동적으로 라우팅을 할 수 있을까 요약 ...
Introduction 사이드바 UI를 작업하는데, ContextMenu는 사이드바 가로를 튀어나와서 표시되도록 설계하였다. 이를 위해선 overflow: visible이 설정할 필요가 있다. 설정했더니, 컴포넌트 가로에 맞춰서 잘리고 스크롤이 생기는, overflow:auto 가 설정되었다. 난 분명 명시적으로 overflowX: visib...