본문 바로가기

📝 프로젝트3

grid area를 사용하여 menu, header, content 영역 분리하기 grid area는 다음 첨부 사진처럼 menu, header, content, footer 등을 나누고 싶은 경우 사용할 수 있습니다. 위처럼 영역을 나누는 것은 css를 사용하여 간단하게 구현이 가능합니다. 다음은 css 코드입니다. .container { display: grid; grid-template-columns: 160px 1fr; /* sidemenu 너비와 나머지 공간 */ grid-template-rows: 80px 1fr; /* header 높이와 나머지 공간 */ grid-template-areas: "header header" "sidemenu content"; height: 100vh; } .header { grid-area: header; } .sidemenu { grid-a.. 2024. 1. 7.
github actions와 React를 사용하여 pages에 배포 github actions, react, pages를 사용하여 cicd 파이프라인을 구축하기 위해서는 아래 항목을 수행해야 합니다. .github.io 리포지토리 생성 react, typescript 프로젝트 생성 github actions 작성 node 설치는 생략하고 진행하도록 하겠습니다. (node download) .github.io 리포지토리 생성 빨간 박스로 표시된 New 버튼을 눌러줍니다. 위 캡처에 표시된 순서대로 입력을 해줍니다. 이때 Repository name에 본인의 username이 들어갈 수 있도록 유의합니다. 로컬 PC에 github project를 복사하기 위해 Https URL을 복사해 줍니다. git clone 위 명령어를 로컬 디렉터리에 입력하면 생성한 github 프로.. 2024. 1. 1.
[Release it] localhost 벗어나기 직접 개발한 프로젝트를 배포하여 public 세상에서 사용 가능하도록 합니다. 기술 스택은 다음과 같습니다. 백엔드: spring boot, kotlin, jpa, querydsl, 데이터베이스: mysql, mariadb, postgresql 중 택 1 프론트엔드: react, typescript 프로젝트의 목적은 처음 개발을 시작하는 분들이 localhost 세상에 빠져있지 않고, 실제로 서비스를 배포해보면서 주변 지인들에게 서비스를 자랑하고, 사용해볼 수 있게 하고, 피드백을 받을 수 있도록 하는 것입니다. 순서는 아래와 같이 구성될 예정입니다. (기간이 길고, 순서는 따라갈 것이지만 그때 그때 상황에 따라 하고 싶은 것을 먼저할 수 있습니다) github actions와 React를 사용하여 pa.. 2023. 12. 12.

티스토리툴바