Developer Turtle-hwan

display: grid; 격자 모양으로 보여준다. grid parent 속성과 grid children 속성이 따로 있다. grid track : grid의 행 또는 열 grid cell : grid 한 칸 Grid parent properties display : inline-grid는 grid에 inline 속성을 부여해 준다. .container { display: grid | inline-grid; } grid-template-rows, grid-template-columns : grid track의 크기를 지정해준다. 숫자 값만 넣어도 되며, 다양한 이름을 지원한다. 1fr 1fr 1fr 은 fraction 약자로, 비율을 의미한다. 1:1:1 비율로 나눠준다. .container { grid..

display : flex; 축이 하나인 것. 한 쪽 방향으로 배열할 수 있다. flex 속성을 해당 element (flex container)에 주면, children elements (flex items)의 위치를 결정한다 flex container에 주어야 하는 속성과, flex items에 주어야 하는 속성이 따로 있다. flex container (parent)의 속성 flex-direction : 축의 방향을 결정한다. .container { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap .container { flex-wrap: nowrap | wrap | wrap-reverse; } https://code..

git submodule 사용 계기이번 ithome 프로젝트를 Next.js + TS 로 마이그레이션 하면서 git submodule 기능을 사용했다.기존에는 하나의 repository에 프론트, 백이 폴더로 구분되어 같이 들어 있었다.프론트만 환경을 Next.js로 바꾸면서 프론트 repo를 따로 만들었다.localhost에서 테스트할 때 편의성을 위해 백 repo를 포함시킬 필요가 있어서 submodule로 포함시켰다.## 기존 구조ithome---/frontend (React)---/backend (Nest.js)---docker-compose.yaml## 새로운 구조ithome-front (Next.js 메인)---/backend @ 8d972c3 (submodule)---/public---/s..

PR11 기존 React + JS로 개발했던 ithome 프로젝트의 Next.js + TypeScript로 마이그레이션 Next.js와 타입스크립트로 마이그레이션을 결정한 이유 => [링크 추가 예정] 그 중 이번주 까지 끝내야 할 내가 맡았던 페이지들을 Next.js + TS 환경으로 마이그레이션 하면서 겪은 것들이다. 0. 먼저 Map.js / SearchSubletInfo.js 파일을 .tsx 파일로 바꾸기. - eslint와 vscode 오류 잡아가는 방식으로 진행. 대부분 해당하는 ts type 추가 => marker 나 naver.map 관련해서 type을 도무지 알 수 없는 것이 있어 임시방편으로 any를 썼는데 나중에 더 자세히 알아보고 수정해야겠다. - 기존 React useEffect ..

Web 기본 지식들을 키워드 기반으로 정리해보았다. HTML, CSS, JS HTML : 페이지의 틀 JS : HTML element 간의 동적인 동작 CSS : 색깔, element 배치 등 디자인 요소 Web API HTML5는 2004년에 등장했고 2014년에 W3C에서 표준안을 확정했으며, 다양한 Web APIs를 제공한다. HTML Geolocation API 사용자(브라우저)의 현재 위치를 받아올 수 있다. 지도 현 위치 표시 기능에 사용한다. 단, 브라우저 차원에서 보안 문젤 https에서만 사용 가능하도록 제한이 걸린 상태이다. HTML Drag and Drop API 웹 페이지에서 JS를 이용해서 element의 드래그, 드롭, 이동, 삭제를 간편히 구현 가능하게 지원한다. HTML We..