Grid에서 fr 단위와 repeat()의 사용
What is CSS-grid? CSS 그리드는 2차원의 레이아웃 시스템으로, column과 row 기반이다. 각 행과 열 사이에 공백을 줄 수 있는데, 이를 gutter 라고 합니다. ex) .container{ display: grid; grid-template-column: 100px 100px 100px; } 이...
What is CSS-grid? CSS 그리드는 2차원의 레이아웃 시스템으로, column과 row 기반이다. 각 행과 열 사이에 공백을 줄 수 있는데, 이를 gutter 라고 합니다. ex) .container{ display: grid; grid-template-column: 100px 100px 100px; } 이...
배포 workflow를 YAML로 관리하는 것을 보고 YAML이 무엇인지 알아보기로 했다. 요약 What is YAML. YAML은 JSON의 불편한 점을 보완하기 위해 나온 JSON의 superset이다. Superset이기 때문에 JSON과 기본적으로 같다. 좀 더 편리해졌다. 주석을 달...
찾아보거나 알게된 배경 코드를 보던 중, 어떤 box의 borderRadius가 {100%}으로 설정되어있었습니다. borderRadius에 값이 들어가면 어떻게 계산되어 나오는 것인지 궁금했습니다. 특히, x와 y가 다를때 어떻게 될지 궁금했습니다. 기본적으로, borderRadius의 시작점은 (꼭짓점)에서부터 (설정한 거리) 만큼 떨어...
요약 useSyncExternalStore은 React 18에 새롭게 나온 훅입니다. 해당 훅은 concurrent rendering에서 사용자 인터렉션에 대한 부분을 먼저 렌더링하면서 발생할 수 있는 렌더 트리 안에서의 차이(tearing)를 해결할 수 있습니다. useState와 같이 리액트에서 제공하는 상태관리 도구들은 이런 concur...
2022년 4월에 쓰는 2021년 2학기 회고록. 요즘 컴공쪽 프론트엔드 코딩만 하다보니 전공지식이 풍화해가는걸 느낀다. 이렇게라도 복기해봐야지. 논리설계 및 실습 ~기억이 안나~ 기본적인 low-level에서의 논리를 다룬다. AND, OR Gate에서부터 K-map, Encoder와 Decoder 등 중간고사에서는 비메모리 분야...
취미로 만들고 있는 고인물능력시험 업로드 용으로 사용하는 티스토리지만, 마땅히 내 생각을 정리할 곳도 없고 어차피 많이 찾아오지는 않을 것 같아 여기에 1학기 review를 적어보고자 한다. 이런거라도 안하면 양심에 찔려서 ㅎㅎ 기초회로이론 및 실습 하…. 사실상 첫 전공과도 같았는데 너무 매운맛이었다. 예비/실험 레포트 각각 8...